Newer
Older
<mat-toolbar class="dialog-toolbar" color="primary">
<h2 class="dialog-toolbar-title">Run ‘what-if’ audit</h2>
<button
class="close-btn"
mat-button
mat-dialog-close
cdkFocusRegionEnd
aria-label="Close audit dialog"
matTooltip="Close audit dialog"
matTooltipPosition="above">
<i class="material-icons">clear</i>
</button>
</mat-toolbar>
<mat-dialog-content class="mat-typography dialog-with-toolbar">
<mat-vertical-stepper linear>
<ng-template matStepperIcon="edit" let-index="index">
{{ index + 1 }}
</ng-template>
<mat-step [stepControl]="chosenProgram" label="Select academic plan/program">
<form [formGroup]="chosenProgram">
<ng-container *ngIf="institutions$ | async as institutions; else loading">
<!--
User picks one of the institutions to narrow the number of choices in the next step
<mat-form-field>
<mat-label>School, College, or Population</mat-label>
<mat-select formControlName="institution">
<mat-option
*ngFor="let pair of institutions | keyvalue"
[value]="pair.key">
{{ pair.value.darsInstitutionCodeDescription }}
</mat-option>
</mat-select>
</mat-form-field>
<!--
User picks one of the insitution's programs
-->
<mat-form-field>
<mat-label>Academic Plan / Program</mat-label>
<mat-select formControlName="planOrProgram">
*ngFor="let p of (programOrPlanOptions$ | async)"
value="{{ p.darsDegreeProgramCode }}">
{{ p.darsDegreeProgramDescription }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<div class="step-actions">
<button mat-stroked-button matStepperNext [disabled]="!chosenProgram.valid">Next</button>
</div>
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<mat-step [stepControl]="chosenAuditSettings" label="Choose audit settings">
<form [formGroup]="chosenAuditSettings" class="includeCoursesFrom">
<!--
User picks whether to include courses from the past, current, or planned future
-->
<label id="include-courses-from">Include courses from</label>
<mat-radio-group aria-labelledby="include-courses-from" formControlName="includeCoursesFrom">
<mat-radio-button value="planned">
Previous, current, future, and planned terms<br />
<span>Includes courses already completed, enrolled courses that are in progress, enrolled courses that have not started, and courses in the degree planner from future terms that are not enrolled.</span>
</mat-radio-button>
<mat-radio-button value="future">
Previous, current, and future terms<br />
<span>Includes courses already completed, enrolled courses that are in progress, enrolled courses that have not started.</span>
</mat-radio-button>
<mat-radio-button value="current">
Previous and current terms<br />
<span>Includes courses already completed and enrolled courses that are in progress.</span>
</mat-radio-button>
<mat-radio-button value="previous">
Previous terms<br />
<span>Includes courses already completed.</span>
</mat-radio-button>
</mat-radio-group>
<!--
User picks which of their degree plans to use as a basis for the what-if audit
-->
<ng-container *ngIf="degreePlans$ | async as degreePlans; else loading">
<mat-form-field *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value === 'planned'">
<mat-label id="what-if-degree-plan-select">Degree Plan</mat-label>
<mat-select aria-labelledby="what-if-degree-plan-select" formControlName="degreePlan">
<mat-select-trigger *ngIf="chosenAuditSettings.get('degreePlan')?.value; let plan">
<mat-icon
class="primary-star"
*ngIf="plan.primary"
alt="Primary degree plan star"
aria-label="Primary plan selected"
matTooltip="Primary plan selected"
matTooltipPosition="above">
star_rate
</mat-icon>
<span class="plan-name">{{ plan.name }}</span>
</mat-select-trigger>
*ngFor="let plan of degreePlans"
[value]="plan">
<mat-icon
class="primary-star"
*ngIf="plan.primary"
alt="Primary degree plan star"
aria-label="Primary plan selected"
matTooltip="Primary plan selected"
matTooltipPosition="above">
star_rate
</mat-icon>
<span class="plan-name">{{ plan.name }}</span>
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<ng-container *ngIf="honorsOptions$ | async as honorsOptions; else loading">
<!--
User picks one of the honors options provided by the institution
associated with the program they selected in step 1
-->
<mat-form-field>
<mat-label>Honors Degree Options</mat-label>
<mat-select formControlName="honorsOptions">
<mat-option
*ngFor="let op of honorsOptions"
value="{{ op.darsHonorsOptionCode }}">
{{ op.darsHonorsOptionDescription }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<div class="step-actions">
<button mat-button matStepperPrevious>Back</button>
<button mat-stroked-button matStepperNext [disabled]="!chosenAuditSettings.valid" *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value === 'planned'">Next</button>
<button mat-raised-button color="primary" (click)="submitAudit()" *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value !== 'planned'">Request audit</button>
</div>
</form>
</mat-step>
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<mat-step [stepControl]="chosenCreditSettings" label="Select credits" *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value === 'planned'">
<p>To provide a more accurate audit, specify the number of credits you plan to take in the following courses:</p>
<form [formGroup]="chosenCreditSettings">
<ng-container *ngIf="variableCreditCourses$ | async as variableCreditCourses; else loading">
<ng-container *ngIf="variableCreditCourses.length > 0; else noVariableCreditCourses">
<div class="credit-selector" *ngFor="let course of variableCreditCourses; let i = index" [formGroupName]="i">
<label id="credits-range-{{ course.id }}">
{{ course.termCode | getTermDescription }}: {{ course | courseDescription }}
<br>
<small>{{ course.title }}</small>
</label>
<mat-form-field>
<mat-label>{{ course.creditMin }}-{{ course.creditMax }} cr</mat-label>
<mat-select formControlName="credits" aria-labelledby="credits-range-{{ course.id }}" aria-labelledby="credits-range-{{ course.id }}">
<mat-option
attr.aria-label="{{ credit }} credits"
*ngFor="let credit of course.range"
[value]="credit">
{{ credit }} cr
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-container>
<ng-template #noVariableCreditCourses>
<p><strong>No variable credits found. The audit is ready to be run.</strong></p>
</ng-template>
</ng-container>
<div class="step-actions">
<button mat-button matStepperPrevious>Back</button>
<button
mat-raised-button
color="primary"
[disabled]="!chosenCreditSettings.valid"
(click)="submitAudit()">
Request audit
</button>
</div>
</form>
</mat-step>
</mat-vertical-stepper>
</mat-dialog-content>
<ng-template #loading>
<mat-spinner diameter="20"></mat-spinner>
</ng-template>