new-degree-audit-dialog.component.html

<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 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 your academic plan/program">
      <!--
        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" 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>

        <ng-container *ngIf="degreePlans$ | async as degreePlans; else loading">
            <mat-form-field *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value == 'planned'">
              <mat-label aria-labelledby="newAudit-degree-plan-select">Degree Plan</mat-label>
              <mat-select id="newAudit-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>

                <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>

        <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>

    <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 attr.aria-label="{{ credit }} credits" 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-template #noVariableCreditCourses>
                  <p><strong>No variable credits found. The audit is ready to be run.</strong></p>
                </ng-template>
              </ng-container>
          </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>