ROENROLL-1421

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

@@ -13,31 +13,31 @@
           </p>
           <span [ngSwitch]="status">
             <i
-              *ngSwitchCase="'Enrolled'"
+              *ngSwitchCase="'InProgress'"
               class="material-icons in-progress-icon"
               matTooltip="Course in progress"
-              matTooltipPosition="above"
-              >check_circle</i
-            >
+              matTooltipPosition="above">
+              check_circle
+            </i>
             <i
               *ngSwitchCase="'Waitlisted'"
               class="material-icons problem-icon"
               matTooltip="Course is waitlisted"
-              matTooltipPosition="above"
-              >report_problem</i
-            >
+              matTooltipPosition="above">
+                report_problem
+            </i>
             <i
               *ngSwitchCase="'Incomplete'"
               class="material-icons error-icon"
               matTooltip="Course is incomplete"
-              matTooltipPosition="above"
-              >error</i
-            >
+              matTooltipPosition="above">
+              error
+            </i>
           </span>
         </div>
       </div>
       <div fxLayout="row" fxLayoutAlign="start center">
-        <p class="course-title">{{ course.title }}</p>
+        <p class="course-title" [ngClass]="{ 'strikethrough': isStruckthrough }">{{ course.title }}</p>
       </div>
     </div>
 

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

@@ -30,6 +30,7 @@
     }
   }
 
+  .course-title.strikethrough,
   .course-number.strikethrough {
     text-decoration: line-through;
   }

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

@@ -38,7 +38,7 @@ export class CourseItemComponent implements OnInit {
   @Input() era?: unknown;
   visibleTerms: any;
   activeTerm: any;
-  status: string;
+  public status: 'InProgress' | 'Waitlisted' | 'Incomplete' | 'Normal';
   public visibleTermCodes$: Observable<string[]>;
   public droppableTermCodes$: Observable<string[]>;
   public term$: Observable<PlannedTerm>;
@@ -52,24 +52,25 @@ export class CourseItemComponent implements OnInit {
   ) {}
 
   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 = '';
-    }
-
-    const isPastOrActive = this.era === 'past' || this.era === 'active';
+    const isActive = this.era === 'active';
+    const isPast = this.era === 'past';
     const isNotOffered = this.course.studentEnrollmentStatus === 'NOTOFFERED';
-    this.isStruckthrough = isPastOrActive && isNotOffered;
+    this.isStruckthrough = (isPast || isActive) && isNotOffered;
+
+    const isIncomplete = isPast && this.course.grade === null;
+    const isWaitlisted = this.course.studentEnrollmentStatus === 'Waitlisted';
+    const isInProgress =
+      isActive && this.course.studentEnrollmentStatus === 'Enrolled';
+
+    if (isIncomplete) {
+      this.status = 'Incomplete';
+    } else if (isWaitlisted) {
+      this.status = 'Waitlisted';
+    } else if (isInProgress) {
+      this.status = 'InProgress';
+    } else {
+      this.status = 'Normal';
+    }
   }
 
   onMenuOpen() {