ROENROLL-1421

src/app/core/models/course.ts

@@ -29,9 +29,9 @@ export interface CourseBase {
   studentEnrollmentStatus:
     | 'Enrolled'
     | 'Waitlisted'
-    | 'Cart'
-    | 'Not Offered'
-    | null;
+    | 'cart'
+    | 'NOTOFFERED'
+    | 'DOESNOTEXIST';
 }
 
 export interface Course extends CourseBase {

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

@@ -8,7 +8,7 @@
     >
       <div fxLayout="row" fxLayoutAlign="start center">
         <div class="icon-number-wrapper">
-          <p class="course-number">
+          <p class="course-number" [ngClass]="{ 'strikethrough': isStruckthrough }">
             {{ course.subject }} {{ course.catalogNumber }}
           </p>
           <span [ngSwitch]="status">

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

@@ -30,6 +30,10 @@
     }
   }
 
+  .course-number.strikethrough {
+    text-decoration: line-through;
+  }
+
   p {
     margin: 0;
     padding: 0;

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

@@ -18,7 +18,7 @@ import { ConfirmDialogComponent } from '@app/shared/dialogs/confirm-dialog/confi
 import { CourseDetailsDialogComponent } from '@app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component';
 import { distinctUntilChanged, filter } from 'rxjs/operators';
 import { TermCode } from '@app/core/models/termcode';
-import { PlannedTerm } from '@app/core/models/planned-term';
+import { PlannedTerm, PlannedTermEra } from '@app/core/models/planned-term';
 
 const isntUndefined = <T>(thing: T | undefined): thing is T => {
   return thing !== undefined;
@@ -35,6 +35,7 @@ export class CourseItemComponent implements OnInit {
   @Input() isPastTerm: boolean;
   @Input() disabled: boolean;
   @Input() type: 'saved' | 'course' | 'search';
+  @Input() era?: unknown;
   visibleTerms: any;
   activeTerm: any;
   status: string;
@@ -42,6 +43,7 @@ export class CourseItemComponent implements OnInit {
   public droppableTermCodes$: Observable<string[]>;
   public term$: Observable<PlannedTerm>;
   public plannedCourses: Course[];
+  public isStruckthrough = false;
 
   constructor(
     private api: DegreePlannerApiService,
@@ -64,6 +66,10 @@ export class CourseItemComponent implements OnInit {
       default:
         this.status = '';
     }
+
+    const isPastOrActive = this.era === 'past' || this.era === 'active';
+    const isNotOffered = this.course.studentEnrollmentStatus === 'NOTOFFERED';
+    this.isStruckthrough = isPastOrActive && isNotOffered;
   }
 
   onMenuOpen() {

src/app/degree-planner/term-container/term-container.component.html

@@ -7,7 +7,13 @@
                 <p *ngIf="(term$ | async).era === 'active'" class="no-courses">Not enrolled in any courses</p>
               </ng-container>
 
-            <cse-course-item *ngFor="let course of enrolledCourses" type="course" [disabled]="true" [course]="course"></cse-course-item>
+            <cse-course-item
+              *ngFor="let course of enrolledCourses"
+              type="course"
+              [disabled]="true"
+              [course]="course"
+              [era]="(term$ | async).era">
+            </cse-course-item>
           </div>
         </div>
   </div>
@@ -36,7 +42,11 @@
               class="course-wrapper"
               *ngFor="let course of plannedCourses"
             >
-              <cse-course-item type="course" [course]="course"></cse-course-item>
+              <cse-course-item
+                type="course"
+                [course]="course"
+                [era]="(term$ | async).era">
+              </cse-course-item>
             </div>
           </div>
         </div>