ROENROLL-1362 Display appropriate icons for different course statuses

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 {

src/app/degree-planner/shared/course-item/course-item.component.html

-<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>

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;
 }

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

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">

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,

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>
 

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 {