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

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html

@@ -49,19 +49,6 @@
             </mat-select>
           </mat-form-field>
         </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>
 
       <div class="step-actions">
@@ -98,6 +85,44 @@
               <mat-option value="previous">Previous terms</mat-option>
             </mat-select>
           </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>
 
         <div class="step-actions">

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.scss

@@ -41,3 +41,25 @@
     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;
+  }
+}

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.ts

@@ -10,7 +10,7 @@ import {
   FormControl,
 } from '@angular/forms';
 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 { Store } from '@ngrx/store';
 import { GlobalState } from '@app/core/state';
@@ -75,12 +75,12 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
         { value: '', disabled: true },
         Validators.required,
       ),
-      degreePlan: fb.control('', Validators.required),
     });
 
     this.chosenAuditSettings = fb.group({
       honorsOptions: fb.control('', Validators.required),
       includeCoursesFrom: fb.control('future', Validators.required),
+      degreePlan: fb.control('', Validators.required),
     });
 
     this.chosenCreditSettings = fb.array([]);
@@ -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.institutions$,
@@ -116,9 +121,8 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
       }),
     );
 
-    this.variableCreditCourses$ = (this.chosenProgram.get(
-      'degreePlan',
-    ) as FormControl).valueChanges.pipe(
+    // prettier-ignore
+    this.variableCreditCourses$ = (this.chosenAuditSettings.get('degreePlan') as FormControl).valueChanges.pipe(
       flatMap(plan => this.api.getAllCourses(plan.roadmapId)),
       map(courses => {
         return courses.filter(course => {
@@ -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 {
     const control = this.chosenProgram.get('institution');
     if (control !== null) {
@@ -176,7 +184,7 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
   }
 
   public roadmapId<T>(fallback: T): number | T {
-    const control = this.chosenProgram.get('degreePlan');
+    const control = this.chosenAuditSettings.get('degreePlan');
     if (control !== null) {
       return control.value.roadmapId;
     } else {