Skip to content
Snippets Groups Projects
Commit 3c545fb2 authored by Scott Berg's avatar Scott Berg
Browse files

Fix drag and drop

parent a509cf7b
No related branches found
No related tags found
No related merge requests found
......@@ -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));
}
......
......@@ -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),
......
<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">
......
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);
}
}
}
......@@ -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');
});
}
......
......@@ -23,7 +23,7 @@
<div cdkDropList
id="term-{{termCode}}"
[cdkDropListData]="courses"
[cdkDropListConnectedTo]="this.dropZones"
[cdkDropListConnectedTo]="this.degreePlannerDataSvc.dropZones"
class="course-list"
(cdkDropListDropped)="drop($event)">
......
......@@ -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
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment