metadata-table.component.html

<div id="audits" class="dars-table-wrapper mat-body">
  <caption>
      <div>
          <h2 class="mat-h2">{{title}}</h2>
          <button mat-flat-button color="primary" attr.aria-label="{{button}}" (click)="buttonClick.emit()">{{button}}</button>
      </div>
      <p>{{tagline}}</p>
  </caption>

    <!-- No audits message -->
    <div *ngIf="(metadata | async).length <= 0" class="no-audits">
      <ng-container [ngSwitch]="type">

        <ng-container *ngSwitchCase="'normal'">
          <p>Stay on top of your required credits and courses by running a degree audit that compares your academic record with your declared program requirements.</p>
        </ng-container>

        <ng-container *ngSwitchCase="'what-if'">
          <p>Still deciding on a program of study? A What-If audit can help you determine your academic progress towards any degree.</p>
        </ng-container>

      </ng-container>
    </div>

    <table mat-table *ngIf="(metadata | async).length > 0" [dataSource]="dataSource">

    <!-- School Column -->
    <ng-container matColumnDef="school">
      <th mat-header-cell *matHeaderCellDef scope="col">School/College</th>
      <td mat-cell *matCellDef="let audit">{{audit.darsInstitutionCodeDescription | schoolOrCollege }}</td>
    </ng-container>

    <!-- Program Column -->
    <ng-container matColumnDef="program">
      <th mat-header-cell *matHeaderCellDef scope="col">Academic Plan/Program</th>
      <td mat-cell *matCellDef="let audit" class="program-cell">{{(audit.darsDegreeProgramDescription || '')}}</td>
    </ng-container>

    <!-- Honors Column -->
    <ng-container matColumnDef="honors">
      <th mat-header-cell *matHeaderCellDef scope="col">Honors Status</th>
      <td mat-cell *matCellDef="let audit">{{audit.darsHonorsOptionDescription}}</td>
    </ng-container>

    <!-- Plan Column -->
    <ng-container matColumnDef="plan">
      <th mat-header-cell *matHeaderCellDef scope="col">Degree Plan</th>
      <td mat-cell *matCellDef="let audit">{{audit.degreePlannerPlanName}}</td>
    </ng-container>

    <!-- Status Column -->
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef scope="col">Status</th>
      <td mat-cell *matCellDef="let audit">
        <div *ngIf="audit.darsStatusOfDegreeAuditRequest == 'Done' || audit.darsStatusOfDegreeAuditRequest === 'Error'; else loading">
          <div *ngIf="audit.darsStatusOfDegreeAuditRequest == 'Done'">Ready</div>
          <div *ngIf="audit.darsStatusOfDegreeAuditRequest != 'Done'">{{audit.darsStatusOfDegreeAuditRequest}}</div>
          <div>Ran {{audit.darsAuditRunDate | date:'short'}}</div>
        </div>
        <ng-template #loading>
          <p class="in-progress">Audit in progress <mat-progress-spinner mode="indeterminate" diameter="24"></mat-progress-spinner></p>
        </ng-template>
      </td>
    </ng-container>

    <!-- Actions Column -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef scope="col">Actions</th>
      <td mat-cell *matCellDef="let audit">
        <!-- TODO: While an audit is in progress the route is null which causes an error '|| 0' is a working fix -->
        <a class="mat-stroked-button mat-primary view-audit-btn" attr.aria-label="View full audit report for {{(audit.darsDegreeProgramDescription || '').toLowerCase()}}  Program of Study" [routerLink]="['/dars', audit.darsDegreeAuditReportId || 0]">View</a>
        <a mat-stroked-button color="primary" class="download-audit-pdf-btn" href="/api/darspdfservice?reportId={{ audit?.darsDegreeAuditReportId }}" target="_blank">
          <mat-icon
          matTooltip="Download PDF"
          matTooltipPosition="right">vertical_align_bottom</mat-icon>
          <span class="cdk-visually-hidden">Download Audit PDF for {{(audit.darsDegreeProgramDescription || '').toLowerCase()}} Program of Study</span>
        </a>
      </td>
    </ng-container>

    <!-- Row definition -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSize]="5"></mat-paginator>
</div>