Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
<mat-toolbar class="dialog-toolbar" color="primary">
<h2 class="dialog-toolbar-title">Run degree 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 dialog-with-toolbar>
<mat-vertical-stepper linear>
<ng-template matStepperIcon="edit" let-index="index">
{{ index + 1 }}
</ng-template>
<mat-step [stepControl]="chosenProgram" label="Select program of study">
<!--
User picks one of the majors or certificates that they're already enrolled in
-->
<ng-container *ngIf="degreePrograms$ | async as degreePrograms; else loading">
<mat-radio-group [formControl]="chosenProgram">
<mat-radio-button *ngFor="let dp of degreePrograms" [value]="dp">
{{ dp.sisAcademicPlanDescription }}
</mat-radio-button>
</mat-radio-group>
</ng-container>
<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>