Refactor Term Container and Course Item

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

@@ -25,13 +25,15 @@
 		<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
 
 			<mat-accordion>
-				<mat-expansion-panel *ngFor="let term of termsByAcademicYear | keyvalue" class="year-container"> <!--[expanded]="true"-->
+				<mat-expansion-panel *ngFor="let year of termsByAcademicYear | keyvalue" class="year-container"> <!--[expanded]="true"-->
 					<mat-expansion-panel-header>
 						<mat-panel-title>
-							{{ term.key | academicYearState }}
+							{{ termsByAcademicYear[year.key].year | academicYearState }}
 						</mat-panel-title>
 					</mat-expansion-panel-header>
-						<app-term-container [terms]="term.value"></app-term-container>
+					<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
+						<app-term-container *ngFor="let term of termsByAcademicYear[year.key].terms" [term]="term" fxFlex="33%"></app-term-container>
+					</div>
 				</mat-expansion-panel>
 			</mat-accordion>
 		</div>

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

@@ -35,10 +35,15 @@ export class DegreePlannerComponent {
 			this.terms = terms;
 			this.termsByAcademicYear = {};
 			this.terms.forEach(term => {
-				if (this.termsByAcademicYear[term.academicYear]) {
-					this.termsByAcademicYear[term.academicYear].push(term);
+				const year = term.termCode.substring(0, 3);
+
+				if (this.termsByAcademicYear[year]) {
+					this.termsByAcademicYear[year].terms.push(term);
 				} else {
-					this.termsByAcademicYear[term.academicYear] = [term];
+					this.termsByAcademicYear[year] = {
+						year: year,
+						terms: [term]
+					};
 				}
 			});
 		});

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

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DegreePlannerComponent } from './degree-planner.component';
 import { SharedModule } from '../shared/shared.module';
+import {SharedDegreePlannerModule} from './shared/shared.module';
 import { DegreePlannerRoutingModule } from './degree-planner.routing.module';
 import { TermContainerComponent } from './term-container/term-container.component';
 import { SidenavMenuItemComponent } from './sidenav-menu-item/sidenav-menu-item.component';
@@ -11,6 +12,7 @@ import { FavoritesContainerComponent } from './favorites-container/favorites-con
 	imports: [
 		CommonModule,
 		SharedModule,
+		SharedDegreePlannerModule,
 		DegreePlannerRoutingModule
 	],
 	declarations: [

src/app/degree-planner/shared/course-item/course-item.component.html

 <div class="course-item">
   <div class="course-row course-info">
-    <p class="course-number">CHEM 641</p>
-    <p class="course-credits">3 Cr</p>
+    <p class="course-number">{{course.subjectCode}} {{course.catalogNumber}}</p>
+    <p class="course-credits">{{course.credits}} Cr</p>
   </div>
 
   <div class="course-row">
-    <p class="course-title">Course Title Here</p>
+    <p class="course-title">{{course.title}}</p>
   </div>
 </div>

src/app/degree-planner/shared/course-item/course-item.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Course } from '../../../core/models/course';
 
 @Component({
-  selector: 'app-course-item',
-  templateUrl: './course-item.component.html',
-  styleUrls: ['./course-item.component.scss']
+	selector: 'app-course-item',
+	templateUrl: './course-item.component.html',
+	styleUrls: ['./course-item.component.scss']
 })
-export class CourseItemComponent implements OnInit {
-  course: Course;
+export class CourseItemComponent {
+	@Input() course: Course;
 
-  constructor() { }
-
-  ngOnInit() { }
+	constructor() {}
 
 }

src/app/degree-planner/shared/shared.module.ts

@@ -8,4 +8,4 @@ import { CourseItemComponent } from './course-item/course-item.component';
 	declarations: [ CourseItemComponent ]
 })
 
-export class SharedModule { }
+export class SharedDegreePlannerModule { }

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

-<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
+<mat-card class="term-container">
+    <div fxLayout="row" fxLayoutAlign="space-between stretch">
+        <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold">Credits: 13</p>
+    </div>
+    <div>
+        <app-course-item *ngFor="let course of getCoursesByTerm(term.termCode)" [course]="course"></app-course-item>
+    </div>
+</mat-card>
\ No newline at end of file

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

-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Term } from '../../core/models/term';
+import { Course } from '../../core/models/course';
+import { DataService } from '../../core/data.service';
 
 @Component({
 	selector: 'app-term-container',
@@ -7,10 +9,26 @@ import { Term } from '../../core/models/term';
 	styleUrls: ['./term-container.component.scss']
 })
 
-export class TermContainerComponent implements OnInit {
-	@Input() terms: Term[];
+export class TermContainerComponent {
+	@Input() term: Term;
+	terms: any[];
+	courses: Course[];
 
-	constructor() { }
+	constructor(private dataService: DataService) {
+		this.dataService.getDegreePlannerCourseData()
+		.subscribe(degreePlanCourses => {
+			this.terms = degreePlanCourses;
+		});
+	}
 
-	ngOnInit() {	}
+	getCoursesByTerm( termCode ) {
+		if (this.terms) {
+			for ( const term of this.terms ) {
+				if (term.termCode === termCode) {
+					return term.courses;
+				}
+			}
+		}
+		return [];
+	}
 }

src/app/shared/academic-year-state.pipe.ts

@@ -6,19 +6,28 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 export class AcademicYearStatePipe implements PipeTransform {
 
-	transform(academicYear: string, args?: any): any {
-		const fullAcademicYear = academicYear.replace('-', ' - 20');
-		const startYear = parseInt(fullAcademicYear.substring(0, 4), 10);
-		const currentYear = (new Date()).getFullYear();
+	transform(yearCode: string, args?: any): any {
+		// Get the century digit
+		const century = parseInt(yearCode.substring(0, 1), 0) + 19;
 
-		if (startYear === currentYear) {
-			return `Current: ${fullAcademicYear}`;
+		// Get the year
+		const academicYear = parseInt(yearCode.substring(1), 0);
+
+		const endYear = (century * 100) + academicYear;
+		const startYear = endYear - 1;
+
+		const yearString = `${startYear} - ${endYear}`;
+
+		const currentYear = new Date().getFullYear();
+
+		if (currentYear === (startYear)) {
+			return `Current: ${yearString}`;
 		} else if (startYear > currentYear) {
-			return `Future: ${fullAcademicYear}`;
+			return `Future: ${yearString}`;
 		} else if (startYear < currentYear) {
-			return `Past: ${fullAcademicYear}`;
+			return `Past: ${yearString}`;
 		}
-		return fullAcademicYear;
+		return yearString;
 	}
 
 }