course-item.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { Store, select } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import * as utils from '@app/degree-planner/shared/utils';

import {
  AddCourse,
  AddSaveForLater,
  MoveCourseBetweenTerms,
} from './../../store/actions/course.actions';
import { GlobalState } from '@app/core/state';
import { Course } from '@app/core/models/course';
import * as selectors from '@app/degree-planner/store/selectors';

import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
// tslint:disable-next-line:max-line-length
import { CourseDetailsDialogComponent } from '@app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component';
// tslint:disable-next-line:max-line-length
import { RemoveCourseConfirmDialogComponent } from '@app/degree-planner/dialogs/remove-course-confirm-dialog/remove-course-confirm-dialog.component';
import { distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'cse-course-item',
  templateUrl: './course-item.component.html',
  styleUrls: ['./course-item.component.scss'],
})
export class CourseItemComponent implements OnInit {
  @Input() course: Course;
  @Input() isCurrentTerm: boolean;
  @Input() isPastTerm: boolean;
  @Input() disabled: boolean;
  @Input() type: 'saved' | 'course' | 'search';
  visibleTerms: any;
  activeTerm: any;
  status: string;
  public visibleTermCodes$: Observable<string[]>;
  public droppableTermCodes$: Observable<string[]>;

  constructor(
    private api: DegreePlannerApiService,
    public dialog: MatDialog,
    private store: Store<GlobalState>,
  ) {}

  ngOnInit() {
    switch (true) {
      case this.course.studentEnrollmentStatus === 'Enrolled' &&
        this.isCurrentTerm:
        this.status = 'Enrolled';
        break;
      case this.course.studentEnrollmentStatus === 'Waitlisted':
        this.status = 'Waitlisted';
        break;
      case !this.course.grade && this.isPastTerm:
        this.status = 'Incomplete';
        break;
      default:
        this.status = '';
    }
  }

  onMenuOpen() {
    this.droppableTermCodes$ = this.store.pipe(
      select(selectors.selectAllVisibleYears),
      utils.yearsToDroppableTermCodes(),
      distinctUntilChanged(utils.compareStringArrays),
    );
  }

  moveToSavedForLater(course) {
    this.store.dispatch(
      new AddSaveForLater({
        courseId: course.courseId,
        subjectCode: course.subjectCode,
        title: course.title,
        catalogNumber: course.catalogNumber,
      }),
    );
  }

  addToTerm(course, term) {
    const { subjectCode, courseId } = course;
    const termCode = term;
    this.store.dispatch(new AddCourse({ subjectCode, courseId, termCode }));
  }

  switchTerm(course, term) {
    const { id, termCode: from } = course;
    const to = term;
    this.store.dispatch(new MoveCourseBetweenTerms({ to, from, id }));
  }

  openCourseDetailsDialog(course) {
    this.api
      .getCourseDetails(course.subjectCode, course.courseId)
      .subscribe(courseDetails => {
        const dialogRef = this.dialog.open(CourseDetailsDialogComponent, {
          data: { courseDetails: courseDetails },
        });
      });
  }

  openRemoveConfirmationDialog() {
    const dialogRef = this.dialog.open(RemoveCourseConfirmDialogComponent, {
      data: { course: this.course, type: this.type },
    });
  }
}