Forked from an inaccessible project.
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
audit.component.html 14.30 KiB
<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">
<ng-container *ngSwitchCase="'OK'">
<mat-icon class="requirement-icon no-icon"
matTooltip="Requirement complete"
matTooltipPosition="above">check_circle</mat-icon>
<span class="cdk-visually-hidden">Requirement complete</span>
</ng-container>
<ng-container *ngSwitchCase="'NO'">
<mat-icon class="requirement-icon no-icon"
matTooltip="Requirement not complete"
matTooltipPosition="above">cancel</mat-icon>
<span class="cdk-visually-hidden">Requirement not complete</span>
</ng-container>
<ng-container *ngSwitchCase="'NONE'">
<mat-icon class="requirement-icon no-icon">remove_circle</mat-icon>
</ng-container>
<ng-container *ngSwitchDefault>
<mat-icon class="requirement-icon no-icon"
matTooltip="Requirement uses in-progress credit/courses"
matTooltipPosition="above">lens</mat-icon>
<span class="cdk-visually-hidden">Requirement uses in-progress credit/courses</span>
</ng-container>
</ng-container>
</div>
<div>
<p>
<ng-container *ngFor="let line of (requirement | requirementTitle)">
<span [innerHTML]="line"></span>
</ng-container>
</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'">
<ng-container *ngFor="let symbol of asLineBody(reqBody).lines | requirementSymbols">
<ng-container [ngSwitch]="symbol.type">
<span *ngSwitchCase="'text'" [matTooltip]="symbol.tooltip" matTooltipPosition="above">{{symbol.text}}</span>
<span *ngSwitchCase="'icon'" class="{{symbol.icon}}">
<mat-icon [matTooltip]="symbol.tooltip" matTooltipPosition="above">{{symbol.icon}}</mat-icon>
</span>
</ng-container>
</ng-container>
</p>
</div>
<div class="subrequirement-content-wrapper">
<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 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">{{course.grade}}</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">
<span *ngFor="let note of course.courseNote | courseNote" [matTooltip]="note.tooltip" matTooltipPosition="above">
{{note.text}}
</span>
</td>
</ng-container>
</table>
</ng-container>
<ng-container *ngSwitchCase="'lines'">
<p *ngFor="let line of asLineBody(reqBody).lines | requirementLine:reqBody.contentType; trackBy: trackByIndex">
{{line}}
</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]="true" 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>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>
</mat-accordion>
</section>
<button (click)="scrollTop();"
class="audit-scrolltop"
[hidden]="!scrolling"
aria-label="Scroll to top"
matTooltip="Scroll to top"
matTooltipPosition="above">
<i class="material-icons">arrow_upward</i>
</button>
</mat-card>