ROENROLL-1359

src/app/core/models/year.ts

 import { PlannedTerm } from '@app/core/models/planned-term';
 
 export interface Year {
-	century: 0 | 1;
-	twoDigitYearCode: number;
-	fall: PlannedTerm;
-	spring: PlannedTerm;
-	summer: PlannedTerm;
+  century: 0 | 1;
+  twoDigitYearCode: number;
+  fall: PlannedTerm;
+  spring: PlannedTerm;
+  summer: PlannedTerm;
+  expandedState: boolean;
 }

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

@@ -45,7 +45,7 @@
 		<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
 			<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 class="year-container" [expanded]="year.expandedState"  (opened)="handleAcademicYearToggle(year)" (closed)="handleAcademicYearToggle(year)">
 						<mat-expansion-panel-header>
 							<mat-panel-title>
 								{{ year.twoDigitYearCode | academicYearState:cutoffTermCode }}

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

+import { tap } from 'rxjs/operators';
 // Libraries
 import { OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { select } from '@ngrx/store';
 import { Component } from '@angular/core';
-import { MatSelectChange } from '@angular/material';
+import {
+  MatSelectChange,
+  MatExpansionPanelState,
+  MatExpansionPanel,
+} from '@angular/material';
 import { MatDialog } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { MediaMatcher } from '@angular/cdk/layout';
@@ -30,6 +35,7 @@ import {
 } from '@app/degree-planner/store/actions/plan.actions';
 
 import { ModifyPlanDialogComponent } from './dialogs/modify-plan-dialog/modify-plan-dialog.component';
+import { ToggleAcademicYear } from './store/actions/ui.actions';
 
 @Component({
   selector: 'cse-degree-planner',
@@ -65,6 +71,12 @@ export class DegreePlannerComponent implements OnInit {
     this.termsByYear$ = this.store.pipe(select(getAllVisibleTermsByYear));
   }
 
+  public handleAcademicYearToggle(year: Year): void {
+    // this.store.dispatch(
+    // new ToggleAcademicYear({ year: year.twoDigitYearCode.toString() }),
+    // );
+  }
+
   public handleDegreePlanChange(event: MatSelectChange): void {
     if (typeof event.value === 'number') {
       this.store.dispatch(new SwitchPlan({ newVisibleRoadmapId: event.value }));

src/app/degree-planner/store/actions/ui.actions.ts

+import { Action } from '@ngrx/store';
+
+export enum UIActionTypes {
+  ToggleAcademicYear = '[UI] Toggle Academic Year',
+}
+
+export class ToggleAcademicYear implements Action {
+  public readonly type = UIActionTypes.ToggleAcademicYear;
+  constructor(public payload: { year: string }) {}
+}

src/app/degree-planner/store/effects/plan.effects.ts

+import { tap } from 'rxjs/operators';
 // Libraries
 import { Injectable } from '@angular/core';
 import { ROOT_EFFECTS_INIT, Actions, Effect, ofType } from '@ngrx/effects';
@@ -81,6 +82,18 @@ export class DegreePlanEffects {
       });
     }),
 
+    map(payload => {
+      const allTerms = payload.visibleTerms.map(term => term.termCode);
+      const currentIndex = allTerms.indexOf(payload.activeTermCodes[0]);
+      const expandedTerms = allTerms.slice(currentIndex - allTerms.length);
+      const expandedYearsDups = expandedTerms.map(term => term.substr(1, 2));
+      const expandedYears = expandedYearsDups.filter(function(item, pos, self) {
+        return self.indexOf(item) === pos;
+      });
+
+      return { ...payload, expandedYears };
+    }),
+
     map(payload => new InitialLoadSuccess(payload)),
 
     catchError(error => {
@@ -278,3 +291,7 @@ const pickPrimaryDegreePlan = (plans: DegreePlan[]): DegreePlan => {
   const primary = plans.find(plan => plan.primary);
   return primary ? primary : plans[0];
 };
+
+const checkExpanded = (activeTermCodes, visibleTerms) => {
+  console.log(visibleTerms);
+};

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

+import { UIActionTypes } from './actions/ui.actions';
 import {
   DegreePlannerState,
   INITIAL_DEGREE_PLANNER_STATE,
@@ -29,6 +30,7 @@ import {
   AddAcademicYearActionTypes,
   AddAcademicYearRequest,
 } from '@app/degree-planner/store/actions/addAcademicYear.actions';
+import { ToggleAcademicYear } from '@app/degree-planner/store/actions/ui.actions';
 import { SavedForLaterCourse } from '@app/core/models/saved-for-later-course';
 import { DegreePlan } from '@app/core/models/degree-plan';
 
@@ -47,7 +49,8 @@ type SupportedActions =
   | MakePlanPrimarySuccess
   | MakePlanPrimaryFailure
   | ChangePlanNameSuccess
-  | ChangePlanNameFailure;
+  | ChangePlanNameFailure
+  | ToggleAcademicYear;
 
 export function degreePlannerReducer(
   state = INITIAL_DEGREE_PLANNER_STATE,
@@ -93,6 +96,13 @@ export function degreePlannerReducer(
       return { ...state, visibleTerms: newVisibleTerms };
     }
 
+    /**
+     * The `ToggleAcademicYear` action toggles the expand/collapse UI state
+     */
+    case UIActionTypes.ToggleAcademicYear: {
+      return { ...state };
+    }
+
     /**
      * The `WriteNoteResponse` action is dispatched by the `Note.write$` effect
      * upon a successful response from the `updateNote` or `createNote` API

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

@@ -76,6 +76,8 @@ export const getAllVisibleTermsByYear = createSelector(
         fall: getTermForCode(`${year}2`, state.visibleTerms),
         spring: getTermForCode(`${year}4`, state.visibleTerms),
         summer: getTermForCode(`${year}6`, state.visibleTerms),
+        expandedState:
+          state.expandedYears.indexOf(twoDigitYearCode.toString()) > -1,
       };
     });
   },

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

@@ -11,6 +11,7 @@ export interface DegreePlannerState {
   activeTermCodes: string[];
   allDegreePlans: DegreePlan[];
   subjects: SubjectMapping;
+  expandedYears: string[];
 }
 
 export const INITIAL_DEGREE_PLANNER_STATE: DegreePlannerState = {
@@ -20,4 +21,5 @@ export const INITIAL_DEGREE_PLANNER_STATE: DegreePlannerState = {
   activeTermCodes: [],
   allDegreePlans: [],
   subjects: {},
+  expandedYears: [],
 };