term-container.component.ts

// Libraries
import {
  Component,
  Input,
  OnInit,
  ChangeDetectionStrategy,
} from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { MatDialog } from '@angular/material';

// rsjx / ngrx
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { DegreePlannerState } from '@app/degree-planner/store/state';
import {
  ChangeCourseTermRequest,
  AddCourseRequest,
  RemoveSavedForLaterRequest,
} from '@app/degree-planner/store/actions/course.actions';

// Selectors
import {
  getDropZones,
  isActiveTerm,
} from '@app/degree-planner/store/selectors';

// Services
import { SidenavService } from './../../core/service/sidenav.service';

// Models
import { PlannedTerm } from '@app/core/models/planned-term';
import {
  NotesDialogComponent,
  NotesDialogData,
} from '../dialogs/notes-dialog/notes-dialog.component';

@Component({
  selector: 'cse-term-container',
  templateUrl: './term-container.component.html',
  styleUrls: ['./term-container.component.scss'],
})
export class TermContainerComponent implements OnInit {
  @Input() term: PlannedTerm;
  public dropZones$: Observable<String[]>;
  public isActiveTerm$: Observable<Boolean>;

  constructor(
    public dialog: MatDialog,
    private sidenavService: SidenavService,
    private store: Store<{ degreePlanner: DegreePlannerState }>,
  ) {}

  public ngOnInit() {
    this.dropZones$ = this.store.pipe(select(getDropZones));
    this.isActiveTerm$ = this.store.pipe(
      select(isActiveTerm(this.term.termCode)),
    );
  }

  public openAddSidenav(): void {
    this.sidenavService.open();
  }

  public openNotesDialog(): void {
    const termCode = this.term.termCode;
    const data: NotesDialogData = this.term.note
      ? { termCode, hasExistingNote: true, initialText: this.term.note.note }
      : { termCode, hasExistingNote: false };
    this.dialog.open<any, NotesDialogData>(NotesDialogComponent, { data });
  }

  public getTotalCredits(): number {
    return this.term.courses.reduce((sum, course) => {
      return sum + course.credits;
    }, 0);
  }

  drop(event: CdkDragDrop<string[]>) {
    const newContainer = event.container.id;
    const previousContainer = event.previousContainer.id;

    if (newContainer === previousContainer) {
      // If the user dropped a course into the same container do nothing
      return;
    } 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

      // 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 }),
      );
      this.store.dispatch(
        new RemoveSavedForLaterRequest({ subjectCode, courseId }),
      );
    }
  }
}