enrollee-enrolments.component.html

<app-adjudication-container [content]="content"
                            [hasActions]="hasActions"
                            (action)="onAction()">

  <app-page-header>Enrolments</app-page-header>

</app-adjudication-container>

<ng-template #content
             let-enrollee="enrollee">

  <mat-form-field (selectionChange)="onChange($event)">
    <mat-label>Filter By Year</mat-label>
    <mat-select [value]="selectedYear"
                (selectionChange)="onChange($event)">
      <mat-option *ngFor="let year of years"
                  [value]="year">
        {{ year }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <ng-container *ngIf="isUnderAdjudication(enrollee)"
                [ngTemplateOutlet]="card"
                [ngTemplateOutletContext]="{
                  isCurrent: true,
                  submittedDate: enrollee?.appliedDate,
                  remoteAccess: enrollee?.remoteAccess,
                  enrolmentRoute: [AdjudicationRoutes.ENROLLEE_CURRENT_ENROLMENT]
                }">
  </ng-container>

  <ng-container *ngFor="let enrolmentCard of enrolmentCards; let first = first; let last = last">
    <ng-container [ngTemplateOutlet]="card"
                  [ngTemplateOutletContext]="{
                    isCurrent: enrolmentCard.isCurrent && !isUnderAdjudication(enrollee),
                    submittedDate: enrolmentCard.submissionCreatedDate,
                    acceptedDate: enrolmentCard.agreementAcceptedDate,
                    approvedDate: enrolmentCard.enrolmentApprovedDate,
                    agreementType: enrolmentCard.agreementType,
                    remoteAccess: enrolmentCard.requestedRemoteAccess,
                    enrolmentRoute: [enrolmentCard.submissionId, AdjudicationRoutes.ENROLLEE_ACCESS_TERM_ENROLMENT],
                    toaRoute: [enrolmentCard.agreementId, AdjudicationRoutes.ENROLLEE_ACCESS_TERM],
                    isLast: last
                  }">
    </ng-container>
  </ng-container>
</ng-template>

<ng-template #card
             let-isCurrent="isCurrent"
             let-submittedDate="submittedDate"
             let-acceptedDate="acceptedDate"
             let-approvedDate="approvedDate"
             let-agreementType="agreementType"
             let-remoteAccess="remoteAccess"
             let-enrolmentRoute="enrolmentRoute"
             let-toaRoute="toaRoute"
             let-isLast="isLast">
  <mat-card class="has-hover card"
            [class.mb-3]="isLast">
    <mat-card-content class="mb-0">
      <!--
        Custom card title used instead of mat-card-header with mat-card-title due
        to mat-card-title not allowing the use of flexbox
      -->
      <div class="card-title">
        <small>Enrolment submitted on {{ submittedDate | formatDate: 'MMMM Do YYYY' }}</small>
        <small *ngIf="isCurrent">CURRENT</small>
      </div>

      <p>
        <ng-container *ngIf="approvedDate; else current">
          {{ 'This PRIME enrolment was approved on ' + (approvedDate | formatDate: 'MMMM Do YYYY') }}
        </ng-container>
        <ng-template #current>
          This PRIME enrolment was not approved
        </ng-template>
      </p>
      <ng-container *ngIf="approvedDate">
        <p>
          TOA assigned - {{ agreementType }}
          {{ acceptedDate ? ', TOA was accepted on ' + (acceptedDate | formatDate: 'MMMM Do YYYY') :
          ', TOA was not accepted' }}
        </p>
      </ng-container>
      <div *ngIf="remoteAccess"
           class="card-title">
        User Requested Remote Access
      </div>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button
              color="primary"
              [routerLink]="enrolmentRoute">View Enrolment Detail</button>
      <button mat-button
              color="primary"
              *ngIf="acceptedDate"
              [routerLink]="toaRoute">View Terms of Access</button>
    </mat-card-actions>
  </mat-card>
</ng-template>