Update degree planner to display all terms and courses in a plan.

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

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

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

@@ -28,25 +28,14 @@ export class DegreePlannerComponent {
 		this.dataService.getDegreePlannerCourseData()
 		.subscribe(degreePlanCourses => {
 			this.degreePlanCourses = degreePlanCourses;
-			if (this.termsByAcademicYear) {
-				this.updateCourses();
-			}
-		});
 
-		this.dataService.getTerms()
-		.subscribe(terms => {
-			this.terms = terms;
-			// Create an empty object to store term data in
 			this.termsByAcademicYear = {};
 
-			// Loop through each term
-			this.terms.forEach(term => {
+			for (const course of degreePlanCourses) {
 				// Get the 3 digit year code and 1 digit term code
-				const year = term.termCode.substring(0, 3);
-				const termCode = term.termCode.substring(3);
+				const year = course.termCode.substring(0, 3);
+				const termCode = course.termCode.substring(3);
 
-				// If this year does not exsist in the "termsByAcademicYear" create a new year
-				// This year has placeholder data for each term in the year
 				if (!this.termsByAcademicYear[year]) {
 					this.termsByAcademicYear[year] = {
 						year: year,
@@ -58,15 +47,12 @@ export class DegreePlannerComponent {
 					};
 				}
 
-				// Overwrite the default term with the current term
-				this.termsByAcademicYear[year].terms[termCode] = { ...term, courses: [] };
-
-			});
-
-			if (this.degreePlanCourses) {
-				this.updateCourses();
+				this.termsByAcademicYear[year].terms[termCode].courses.push(course);
 			}
 		});
+
+		this.dataService.getTerms()
+		.subscribe(terms => {});
 	}
 
 	updateCourses() {
@@ -78,8 +64,6 @@ export class DegreePlannerComponent {
 				this.termsByAcademicYear[yearCode].terms[termCode].courses.push(course);
 			}
 		}
-
-		console.log(this.termsByAcademicYear);
 	}
 
 	getCoursesByTerm(termCode) {
@@ -101,7 +85,9 @@ export class DegreePlannerComponent {
 			return false;
 		}
 
-		const termCodes = ['favoriteCourse-dropZone'];
+		const termCodes = [
+			'favoriteCourse-dropZone'
+		];
 
 		for (const yearCode in this.termsByAcademicYear) {
 			if (this.termsByAcademicYear[yearCode]) {
@@ -109,11 +95,13 @@ export class DegreePlannerComponent {
 				for (const termKey in year.terms) {
 					if (year.terms[termKey]) {
 						const term = year.terms[termKey];
-						termCodes.push(term.termCode);
+						termCodes.push('term-' + term.termCode);
 					}
 				}
 			}
 		}
+		// console.log(termCodes);
+
 		return termCodes;
 	}
 

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

@@ -4,7 +4,7 @@
     </div>
     <div
         cdkDropList
-        id="{{term.termCode}}"
+        id="term-{{term.termCode}}"
         [cdkDropListData]="courses"
         [cdkDropListConnectedTo]="termCodes"
         class="course-list"

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

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Term } from '../../core/models/term';
 import { Course } from '../../core/models/course';
 import { DataService } from '../../core/data.service';
-import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, transferArrayItem } from '@angular/cdk/drag-drop';
 
 @Component({
 	selector: 'cse-term-container',
@@ -34,14 +34,15 @@ export class TermContainerComponent {
 	}
 
 	drop(event: CdkDragDrop<string[]>) {
+		const newTermCode = event.container.id.substr(5, 4);
 
 		if (event.previousContainer.id === 'favoriteCourse-dropZone' && event.container.id !== 'favoriteCourse-dropZone') {
 			// If moving from favorites to term
 
-			this.dataService.addCourse(event.item.data.subjectCode, event.item.data.courseId, event.container.id)
+			this.dataService.addCourse(event.item.data.subjectCode, event.item.data.courseId, newTermCode)
 			.subscribe(data => {
-				const yearCode = event.container.id.substring(0, 3);
-				const termCode = event.container.id.substring(3);
+				const yearCode = newTermCode.substring(0, 3);
+				const termCode = newTermCode.substring(3);
 				this.termsByAcademicYear[yearCode].terms[termCode].courses[event.currentIndex] = data;
 			});
 
@@ -63,7 +64,7 @@ export class TermContainerComponent {
 				event.currentIndex);
 
 			// Tell the API this course updated
-			this.dataService.updateCourseTerm(event.item.data.id, event.container.id)
+			this.dataService.updateCourseTerm(event.item.data.id, newTermCode)
 			.subscribe( data => {
 				// TODO Handle errors
 			});

src/assets/sass/general.scss

@@ -86,3 +86,27 @@ body {
 .no-courses {
 	padding: 20px 10px;
 }
+
+/*
+
+	Note: The follow styles need to be in the global styles file
+	and they need !important.
+
+	The following styles switch the display of the terms hidden within the
+	mat-expansion-panel. By default they are always displaying flex, causing
+	the drop zone hitbox to mess up and register terms that are in closed panels.
+
+	The !important is needed to overwrite the default styles applied by the mat-expansion-panel
+	and these styles need to be in this file because the mat-expansion-panel's body is a seperate
+	component and it's styles are encapsulated and cannot be styled directly from one of our components
+
+*/
+.term-container-wrapper {
+	display: none !important;
+}
+
+.mat-expanded, .ng-animating {
+	.term-container-wrapper {
+		display: flex !important;
+	}
+}
\ No newline at end of file