group terms inside year container

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

@@ -25,22 +25,13 @@
 		<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
 
 			<mat-accordion>
-				<mat-expansion-panel *ngFor="let term of terms" class="year-container"> <!--[expanded]="true"-->
+				<mat-expansion-panel *ngFor="let term of termsByAcademicYear | keyvalue" class="year-container"> <!--[expanded]="true"-->
 					<mat-expansion-panel-header>
 						<mat-panel-title>
-							{{ term.academicYear | academicYearState }}
+							{{ term.key | academicYearState }}
 						</mat-panel-title>
 					</mat-expansion-panel-header>
-					<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
-						<mat-card class="term-container" fxFlex="33%">
-							<div fxLayout="row" fxLayoutAlign="space-between stretch">
-								<h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold">Credits: 13</p>
-							</div>
-							<div style="background-color: #fff">
-								<app-term-container></app-term-container>
-							</div>
-						</mat-card>
-					</div>
+						<app-term-container [terms]="term.value"></app-term-container>
 				</mat-expansion-panel>
 			</mat-accordion>
 		</div>

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

@@ -3,16 +3,7 @@
 }
 
 mat-sidenav {
-	width: 280px;
-}
-
-.term-container {
-	background-color: #E1E1E1;
-}
-
-.term-container h2 {
-	color: #2879A8;
-	font-weight: 400;
+	width: 340px;
 }
 
 #menu-toggle-btn {

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

@@ -16,6 +16,7 @@ export class DegreePlannerComponent {
 	degreePlanCourses: Course[];
 	selectedDegreePlan: number;
 	terms: Term[];
+	termsByAcademicYear: Object;
 
 	constructor(private dataService: DataService) {
 		this.dataService.getDegreePlans()
@@ -32,6 +33,14 @@ export class DegreePlannerComponent {
 		this.dataService.getTerms()
 		.subscribe(terms => {
 			this.terms = terms;
+			this.termsByAcademicYear = {};
+			this.terms.forEach(term => {
+				if (this.termsByAcademicYear[term.academicYear]) {
+					this.termsByAcademicYear[term.academicYear].push(term);
+				} else {
+					this.termsByAcademicYear[term.academicYear] = [term];
+				}
+			});
 		});
 	}
 }

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

-<p>
-  term-container works!
-</p>
+<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
+    <mat-card class="term-container" *ngFor="let term of terms" fxFlex="33%">
+        <div fxLayout="row" fxLayoutAlign="space-between stretch">
+          <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold">Credits: 13</p>
+        </div>
+    </mat-card>
+</div>
\ No newline at end of file

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

+.term-container {
+	background-color: #E1E1E1;
+}
+
+.term-container h2 {
+	color: #2879A8;
+	font-weight: 400;
+}
\ No newline at end of file

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Term } from '../../core/models/term';
 
 @Component({
 	selector: 'app-term-container',
 	templateUrl: './term-container.component.html',
 	styleUrls: ['./term-container.component.scss']
 })
+
 export class TermContainerComponent implements OnInit {
+	@Input() terms: Term[];
 
 	constructor() { }
 
-	ngOnInit() {
-	}
-
+	ngOnInit() {	}
 }