Skip to content
Snippets Groups Projects
Commit f9fb3ba6 authored by Paulina Nogal's avatar Paulina Nogal
Browse files

Reorder the presentation of the options in Step 2

parent 6e16ceb9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html
+ 42
− 32
View file @ f9fb3ba6
......@@ -36,41 +36,34 @@
</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>
<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>Degree Plan</mat-label>
<mat-select id="what-if-degree-plan-select" formControlName="degreePlan">
<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"
......@@ -102,6 +95,23 @@
</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>
......
src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html
+ 170
− 162
View file @ f9fb3ba6
<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>
<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-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-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>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 *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value === 'planned'">
<mat-label>Degree Plan</mat-label>
<mat-select id="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>
<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 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>
*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-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>
<button mat-stroked-button matStepperNext [disabled]="!chosenProgram.valid">Next</button>
</div>
</form>
</mat-step>
</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>
<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>
<!--
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>
<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 }}" aria-labelledby="credits-range-{{ course.id }}">
<mat-option
attr.aria-label="{{ credit }} credits"
*ngFor="let credit of course.range"
[value]="credit">
{{ credit }} cr
*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>
</div>
</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>
<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-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>
<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>
<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 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-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>
<ng-template #loading>
<mat-spinner diameter="20"></mat-spinner>
</ng-template>
\ No newline at end of file
src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.scss
+ 0
− 22
View file @ f9fb3ba6
......@@ -54,25 +54,3 @@
button[type='submit'] {
color: mat-color($my-app-primary);
}
#what-if-degree-plan-select {
mat-select-trigger {
height: 24px;
display: inline-block;
position: relative;
top: 1px;
.plan-name {
position: relative;
top: 1px;
display: inline-block;
vertical-align: top;
height: 24px;
line-height: 24px;
}
}
.primary-star {
margin-right: 12px;
}
}
src/assets/sass/general.scss
+ 40
− 0
View file @ f9fb3ba6
......@@ -310,6 +310,46 @@ main {
}
// Form fields styles
.includeCoursesFrom {
.mat-radio-label {
white-space: normal !important;
font-weight: bold;
align-items: start;
.mat-radio-label-content {
span {
font-weight: normal;
}
}
}
.mat-radio-group {
padding: 16px 0;
.mat-radio-container {
top: 2px;
}
}
.mat-select-value {
mat-select-trigger {
height: 24px;
display: inline-block;
position: relative;
top: 1px;
.plan-name {
position: relative;
top: 1px;
display: inline-block;
vertical-align: top;
height: 24px;
line-height: 24px;
}
}
.primary-star {
margin-right: 12px;
}
}
}
.mat-card-mobile {
.mat-tab-label-active,
.mat-tab-link {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment