schedule-form-edit.component.ts

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output,
  SimpleChanges,
  ViewChild,
} from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import {NbToastrService} from '@nebular/theme';
import {debounceTime} from 'rxjs/operators';
import {code} from '../../../../../../@core/data/code';
import * as moment from 'moment';
import {ExtracurricularService} from '../../../../../../@core/api/extracurricular.service';
import {PersonnelService} from '../../../../../../@core/api/personnel.service';
import {DateService} from '../../../../../../@core/api/date.service';

@Component({
  selector: 'skr-schedule-form-edit',
  templateUrl: './schedule-form-edit.component.html',
  styleUrls: ['./schedule-form-edit.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ScheduleFormEditComponent implements OnInit, OnChanges {

  @ViewChild('tableExtracurricularSupervisorList') tableSupervisor: any;
  @ViewChild('tableExtracurricularCoachList') tableCoaches: any;

  @Input()
  scheduleData = null;

  @Output()
  onNext = new EventEmitter();

  searchSupervisor: FormControl = new FormControl(null);

  loading = {
    sessions: false,
    schooldays: false,
    supervisors: false,
    coaches: false,
    remove_supervisor: {},
    remove_coach: {},
  };

  validation = {
    date: true,
    time: true,
  };

  subscriber = {
    sessions: null,
    schooldays: null,
    search: null,
    supervisors: null,
    coaches: null,
    remove_supervisor: null,
    remove_coach: null,
  };

  schoolDays = [];
  supervisors = [];
  coaches = [];

  reset = 0;

  error = null;
  academicYears = [];
  schoolLocations = [];
  school = [];
  exculCategories = null;

  supervisor = false;
  coach = false;
  exculId = null;

  disabled = true;

  startDate = null;
  endDate = null;
  maxRegistDate = null;
  academicYear = null;

  schedule: FormGroup;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private toastr: NbToastrService,
    private formBuilder: FormBuilder,
    private exculService: ExtracurricularService,
    private personnelService: PersonnelService,
    private dateService: DateService,
    private ref: ChangeDetectorRef,
  ) {
  }

  ngOnInit(): void {
    this.getParams();
    this.initScheduleForm();
    this.getSchooldays();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.scheduleData) {
      if (this.scheduleData === null) {
        return;
      }
      if (this.reset === 0) {
        this.patchScheduleData();
      }
      this.reset++;
    }
  }

  getParams(): void {
    this.route.params.subscribe(res => {
      this.exculId = +res.id;
    });
  }

  initScheduleForm(): void {
    this.schedule = new FormGroup({
      academic_year: new FormControl(null, Validators.required),
      academic_year_label: new FormControl({value: null, disabled: true}, Validators.required),
      school_level_id: new FormControl(null),
      school_location_id: new FormControl(null, Validators.required),
      school_location_name: new FormControl(null, Validators.required),
      school_location_label: new FormControl({value: null, disabled: true}, Validators.required),
      school_id: new FormControl(null),
      school_name: new FormControl(null),
      excul_category_id: new FormControl(null, Validators.required),
      extracurricular_name: new FormControl(null, Validators.required),
      extracurricular_description: new FormControl(null, Validators.required),
      schedules: new FormArray([]),
      start_date: new FormControl(null, Validators.required),
      end_date: new FormControl(null, Validators.required),
      sessions: new FormControl(null, Validators.required),
      sessions_label: new FormControl({value: null, disabled: true}, Validators.required),
      max_registration_date: new FormControl(null, Validators.required),
      has_coach: new FormControl(false),
      has_supervisor: new FormControl(false),
      supervisors: new FormArray([]),
      coaches: new FormArray([]),
    });
  }

  getSchooldays(): void {
    if (this.subscriber.schooldays) {
      this.subscriber.schooldays.unsubscribe();
    }

    this.loading.schooldays = true;
    this.subscriber.schooldays =
      this.dateService
        .getSchoolDays()
        .subscribe(res => {
          if (res.status) {
            this.schoolDays = res.data;
            this.schoolDays.forEach(i => i.checked = false);
          } else {
            this.toastr.danger(res.message, code.error.error);
          }
          this.loading.schooldays = false;
          this.ref.detectChanges();
        }, err => {
          this.toastr.danger(code.error.internal_server_error, code.error.error);
          this.loading.schooldays = false;
          this.ref.detectChanges();
        });
  }

  patchScheduleData(): void {
    this.schedule.patchValue({
      academic_year: this.scheduleData.academic_year,
      academic_year_label: this.scheduleData.academic_year,
      school_id: this.scheduleData.school_id,
      school_name: this.scheduleData.school_name,
      school_level_id: this.scheduleData.school_level_id, // x
      school_location_id: this.scheduleData.school_location_id,
      school_location_name: this.scheduleData.school_location_name,
      school_location_label: this.scheduleData.school_location_name,
      excul_category_id: this.scheduleData.excul_category_id,
      extracurricular_name: this.scheduleData.extracurricular_name,
      extracurricular_description: this.scheduleData.extracurricular_description,
      schedules: this.scheduleData.schedules,
      start_date: this.scheduleData.start_date,
      end_date: this.scheduleData.end_date,
      sessions: this.scheduleData.sessions,
      sessions_label: this.scheduleData.sessions,
      max_registration_date: this.scheduleData.max_registration_date,
      has_coach: this.scheduleData.has_coach,
      has_supervisor: this.scheduleData.has_supervisor,
      supervisors: this.scheduleData.supervisors, // x
      coaches: this.scheduleData.coaches, // x
    });

    // init date
    this.startDate = moment(new Date(this.scheduleData.start_date)).format('MMM DD, YYYY');
    this.endDate = moment(new Date(this.scheduleData.end_date)).format('MMM DD, YYYY');
    this.maxRegistDate = moment(new Date(this.scheduleData.max_registration_date)).format('MMM DD, YYYY');

    // validate checked supervisor and coach table
    this.coach = !!this.scheduleData.has_coach;
    this.supervisor = !!this.scheduleData.has_supervisor;

    this.onCheckExtracurricularSchedules();
    this.getExtracurricularSupervisors(this.scheduleData.school_location_id);
    this.getExtracurricularCoaches(this.scheduleData.school_location_id);
    this.onSearch();
  }

  onCheckExtracurricularSchedules(): void {
    this.scheduleData.schedules ? this.scheduleData.schedules : this.scheduleData.schedules = [];
    if (this.scheduleData.schedules.length <= 0) {
      return;
    }

    for (const schedule of this.scheduleData.schedules) {
      const schooldayIndex = this.schoolDays.findIndex(i => +i.schoolday_id === +schedule.schoolday_id);
      if (schooldayIndex !== -1) {
        schedule.schoolday_name = this.schoolDays[schooldayIndex].schoolday_name;
        this.schoolDays[schooldayIndex].checked = true;
      }
      this.onPushExculSchedules(schedule);
    }
  }

  onSearch(): void {
    if (this.subscriber.search) {
      this.subscriber.search.unsubscribe();
    }

    this.subscriber.search =
      this
        .searchSupervisor
        .valueChanges
        .pipe(debounceTime(1000))
        .subscribe(res => {
          this.getExtracurricularSupervisors(this.scheduleData.school_location_id);
        });
  }

  onCheckSchoolDay(item, index): void {
    const schedules = this.schedule.controls['schedules'].value;
    const scheduleIndex = schedules.findIndex(i => i.schoolday_id === this.schoolDays[index].schoolday_id);
    if (scheduleIndex === -1) {
      this.onGetExculSchedules().push(this.onNewExculSchedules(this.schoolDays[index]));
      schedules.push(this.schoolDays[index]);
      this.sessionCount();
      return;
    }

    this.onGetExculSchedules().removeAt(scheduleIndex);
    schedules.splice(scheduleIndex, 1);
    this.sessionCount();
  }

  onNewSupervisor(supervisor: any = null): FormGroup {
    return new FormGroup({
      'excul_supervisor_id': new FormControl(supervisor ? supervisor.excul_supervisor_id : null),
      'staff_id': new FormControl(supervisor ? supervisor.staff_id : null),
      'personnel_id': new FormControl(supervisor ? supervisor.personnel_id : null),
      'school_name': new FormControl(this.schedule.controls['school_name'].value),
      'email': new FormControl(supervisor ? supervisor.email : null),
      'position': new FormControl(supervisor ? supervisor.position : null),
    });
  }

  onGetSupervisor(): FormArray {
    return (this.schedule.controls['supervisors']) as FormArray;
  }

  onPushSupervisor(supervisor: any = null): void {
    this.onGetSupervisor().push(this.onNewSupervisor(supervisor));
  }

  onNewCoach(coach: any = null): FormGroup {
    return new FormGroup({
      'excul_coach_id': new FormControl(coach ? coach.excul_coach_id : null),
      'coach_id': new FormControl(coach ? coach.coach_id : null),
      'name': new FormControl(coach ? coach.name : null),
      'position': new FormControl(coach ? coach.position : null),
      'coach_fee': new FormControl(coach ? coach.coach_fee : null),
    });
  }

  onGetCoach(): FormArray {
    return (this.schedule.controls['coaches']) as FormArray;
  }

  onPushCoach(coach: any = null): void {
    this.onGetCoach().push(this.onNewCoach(coach));
  }

  onNewExculSchedules(schedule: any = null, isNew = true): FormGroup {
    if (isNew) {
      return new FormGroup({
        'excul_schedule_id': new FormControl(null),
        'schoolday_id': new FormControl(schedule.schoolday_id),
        'schoolday_name': new FormControl(schedule.schoolday_name),
        'start_time': new FormControl(null, Validators.required),
        'end_time': new FormControl( null, Validators.required),
        'venue': new FormControl(null),
        'equipment': new FormControl(null),
        'is_time_valid': new FormControl(true),
      });
    }

    return new FormGroup({
      'excul_schedule_id': new FormControl(schedule ? schedule.excul_schedule_id : null),
      'schoolday_id': new FormControl(schedule ? schedule.schoolday_id : null),
      'schoolday_name': new FormControl(schedule ? schedule.schoolday_name : null),
      'start_time': new FormControl(schedule ? moment(new Date(schedule.start_time)).format('HH:mm') : null, Validators.required),
      'end_time': new FormControl( schedule ? moment(new Date(schedule.end_time)).format('HH:mm') : null, Validators.required),
      'venue': new FormControl(schedule ? schedule.venue : null),
      'equipment': new FormControl(schedule ? schedule.equipment : null),
      'is_time_valid': new FormControl(true),
    });
  }

  onValidateTime(index): void {
    const startTime = moment(this.onGetExculSchedules().at(index).get('start_time').value).format('HH:mm');
    const endTime = moment(this.onGetExculSchedules().at(index).get('end_time').value).format('HH:mm');

    if (startTime > endTime || endTime < startTime) this.validation.time = false;
    else this.validation.time = true;
  }

  onGetExculSchedules(): FormArray {
    return (this.schedule.controls['schedules']) as FormArray;
  }

  onPopExculSchedules(idx: number): void {
    this.onGetExculSchedules().removeAt(idx);
  }

  onPushExculSchedules(schedule): void {
    this.onGetExculSchedules().push(this.onNewExculSchedules(schedule, false));
  }

  checkSupervisor(checked: boolean) {
    this.supervisor = checked;
    this.schedule.controls['has_supervisor'].setValue(checked);
  }

  getExtracurricularSupervisors(schoolLocationId: number): void {
    if (this.subscriber.supervisors) {
      this.subscriber.supervisors.unsubscribe();
    }

    this.loading.supervisors = true;
    this.subscriber.supervisors =
      this
        .personnelService
        .getSupervisorListFiltered({
          search: this.searchSupervisor.value,
          school_location_id: schoolLocationId,
        })
        .subscribe(response => {
          if (response.status) {
            this.supervisors = response.data;
            if (this.supervisors.length > 0 || this.supervisors) {
              this.supervisors.forEach(i => {

                if (this.scheduleData.supervisors) {
                  const index = this.scheduleData.supervisors.findIndex(j => +j.staff_id === +i.staff_id);
                  if (index === -1) {
                    i.checked = false;
                    i.valid = false;
                  } else {
                    i.checked = true;
                    i.valid = true;
                    i.excul_supervisor_id = +this.scheduleData.supervisors[index].excul_supervisor_id;
                  }
                  this.onPushSupervisor(i);
                } else {
                  i.checked = false;
                  i.valid = false;
                }
              });
            }
          } else {
            this.error = response.message;
            this.toastr.danger(this.error, code.error.error);
          }
          this.loading.supervisors = false;
          this.ref.detectChanges();
        }, error => {
          this.error = code.error.internal_server_error;
          this.toastr.danger(this.error, code.error.error);
          this.loading.supervisors = false;
          this.ref.detectChanges();
        });
  }

  getExtracurricularCoaches(schoolLocationId: number): void {
    if (this.subscriber.coaches) {
      this.subscriber.coaches.unsubscribe();
    }

    this.loading.coaches = true;
    this.subscriber.coaches =
      this
        .exculService
        .selectCoaches({
          school_location_id: schoolLocationId,
        })
        .subscribe(response => {
          if (response.status) {
            this.coaches = response.data;
            if (this.coaches.length > 0 || this.coaches) {
              this.coaches.forEach(i => {

                if (this.scheduleData.coaches) {
                  const index = this.scheduleData.coaches.findIndex(j => +j.coach_id === +i.coach_id);
                  if (index === -1) {
                    i.checked = false;
                    i.valid = false;
                  } else {
                    i.checked = true;
                    i.valid = true;
                    i.excul_coach_id = +this.scheduleData.coaches[index].excul_coach_id;
                  }
                  this.onPushCoach(i);
                } else {
                  i.checked = false;
                  i.valid = false;
                }
              });
            }
          } else {
            this.error = response.message;
            this.toastr.danger(this.error, code.error.error);
          }
          this.loading.coaches = false;
          this.ref.detectChanges();
        }, error => {
          this.error = code.error.internal_server_error;
          this.toastr.danger(this.error, code.error.error);
          this.loading.coaches = false;
          this.ref.detectChanges();
        });
  }

  checkCoach(checked: boolean) {
    this.coach = checked;
    this.schedule.controls['has_coach'].setValue(checked);
  }

  onChangeStartTime(item, index): void {
    this.onGetExculSchedules().at(index).value.start_time = moment(new Date(item.time)).format('HH:mm');
    if (this.onGetExculSchedules().at(index).value.start_time && this.onGetExculSchedules().at(index).value.end_time) {
      if (
        this.onGetExculSchedules().at(index).value.start_time > this.onGetExculSchedules().at(index).value.end_time
        || this.onGetExculSchedules().at(index).value.end_time < this.onGetExculSchedules().at(index).value.start_time
      ) {
        this.onGetExculSchedules().at(index).value.is_time_valid = false;
        return;
      }
      this.onGetExculSchedules().at(index).value.is_time_valid = true;
    }
  }

  onChangeEndTime(item, index): void {
    this.onGetExculSchedules().at(index).value.end_time = moment(new Date(item.time)).format('HH:mm');
    if (this.onGetExculSchedules().at(index).value.start_time && this.onGetExculSchedules().at(index).value.end_time) {
      if (
        this.onGetExculSchedules().at(index).value.start_time > this.onGetExculSchedules().at(index).value.end_time
        || this.onGetExculSchedules().at(index).value.end_time < this.onGetExculSchedules().at(index).value.start_time
      ) {
        this.onGetExculSchedules().at(index).value.is_time_valid = false;
        return;
      }
      this.onGetExculSchedules().at(index).value.is_time_valid = true;
    }
  }

  onValidateDate(tag, item): void {
    if (tag === 'start') {
      this.startDate = moment(new Date(item)).format('MMM DD, YYYY');
      this.schedule.controls['start_date'].setValue(item);
    } else if (tag === 'end') {
      this.endDate = moment(new Date(item)).format('MMM DD, YYYY');
      this.schedule.controls['end_date'].setValue(item);
    } else if (tag === 'max') {
      this.maxRegistDate = moment(new Date(item)).format('MMM DD, YYYY');
      this.schedule.controls['max_registration_date'].setValue(item);
    }

    if (this.startDate && this.endDate) {
      if (
        this.startDate > this.endDate
        || this.endDate < this.startDate
      ) {
        this.validation.date = false;
        this.maxRegistrationDateValidation();
        return;
      }

      this.validation.date = true;
      if (this.maxRegistDate) {
        this.maxRegistrationDateValidation();
      }
    }
  }

  maxRegistrationDateValidation(): void {
    if (
      this.maxRegistDate >= this.startDate
      || this.maxRegistDate <= this.endDate
    ) {
      this.validation.date = true;
      return;
    }

    this.validation.date = false;
  }

  sessionCount(): void {
    if (this.schedule.controls['start_date'].value && this.schedule.controls['end_date'].value) {
      if (this.subscriber.sessions) {
        this.subscriber.sessions.unsubscribe();
      }

      this.loading.sessions = true;
      this.subscriber.sessions = this.exculService.masterExtracurricularSessions({
        academic_year: this.schedule.controls['academic_year'].value,
        school_location_id: this.schedule.controls['school_location_id'].value,
        start_date: this.schedule.controls['start_date'].value,
        end_date: this.schedule.controls['end_date'].value,
        schoolday_ids: encodeURIComponent(this.schedule.value.schedules.map(i => i.schoolday_id)),
      })
        .subscribe(res => {
          if (res.status) {
            const data = res.data;
            this.schedule.controls['sessions'].setValue(data.length);
            this.schedule.controls['sessions_label'].setValue(data.length);
          } else {
            this.toastr.danger(res.message, code.error.error);
          }
          this.loading.sessions = false;
          this.ref.detectChanges();
        }, err => {
          this.loading.sessions = false;
          this.toastr.danger(code.error.internal_server_error, code.error.error);
          this.ref.detectChanges();
        });
    }
  }

  onChangeExculCategory(item): void {
    this.schedule.get('excul_category_id').markAsTouched();
    this.schedule.get('excul_category_id').setValue(item ? +item.category_id : null);
  }

  onSelectCoach(item, index): void {
    const coachIndex = this.onGetCoach().at(index);
    if (item) {
      if (!coachIndex) {
        this.onPushCoach(this.coaches[index]);
      }
    } else {
      this.onGetCoach().removeAt(index);
    }
  }

  onSelectSupervisor(item, index): void {
    this.supervisors[index].checked = !!item;
    const supervisorIndex = this.onGetSupervisor().at(index);
    if (item) {
      if (!supervisorIndex) {
        this.onPushSupervisor(this.supervisors[index]);
      }
    } else {
      this.onGetSupervisor().removeAt(index);
    }
  }

  onCancel(): void {
    this.router.navigate(['../../'], {relativeTo: this.route});
  }

  onClickNext(): void {
    this.schedule.value.supervisors = this.supervisors.filter(i => i.checked === true);
    this.onNext.emit(this.schedule.value);
  }

}