site-overview.component.html

<app-site-registration-container [content]="content"
                                 [hasActions]="hasActions"
                                 [belowActions]="belowActions"
                                 [refresh]="refresh">

  <app-page-header>Overview</app-page-header>

</app-site-registration-container>

<ng-template #content>
  <app-page-section *ngIf="organization?.hasClaim">
    <app-page-subheader>
      <ng-container appPageSubheaderTitle>
        <mat-icon class="mr-2">front_hand</mat-icon>
        Request for changing Signing Authority
      </ng-container>
    </app-page-subheader>

    <mat-card>
      <mat-card-content>
        <app-page-subheader>
          <ng-container appPageSubheaderTitle>Reason for Change</ng-container>
          <ng-container appPageSubheaderSummary>
            {{ orgClaim?.details }}
          </ng-container>
        </app-page-subheader>

        <app-overview-section title="New Signing Authority"
                              (route)="onRoute($event)">
          <app-bcsc-profile [user]="newSigningAuthority"></app-bcsc-profile>
          <app-enrollee-property title="Email">
            {{ newSigningAuthority?.email | default }}
          </app-enrollee-property>
          <app-enrollee-property title="Phone Number">
            {{ newSigningAuthority?.phone | phone | default }}
          </app-enrollee-property>
        </app-overview-section>

        <button mat-flat-button
                color="primary"
                (click)="onApproveOrgClaim()">Approve Change
        </button>
      </mat-card-content>
    </mat-card>
  </app-page-section>

  <app-page-section>
    <app-page-subheader>
      <ng-container appPageSubheaderTitle>
        <mat-icon class="mr-2">location_city</mat-icon>
        Organization Information
      </ng-container>
      <button mat-icon-button
              matTooltip="View Organization"
              (click)="onRoute([organization.id, AdjudicationRoutes.SITE_REGISTRATION, site.id, AdjudicationRoutes.ORGANIZATION_INFORMATION])">
        <mat-icon>navigate_next icon</mat-icon>
      </button>
    </app-page-subheader>

    <mat-card>
      <mat-card-content>
        <app-overview-container [organization]="organization"
                                [showEditRedirect]="false"
                                [admin]="true"></app-overview-container>
      </mat-card-content>
    </mat-card>
  </app-page-section>

  <app-page-section>
    <app-page-subheader>
      <ng-container appPageSubheaderTitle>
        <mat-icon class="mr-2">store</mat-icon>
        Site Information
      </ng-container>
      <button mat-icon-button
              matTooltip="View Site"
              (click)="onRoute([organization.id, AdjudicationRoutes.SITE_REGISTRATION, site.id, AdjudicationRoutes.SITE_INFORMATION])">
        <mat-icon>navigate_next icon</mat-icon>
      </button>
    </app-page-subheader>

    <mat-card>
      <mat-card-content>
        <app-overview-container [site]="site"
                                [showEditRedirect]="false"
                                [admin]="true"></app-overview-container>
      </mat-card-content>
    </mat-card>
  </app-page-section>

  <app-page-section *ngIf="site?.remoteUsers?.length">
    <app-page-subheader class="remote-users-header">
      <ng-container appPageSubheaderTitle>
        <mat-icon class="mr-2">account_circle</mat-icon>
        Remote Practitioners
      </ng-container>
      <button mat-icon-button
              matTooltip="Remote User Export (csv file)"
              (click)="onExportRemoteUsers('csv')">
        <mat-icon>description</mat-icon>
      </button>
      <button mat-icon-button
              matTooltip="View Remote Practitioners"
              (click)="onRoute([organization.id, AdjudicationRoutes.SITE_REGISTRATION, site.id, AdjudicationRoutes.SITE_REMOTE_USERS])">
        <mat-icon>navigate_next icon</mat-icon>
      </button>
    </app-page-subheader>

    <mat-card>
      <mat-card-content>
        <app-remote-user-review [remoteUsers]="site?.remoteUsers"></app-remote-user-review>
      </mat-card-content>
    </mat-card>
  </app-page-section>
</ng-template>

<ng-template #belowActions>
  <app-page-section class="mb-5">
    <app-page-subheader2>
      <ng-container appPageSubheader2Title>Enter Site ID</ng-container>
      <ng-container appPageSubheader2Summary>
        The Site ID will be sent to the Signing Authority, PharmaNet Administrator and the
        vendor associated to this submission.
      </ng-container>
    </app-page-subheader2>

    <form (ngSubmit)="saveSiteId()"
          [formGroup]="form"
          novalidate>

      <div class="row">
        <div class="col-sm-12 col-lg-9 col-xl-5 pb-2">

          <mat-form-field class="w-100">
            <input matInput
                   placeholder="Site ID"
                   formControlName="pec"
                   appToUppercase>
            <mat-error *ngIf="pec.hasError('required')">
              Required
            </mat-error>
            <mat-error *ngIf="pec.hasError('assignable')">
              Site ID already used by another organization
            </mat-error>
          </mat-form-field>

        </div>
        <div class="col-sm-12">

          <button mat-flat-button
                  color="primary">Save Site ID
          </button>

        </div>
      </div>

    </form>
  </app-page-section>

  <app-page-section class="mb-5">
    <app-page-subheader2>
      <ng-container appPageSubheader2Title>Edit Vendor</ng-container>
    </app-page-subheader2>

    <div class="row">
      <div class="col-sm-12 mb-4">
        {{ site?.siteVendors[0]?.vendorCode | configCode: 'vendors' | default }}
      </div>
      <div class="col-sm-12">

        <button mat-flat-button
                color="primary"
                (click)="onEditVendor()">Edit
        </button>
      </div>
    </div>

  </app-page-section>

  <app-page-section *ngIf="showSendNotification"
                    class="mb-5">
    <app-page-subheader2>
      <ng-container appPageSubheader2Title>PharmaCare Provider Enrolment</ng-container>
      <ng-container appPageSubheader2Summary>
        Send notification to provider enrolment team
      </ng-container>
    </app-page-subheader2>

    <button *ngIf="!isNotificationSent; else notificationSent"
            mat-flat-button
            color="primary"
            (click)="onSendNotification()">Send Notification
    </button>

    <ng-template #notificationSent>

      <app-alert type="success"
                 icon="check_circle">
        <ng-container #alertContent
                      class="alert-content">
          Notification sent
        </ng-container>
      </app-alert>

    </ng-template>
  </app-page-section>

  <app-page-section *ngIf="showLinkSection"
                    class="mb-5">
    <app-page-subheader2>
      <ng-container appPageSubheader2Title>Predecessor Site</ng-container>
    </app-page-subheader2>

    <div class="mb-4"
         *ngIf="!predecessorSite; else predecessorSitePanel">
      No predecessor site
    </div>

    <ng-template #predecessorSitePanel>
      <app-enrollee-property title="Organization">
        {{ predecessorSite.organization.name }}
      </app-enrollee-property>
      <app-enrollee-property title="Site">
        {{ predecessorSite.site.doingBusinessAs }} ({{ predecessorSite.site.pec}})
      </app-enrollee-property>
    </ng-template>

    <button mat-flat-button
            color="primary"
            (click)="onOpenSiteLink()">{{ predecessorSite ? 'Edit' : 'Add' }}
    </button>
    <button mat-flat-button
            color="warn"
            class="ml-2"
            *ngIf="predecessorSite"
            (click)="onDeleteSiteLink()">Remove
    </button>
  </app-page-section>
</ng-template>