Skip to content
Snippets Groups Projects
new-what-if-audit-dialog.component.html 8.77 KiB
Newer Older
<mat-toolbar class="dialog-toolbar" color="primary">
    <h2 class="dialog-toolbar-title">Run &lsquo;what-if&rsquo; 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">
                  *ngFor="let p of (programOrPlanOptions$ | async)"
                  value="{{ p.darsDegreeProgramCode }}">
                  {{ p.darsDegreeProgramDescription }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </ng-container>
          <button mat-stroked-button matStepperNext [disabled]="!chosenProgram.valid">Next</button>
      <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, and 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>
            <!--
              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 *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value === 'planned'">
                <mat-label id="what-if-degree-plan-select">Degree Plan</mat-label>
                <mat-select aria-labelledby="what-if-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>
                    *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>
          <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 }} credits</mat-label>
                  <mat-select formControlName="creditsDropdown" aria-labelledby="credits-range-{{ course.id }}">
                    <mat-option
                      attr.aria-label="{{ credit }} credits"
                      *ngFor="let credit of course.range"
                      [value]="credit">
                      {{ credit }} credits
                    </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>