From 69f414189e1b65ce53c564b7c7ce0ff1513e8298 Mon Sep 17 00:00:00 2001
From: Paulina Nogal <pnogal@wisc.edu>
Date: Mon, 18 Feb 2019 17:05:20 +0000
Subject: [PATCH] ROENROLL-1362 Display appropriate icons for different course
statuses
---
src/app/core/models/course.ts | 1 +
.../course-item/course-item.component.html | 14 +++++------
.../course-item/course-item.component.scss | 9 -------
.../course-item/course-item.component.ts | 24 ++++++++++++++++---
.../sidenav-menu-item.component.html | 7 +++---
src/app/degree-planner/store/selectors.ts | 13 ++++++++++
.../term-container.component.html | 2 +-
.../term-container.component.ts | 10 +++++++-
8 files changed, 55 insertions(+), 25 deletions(-)
diff --git a/src/app/core/models/course.ts b/src/app/core/models/course.ts
index a4e5c5c..841be59 100644
--- a/src/app/core/models/course.ts
+++ b/src/app/core/models/course.ts
@@ -26,6 +26,7 @@ export interface CourseBase {
enrollmentOptions?: any;
packageEnrollmentStatus?: any;
creditRange?: any;
+ studentEnrollmentStatus: 'Enrolled' | 'Waitlisted' | null;
}
export interface Course extends CourseBase {
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.html b/src/app/degree-planner/shared/course-item/course-item.component.html
index 6606072..b8b0e88 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.html
+++ b/src/app/degree-planner/shared/course-item/course-item.component.html
@@ -1,4 +1,4 @@
-<div class="course-item {{status}} {{disabled ? 'disabled' : ''}}">
+<div class="course-item {{disabled ? 'disabled' : ''}}">
<div fxLayout="row" fxLayoutAlign="space-between start">
<div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="80" (click)="openCourseDetailsDialog(course)">
@@ -7,12 +7,12 @@
<p class="course-number">
{{ course.subject }} {{course.catalogNumber}}
</p>
- <div [ngSwitch]="status">
- <i *ngSwitchCase="'in-progress'" class="material-icons in-progress-icon">check_circle</i>
- <i *ngSwitchCase="'waitlist'" class="material-icons problem-icon">report_problem</i>
- <i *ngSwitchCase="'incomplete'" class="material-icons error-icon">error</i>
- </div>
- </div>
+ <span [ngSwitch]="status">
+ <i *ngSwitchCase="'Enrolled'" class="material-icons in-progress-icon" matTooltip="Course in progress" matTooltipPosition="above">check_circle</i>
+ <i *ngSwitchCase="'Waitlisted'" class="material-icons problem-icon" matTooltip="Course is waitlisted" matTooltipPosition="above">report_problem</i>
+ <i *ngSwitchCase="'Incomplete'" class="material-icons error-icon" matTooltip="Course is incomplete" matTooltipPosition="above">error</i>
+ </span>
+ </div>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<p class="course-title">{{course.title}}</p>
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.scss b/src/app/degree-planner/shared/course-item/course-item.component.scss
index 8b173f5..1dff059 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.scss
+++ b/src/app/degree-planner/shared/course-item/course-item.component.scss
@@ -65,15 +65,6 @@
align-items: center;
}
-.not-offered {
- .course-number,
- .course-credits,
- .course-title {
- text-decoration: line-through;
- opacity: 0.8;
- }
-}
-
button.mat-menu-item {
text-transform: none !important;
}
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.ts b/src/app/degree-planner/shared/course-item/course-item.component.ts
index a9b486a..7dcfc5d 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.ts
+++ b/src/app/degree-planner/shared/course-item/course-item.component.ts
@@ -24,10 +24,13 @@ import { RemoveCourseConfirmDialogComponent } from '@app/degree-planner/dialogs/
})
export class CourseItemComponent implements OnInit {
@Input() course: Course;
- @Input() disabled: string;
+ @Input() isCurrentTerm: boolean;
+ @Input() isPastTerm: boolean;
+ @Input() disabled: boolean;
@Input() type: 'saved' | 'course' | 'search';
- status; // TODO make this work k thx plz!?
visibleTerms: any;
+ activeTerm: any;
+ status: string;
constructor(
private api: DegreePlannerApiService,
@@ -35,7 +38,22 @@ export class CourseItemComponent implements OnInit {
private store: Store<GlobalState>,
) {}
- ngOnInit() {}
+ ngOnInit() {
+ switch (true) {
+ case this.course.studentEnrollmentStatus === 'Enrolled' &&
+ this.isCurrentTerm:
+ this.status = 'Enrolled';
+ break;
+ case this.course.studentEnrollmentStatus === 'Waitlisted':
+ this.status = 'Waitlisted';
+ break;
+ case !this.course.grade && this.isPastTerm:
+ this.status = 'Incomplete';
+ break;
+ default:
+ this.status = '';
+ }
+ }
onMenuOpen() {
this.store
diff --git a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
index d2db734..8c8b15e 100644
--- a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
+++ b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
@@ -6,10 +6,9 @@
</mat-panel-title>
</mat-expansion-panel-header>
<ul id="course-key-list">
- <li><i class="material-icons in-progress-icon">check_circle</i> Course is currently in progress</li>
- <li><i class="material-icons problem-icon">report_problem</i> Course is waitlisted</li>
- <li><i class="material-icons error-icon">error</i> Course is incomplete</li>
- <li><i class="material-icons not-offered">remove</i>Course no longer offered in term</li>
+ <li><i class="material-icons in-progress-icon" matTooltip="Course in progress" matTooltipPosition="left">check_circle</i> Course is currently in progress</li>
+ <li><i class="material-icons problem-icon" matTooltip="Course is waitlisted" matTooltipPosition="left">report_problem</i> Course is waitlisted</li>
+ <li><i class="material-icons error-icon" matTooltip="Course is incomplete" matTooltipPosition="left">error</i> Course is incomplete</li>
</ul>
</mat-expansion-panel>
<mat-expansion-panel id="course-keys-container" expanded="true">
diff --git a/src/app/degree-planner/store/selectors.ts b/src/app/degree-planner/store/selectors.ts
index 01ce5da..0a1ee7b 100644
--- a/src/app/degree-planner/store/selectors.ts
+++ b/src/app/degree-planner/store/selectors.ts
@@ -6,6 +6,9 @@ import { GlobalState } from '@app/core/state';
import { Year } from '@app/core/models/year';
import { PlannedTerm } from '@app/core/models/planned-term';
import { DegreePlannerState } from './state';
+import { SelectorFlags } from '@angular/core/src/render3/interfaces/projection';
+import { fileURLToPath } from 'url';
+import { injectTemplateRef } from '@angular/core/src/render3/view_engine_compatibility';
export const getDegreePlannerState = ({ degreePlanner }: GlobalState) => {
return degreePlanner;
@@ -133,6 +136,16 @@ export const getActiveTerms = createSelector(
},
);
+export const isCurrentTerm = (termCode: string) =>
+ createSelector(
+ getDegreePlannerState,
+ (state: DegreePlannerState) => {
+ const currentTermCode = state.activeTermCodes[0];
+
+ return termCode === currentTermCode;
+ },
+ );
+
export const isPastTerm = (termCode: string) =>
createSelector(
getDegreePlannerState,
diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html
index 82a5eaf..72beb30 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -48,7 +48,7 @@
*ngFor="let course of term.courses"
>
<div class="course-wrapper-inner">
- <cse-course-item [course]="course" type="course" [disabled]="(isPastTerm$ | async) || course.id === null"></cse-course-item>
+ <cse-course-item [course]="course" type="course" [disabled]="(isPastTerm$ | async) || course.id === null" [isPastTerm]="(isPastTerm$ | async)" [isCurrentTerm]="(isCurrentTerm$ | async)"></cse-course-item>
</div>
</div>
diff --git a/src/app/degree-planner/term-container/term-container.component.ts b/src/app/degree-planner/term-container/term-container.component.ts
index d856aff..f572ff3 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/src/app/degree-planner/term-container/term-container.component.ts
@@ -25,7 +25,11 @@ import {
} from '@app/degree-planner/store/actions/ui.actions';
// Selectors
-import { getDropZones, isPastTerm } from '@app/degree-planner/store/selectors';
+import {
+ getDropZones,
+ isCurrentTerm,
+ isPastTerm,
+} from '@app/degree-planner/store/selectors';
// Services
import { SidenavService } from './../../core/service/sidenav.service';
@@ -46,6 +50,7 @@ export class TermContainerComponent implements OnInit {
@Input() term: PlannedTerm;
public dropZones$: Observable<String[]>;
public isPastTerm$: Observable<Boolean>;
+ public isCurrentTerm$: Observable<Boolean>;
constructor(
public dialog: MatDialog,
@@ -56,6 +61,9 @@ export class TermContainerComponent implements OnInit {
public ngOnInit() {
this.dropZones$ = this.store.pipe(select(getDropZones));
this.isPastTerm$ = this.store.pipe(select(isPastTerm(this.term.termCode)));
+ this.isCurrentTerm$ = this.store.pipe(
+ select(isCurrentTerm(this.term.termCode)),
+ );
}
public openAddSidenav(): void {
--
GitLab