Move course API call to degree planner component

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

@@ -32,7 +32,7 @@
 						</mat-panel-title>
 					</mat-expansion-panel-header>
 					<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>
+						<app-term-container *ngFor="let term of termsByAcademicYear[year.key].terms" [term]="term" [courses]="getCoursesByTerm(term.termCode)" fxFlex="33%"></app-term-container>
 					</div>
 				</mat-expansion-panel>
 			</mat-accordion>

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

@@ -13,7 +13,7 @@ import { Term } from '../core/models/term';
 
 export class DegreePlannerComponent {
 	degreePlans: DegreePlan[];
-	degreePlanCourses: Course[];
+	degreePlanCourses: any[];
 	selectedDegreePlan: number;
 	terms: Term[];
 	termsByAcademicYear: Object;
@@ -48,4 +48,16 @@ export class DegreePlannerComponent {
 			});
 		});
 	}
+
+	getCoursesByTerm(termCode) {
+		if (!this.degreePlanCourses) {
+			return false;
+		}
+
+		for ( const term of this.degreePlanCourses ) {
+			if (term.termCode === termCode) {
+				return term.courses;
+			}
+		}
+	}
 }

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">{{course.subjectCode}} {{course.catalogNumber}}</p>
+    <div class="icon-number-wrapper">
+        <p class="course-number">
+            {{course.subjectCode}} {{course.catalogNumber}}
+        </p>
+        <div [ngSwitch]="status">
+            <i *ngSwitchCase="'complete'" class="material-icons complete-icon">check_circle</i>
+            <i *ngSwitchCase="'in-progress'" class="material-icons in-progress-icon">check_circle</i>
+            <i *ngSwitchCase="'waitlist'" class="material-icons problem-icon">report_problem</i>
+            <i *ngSwitchCase="'incomplete'" class="material-icons error-icon">error</i>
+            <i *ngSwitchCase="'likely-offered'" class="material-icons help-icon">help</i>
+            <i *ngSwitchCase="'not-offered'" class="material-icons not-offered">remove</i>
+            <i *ngSwitchCase="'favorite'" class="material-icons favorite-icon">favorite_border</i>
+        </div>
+    </div>
     <p class="course-credits">{{course.credits}} Cr</p>
   </div>
 

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

@@ -57,4 +57,17 @@
 
 .course-number {
     font-weight: bold;
+    font-size: 16px;
+    display: inline-block;
+}
+
+.material-icons {
+    font-size: 16px;
+    margin-left: 10px;
+    padding-top: 6px;
+}
+
+.icon-number-wrapper {
+    display: flex;
+    align-items: center;
 }
\ No newline at end of file

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

@@ -8,6 +8,7 @@ import { Course } from '../../../core/models/course';
 })
 export class CourseItemComponent {
 	@Input() course: Course;
+	@Input() status: string;
 
 	constructor() {}
 

src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html

@@ -27,7 +27,7 @@
 			<li><i class="material-icons problem-icon">report_problem</i> Course is waitlisted</li>
 			<li><i class="material-icons error-icon">error</i> Course is incomplete</li>
 			<li><i class="material-icons help-icon">help</i> Course is likely to be offered based on course history</li>
-			<li><span class="not-offered">&#x2015;</span>Course no longer offered</li>
+			<li><i class="material-icons not-offered">remove</i>Course no longer offered</li>
 			<li><i class="material-icons favorite-icon">favorite_border</i> Course is a favorite</li>
 		</ul>
 	</mat-expansion-panel>

src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss

@@ -39,18 +39,15 @@
     margin-top: 0px;
     border-top: 1px solid rgba(0, 0, 0, 0.54);
     li {
-        padding-bottom: 12px;
         position: relative;
-        padding-left: 2.6em;
+        display: flex;
+        align-items: center;
+        padding-bottom: 12px;
+        padding-left: 1em;
+
         .material-icons {
-            position: absolute;
-            left: 2px;
-            top: -2px;
-        }
-        .not-offered {
-            position: absolute;
-            top: 0;
-            left: 7px;
+            margin-right: 8px;
+            font-size: 16px;
         }
     }
 }
\ No newline at end of file

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

 <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>
+        <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold credits">Credits: 13</p>
     </div>
     <div>
-        <app-course-item *ngFor="let course of getCoursesByTerm(term.termCode)" [course]="course"></app-course-item>
+        <app-course-item *ngFor="let course of courses" [course]="course" [status]="'complete'"></app-course-item>
+        <p *ngIf="!courses" class="no-courses text-center semi-bold">No Courses Taken</p>
     </div>
 </mat-card>
\ No newline at end of file

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

@@ -5,4 +5,13 @@
 .term-container h2 {
 	color: #2879A8;
 	font-weight: 400;
+}
+
+.credits,
+.term-container h2 {
+	margin: 0 0 20px 0;
+}
+
+.no-courses {
+	padding: 20px 10px;
 }
\ No newline at end of file

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

 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',
@@ -11,24 +10,8 @@ import { DataService } from '../../core/data.service';
 
 export class TermContainerComponent {
 	@Input() term: Term;
+	@Input() courses: Course[];
 	terms: any[];
-	courses: Course[];
 
-	constructor(private dataService: DataService) {
-		this.dataService.getDegreePlannerCourseData()
-		.subscribe(degreePlanCourses => {
-			this.terms = degreePlanCourses;
-		});
-	}
-
-	getCoursesByTerm( termCode ) {
-		if (this.terms) {
-			for ( const term of this.terms ) {
-				if (term.termCode === termCode) {
-					return term.courses;
-				}
-			}
-		}
-		return [];
-	}
+	constructor() {}
 }

src/assets/sass/general.scss

@@ -9,6 +9,14 @@ body {
     text-align: right;
 }
 
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
 .semi-bold {
     font-weight: 700;
 }