Update isActiveTerm to be isPastTerm, update drop zones to use visible terms and not current terms.

src/app/degree-planner/store/selectors.ts

@@ -79,20 +79,29 @@ export const getAllVisibleTermsByYear = createSelector(
 export const getDropZones = createSelector(
   getDegreePlannerState,
   (state: DegreePlannerState) => {
+    // Get the most recent active term
+    const currentTermCode = state.activeTermCodes[0];
+
+    // Get only current / future terms
+    const activeTerms = state.visibleTerms.filter(
+      term => term.termCode >= currentTermCode,
+    );
+
+    // Return a list of current and future drop zone ID's
     return [
       'saved-courses',
-      ...state.activeTermCodes.map(termCode => {
-        return `term-${termCode}`;
-      }),
+      ...activeTerms.map(term => `term-${term.termCode}`),
     ];
   },
 );
 
-export const isActiveTerm = (termCode: string) =>
+export const isPastTerm = (termCode: string) =>
   createSelector(
     getDegreePlannerState,
     (state: DegreePlannerState) => {
-      return state.activeTermCodes.includes(termCode);
+      const currentTermCode = state.activeTermCodes[0];
+
+      return termCode < currentTermCode;
     },
   );
 

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

@@ -43,12 +43,12 @@
 			<div 
 				class="course-wrapper" 
 				cdkDrag
-				[cdkDragDisabled]="!(isActiveTerm$ | async) || course.id === null"
+				[cdkDragDisabled]="(isPastTerm$ | async) || course.id === null"
 				[cdkDragData]="course" 
 				*ngFor="let course of term.courses"
 			>
 				<div class="course-wrapper-inner">
-					<cse-course-item [course]="course" type="course" [disabled]="!(isActiveTerm$ | async) || course.id === null"></cse-course-item>
+					<cse-course-item [course]="course" type="course" [disabled]="(isPastTerm$ | async) || course.id === null"></cse-course-item>
 				</div>
 			</div>
 
@@ -57,7 +57,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="add-new-wrapper" *ngIf="isActiveTerm$ | async">
+	<div class="add-new-wrapper" *ngIf="!(isPastTerm$ | async)">
 		<button mat-raised-button (click)="openAddSidenav()" class="add-course-button">+ Add Course</button>
 	</div>
 </mat-card>
\ No newline at end of file

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

@@ -19,10 +19,7 @@ import {
 } from '@app/degree-planner/store/actions/course.actions';
 
 // Selectors
-import {
-  getDropZones,
-  isActiveTerm,
-} from '@app/degree-planner/store/selectors';
+import { getDropZones, isPastTerm } from '@app/degree-planner/store/selectors';
 
 // Services
 import { SidenavService } from './../../core/service/sidenav.service';
@@ -42,7 +39,7 @@ import {
 export class TermContainerComponent implements OnInit {
   @Input() term: PlannedTerm;
   public dropZones$: Observable<String[]>;
-  public isActiveTerm$: Observable<Boolean>;
+  public isPastTerm$: Observable<Boolean>;
 
   constructor(
     public dialog: MatDialog,
@@ -52,9 +49,7 @@ export class TermContainerComponent implements OnInit {
 
   public ngOnInit() {
     this.dropZones$ = this.store.pipe(select(getDropZones));
-    this.isActiveTerm$ = this.store.pipe(
-      select(isActiveTerm(this.term.termCode)),
-    );
+    this.isPastTerm$ = this.store.pipe(select(isPastTerm(this.term.termCode)));
   }
 
   public openAddSidenav(): void {