Changed data structure to include coures. Add styles for dragging course.

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

@@ -45,7 +45,7 @@
 								<cse-term-container 
 									*ngFor="let term of termsByAcademicYear[year.key].terms | keyvalue" 
 									[term]="termsByAcademicYear[year.key].terms[term.key]" 
-									[courses]="getCoursesByTerm(year.key + term.key)" 
+									[courses]="termsByAcademicYear[year.key].terms[term.key]['courses']" 
 									[termCodes]="getTermCodes()"
 									fxFlex="33%"
 								></cse-term-container>

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

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { DataService } from '../core/data.service';
 import { DegreePlan } from '../core/models/degree-plan';
 import { Term } from '../core/models/term';
+import { log } from 'util';
 
 @Component({
 	selector: 'cse-degree-planner',
@@ -27,6 +28,9 @@ export class DegreePlannerComponent {
 		this.dataService.getDegreePlannerCourseData()
 		.subscribe(degreePlanCourses => {
 			this.degreePlanCourses = degreePlanCourses;
+			if (this.termsByAcademicYear) {
+				this.updateCourses();
+			}
 		});
 
 		this.dataService.getTerms()
@@ -47,23 +51,39 @@ export class DegreePlannerComponent {
 					this.termsByAcademicYear[year] = {
 						year: year,
 						terms: {
-							2: { termCode: `${year}2`},
-							4: { termCode: `${year}4`},
-							6: { termCode: `${year}6`}
+							2: { termCode: `${year}2`, courses: []},
+							4: { termCode: `${year}4`, courses: []},
+							6: { termCode: `${year}6`, courses: []}
 						}
 					};
 				}
 
 				// Overwrite the default term with the current term
-				this.termsByAcademicYear[year].terms[termCode] = term;
+				this.termsByAcademicYear[year].terms[termCode] = {...term, courses: []};
 
 			});
+
+			if (this.degreePlanCourses) {
+				this.updateCourses();
+			}
 		});
 	}
 
+	updateCourses() {
+		for (const term of this.degreePlanCourses) {
+			// console.log(term);
+			const yearCode = term.termCode.substring(0, 3);
+			const termCode = term.termCode.substring(3);
+
+			if (this.termsByAcademicYear[yearCode] && this.termsByAcademicYear[yearCode].terms[termCode]) {
+				this.termsByAcademicYear[yearCode].terms[termCode].courses = term.courses;
+			}
+		}
+	}
+
 	getCoursesByTerm(termCode) {
 		if (!this.degreePlanCourses) {
-			return false;
+			return [];
 		}
 
 		for ( const term of this.degreePlanCourses ) {
@@ -71,6 +91,8 @@ export class DegreePlannerComponent {
 				return term.courses;
 			}
 		}
+
+		return [];
 	}
 
 	getTermCodes() {
@@ -78,7 +100,19 @@ export class DegreePlannerComponent {
 			return false;
 		}
 
-		const termCodes = this.degreePlanCourses.map(term => term.termCode);
+		const termCodes = [];
+
+		for (const yearCode in this.termsByAcademicYear) {
+			if (this.termsByAcademicYear[yearCode]) {
+				const year = this.termsByAcademicYear[yearCode];
+				for (const termKey in year.terms) {
+					if (year.terms[termKey]) {
+						const term = year.terms[termKey];
+						termCodes.push(term.termCode);
+					}
+				}
+			}
+		}
 		return termCodes;
 	}
 

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

@@ -9,7 +9,11 @@
         [cdkDropListConnectedTo]="termCodes"
         class="course-list"
         (cdkDropListDropped)="drop($event)">
-        <cse-course-item *ngFor="let course of courses" [course]="course" [status]="'complete'" cdkDrag></cse-course-item>
+        <div class="course-wrapper" *ngFor="let course of courses" cdkDrag>
+            <div class="coure-wrapper-inner">
+                <cse-course-item [course]="course" [status]="'complete'"></cse-course-item>
+            </div>
+        </div>
         <p *ngIf="!courses || courses.length === 0" 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

@@ -14,4 +14,26 @@
 
 .no-courses {
 	padding: 20px 10px;
+}
+
+.cdk-drag-placeholder {
+	position: relative;
+	&:after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background-color: #C7CACB;
+		border-radius: 5px;
+	}
+}
+
+.cdk-drag-preview {
+	.coure-wrapper-inner {
+		transform: rotate(-3deg);
+		border-radius: 5px;
+		box-shadow: -3px 3px 3px 2px rgba(0, 0, 0, 0.26);
+	}
 }
\ No newline at end of file

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

@@ -29,13 +29,12 @@ export class TermContainerComponent {
 	}
 
 	drop(event: CdkDragDrop<string[]>) {
-		if (event.previousContainer === event.container) {
-			moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-		} else {
+		if (event.previousContainer.id !== event.container.id) {
+			// moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
 			transferArrayItem(event.previousContainer.data,
-							event.container.data,
-							event.previousIndex,
-							event.currentIndex);
+				event.container.data,
+				event.previousIndex,
+				event.currentIndex);
 		}
 	}
 }