From 3c545fb2011d34357bb654ded91e33a6faf3d71a Mon Sep 17 00:00:00 2001
From: Scott Berg <saberg3@wisc.edu>
Date: Fri, 11 Jan 2019 16:09:49 -0600
Subject: [PATCH] Fix drag and drop
---
src/app/core/data.service.ts | 2 +-
.../service/degree-planner-data.service.ts | 7 +++-
.../favorites-container.component.html | 4 +--
.../favorites-container.component.ts | 23 ++++++------
.../course-item/course-item.component.ts | 10 +++---
.../term-container.component.html | 2 +-
.../term-container.component.ts | 36 ++++++++-----------
7 files changed, 40 insertions(+), 44 deletions(-)
diff --git a/src/app/core/data.service.ts b/src/app/core/data.service.ts
index f405d82..7bd43d8 100644
--- a/src/app/core/data.service.ts
+++ b/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));
}
diff --git a/src/app/core/service/degree-planner-data.service.ts b/src/app/core/service/degree-planner-data.service.ts
index dd10536..3f487b9 100644
--- a/src/app/core/service/degree-planner-data.service.ts
+++ b/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),
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 40e9816..cfe89fd 100644
--- a/src/app/degree-planner/favorites-container/favorites-container.component.html
+++ b/src/app/degree-planner/favorites-container/favorites-container.component.html
@@ -1,10 +1,10 @@
<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">
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 a74e1da..e5ba5a4 100644
--- a/src/app/degree-planner/favorites-container/favorites-container.component.ts
+++ b/src/app/degree-planner/favorites-container/favorites-container.component.ts
@@ -1,4 +1,4 @@
-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);
}
}
}
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 a12cca2..130dd70 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
@@ -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');
});
}
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 fa7dc60..7c78b3f 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/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)">
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 de7d03b..6b46840 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/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
}
}
--
GitLab