From 838cba4e6f2356b05eb48041795a1ba0a1a36a18 Mon Sep 17 00:00:00 2001
From: ievavold <ievavold@wisc.edu>
Date: Mon, 4 Feb 2019 12:28:16 -0600
Subject: [PATCH] show star next to primary degree plan
---
.../degree-planner.component.html | 14 +++++++++--
.../degree-planner.component.scss | 24 +++++++++++++++++++
.../degree-planner.component.ts | 3 +++
3 files changed, 39 insertions(+), 2 deletions(-)
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index fbb2212..d4eec22 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -9,11 +9,21 @@
<mat-form-field>
<mat-select
placeholder="Degree Plans"
+ class="degree-plan-selector"
[value]="visibleRoadmapId$ | async"
[disableOptionCentering]="true"
(selectionChange)="handleDegreePlanChange($event)">
- <mat-option *ngFor="let degreePlan of allDegreePlans$ | async" [value]="degreePlan.roadmapId">
- {{ degreePlan.name }}
+
+ <!-- Render the name of the currently visible degree plan. -->
+ <mat-select-trigger *ngIf="(visibleDegreePlan$ | async) as degreePlan">
+ <mat-icon class="primary-star" *ngIf="degreePlan.primary">star_rate</mat-icon>
+ <span class="plan-name">{{degreePlan.name}}</span>
+ </mat-select-trigger>
+
+ <!-- Show all degree plans in the dropdown list and ddd a star next to the user's primary plan. -->
+ <mat-option *ngFor="let degreePlan of (allDegreePlans$ | async)" [value]="degreePlan.roadmapId">
+ <mat-icon class="primary-star" *ngIf="degreePlan.primary">star_rate</mat-icon>
+ <span class="plan-name">{{degreePlan.name}}</span>
</mat-option>
</mat-select>
</mat-form-field>
diff --git a/src/app/degree-planner/degree-planner.component.scss b/src/app/degree-planner/degree-planner.component.scss
index 514a7ac..8f3e646 100644
--- a/src/app/degree-planner/degree-planner.component.scss
+++ b/src/app/degree-planner/degree-planner.component.scss
@@ -15,6 +15,30 @@ mat-sidenav {
background-color: #F0F0F0;
}
+.degree-plan-selector {
+ height: 27px;
+
+ 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;
+ }
+}
+
@media screen and (max-width: 600px) {
#menu-toggle-btn {
position: relative;
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index 4444659..511b3f1 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -18,6 +18,7 @@ import {
getVisibleRoadmapId,
firstActiveTermCode,
getAllVisibleTermsByYear,
+ getVisibleDegreePlan,
} from '@app/degree-planner/store/selectors';
// Actions
@@ -34,6 +35,7 @@ export class DegreePlannerComponent implements OnInit {
public coursesData$: any;
public visibleRoadmapId$: Observable<number | undefined>;
+ public visibleDegreePlan$: Observable<DegreePlan | undefined>;
public allDegreePlans$: Observable<DegreePlan[]>;
public firstActiveTermCode$: Observable<string | undefined>;
public termsByYear$: Observable<Year[]>;
@@ -47,6 +49,7 @@ export class DegreePlannerComponent implements OnInit {
public ngOnInit() {
this.visibleRoadmapId$ = this.store.pipe(select(getVisibleRoadmapId));
+ this.visibleDegreePlan$ = this.store.pipe(select(getVisibleDegreePlan));
this.allDegreePlans$ = this.store.pipe(select(getAllDegreePlans));
this.firstActiveTermCode$ = this.store.pipe(select(firstActiveTermCode));
this.termsByYear$ = this.store.pipe(select(getAllVisibleTermsByYear));
--
GitLab