Skip to content
Snippets Groups Projects
Commit 26f2df65 authored by Isaac Evavold's avatar Isaac Evavold Committed by Isaac Evavold
Browse files

ROENROLL-1859 update what-if degree plan picker

- Place degree plan picker after 'include from courses' dropdown
- Picker value should default to user's primary degree plan
- Display star next to primary plan
parent 7f438c92
No related branches found
No related tags found
No related merge requests found
...@@ -49,19 +49,6 @@ ...@@ -49,19 +49,6 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</ng-container> </ng-container>
<ng-container *ngIf="degreePlans$ | async as degreePlans; else loading">
<mat-form-field>
<mat-label>Degree Plan</mat-label>
<mat-select formControlName="degreePlan">
<mat-option
*ngFor="let plan of degreePlans"
[value]="plan">
{{ plan.name }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
</form> </form>
<div class="step-actions"> <div class="step-actions">
...@@ -98,6 +85,44 @@ ...@@ -98,6 +85,44 @@
<mat-option value="previous">Previous terms</mat-option> <mat-option value="previous">Previous terms</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<!--
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>
</ng-container> </ng-container>
<div class="step-actions"> <div class="step-actions">
......
...@@ -41,3 +41,25 @@ ...@@ -41,3 +41,25 @@
text-align: right; text-align: right;
} }
} }
#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;
}
}
...@@ -10,7 +10,7 @@ import { ...@@ -10,7 +10,7 @@ import {
FormControl, FormControl,
} from '@angular/forms'; } from '@angular/forms';
import { HonorsOption } from '../models/honors-option'; import { HonorsOption } from '../models/honors-option';
import { map, share, filter, flatMap, withLatestFrom } from 'rxjs/operators'; import { map, share, flatMap, shareReplay } from 'rxjs/operators';
import { CourseBase } from '@app/core/models/course'; import { CourseBase } from '@app/core/models/course';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { GlobalState } from '@app/core/state'; import { GlobalState } from '@app/core/state';
...@@ -75,12 +75,12 @@ export class NewWhatIfAuditDialogComponent implements OnInit { ...@@ -75,12 +75,12 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
{ value: '', disabled: true }, { value: '', disabled: true },
Validators.required, Validators.required,
), ),
degreePlan: fb.control('', Validators.required),
}); });
this.chosenAuditSettings = fb.group({ this.chosenAuditSettings = fb.group({
honorsOptions: fb.control('', Validators.required), honorsOptions: fb.control('', Validators.required),
includeCoursesFrom: fb.control('future', Validators.required), includeCoursesFrom: fb.control('future', Validators.required),
degreePlan: fb.control('', Validators.required),
}); });
this.chosenCreditSettings = fb.array([]); this.chosenCreditSettings = fb.array([]);
...@@ -103,7 +103,12 @@ export class NewWhatIfAuditDialogComponent implements OnInit { ...@@ -103,7 +103,12 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
}), }),
); );
this.degreePlans$ = this.store.select(degreePlans); this.degreePlans$ = this.store.select(degreePlans).pipe(shareReplay());
this.degreePlans$.subscribe(plans => {
const primaryPlan = plans.find(p => p.primary);
this.chosenAuditSettings.controls['degreePlan'].setValue(primaryPlan);
});
this.honorsOptions$ = combineLatest([ this.honorsOptions$ = combineLatest([
this.institutions$, this.institutions$,
...@@ -116,9 +121,8 @@ export class NewWhatIfAuditDialogComponent implements OnInit { ...@@ -116,9 +121,8 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
}), }),
); );
this.variableCreditCourses$ = (this.chosenProgram.get( // prettier-ignore
'degreePlan', this.variableCreditCourses$ = (this.chosenAuditSettings.get('degreePlan') as FormControl).valueChanges.pipe(
) as FormControl).valueChanges.pipe(
flatMap(plan => this.api.getAllCourses(plan.roadmapId)), flatMap(plan => this.api.getAllCourses(plan.roadmapId)),
map(courses => { map(courses => {
return courses.filter(course => { return courses.filter(course => {
...@@ -157,6 +161,10 @@ export class NewWhatIfAuditDialogComponent implements OnInit { ...@@ -157,6 +161,10 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
}); });
} }
public comparePlans(a: DegreePlan, b: DegreePlan): boolean {
return a.roadmapId === b.roadmapId;
}
public darsInstitutionCode<T>(fallback: T): string | T { public darsInstitutionCode<T>(fallback: T): string | T {
const control = this.chosenProgram.get('institution'); const control = this.chosenProgram.get('institution');
if (control !== null) { if (control !== null) {
...@@ -176,7 +184,7 @@ export class NewWhatIfAuditDialogComponent implements OnInit { ...@@ -176,7 +184,7 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
} }
public roadmapId<T>(fallback: T): number | T { public roadmapId<T>(fallback: T): number | T {
const control = this.chosenProgram.get('degreePlan'); const control = this.chosenAuditSettings.get('degreePlan');
if (control !== null) { if (control !== null) {
return control.value.roadmapId; return control.value.roadmapId;
} else { } else {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment