term-container.component.ts

import { Component, Input } from '@angular/core';
import { Term } from '../../core/models/term';
import { Course } from '../../core/models/course';
import { DataService } from '../../core/data.service';
import { CdkDragDrop, transferArrayItem } from '@angular/cdk/drag-drop';
import { MatDialog } from '@angular/material';
import { CourseDetailsDialogComponent } from '../dialogs/course-details-dialog/course-details-dialog.component';
import { CourseDetails } from '../../core/models/course-details';

@Component({
	selector: 'cse-term-container',
	templateUrl: './term-container.component.html',
	styleUrls: ['./term-container.component.scss']
})

export class TermContainerComponent {
	@Input() term: Term;
	@Input() courses: Course[];
	@Input() termCodes: String[];
	@Input() termsByAcademicYear: Object;
	@Input() course: CourseDetails;

	terms: any[];

	constructor(private dataService: DataService, public dialog: MatDialog) {
	}

	openCourseDetailsDialog(course) {
		this.dataService.getCourseDetails(course.termCode, course.subjectCode, course.courseId)
		.subscribe(courseDetails => {

			const dialogRef = this.dialog.open(CourseDetailsDialogComponent, {
				data: { courseDetails: courseDetails }
			});

			dialogRef.afterClosed().subscribe(result => {
				console.log('Dialog was closed');
			});
		});
	}

	getTotalCredits() {
		if (!this.courses) {
			return '0';
		}
		let total = 0;
		for (const course of this.courses) {
			switch (typeof course.credits) {
				case 'number':
					total += course.credits;
					break;
			}
		}
		return total;
	}

	drop(event: CdkDragDrop<string[]>) {
		const newTermCode = event.container.id.substr(5, 4);

		if (event.previousContainer.id === 'favoriteCourse-dropZone' && event.container.id !== 'favoriteCourse-dropZone') {
			// If moving from favorites to term

			this.dataService.addCourse(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 => {});

			// Move the course into the front end data structure
			transferArrayItem(event.previousContainer.data,
				event.container.data,
				event.previousIndex,
				event.currentIndex);

		} else if (event.previousContainer.id !== event.container.id) {
			// If moving from term to term
			// Move the course in the front end data object
			transferArrayItem(event.previousContainer.data,
				event.container.data,
				event.previousIndex,
				event.currentIndex);

			// Tell the API this course updated
			this.dataService.updateCourseTerm(event.item.data.id, newTermCode)
			.subscribe( data => {
				// TODO Handle errors
			});
		}
			// Do nothing on drop to same term
	}
}