diff --git a/src/app/degree-planner/store/selectors.ts b/src/app/degree-planner/store/selectors.ts index f5c2c9f44691e8402934f526c1294e8809eb552c..67ba809f35b11388913fbe9ac8c9b69b835fe3ff 100644 --- a/src/app/degree-planner/store/selectors.ts +++ b/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; }, ); diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html index f3f013ff1598a5e30e4bb4da1ed01ceb2a5b8dbb..97a445d1b0c0db68e15520ae8e2cceeee4ae92f2 100644 --- a/src/app/degree-planner/term-container/term-container.component.html +++ b/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 diff --git a/src/app/degree-planner/term-container/term-container.component.ts b/src/app/degree-planner/term-container/term-container.component.ts index 2f2eb56198bf588c3bf8b7d9a326ed260a4089be..15a64bba5e4b9ba43c88728fc22b69a3add2e5e7 100644 --- a/src/app/degree-planner/term-container/term-container.component.ts +++ b/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 {