From d2c411ecf9d911658301fe571dca64d487f18b66 Mon Sep 17 00:00:00 2001
From: ievavold <ievavold@wisc.edu>
Date: Tue, 5 Feb 2019 10:06:56 -0600
Subject: [PATCH] pass cutoff-term to 'academicYearState' pipe via parameter
---
.../degree-planner.component.html | 4 +-
.../degree-planner.component.ts | 95 ++++++++++---------
.../degree-planner/effects/plan.effects.ts | 5 +-
src/app/degree-planner/selectors.ts | 11 +++
.../shared/pipes/academic-year-state.pipe.ts | 21 +---
5 files changed, 67 insertions(+), 69 deletions(-)
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index c7587bd..fbb2212 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -25,12 +25,12 @@
</div>
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
- <mat-accordion multi="true">
+ <mat-accordion multi="true" *ngIf="(firstActiveTermCode$ | async) as cutoffTermCode">
<ng-container *ngFor="let year of termsByYear$ | async">
<mat-expansion-panel class="year-container"[expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
- {{ year.twoDigitYearCode | academicYearState }}
+ {{ year.twoDigitYearCode | academicYearState:cutoffTermCode }}
</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" class="term-container-wrapper">
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index ea74db3..58d2f4d 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -14,65 +14,68 @@ import { Year } from '@app/core/models/year';
// Selectors
import {
- getAllDegreePlans,
- getVisibleRoadmapId,
- getAllVisibleTermsByYear
+ getAllDegreePlans,
+ getVisibleRoadmapId,
+ firstActiveTermCode,
+ getAllVisibleTermsByYear,
} from '@app/degree-planner/selectors';
// Actions
import { ChangeVisiblePlanRequest } from '@app/degree-planner/actions/plan.actions';
@Component({
- selector: 'cse-degree-planner',
- templateUrl: './degree-planner.component.html',
- styleUrls: ['./degree-planner.component.scss']
+ selector: 'cse-degree-planner',
+ templateUrl: './degree-planner.component.html',
+ styleUrls: ['./degree-planner.component.scss'],
})
export class DegreePlannerComponent implements OnInit {
- public termsByAcademicYear: Object;
- public mobileView: MediaQueryList;
- public coursesData$: any;
+ public termsByAcademicYear: Object;
+ public mobileView: MediaQueryList;
+ public coursesData$: any;
- public visibleRoadmapId$: Observable<number | undefined>;
- public allDegreePlans$: Observable<DegreePlan[]>;
- public termsByYear$: Observable<Year[]>;
+ public visibleRoadmapId$: Observable<number | undefined>;
+ public allDegreePlans$: Observable<DegreePlan[]>;
+ public firstActiveTermCode$: Observable<string | undefined>;
+ public termsByYear$: Observable<Year[]>;
- constructor(
- private store: Store<GlobalState>,
- public mediaMatcher: MediaMatcher
- ) {
- this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
- }
+ constructor(
+ private store: Store<GlobalState>,
+ public mediaMatcher: MediaMatcher,
+ ) {
+ this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
+ }
- public ngOnInit() {
- this.visibleRoadmapId$ = this.store.pipe(select(getVisibleRoadmapId));
- this.allDegreePlans$ = this.store.pipe(select(getAllDegreePlans));
- this.termsByYear$ = this.store.pipe(select(getAllVisibleTermsByYear));
- }
+ public ngOnInit() {
+ this.visibleRoadmapId$ = this.store.pipe(select(getVisibleRoadmapId));
+ this.allDegreePlans$ = this.store.pipe(select(getAllDegreePlans));
+ this.firstActiveTermCode$ = this.store.pipe(select(firstActiveTermCode));
+ this.termsByYear$ = this.store.pipe(select(getAllVisibleTermsByYear));
+ }
- public handleDegreePlanChange(event: MatSelectChange): void {
- if (typeof event.value === 'number') {
- this.store.dispatch(
- new ChangeVisiblePlanRequest({ newVisibleRoadmapId: event.value })
- );
- }
- }
+ public handleDegreePlanChange(event: MatSelectChange): void {
+ if (typeof event.value === 'number') {
+ this.store.dispatch(
+ new ChangeVisiblePlanRequest({ newVisibleRoadmapId: event.value }),
+ );
+ }
+ }
- public getTermDropZone() {
- const termCodes = ['favoriteCourse-dropZone'];
+ public getTermDropZone() {
+ const termCodes = ['favoriteCourse-dropZone'];
- for (const yearCode in this.termsByAcademicYear) {
- if (this.termsByAcademicYear[yearCode]) {
- const year = this.termsByAcademicYear[yearCode];
- for (const termKey in year.terms) {
- if (year.terms[termKey]) {
- const term = year.terms[termKey];
- termCodes.push('term-' + term.termCode);
- }
- }
- }
- }
- // console.log(termCodes);
+ for (const yearCode in this.termsByAcademicYear) {
+ if (this.termsByAcademicYear[yearCode]) {
+ const year = this.termsByAcademicYear[yearCode];
+ for (const termKey in year.terms) {
+ if (year.terms[termKey]) {
+ const term = year.terms[termKey];
+ termCodes.push('term-' + term.termCode);
+ }
+ }
+ }
+ }
+ // console.log(termCodes);
- return termCodes;
- }
+ return termCodes;
+ }
}
diff --git a/src/app/degree-planner/effects/plan.effects.ts b/src/app/degree-planner/effects/plan.effects.ts
index 23def49..c6561f5 100644
--- a/src/app/degree-planner/effects/plan.effects.ts
+++ b/src/app/degree-planner/effects/plan.effects.ts
@@ -8,10 +8,7 @@ import { Store } from '@ngrx/store';
// Services
import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
-import {
- getDegreePlannerState,
- getVisibleRoadmapId,
-} from '@app/degree-planner/selectors';
+import { getDegreePlannerState } from '@app/degree-planner/selectors';
// Actions
import {
diff --git a/src/app/degree-planner/selectors.ts b/src/app/degree-planner/selectors.ts
index bcfae85..b50e153 100644
--- a/src/app/degree-planner/selectors.ts
+++ b/src/app/degree-planner/selectors.ts
@@ -17,6 +17,17 @@ export const getSavedForLaterCourses = createSelector(
state => state.savedForLaterCourses,
);
+export const firstActiveTermCode = createSelector(
+ getDegreePlannerState,
+ state => {
+ if (state.activeTermCodes.length > 0) {
+ return state.activeTermCodes[0];
+ } else {
+ return undefined;
+ }
+ },
+);
+
export const getAllDegreePlans = createSelector(
getDegreePlannerState,
state => state.allDegreePlans,
diff --git a/src/app/shared/pipes/academic-year-state.pipe.ts b/src/app/shared/pipes/academic-year-state.pipe.ts
index 142b1c9..cfb3f88 100644
--- a/src/app/shared/pipes/academic-year-state.pipe.ts
+++ b/src/app/shared/pipes/academic-year-state.pipe.ts
@@ -1,32 +1,19 @@
import { Pipe, PipeTransform } from '@angular/core';
-import { GlobalState } from '@app/core/state';
-import { State, select } from '@ngrx/store';
-
-import { getAllVisibleTerms } from './../../degree-planner/selectors';
-import { PlannedTerm } from './../../core/models/planned-term';
@Pipe({
name: 'academicYearState',
})
export class AcademicYearStatePipe implements PipeTransform {
- terms: PlannedTerm[];
- constructor(private store: State<GlobalState>) {
- this.store
- .pipe(select(getAllVisibleTerms))
- .subscribe(terms => (this.terms = terms));
- }
-
- transform(year: string): string {
- const termCode = this.terms[0].termCode;
+ transform(year: string, cutoffTermCode: string): string {
let century = 2000;
- if (termCode.substr(0, 1) === '0') {
+ if (cutoffTermCode.substr(0, 1) === '0') {
century = 1900;
}
const YYYY = century + Number(year);
- if (year < termCode.substr(1, 2)) {
+ if (year < cutoffTermCode.substr(1, 2)) {
return 'Past: ' + (YYYY - 1) + '-' + YYYY;
- } else if (year > termCode.substr(1, 2)) {
+ } else if (year > cutoffTermCode.substr(1, 2)) {
return 'Future: ' + (YYYY - 1) + '-' + YYYY;
} else {
return 'Current: ' + (YYYY - 1) + '-' + YYYY;
--
GitLab