<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"> <mat-option *ngFor="let p of (programOrPlanOptions$ | async)" value="{{ p.darsDegreeProgramCode }}"> {{ p.darsDegreeProgramDescription }} </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="planned">Previous, current, future, and planned terms</mat-option> <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> <!-- 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> <mat-label>Degree Plan</mat-label> <mat-select id="what-if-degree-plan-select" formControlName="degreePlan" [compareWith]="comparePlans"> <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> <mat-option *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> <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 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 }}"> <mat-option *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>