diff --git a/src/app/degree-planner/dialogs/remove-course-confirm-dialog/remove-course-confirm-dialog.component.ts b/src/app/degree-planner/dialogs/remove-course-confirm-dialog/remove-course-confirm-dialog.component.ts
index dce66edf0d148f1e76be0cae9bc52607b7e317ac..3f2fc54bc631c2bf45eb297adedcb39e011ce746 100644
--- a/src/app/degree-planner/dialogs/remove-course-confirm-dialog/remove-course-confirm-dialog.component.ts
+++ b/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;
}
}
}
diff --git a/src/app/degree-planner/favorites-container/favorites-container.component.html b/src/app/degree-planner/favorites-container/favorites-container.component.html
index 88cf8bdf75e4a3b6e5f525604395be63ae21e767..ffb45b305b51fab5f9c8b75f0b139649a5b1ceab 100644
--- a/src/app/degree-planner/favorites-container/favorites-container.component.html
+++ b/src/app/degree-planner/favorites-container/favorites-container.component.html
@@ -1,9 +1,22 @@
<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>
diff --git a/src/app/degree-planner/favorites-container/favorites-container.component.ts b/src/app/degree-planner/favorites-container/favorites-container.component.ts
index d8c61cf3ee6189259f4ac548ef7c6b2f54a9183b..2da8c388195c656e2fe269ca7c31adf9e63e747c 100644
--- a/src/app/degree-planner/favorites-container/favorites-container.component.ts
+++ b/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);
}
}
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.html b/src/app/degree-planner/shared/course-item/course-item.component.html
index b12fae28b886cbd49f8caf823a04850502f45224..86abfef917a375768a6fe01fc9504f6bdd217032 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.html
+++ b/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">
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.ts b/src/app/degree-planner/shared/course-item/course-item.component.ts
index 6e8d9489b0dd2f16fea5a975d9d7633abf6a8650..a9c076a641d86c4e7cab0a502eb3e06289563e9f 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.ts
+++ b/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 }
});
}
}
diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html
index 1ff4fc98e6288894acb8df63b72a985a1a9262c4..44610219157b724059b0183a583c2b6706bd03b0 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/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>
diff --git a/src/app/degree-planner/term-container/term-container.component.ts b/src/app/degree-planner/term-container/term-container.component.ts
index 99538b46ad2d52dfb45190bcf2e4b3b51cb92aeb..05f2897c3ec6e8d86e643efcf54916ea41b2c6e0 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/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 }));
+ }
}
}