audit.component.html

<mat-card id="audit">
  <header id="audit-header" class="no-horizontal-padding">
    <div class="audit-metadata">
      <div>
        <p>{{audit.header.preparedDate}}</p>
        <p>{{audit.header.studentName}}</p>
        <p>Program Code: {{audit.header.darsDegreeProgramCode}}</p>
      </div>

      <div class="text-align-right">
        <p>{{metadata.darsDegreeAuditReportId}}</p>
        <!-- <p>{{audit.header.graduationDate}}</p>
        <p>{{audit.header.graduationDateLabel}}</p> -->
      </div>
    </div>

    <h3 class="text-align-center">
      {{audit.header.clientDefinedMessage}}
      <br />
      {{audit.header.degreeProgramTitle1}}
      <br />
      {{audit.header.degreeProgramTitle2}}
    </h3>

    <div class="audit-section-controles">
      <button mat-stroked-button color="primary" (click)="openAllRequirements()">Open All Sections</button>
      <button mat-stroked-button color="primary" (click)="closeAllRequirements()">Close All Sections</button>
    </div>
  </header>

  <section class="audit-section">
    <p class="tight faded">This audit was run using values not reflected in your current status. Parameters used when submitting this audit request:</p>
    <br/>
    <p class="tight faded">Honors Processing: Keep current status.</p>
    <p class="tight faded">Courses Used: Using courses from Curse Guide Plan: (Plan name field blank in cobol program "stuinst.)</p>
  </section>
  
  <section class="audit-section">
    <mat-accordion multi="true" hideToggle="true" #requirements>

      <!-- START OF REQUIREMENT -->
      <ng-container *ngFor="let requirement of audit.requirements; trackBy: trackReq">
        
        <!-- START OF REQUIREMENT TEXT -->
        <ng-container *ngIf="requirement.status.status === 'NONE'; else requirementTemplate">
          <div *ngFor="let contentType of requirement.requirementContents" class="content-type-{{contentType.contentType}}" matTooltip="{{contentType.contentType}}">
            <p *ngFor="let line of contentType.lines">{{line}}</p>
          </div>
        </ng-container>
        <!-- END OF REQUIREMENT TEXT -->

        <!-- START OF ACCORDION REQUIREMENT -->
        <ng-template #requirementTemplate>
          <mat-expansion-panel #requirementPanel [expanded]="true">

            <mat-expansion-panel-header collapsedHeight="auto" expandedHeight="auto">
              <mat-panel-title class="requirement-title status-{{requirement.status.status === 'OK' ? 'ok' : 'no'}}">
                <div class="requirement-icon-outer">
                    <mat-icon class="requirement-toggle">{{requirementPanel.expanded ? 'arrow_drop_down' : 'arrow_right'}}</mat-icon>
                    <mat-icon *ngIf="requirement.status.status === 'OK'" class="requirement-icon ok-icon">check_circle</mat-icon>
                    <mat-icon *ngIf="requirement.status.status === 'NO'" class="requirement-icon no-icon">cancel</mat-icon>
                </div>
                <div>
                  <p>
                    <ng-container *ngFor="let line of getRequirementTitle(requirement)">
                      {{line}}
                    </ng-container>
                  </p>
                </div>
              </mat-panel-title>
            </mat-expansion-panel-header>

            <div *ngFor="let reqBody of getRequirementBody(requirement); trackBy: trackByIndex">
              
              <div class="content-type content-type-{{reqBody.contentType}}" matTooltip="{{reqBody.contentType}}" matTooltipPosition="left">
                <ng-container [ngSwitch]="reqBody.template">

                  <ng-container *ngSwitchCase="'courses'">
                      <table style="width: 100%" mat-table [dataSource]="asCourseBody(reqBody).subRequirementCourses">
                          <caption>Applicable academic work</caption>
                          <tr mat-header-row *matHeaderRowDef="courseTerms"></tr>
                          <tr mat-row *matRowDef="let row; columns: courseTerms;"></tr>


                          <ng-container matColumnDef="term">
                            <th mat-header-cell *matHeaderCellDef>Term</th>
                            <td mat-cell *matCellDef="let course">{{course.term}}</td>
                          </ng-container>

                          <ng-container matColumnDef="course">
                            <th mat-header-cell *matHeaderCellDef>Course</th>
                            <td mat-cell *matCellDef="let course">{{course.course}}</td>
                          </ng-container>

                          <ng-container matColumnDef="credits">
                            <th mat-header-cell *matHeaderCellDef>Credits</th>
                            <td mat-cell *matCellDef="let course">{{course.credits}}</td>
                          </ng-container>

                          <ng-container matColumnDef="grade">
                            <th mat-header-cell *matHeaderCellDef>Grade</th>
                            <td mat-cell *matCellDef="let course">{{course.grade}}</td>
                          </ng-container>

                          <ng-container matColumnDef="title">
                            <th mat-header-cell *matHeaderCellDef>Course Title</th>
                            <td mat-cell *matCellDef="let course">{{course.courseTitle}}</td>
                          </ng-container>

                          <ng-container matColumnDef="note">
                            <th mat-header-cell *matHeaderCellDef>Course Note</th>
                            <td mat-cell *matCellDef="let course">{{course.courseNote}}</td>
                          </ng-container>
                      </table>
                  </ng-container>

                  <ng-container *ngSwitchCase="'lines'">
                      <p 
                        *ngFor="let line of asLineBody(reqBody).lines; trackBy: trackByIndex"
                        [innerHTML]="line | auditLine:reqBody.contentType"></p>
                  </ng-container>
            
                </ng-container>
              </div>
            </div>

          </mat-expansion-panel>
        </ng-template>
        <!-- END OF ACCORDION REQUIREMENT -->

      </ng-container>
      <!-- END OF REQUIREMENT -->

    </mat-accordion>
  </section>
</mat-card>