Update remove dialog to use new remove action. Add drag and drop to saved for later

src/app/degree-planner/dialogs/remove-course-confirm-dialog/remove-course-confirm-dialog.component.ts

@@ -5,6 +5,13 @@ import { DataService } from '../../../core/data.service';
 import { Course } from '../../../core/models/course';
 import { SavedForLaterCourse } from '../../../core/models/saved-for-later-course';
 
+import { DegreePlannerState } from '@app/degree-planner/state';
+import { Store } from '@ngrx/store';
+
+import {
+	RemoveCourseRequest
+} from '@app/degree-planner/actions/plan.actions';
+
 @Component({
 	selector: 'cse-remove-course-confirm-dialog',
 	templateUrl: './remove-course-confirm-dialog.component.html',
@@ -14,43 +21,32 @@ export class RemoveCourseConfirmDialogComponent implements OnInit {
 	course: Course;
 	savedForLater: Boolean;
 	courses: Course[];
+	type: 'saved' | 'course' | 'search';
 	favoriteCourses: SavedForLaterCourse[];
 
 	// tslint:disable-next-line:max-line-length
 	constructor(private dataService: DataService,
 		private dialogRef: MatDialogRef<RemoveCourseConfirmDialogComponent>,
 		private degreePlannerDataSvc: DegreePlannerDataService,
+		private store: Store<{ degreePlanner: DegreePlannerState }>,
 		@Inject(MAT_DIALOG_DATA) data: any) {
 		this.course = data.course;
-		this.courses = data.courses;
-		this.favoriteCourses = data.favoriteCourses;
-		this.savedForLater = data.savedForLater;
+		this.type = data.type;
 	}
 
-	ngOnInit() {
-	}
+	ngOnInit() {}
 
-	removeCourseFromUI(courseItem) {
-		const index = courseItem.indexOf(this.course, 0);
-		if (index > -1) {
-			courseItem = courseItem.splice(index, 1);
-		}
-	}
-
-	// Remove this course from the degree plan
 	removeCourse() {
-		if (this.savedForLater) {
-			this.dataService.removeFavoriteCourse(this.course.subjectCode, this.course.courseId)
-			.subscribe(data => {
-				console.log("Update UI missing");
-				// this.removeCourseFromUI(this.favoriteCourses);
-			});
-		} else {
-			this.dataService.removeCourse(this.degreePlannerDataSvc.getPlanId(), this.course.id)
-			.subscribe(data => {
-				console.log("Update UI missing");
-				// this.removeCourseFromUI(this.courses);
-		});
+		switch (this.type) {
+			case 'saved':
+				console.log('remove course from saved');
+				break;
+
+			case 'course':
+				console.log('remove course from term');
+				console.log(this.course);
+				this.store.dispatch(new RemoveCourseRequest({ id: this.course.id }));
+				break;
 		}
 	}
 }

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

 <div class="term-container">
-	<div id="saved-courses" class="course-list">
-		<div class="course-wrapper" *ngFor="let course of courses$ | async">
+	<div 
+		id="saved-courses"
+		class="course-list"
+		cdkDropList
+		[cdkDropListConnectedTo]="dropZones$ | async"
+		class="course-list"
+		(cdkDropListDropped)="drop($event)"
+	>
+		<div 
+			class="course-wrapper" 
+			*ngFor="let course of courses$ | async"
+			cdkDrag
+			[cdkDragData]="course" 
+		>
 			<div class="course-wrapper-inner">
 				<cse-course-item
 					[course]="course"
+					type="saved"
 					[savedForLater]="true"
 					class="course-favorite"
 				></cse-course-item>

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

@@ -5,6 +5,14 @@ import { SavedForLaterCourse } from '@app/core/models/saved-for-later-course';
 import { GlobalState } from '@app/core/state';
 import { getSavedForLaterCourses } from '@app/degree-planner/selectors';
 
+// rsjx / ngrx
+import { DegreePlannerState } from '@app/degree-planner/state';
+
+// Selectors
+import {
+	getDropZones
+} from '@app/degree-planner/selectors';
+
 @Component({
 	selector: 'cse-favorites-container',
 	templateUrl: './favorites-container.component.html',
@@ -12,10 +20,16 @@ import { getSavedForLaterCourses } from '@app/degree-planner/selectors';
 })
 export class SavedForLaterContainerComponent implements OnInit {
 	public courses$: Observable<SavedForLaterCourse[]>;
+	public dropZones$: Observable<String[]>;
 
-	constructor(public store$: Store<GlobalState>) {}
+	constructor(private store: Store<{ degreePlanner: DegreePlannerState }>) {}
 
 	public ngOnInit() {
-		this.courses$ = this.store$.pipe(select(getSavedForLaterCourses));
+		this.dropZones$ = this.store.pipe(select(getDropZones));
+		this.courses$ = this.store.pipe(select(getSavedForLaterCourses));
+	}
+
+	drop(event) {
+		console.log(event);
 	}
 }

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

@@ -27,10 +27,10 @@
 					<button mat-menu-item (click)="openCourseDetailsDialog(course)">Course Details</button>
 					<button mat-menu-item [matMenuTriggerFor]="academicYearsGroup">Move</button>
 						<mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
-							<button mat-menu-item (click)="moveToFavorites(course)" *ngIf="!savedForLater" class="favorites-list">Saved for later</button>
-							<button mat-menu-item *ngFor="let termCode of termCodes" (click)="savedForLater ? addToTerm(termCode) : switchTerm(termCode)">{{ termCode | getTermDescription }}</button>
+							<!-- <button mat-menu-item (click)="moveToFavorites(course)" *ngIf="!savedForLater" class="favorites-list">Saved for later</button>
+							<button mat-menu-item *ngFor="let termCode of termCodes" (click)="savedForLater ? addToTerm(termCode) : switchTerm(termCode)">{{ termCode | getTermDescription }}</button> -->
 						</mat-menu>
-					<button mat-menu-item (click)="openRemoveConfirmationDialog(savedForLater)">Remove</button>
+					<button *ngIf="!disabled" mat-menu-item (click)="openRemoveConfirmationDialog()">Remove</button>
 				</mat-menu>
 			</div>
 			<div fxLayout="row" fxLayoutAlign="end center">

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

@@ -24,18 +24,16 @@ export class CourseItemComponent implements OnInit {
 	degreePlans: DegreePlan[];
 	degreePlanCourses: any[];
 	selectedDegreePlan: number;
-	// termCodes: any;
 	termCodes: any;
+	subjects: Object;
+
 	@Input() course: Course;
 	@Input() courses: Course[];
 	@Input() status: string;
 	@Input() disabled: string;
-	// @Input() term: Term;
-	// @Input() termsByAcademicYear: Object;
-	// @Input() refreshContent;
+	@Input() type: 'saved' | 'course' | 'search';
 	@Input() savedForLater: Boolean;
 	@Input() favoriteCourses: SavedForLaterCourse[];
-	subjects: Object;
 
 	constructor(
 		private dataService: DataService,
@@ -52,13 +50,6 @@ export class CourseItemComponent implements OnInit {
 	ngOnInit() {
 	}
 
-	// removeCourseFromUI(courseItem) {
-	// 	const index = courseItem.indexOf(this.course, 0);
-	// 	if (index > -1) {
-	// 		courseItem = courseItem.splice(index, 1);
-	// 	}
-	// }
-
 	openCourseDetailsDialog(course) {
 		this.dataService.getCourseDetails(course.termCode, course.subjectCode, course.courseId)
 		.subscribe(courseDetails => {
@@ -68,51 +59,9 @@ export class CourseItemComponent implements OnInit {
 		});
 	}
 
-	// Get term codes to display in the course item menu
-	// getAllTermCodes() {
-	// 	const termYears: any = Object.values(this.termsByAcademicYear);
-	// 	this.termsInAcademicYear = termYears.map(year => year.terms).flat();
-	// }
-
-	// Add this coruse to the favorites list
-	moveToFavorites(course) {
-		this.dataService.saveFavoriteCourse(course.subjectCode, course.courseId)
-		.subscribe(favoriteCourse => {
-			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');
-			// this.removeCourseFromUI(this.courses);
-		});
-	}
-
-	// Add Favorite course to term
-	addToTerm(newTermCode) {
-		this.dataService.addCourse( this.course.subjectCode, this.course.courseId, newTermCode, this.degreePlannerDataSvc.getPlanId())
-		.subscribe( data => {
-			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');
-		});
-	}
-
-	// Move course to another term
-	switchTerm(newTermCode) {
-		this.dataService.updateCourseTerm(this.degreePlannerDataSvc.getPlanId(), this.course.id, newTermCode)
-		.subscribe(data => { console.log('Update UI missing');
-		});
-	}
-
-	openRemoveConfirmationDialog(savedForLater) {
+	openRemoveConfirmationDialog() {
 		const dialogRef = this.dialog.open(RemoveCourseConfirmDialogComponent, {
-			data: { course: this.course, courses: this.courses, favoriteCourses: this.favoriteCourses, savedForLater }
+			data: { course: this.course, type: this.type }
 		});
 	}
 }

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

@@ -24,12 +24,14 @@
 				 </button>
 			</div>
 		</div>
-		<div cdkDropList
+		<div 
+			cdkDropList
 			id="term-{{term.termCode}}"
 			[cdkDropListData]="term.courses"
 			[cdkDropListConnectedTo]="dropZones$ | async"
 			class="course-list"
-			(cdkDropListDropped)="drop($event)">
+			(cdkDropListDropped)="drop($event)"
+		>
 
 			<ng-container *ngIf="term.note as note">
 				<div class="note-item" (click)="openNotesDialog()">
@@ -46,7 +48,7 @@
 				*ngFor="let course of term.courses"
 			>
 				<div class="course-wrapper-inner">
-					<cse-course-item [course]="course" [disabled]="!(isActiveTerm$ | async)"></cse-course-item>
+					<cse-course-item [course]="course" type="course" [disabled]="!(isActiveTerm$ | async)"></cse-course-item>
 				</div>
 			</div>
 

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

@@ -8,7 +8,8 @@ import { Observable } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 import { DegreePlannerState } from '@app/degree-planner/state';
 import {
-	ChangeCourseTermRequest
+	ChangeCourseTermRequest,
+	AddCourseRequest
 } from '@app/degree-planner/actions/plan.actions';
 
 // Selectors
@@ -71,16 +72,36 @@ export class TermContainerComponent implements OnInit {
 	}
 
 	drop(event: CdkDragDrop<string[]>) {
-		const to = event.container.id.substr(5);
-		const { termCode: from, id } = event.item.data;
+		const newContainer = event.container.id;
+		const previousContainer = event.previousContainer.id;
 
-		if (from === to) {
+		if (newContainer === previousContainer) {
+			// If the user dropped a course into the same container do nothing
 			return;
-		}
 
-		// console.log(to);
-		// console.log(from);
-		// console.log(id);
-		this.store.dispatch(new ChangeCourseTermRequest({ to, from, id }));
+		} else if (previousContainer.indexOf('term-') === 0) {
+			// If moving from term to term
+
+			// Get the pervious and new term code, and the record ID
+			const to = newContainer.substr(5);
+			const { termCode: from, id } = event.item.data;
+
+			// Dispatch a new change request
+			this.store.dispatch(new ChangeCourseTermRequest({ to, from, id }));
+
+		} else if (previousContainer === 'saved-courses') {
+			// If moving from saved courses to term
+			console.log('add course and remove from saved');
+			console.log(event);
+
+			// Get the term code from the new term dropzone's ID
+			const termCode = newContainer.substr(5);
+
+			// Pull the course data from the moved item
+			const { subjectCode, courseId} = event.item.data;
+
+			// Dispatch the add event
+			this.store.dispatch(new AddCourseRequest({ subjectCode, courseId, termCode }));
+		}
 	}
 }