ROENROLL-1262 Display subject name for courses

README.md

@@ -19,7 +19,7 @@ works great with typescript ecosystem.
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve --proxy-config proxy.json` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 

src/app/core/data.service.ts

@@ -45,6 +45,11 @@ export class DataService {
 			.pipe(catchError(this.errorHandler));
 	}
 
+    getSubjectsMap(): Observable<Object> {
+        return this.http.get(this.searchApiUrl + '/subjectsMap/0000', httpOptions)
+            .pipe(catchError(this.errorHandler));
+    }
+
 	getFavoriteCourses(): Observable<FavoriteCourse[]> {
 		return this.http.get<FavoriteCourse[]>(this.plannerApiUrl + '/favorites')
 			.pipe(catchError(this.errorHandler));

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

 <mat-sidenav-container id="plans-container">
 	<!-- Menu side nav -->
 	<mat-sidenav #rightSideNav position="end" mode="side" [opened]="true" disableClose>
-		<cse-sidenav-menu-item [favoriteDropZone]="getTermDropZone()"></cse-sidenav-menu-item>
+		<cse-sidenav-menu-item [favoriteDropZone]="getTermDropZone()" [subjectsMap]="subjectsMap"></cse-sidenav-menu-item>
 	</mat-sidenav>
 
 	<!-- Add course sidenav -->
@@ -48,6 +48,7 @@
 									[courses]="termsByAcademicYear[year.key].terms[term.key]['courses']" 
 									[termCodes]="getTermDropZone()"
 									[termsByAcademicYear]="termsByAcademicYear"
+									[subjectsMap]="subjectsMap"
 									fxFlex="33%"
 								></cse-term-container>
 							</div>

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

@@ -17,6 +17,8 @@ export class DegreePlannerComponent {
 	selectedDegreePlan: number;
 	terms: Term[];
 	termsByAcademicYear: Object;
+	subjectsMap: Object;
+
 
 	constructor(private dataService: DataService) {
 		this.dataService.getDegreePlans()
@@ -51,6 +53,11 @@ export class DegreePlannerComponent {
 			}
 		});
 
+		this.dataService.getSubjectsMap()
+		.subscribe( subjectsMap => {
+			this.subjectsMap = subjectsMap;
+		});
+
 		this.dataService.getTerms()
 		.subscribe(terms => {});
 	}

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

@@ -8,7 +8,12 @@
 		(cdkDropListDropped)="drop($event)">
 		<div class="course-wrapper" [cdkDragData]="course" *ngFor="let course of favoriteCourses" cdkDrag>
 			<div class="course-wrapper-inner">
-				<cse-course-item [course]="course" [status]="'favorite'" class="course-favorite"></cse-course-item>
+				<cse-course-item
+						[course]="course"
+						[status]="'favorite'"
+						[subject]="subjectsMap[course.subjectCode]"
+						class="course-favorite"
+				></cse-course-item>
 			</div>
 		</div>
 		<p *ngIf="!favoriteCourses || favoriteCourses.length === 0" class="no-courses text-center semi-bold">No Favorite Courses</p>

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

@@ -12,6 +12,7 @@ import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/dr
 export class FavoritesContainerComponent implements OnInit {
 	favoriteCourses: FavoriteCourse[];
 	favoriteCourse: FavoriteCourse;
+	@Input() subjectsMap: Object;
 	@Input() favoriteDropZone: [];
 
 	constructor(private dataService: DataService) {

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

@@ -2,7 +2,7 @@
   <div class="course-row course-info">
     <div class="icon-number-wrapper">
         <p class="course-number">
-            {{course.subjectCode}} {{course.catalogNumber}}
+            {{subject}} {{course.catalogNumber}}
         </p>
         <div [ngSwitch]="status">
             <i *ngSwitchCase="'complete'" class="material-icons complete-icon">check_circle</i>

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

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

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

@@ -20,7 +20,7 @@
 				<h3>Favorites</h3>
 			</mat-panel-title>
 		</mat-expansion-panel-header>
-		<cse-favorites-container [favoriteDropZone]='favoriteDropZone'></cse-favorites-container>
+		<cse-favorites-container [favoriteDropZone]='favoriteDropZone' [subjectsMap]="subjectsMap"></cse-favorites-container>
 	</mat-expansion-panel>
 
 	<mat-expansion-panel id="menu-items-container" expanded="true">

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

@@ -9,6 +9,7 @@ export class SidenavMenuItemComponent implements OnInit {
 	events: string[] = [];
 	opened: boolean;
 	@Input() favoriteDropZone: [];
+	@Input() subjectsMap: Object;
 
 	constructor() { }
 

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

@@ -11,7 +11,12 @@
         (cdkDropListDropped)="drop($event)">
         <div class="course-wrapper" [cdkDragData]="course" *ngFor="let course of courses" cdkDrag>
             <div class="course-wrapper-inner">
-                <cse-course-item [course]="course" [status]="'in-progress'" (click)="openCourseDetailsDialog(course)"></cse-course-item>
+                <cse-course-item
+                        [course]="course"
+                        [status]="'in-progress'"
+                        [subject]="subjectsMap[course.subjectCode]"
+                        (click)="openCourseDetailsDialog(course)"
+                ></cse-course-item>
             </div>
         </div>
         <p *ngIf="!courses || courses.length === 0" class="no-courses text-center semi-bold">No Courses Taken</p>

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

@@ -19,6 +19,7 @@ export class TermContainerComponent {
 	@Input() termCodes: String[];
 	@Input() termsByAcademicYear: Object;
 	@Input() course: CourseDetails;
+	@Input() subjectsMap: Object;
 
 	terms: any[];