Determine past terms and disable past courses.

src/app/core/data.service.ts

 import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { throwError, Observable } from 'rxjs';
+import { throwError, Observable, forkJoin } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { ConfigService } from './config.service';
 import { Course } from './models/course';
@@ -26,6 +26,13 @@ export class DataService {
 		this.searchApiUrl = this.configService.apiSearchUrl;
 	}
 
+	getAllPlanData() {
+		return forkJoin(
+			this.getDegreePlannerCourseData(),
+			this.getTerms()
+		);
+	}
+
 	getDegreePlans(): Observable<DegreePlan[]> {
 		return this.http.get<DegreePlan[]>(this.plannerApiUrl + '/degreePlan')
 			.pipe(catchError(this.errorHandler));

src/app/core/models/note.ts

@@ -2,4 +2,4 @@ export interface Note {
 	id: number;
 	termCode: string;
 	note: string;
-}
\ No newline at end of file
+}

src/app/degree-planner/degree-planner.component.ts

@@ -20,36 +20,46 @@ export class DegreePlannerComponent {
 	termsByAcademicYear: Object;
 	subjectsMap: Object;
 	notes: Note[];
+	firstCurrentTerm: null|string;
+
 
 	constructor(private dataService: DataService) {
+		this.firstCurrentTerm = null;
+
 		this.dataService.getDegreePlans()
 		.subscribe(data => {
 			this.degreePlans = data;
 			this.selectedDegreePlan = this.degreePlans[0].roadmapId;
 		});
 
-		this.dataService.getDegreePlannerCourseData()
-		.subscribe(degreePlanCourses => {
-			this.degreePlanCourses = degreePlanCourses;
+		this.dataService.getAllPlanData()
+		.subscribe(data => {
+			// Seperate the data from the forked API calls
+			this.degreePlanCourses = data[0];
+			this.terms = data[1];
+
+			// Loop over the current terms and determine the current / future terms
+			for (const term of this.terms) {
+				if (this.firstCurrentTerm === null || parseInt(term.termCode, 10) < parseInt(this.firstCurrentTerm, 10)) {
+					this.firstCurrentTerm = term.termCode;
+				}
+			}
 
+			// Create the global data object
 			this.termsByAcademicYear = {};
 
-			for (const course of degreePlanCourses) {
+			// Loop over all the courses, creating a placeholder year if one doesn't exsist
+			for (const course of this.degreePlanCourses) {
 				// Get the 3 digit year code and 1 digit term code
 				const year = course.termCode.substring(0, 3);
 				const termCode = course.termCode.substring(3);
 
+				// Create and add a placeholder year to the data object
 				if (!this.termsByAcademicYear[year]) {
-					this.termsByAcademicYear[year] = {
-						year: year,
-						terms: {
-							2: { termCode: `${year}2`, courses: []},
-							4: { termCode: `${year}4`, courses: []},
-							6: { termCode: `${year}6`, courses: []}
-						}
-					};
+					this.termsByAcademicYear[year] = this.getYearObject(year);
 				}
 
+				// Add the course to the proper year > term
 				this.termsByAcademicYear[year].terms[termCode].courses.push(course);
 			}
 		});
@@ -72,15 +82,22 @@ export class DegreePlannerComponent {
 		});
 	}
 
-	updateCourses() {
-		for (const course of this.degreePlanCourses) {
-			const yearCode = course.termCode.substring(0, 3);
-			const termCode = course.termCode.substring(3);
-
-			if (this.termsByAcademicYear[yearCode] && this.termsByAcademicYear[yearCode].terms[termCode]) {
-				this.termsByAcademicYear[yearCode].terms[termCode].courses.push(course);
-			}
+	// Create a new year object to be used in this.termsByAcademicYear
+	getYearObject(yearCode) {
+		const year = {
+			year: yearCode,
+			terms: {}
+		};
+
+		for (const termCode of ['2', '4', '6']) {
+			year.terms[termCode] = {
+				termCode: `${yearCode}${termCode}`,
+				courses: [],
+				pastTerm: (this.firstCurrentTerm && parseInt(this.firstCurrentTerm, 10) > parseInt(`${yearCode}${termCode}`, 10)) ? true : false
+			};
 		}
+
+		return year;
 	}
 
 	getCoursesByTerm(termCode) {

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

-<div class="course-item {{status}}">
+<div class="course-item {{status}} {{disabled ? 'disabled' : ''}}">
   <div class="course-row course-info">
     <div class="icon-number-wrapper">
         <p class="course-number">

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

@@ -21,9 +21,8 @@
     }
 
     &.disabled {
-        background-color: #C7CACB;
-        border-color: #C7CACB;
-        cursor: default;
+        background-color: #dee1e2;
+        border-color: #dee1e2;
         box-shadow: none;
 
         .course-credits,

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

@@ -10,6 +10,7 @@ export class CourseItemComponent {
 	@Input() course: Course;
 	@Input() status: string;
 	@Input() subject: string;
+	@Input() disabled: string;
 
 	constructor() {}
 

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

@@ -10,6 +10,7 @@
             </div>
         </div>
         <div
+            *ngIf="!term.pastTerm"
             cdkDropList
             id="term-{{term.termCode}}"
             [cdkDropListData]="courses"
@@ -31,8 +32,31 @@
                 </div>
             </div>
         </div>
+        <div
+            *ngIf="term.pastTerm"
+            id="term-{{term.termCode}}"
+            class="course-list"
+        >
+            <div *ngIf="noteForTerm()" class="note-item" (click)="openNotesDialog()">
+                <p class="semi-bold">Note</p>
+                <p class="note-excerpt">{{ note.note }}</p>
+            </div>
+            <div class="course-wrapper" *ngFor="let course of courses">
+                <div class="course-wrapper-inner">
+                    <cse-course-item 
+                        [course]="course"
+                        [disabled]="true"
+                        (click)="openCourseDetailsDialog(course)" 
+                        [status]="'in-progress'"
+                        [subject]="subjectsMap[course.subjectCode]"
+                    ></cse-course-item>
+                </div>
+            </div>
+            <p *ngIf="!courses || courses.length === 0" class="no-courses text-center semi-bold">No Courses Taken</p>
+        </div>
     </div>
-    <div class="add-new-wrapper">
+
+    <div *ngIf="!term.pastTerm" class="add-new-wrapper">
         <button mat-raised-button>+ Add Course</button>
     </div>
 </mat-card>
\ No newline at end of file

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

@@ -26,7 +26,7 @@ export class TermContainerComponent {
 	@Input() refreshNotes;
 
 	terms: any[];
-	note: Object;
+	note: Note;
 
 	constructor(private dataService: DataService, public dialog: MatDialog,
 		private cdRef: ChangeDetectorRef) {