Fix drag and drop

src/app/core/data.service.ts

@@ -120,7 +120,7 @@ export class DataService {
 
 test() {
 // return this.http.delete(this.plannerApiUrl + '/degreePlan/519260/courses/259445', httpOptions)
-return this.http.put(this.plannerApiUrl + '/degreePlan/520224/courses/272973?termCode=1176', httpOptions)
+return this.http.put(this.plannerApiUrl + '/degreePlan/519260/courses/259465?termCode=1174', httpOptions)
 	.pipe(catchError(this.errorHandler));
 }
 

src/app/core/service/degree-planner-data.service.ts

@@ -13,6 +13,7 @@ export class DegreePlannerDataService {
 	degreePlannerData: Observable<any>;
 	coursesData$: any;
 	termCodes: any;
+	dropZones: String[];
 	planId: number;
 
 	constructor(private dataService: DataService) { }
@@ -31,7 +32,11 @@ export class DegreePlannerDataService {
 			map(course => course.termCode),
 			distinct(),
 			toArray()
-		).subscribe(termCodes => this.termCodes = termCodes);
+		).subscribe(termCodes => {
+			this.termCodes = termCodes;
+			this.dropZones = termCodes.map(termCode => `term-${termCode}`);
+			this.dropZones.push('saved-courses');
+		});
 
 		this.coursesData$ = this.degreePlannerData.pipe(
 			groupBy(course => course.termCode),

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

 <div class="term-container">
 	<div
 		cdkDropList
-		id="favoriteCourse-dropZone"
+		id="saved-courses"
 		class="course-list"
 		[cdkDropListData]="favoriteCourses"
-		[cdkDropListConnectedTo]="favoriteDropZone"
+		[cdkDropListConnectedTo]="this.degreePlannerDataSvc.dropZones"
 		(cdkDropListDropped)="drop($event)">
 		<div class="course-wrapper" [cdkDragData]="course" *ngFor="let course of favoriteCourses" cdkDrag>
 			<div class="course-wrapper-inner">

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

-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { DataService } from '../../core/data.service';
 import { FavoriteCourse } from '../../core/models/favorite-course';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@@ -15,22 +15,26 @@ export class FavoritesContainerComponent {
 	favoriteCourse: FavoriteCourse;
 	termCodes$: any;
 	@Input() favoriteDropZone: [];
+	dropZones: any[];
 	favoriteCourses: FavoriteCourse[];
 
 	constructor(
 		private route: ActivatedRoute,
-		private degreePlannerDataSvc: DegreePlannerDataService,
+		public degreePlannerDataSvc: DegreePlannerDataService,
 		private dataService: DataService) {
 			this.favoriteCourses = route.snapshot.data.requiredData.favorites;
 			this.termCodes$ = route.snapshot.data.requiredData.termCodes$;
 	}
 
 	drop(event: CdkDragDrop<string[]>) {
+		const { container, previousContainer, previousIndex } = event;
+		// Get the course JSON
+		const item = event.item.data;
+
 		if (event.previousContainer.id !== event.container.id) {
-			transferArrayItem(event.previousContainer.data,
-				event.container.data,
-				event.previousIndex,
-				event.currentIndex);
+
+			container.data.push(item);
+			previousContainer.data.splice(previousIndex, 1);
 
 			// Add this coruse to the favorites list
 			this.dataService.saveFavoriteCourse(event.item.data.subjectCode, event.item.data.courseId)
@@ -39,12 +43,7 @@ export class FavoritesContainerComponent {
 			});
 
 			// Remove this course from the degree plan
-			this.dataService.removeCourse(this.degreePlannerDataSvc.getPlanId(), event.item.data.id)
-			.subscribe(data => {
-				console.log(data);
-			});
-
-			console.log(event);
+			this.dataService.removeCourse(this.degreePlannerDataSvc.getPlanId(), event.item.data.id);
 		}
 	}
 }

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

@@ -78,13 +78,13 @@ export class CourseItemComponent implements OnInit {
 	moveToFavorites(course) {
 		this.dataService.saveFavoriteCourse(course.subjectCode, course.courseId)
 		.subscribe(favoriteCourse => {
-			console.log("Update UI missing");
+			console.log('Update UI missing');
 			// this.favoriteCourses.push(this.course);
 		});
 		// Remove this course from term
 		this.dataService.removeCourse(this.degreePlannerDataSvc.getPlanId(), course.id)
 		.subscribe(data => {
-			console.log("Update UI missing");
+			console.log('Update UI missing');
 			// this.removeCourseFromUI(this.courses);
 		});
 	}
@@ -93,20 +93,20 @@ export class CourseItemComponent implements OnInit {
 	addToTerm(newTermCode) {
 		this.dataService.addCourse( this.course.subjectCode, this.course.courseId, newTermCode, this.degreePlannerDataSvc.getPlanId())
 		.subscribe( data => {
-			console.log("Update UI missing");
+			console.log('Update UI missing');
 		});
 
 		// Remove course from favorites list
 		this.dataService.removeFavoriteCourse(this.course.subjectCode, this.course.courseId)
 		.subscribe(data => {
-			console.log("Update UI missing");
+			console.log('Update UI missing');
 		});
 	}
 
 	// Move course to another term
 	switchTerm(newTermCode) {
 		this.dataService.updateCourseTerm(this.degreePlannerDataSvc.getPlanId(), this.course.id, newTermCode)
-		.subscribe(data => { console.log("Update UI missing");
+		.subscribe(data => { console.log('Update UI missing');
 		});
 	}
 

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

@@ -23,7 +23,7 @@
 		<div cdkDropList
 			id="term-{{termCode}}"
 			[cdkDropListData]="courses"
-			[cdkDropListConnectedTo]="this.dropZones"
+			[cdkDropListConnectedTo]="this.degreePlannerDataSvc.dropZones"
 			class="course-list"
 			(cdkDropListDropped)="drop($event)">
 		

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

@@ -35,7 +35,7 @@ export class TermContainerComponent implements OnInit {
 
 	constructor(
 		private dataService: DataService,
-		private degreePlannerDataSvc: DegreePlannerDataService,
+		public degreePlannerDataSvc: DegreePlannerDataService,
 		private route: ActivatedRoute,
 		public dialog: MatDialog,
 		private sidenavService: SidenavService,
@@ -46,12 +46,11 @@ export class TermContainerComponent implements OnInit {
 	ngOnInit() {
 		this.termsWithNotes = this.notes.map(note => note.termCode);
 
-		this.degreePlannerDataSvc.getAllTerms().subscribe(data => {
-			this.dropZones = data.map(termCode => {
-				return `term-${termCode}`;
-			});
-			this.dropZones.push('favoriteCourse-dropZone');
-		});
+		// this.dropZones = this.degreePlannerDataSvc.getAllTerms().map(termCode => {
+		// 	return `term-${termCode}`;
+		// });
+		// this.dropZones.push('favoriteCourse-dropZone');
+
 	}
 
 	openAddSidenav() {
@@ -111,12 +110,8 @@ export class TermContainerComponent implements OnInit {
 		return total;
 	}
 
-	getDropZones() {
-		return [];
-	}
-
 	drop(event: CdkDragDrop<string[]>) {
-		const { container, currentIndex, previousContainer, previousIndex } = event;
+		const { container, previousContainer, previousIndex } = event;
 
 		// Get the course JSON
 		const item = event.item.data;
@@ -125,18 +120,18 @@ export class TermContainerComponent implements OnInit {
 
 		const newTermCode = event.container.id.substr(5, 4);
 
-		if (event.previousContainer.id === 'favoriteCourse-dropZone' && event.container.id !== 'favoriteCourse-dropZone') {
+		if (event.previousContainer.id === 'saved-courses' && event.container.id !== 'saved-courses') {
 			// If moving from favorites to term
+			container.data.push(item);
+			previousContainer.data.splice(previousIndex, 1);
 
-			this.dataService.addCourse(event.item.data.subjectCode, event.item.data.courseId, newTermCode, this.degreePlannerDataSvc.getPlanId())
+			this.dataService.addCourse(this.degreePlannerDataSvc.getPlanId(), event.item.data.subjectCode, event.item.data.courseId, newTermCode)
 			.subscribe(data => {
 				const yearCode = newTermCode.substring(0, 3);
 				const termCode = newTermCode.substring(3);
-				// this.termsByAcademicYear[yearCode].terms[termCode].courses[event.currentIndex] = data;
 			});
 
-			this.dataService.removeFavoriteCourse(event.item.data.subjectCode, event.item.data.courseId)
-			.subscribe(data => {});
+			this.dataService.removeFavoriteCourse(event.item.data.subjectCode, event.item.data.courseId);
 
 		} else if (event.previousContainer.id !== event.container.id) {
 
@@ -144,11 +139,8 @@ export class TermContainerComponent implements OnInit {
 			previousContainer.data.splice(previousIndex, 1);
 
 			// Tell the API this course updated
-			this.dataService.updateCourseTerm(this.degreePlannerDataSvc.getPlanId(), event.item.data.id, newTermCode)
-			.subscribe( data => {
-				this.degreePlannerDataSvc.getDegreePlanDataById(this.degreePlannerDataSvc.getPlanId());
-			});
+			this.dataService.updateCourseTerm(this.degreePlannerDataSvc.getPlanId(), event.item.data.id, newTermCode);
 		}
-			// Do nothing on drop to same term
+		// Do nothing on drop to same term
 	}
 }