degree-planner.component.ts

import {
  filter,
  map,
  withLatestFrom,
  distinctUntilChanged,
} from 'rxjs/operators';
import { OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { select } from '@ngrx/store';
import { Component } from '@angular/core';
import { MatSelectChange } from '@angular/material';
import { MatDialog } from '@angular/material';
import { Store } from '@ngrx/store';
import { MediaMatcher } from '@angular/cdk/layout';
import { MatSnackBar } from '@angular/material';
import { GlobalState } from '@app/core/state';
import { DegreePlan } from '@app/core/models/degree-plan';
import { Year } from '@app/core/models/year';
import * as selectors from '@app/degree-planner/store/selectors';
import * as utils from '@app/degree-planner/shared/utils';

// Actions
import {
  SwitchPlan,
  MakePlanPrimary,
  CreatePlan,
  ChangePlanName,
  DeletePlan,
} from '@app/degree-planner/store/actions/plan.actions';

import {
  ModifyPlanDialogComponent,
  DialogMode,
} from './dialogs/modify-plan-dialog/modify-plan-dialog.component';
import { PromptDialogComponent } from '@app/shared/dialogs/prompt-dialog/prompt-dialog.component';
import { CloseCourseSearch } from './store/actions/ui.actions';

@Component({
  selector: 'cse-degree-planner',
  templateUrl: './degree-planner.component.html',
  styleUrls: ['./degree-planner.component.scss'],
})
export class DegreePlannerComponent implements OnInit {
  public termsByAcademicYear: Object;
  public mobileView: MediaQueryList;
  public coursesData$: any;

  public degreePlan$: Observable<DegreePlan | undefined>;
  public allDegreePlans$: Observable<DegreePlan[]>;
  public firstActiveTermCode$: Observable<string | undefined>;
  public termsByYear$: Observable<Year[]>;
  public yearCodes$: Observable<string[]>;
  public isCourseSearchOpen$: Observable<boolean>;
  public isLoadingPlan$: Observable<boolean>;

  constructor(
    private store: Store<GlobalState>,
    public mediaMatcher: MediaMatcher,
    public dialog: MatDialog,
    private snackBar: MatSnackBar,
  ) {
    this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
  }

  public ngOnInit() {
    this.degreePlan$ = this.store.pipe(
      select(selectors.selectVisibleDegreePlan),
      filter(isntUndefined),
    );

    this.allDegreePlans$ = this.store.pipe(
      select(selectors.selectAllDegreePlans),
    );

    // Get observable for the search open state
    this.isCourseSearchOpen$ = this.store.pipe(
      select(selectors.isCourseSearchOpen),
    );

    this.isLoadingPlan$ = this.store.pipe(select(selectors.isLoadingPlan));

    this.yearCodes$ = this.store.pipe(
      select(selectors.selectAllVisibleYears),
      map(years => Object.keys(years)),
      distinctUntilChanged(utils.compareStringArrays),
    );
  }

  public handleAcademicYearToggle(year: Year): void {
    // this.store.dispatch(
    // new ToggleAcademicYear({ year: year.twoDigitYearCode.toString() }),
    // );
  }

  public handleDegreePlanChange(event: MatSelectChange): void {
    if (typeof event.value === 'number') {
      this.store.dispatch(new SwitchPlan({ newVisibleRoadmapId: event.value }));
    }
  }

  public onCreatePlanClick() {
    const data: DialogMode = { mode: 'create' };
    this.dialog
      .open(ModifyPlanDialogComponent, { data })
      .afterClosed()
      .subscribe((result: { name: string } | undefined) => {
        if (result !== undefined && typeof result.name === 'string') {
          const name = result.name;
          const action = new CreatePlan({ name, primary: false });
          this.store.dispatch(action);
        }
      });
  }

  public onRenamePlanClick(currentPlan: DegreePlan) {
    // const data: DialogMode = { mode: 'rename', oldName: currentPlan.name };
    this.dialog
      .open(PromptDialogComponent, {
        data: {
          initalValue: currentPlan.name,
          title: 'Rename Degree Plan',
          confirmText: 'Save',
          inputName: 'Plan name',
        },
      })
      .afterClosed()
      .subscribe((result: { confirmed: boolean; value: string }) => {
        const { confirmed, value } = result;

        if (confirmed) {
          const { roadmapId } = currentPlan;
          const action = new ChangePlanName({ roadmapId, newName: value });
          this.store.dispatch(action);
        }
      });
  }

  public onMakePrimayClick(_currentPlan: DegreePlan) {
    const data: DialogMode = { mode: 'makePrimary' };
    this.dialog
      .open(ModifyPlanDialogComponent, { data })
      .afterClosed()
      .subscribe((result: { areYouSure: true } | undefined) => {
        if (result !== undefined && result.areYouSure === true) {
          const action = new MakePlanPrimary();
          this.store.dispatch(action);
        }
      });
  }

  public onDeletePlanClick(currentPlan: DegreePlan) {
    if (currentPlan.primary) {
      this.snackBar.open('The primary degree plan cannot be deleted');
      return;
    }

    const data: DialogMode = { mode: 'delete', name: currentPlan.name };
    this.dialog
      .open(ModifyPlanDialogComponent, { data })
      .afterClosed()
      .pipe(withLatestFrom(this.store))
      .subscribe(([result, state]) => {
        if (typeof result === 'object' && result.areYouSure === true) {
          const { roadmapId } = currentPlan;
          const deleteAction = new DeletePlan({ roadmapId });
          this.store.dispatch(deleteAction);

          const primaryPlan = state.degreePlanner.allDegreePlans.find(plan => {
            return plan.primary;
          }) as DegreePlan;
          const newVisibleRoadmapId = primaryPlan.roadmapId;
          const switchPlanAction = new SwitchPlan({ newVisibleRoadmapId });
          this.store.dispatch(switchPlanAction);
        }
      });
  }

  public onPrintPlanClick() {
    // TODO
    console.log('onPrintPlanClick');
  }

  public onSharePlanClick() {
    // TODO
    console.log('onSharePlanClick');
  }

  public getTermDropZone() {
    const termCodes = ['favoriteCourse-dropZone'];

    for (const yearCode in this.termsByAcademicYear) {
      if (this.termsByAcademicYear[yearCode]) {
        const year = this.termsByAcademicYear[yearCode];
        for (const termKey in year.terms) {
          if (year.terms[termKey]) {
            const term = year.terms[termKey];
            termCodes.push('term-' + term.termCode);
          }
        }
      }
    }
    // console.log(termCodes);

    return termCodes;
  }

  public closeCourseSearch() {
    this.store.dispatch(new CloseCourseSearch());
  }
}

const isntUndefined = <T>(anything: T | undefined): anything is T => {
  return anything !== undefined;
};