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
<mat-toolbar color="primary" class="dialog-toolbar">
<h2 class="dialog-toolbar-title">
Request Degree Audit
</h2>
<button
mat-button
mat-dialog-close
class="close-btn"
aria-label="Close audit dialog"
cdkFocusRegionEnd>
<i
class="material-icons"
alt="Close audit dialog"
matTooltip="Close audit dialog"
matTooltipPosition="above"
>clear</i>
</button>
</mat-toolbar>
<mat-dialog-content id="new-audit-options-stepper" class="mat-typography dialog-with-toolbar">
<div fxLayout="column" fxLayoutAlign="none" fxLayoutGap="10px">
<form [formGroup]="newAuditForm" id="newAuditForm">
<mat-vertical-stepper linear #stepper formArrayName="formArray">
<mat-step class="audit-step" formGroupName="0" [stepControl]="formArray?.get([0])">
<ng-template matStepLabel>Choose audit type</ng-template>
<mat-radio-group class="audit-radio-group" formControlName="auditType">
<mat-radio-button checked="true" class="audit-radio-button" name="declared-audit-type" id="declared-audit-type" value="declaredMajorAudit" aria-label="Select run a degree audit with declared major">
<p>Run a degree audit with declared major <br />
<span class="sub-line">See the progress towards your current program of study.</span></p>
</mat-radio-button>
<mat-radio-button class="audit-radio-button" name="what-if-audit-type" id="what-if-audit-type" value="whatIfAudit" aria-label="Select run a what-if degree audit">
<p>Run a what-if degree audit <br />
<span class="sub-line">See the progress towards a new program of study and degree plans.</span></p>
</mat-radio-button>
</mat-radio-group>
<div class="step-buttons-group">
<button mat-button matStepperNext mat-stroked-button color="primary">Next</button>
</div>
</mat-step>
<mat-step class="audit-step" formGroupName="1" [stepControl]="formArray?.get([1])">
<ng-template matStepLabel>Select program of study</ng-template>
<mat-radio-group *ngIf="newAuditForm.value.formArray[0].auditType === 'declaredMajorAudit'" class="audit-radio-group" formControlName="darsDegreeProgram">
<mat-radio-button *ngFor="let program of DARSprograms" class="audit-radio-button" name="{{ program.darsDegreeProgramCode }}" id="{{ program.darsDegreeProgramCode }}" value="{{ program.darsDegreeProgramCode }}" aria-label="{{ program.darsDegreeProgramCode }}">
{{ program.darsDegreeProgramCode }}
</mat-radio-button>
</mat-radio-group>
<!-- If what-if audit was selected in #1 -->
<mat-form-field *ngIf="newAuditForm.value.formArray[0].auditType === 'whatIfAudit'" class="audit-program">
<mat-select formControlName="darsInstitution" placeholder="School, College or Population" aria-label="Select School, College or Population" [disableOptionCentering]="true">
<mat-option value="{{ programOfStudy }}">{{ programOfStudy}}</mat-option>
</mat-select>
</mat-form-field>
<!-- Show after School, College or Population was selected -->
<mat-form-field *ngIf="(newAuditForm.value.formArray[0].auditType === 'whatIfAudit') && (newAuditForm.value.formArray[1].darsInstitution)" class="audit-program">
<mat-select formControlName="darsInstitutionProgram" placeholder="Academic Plan Program" aria-label="Academic Plan Program" [disableOptionCentering]="true">
<mat-option *ngFor="let program of DARSprograms" value="{{ program.darsDegreeProgramDescription }}">{{ program.darsDegreeProgramDescription }}</mat-option>
<div class="step-buttons-group">
<button mat-button matStepperPrevious color="primary">Back</button>
<button mat-button matStepperNext mat-stroked-button color="primary">Next</button>
</div>
</mat-step>
<mat-step class="audit-step" formGroupName="2" [stepControl]="formArray?.get([2])">
<ng-template matStepLabel>Choose audit settings</ng-template>
<mat-form-field class="audit-settings-option">
<mat-label>Honors Degree Options</mat-label>
<mat-select formControlName="honors" placeholder="Honors Degree Option" aria-label="Honors Degree Options" [disableOptionCentering]="true">
<mat-option *ngFor="let honor of honorsOptions" value="">{{ honor.darsHonorsOptionDescription }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="audit-settings-option">
<mat-label>Include Courses From</mat-label>
<mat-select formControlName="includeCoursesFrom" placeholder="Include Courses From" aria-label="Include Courses From" [disableOptionCentering]="true">
<mat-option value="">Previous, current, future, and planned terms</mat-option>
</mat-select>
</mat-form-field>
<p style="margin-top: 12px;"><strong>Run against which degree plan?</strong></p>
<mat-form-field class="audit-settings-option">
<mat-label>Degree Plan</mat-label>
<mat-select formControlName="runAgainst" placeholder="Degree Plan" aria-label="Degree Plan" [disableOptionCentering]="true">
<mat-option value="">Engineering</mat-option>
</mat-select>
</mat-form-field>
<div class="step-buttons-group">
<button mat-button matStepperPrevious color="primary">Back</button>
<button mat-button matStepperNext mat-stroked-button color="primary">Next</button>
</div>
</mat-step>
<mat-step class="audit-step" formGroupName="3" [stepControl]="formArray?.get([3])">
<ng-template matStepLabel>Select credits</ng-template>
<p>To provide more accurate audit, specify the number of credits you planto make in the following course(s):</p>
<!-- If no variable credits were found, show the message -->
<!-- <p>No variable credits found.The audit is ready to be run.</p> -->
<div fxLayout="row" fxFlex="100" style="margin-top: 18px;">
<span>Spring 2020: BIO 151 <br /> Introductory biology</span>
</div>
<div fxLayoutAlign="end center" fxFlex="20">
<mat-form-field id="audit-credits-selector">
<mat-select formControlName="credits" placeholder="" aria-label="Number of credits" [disableOptionCentering]="true">
</mat-select>
</mat-form-field>
</div>
</div>
<div class="step-buttons-group">
<button mat-button matStepperPrevious color="primary">Back</button>
<button mat-button mat-raised-button color="primary" (click)="runDARSAudit();">Run Audit</button>
<!-- <button mat-button (click)="stepper.reset()" mat-stroked-button color="primary">Reset</button> -->
</div>
</mat-step>
</mat-vertical-stepper>
</form>
</div>
</mat-dialog-content>