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">
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<mat-vertical-stepper linear>
<ng-template matStepperIcon="edit" let-index="index">
{{ index + 1 }}
</ng-template>
<mat-step [stepControl]="chosenProgram" label="Select program of study">
<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">
<mat-option
*ngFor="let p of (programOrPlanOptions$ | async)"
value="{{ p.darsDegreeProgramCode }}">
{{ p.darsDegreeProgramDescription }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<ng-container *ngIf="degreePlans$ | async as degreePlans; else loading">
<mat-form-field>
<mat-label>Degree Plan</mat-label>
<mat-select formControlName="degreePlan">
<mat-option
*ngFor="let plan of degreePlans"
[value]="plan">
{{ plan.name }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
</form>
<div class="step-actions">
<button mat-stroked-button matStepperNext [disabled]="!chosenProgram.valid">Next</button>
</div>
</mat-step>
<mat-step [stepControl]="chosenAuditSettings" label="Choose audit settings">
<form [formGroup]="chosenAuditSettings">
<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>
<!--
User picks whether to include courses from the past, current, or planned future
-->
<mat-form-field>
<mat-label>Include Courses From</mat-label>
<mat-select formControlName="includeCoursesFrom">
<mat-option value="future">Previous, current, and future terms</mat-option>
<mat-option value="current">Previous and current terms</mat-option>
<mat-option value="previous">Previous terms</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">Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="chosenCreditSettings" label="Select credits">
<p>To provide a more accurate audit, specify the number of credits you plant 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>
{{ course.termCode | getTermDescription }}: {{ course | courseDescription }}
<br>
<small>{{ course.title }}</small>
</label>
<mat-select formControlName="credits">
<mat-option
*ngFor="let credit of course.range"
[value]="credit">
{{ credit }}
</mat-option>
</mat-select>
</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>