audit.component.html

<mat-card id="audit" *ngIf="audit">
  <header id="audit-header" class="no-horizontal-padding">
    <div class="error-message" *ngIf="audit.errorText.length">
      <mat-icon color="warn">error</mat-icon>
      <div>
        <div *ngFor="let error of audit.errorText">{{ error }}</div>
      </div>
    </div>
    <div class="audit-metadata">
      <div>
        <p>{{audit.header.preparedLabel}}: {{audit.header.preparedDate}}</p>
        <p>{{audit.header.studentName | auditFormatName}}</p>
        <p>{{audit.header.darsDegreeProgramCodeLabel}}: {{audit.header.darsDegreeProgramCode}}</p>
      </div>

      <div class="text-align-right">
        <p>{{audit.header.studentCampusId}}</p>
        <p>{{audit.header.darsCatalogYearTermLabel}}: {{audit.header.darsCatalogYearTerm}}</p>
        <p *ngIf="audit.header.darsAlternateCatalogYearTerm1">
          {{audit.header.darsAlternateCatalogYearTerm1Label}}: {{audit.header.darsAlternateCatalogYearTerm1}}
        </p>
      </div>
    </div>

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

  </header>

  <section class="audit-section" class="audit-top-section">
    <div *ngIf="audit.topSection.academicPlansSection && audit.topSection.academicPlansSection.planList">
      <h2>Academic Plans:</h2>
      <ng-contrainer *ngFor="let plan of audit.topSection.academicPlansSection.planList">
        <p class="audit-academic-plan">{{plan.planTypeLabel}}: {{plan.declareDate}} {{plan.planCodeNumber}} {{plan.planCodeDescription}}</p>
      </ng-contrainer>
    </div>

    <div *ngIf="audit.topSection.advisorSection && audit.topSection.advisorSection.advisorNames">
      <h2>{{audit.topSection.advisorSection.advisorLabel}}:</h2>

      <ng-container *ngFor="let name of audit.topSection.advisorSection.advisorNames">
        <p class="audit-advisor-name">{{name | auditFormatName}}</p>
      </ng-container>
    </div>

    <div *ngIf="audit.topSection.degreesSection && audit.topSection.degreesSection.degrees">
      <h2>{{audit.topSection.degreesSection.label}}:</h2>
      <div *ngFor="let degree of audit.topSection.degreesSection.degrees" class="audit-degree">
        <p class="audit-degree-awarded">Awarded: {{degree.awardedDate}}</p>
        <p class="audit-degree-major">Major: {{degree.major}} {{degree.degreeCode}}</p>
      </div>
    </div>
  </section>

  <section class="audit-section audit-credit-tables">
    <!-- TODO Figure out how to get this to look like a matTable -->
    <div class="hs-units" *ngIf="audit.topSection.highSchoolUnitsSection?.units">
      <table mat-table [dataSource]="formatHighSchoolUnitData(audit.topSection.highSchoolUnitsSection.units)">
        <caption>HS Units</caption>

        <tr mat-header-row *matHeaderRowDef="highSchoolUnitsSection"></tr>
        <tr mat-row *matRowDef="let row; columns: highSchoolUnitsSection;"></tr>

        <ng-container matColumnDef="lang">
          <th mat-header-cell *matHeaderCellDef scope="col">Language</th>
          <td mat-cell *matCellDef="let courses">{{courses.lang}}</td>
        </ng-container>

        <ng-container matColumnDef="math">
          <th mat-header-cell *matHeaderCellDef scope="col">Math</th>
          <td mat-cell *matCellDef="let courses">{{courses.math}}</td>
        </ng-container>

        <ng-container matColumnDef="science">
          <th mat-header-cell *matHeaderCellDef scope="col">Science</th>
          <td mat-cell *matCellDef="let courses">{{courses.science}}</td>
        </ng-container>

        <ng-container matColumnDef="soc stud">
          <th mat-header-cell *matHeaderCellDef scope="col">Social Studies</th>
          <td mat-cell *matCellDef="let courses">{{courses['soc stud']}}</td>
        </ng-container>
      </table>

      <p>{{audit.topSection.admitTypeLabel}}: {{audit.topSection.admitType}}</p>
    </div>

    <div class="advanced-standing-creds" *ngIf="audit.topSection.advancedStandingCreditsSection?.advanceStandingCredits.length > 0">
      <table mat-table [dataSource]="audit.topSection.advancedStandingCreditsSection?.advanceStandingCredits">
        <caption>{{audit.topSection.advancedStandingCreditsSection?.sectionLabel}}</caption>
        <tr mat-header-row *matHeaderRowDef="advancedStandingCredits"></tr>
        <tr mat-row *matRowDef="let row; columns: advancedStandingCredits;"></tr>
        <tr mat-footer-row *matFooterRowDef="advancedStandingCredits"></tr>

        <ng-container matColumnDef="dateValue">
          <th mat-header-cell *matHeaderCellDef scope="col">Date</th>
          <td mat-cell *matCellDef="let course">{{course.dateValue}}</td>
          <td mat-footer-cell *matFooterCellDef class="bold">Total</td>
        </ng-container>

        <ng-container matColumnDef="typeValue">
          <th mat-header-cell *matHeaderCellDef scope="col">Type</th>
          <td mat-cell *matCellDef="let course">{{course.typeValue}}</td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="degreeCreditsValue">
          <th mat-header-cell *matHeaderCellDef class="text-align-right" scope="col">Degree</th>
          <td mat-cell *matCellDef="let course" class="text-align-right">{{course.degreeCreditsValue}}</td>
          <td mat-footer-cell *matFooterCellDef class="bold text-align-right">{{audit.topSection.advancedStandingCreditsSection?.totals.degreeCreditsValue}}</td>
        </ng-container>

        <ng-container matColumnDef="courseCreditsValue">
          <th mat-header-cell *matHeaderCellDef class="text-align-right" scope="col">Course</th>
          <td mat-cell *matCellDef="let course" class="text-align-right">{{course.courseCreditsValue}}</td>
          <td mat-footer-cell *matFooterCellDef class="bold text-align-right">{{audit.topSection.advancedStandingCreditsSection?.totals.courseCreditsValue}}</td>
        </ng-container>
      </table>
    </div>
  </section>

  <section class="audit-section">
    <h3>Degree Audit Requirements</h3>
    <div class="audit-section-controles">
      <button mat-stroked-button color="primary" (click)="openAllRequirements(); announce('expand')" aria-label="Expand All Requirements Sections">Expand All Sections</button>
      <button mat-stroked-button color="primary" (click)="closeAllRequirements(); announce('collapse')" aria-label="Collapse All Requirements Sections">Collapse All Sections</button>
    </div>

    <div>
      <p *ngIf="audit.topSection.whatIfCautionText" class="pre-wrap">{{ audit.topSection.whatIfCautionText }}</p>
      <p *ngIf="audit.completeText" style="text-align: center">{{ audit.completeText }}</p>
    </div>


    <mat-accordion multi="true" hideToggle="true" #requirements>
      <!-- START OF REQUIREMENT -->
      <ng-container *ngFor="let requirement of audit.requirements; trackBy: trackReq">

        <!-- START OF ACCORDION REQUIREMENT -->
          <mat-expansion-panel #requirementPanel [expanded]="false" [disabled]="(requirement | requirementBody).length === 0">

            <mat-expansion-panel-header class="reqExpansionPanelHeader" collapsedHeight="auto" expandedHeight="auto">
              <mat-panel-title class="requirement-title status-{{requirement.status.status.toLowerCase()}}">
                <div class="requirement-icon-outer">
                    <mat-icon class="requirement-toggle">{{requirementPanel.expanded ? 'arrow_drop_down' : 'arrow_right'}}</mat-icon>

                    <ng-container [ngSwitch]="requirement.status.status">
                      <cse-audit-symbol *ngSwitchCase="'OK'" [symbol]="symbol.findByText('OK')" class="requirement-icon ok-icon"></cse-audit-symbol>
                      <cse-audit-symbol *ngSwitchCase="'NO'" [symbol]="symbol.findByText('NO')" class="requirement-icon no-icon"></cse-audit-symbol>
                      <span *ngSwitchDefault class="requirement-icon-spacer">&nbsp;</span>
                    </ng-container>
                </div>
                <div>
                  <p [innerHTML]="requirement | requirementTitle"></p>
                </div>
              </mat-panel-title>
            </mat-expansion-panel-header>

            <div *ngFor="let reqBody of requirement | requirementBody; trackBy: trackByIndex">

              <div *ngIf="reqBody.contentType !== 'blankLine'" class="content-type content-type-{{reqBody.contentType}}">

                <div class="subrequirement-status-wrapper">
                  <p *ngIf="reqBody.contentType === 'okSubrequirementTLine' || reqBody.contentType === 'noSubrequirementTLine'">
                      <cse-audit-symbol
                        *ngFor="let symbol of asLineBody(reqBody).lines | requirementSymbols"
                        [symbol]="symbol"
                      ></cse-audit-symbol>
                  </p>
                </div>

                <div class="subrequirement-content-wrapper">
                  <ng-container [ngSwitch]="reqBody.template">
                    <ng-container *ngSwitchCase="'courses'">
                        <table style="width: 100%" class="no-header" mat-table [dataSource]="asCourseBody(reqBody).subRequirementCourses">
                            <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 scope="col">Term</th>
                              <td mat-cell *matCellDef="let course">{{course.term}}</td>
                            </ng-container>

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

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

                            <ng-container matColumnDef="grade">
                              <th mat-header-cell *matHeaderCellDef scope="col">Grade</th>
                              <td mat-cell *matCellDef="let course">
                                <span *ngIf="!(course.grade | courseGrade)">{{course.grade}}</span>
                                <cse-audit-symbol *ngIf="(course.grade | courseGrade)" [symbol]="course.grade | courseGrade"></cse-audit-symbol>
                              </td>
                            </ng-container>

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

                            <ng-container matColumnDef="note">
                              <th mat-header-cell *matHeaderCellDef scope="col">Course Note</th>
                              <td mat-cell *matCellDef="let course">
                                <cse-audit-symbol
                                  *ngFor="let symbol of course.courseNote | courseNote"
                                  [symbol]="symbol"
                                ></cse-audit-symbol>
                              </td>
                            </ng-container>
                        </table>
                    </ng-container>

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

                </div>

              </div>
            </div>

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

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

      <!-- AUDIT COURSE KEY / LEGEND -->
      <mat-expansion-panel #requirementPanel [expanded]="false" id="legend-panel">
        <mat-expansion-panel-header collapsedHeight="auto" expandedHeight="auto">
          <mat-panel-title class="requirement-title">
            <div class="requirement-icon-outer">
                <mat-icon class="requirement-toggle">{{requirementPanel.expanded ? 'arrow_drop_down' : 'arrow_right'}}</mat-icon>
            </div>
            <div>
                <p class="legend-panel-title">Audit Legend</p>
            </div>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <cse-audit-legend></cse-audit-legend>
      </mat-expansion-panel>

      <p class="pre-wrap" [innerHTML]="audit.requirementEndnote"></p>
      <br>
      <p>{{ audit.bottomSection.memorandaSection?.label }}</p>
      <p *ngFor="let line of audit.bottomSection.memorandaSection?.memorandaLines">
        {{ line }}
      </p>

    </mat-accordion>
  </section>
  <button
    (click)="scrollTop();"
    class="audit-scrolltop"
    *ngIf="scrolling"
    mat-fab
    aria-label="Scroll to top"
    matTooltip="Scroll to top"
    matTooltipPosition="above">
    <i class="material-icons">arrow_upward</i>
  </button>
</mat-card>