AddCourseFlow.vue

<template>
  <div>
    <modal name="add-course-flow-modal" :classes="modalClasses" height="auto" :scrollable="true" @before-open="modalBeforeOpen" @opened="modalOpened" @closed="modalClosed">
      <training-bundle :action="action" :caregiver-ids="caregiverIds" :caregiver-goal="caregiverGoal" :compliance-types="complianceTypes" :waive-types="waiveTypes" :courses="selectableCourses" :selected-course-ids="selectedCourseIds" :current-step="currentStep" :total-steps="totalSteps" :active-tab="activeTab" :created-courses="createdCourses" :course-being-edited="courseBeingEdited" :edit-mode="editMode" :can-input-bundle-name="canInputBundleName" :has-due-date="hasDueDate" :force-update="forceUpdate" :waive-modal-data="waiveModalData" :paths="paths" :agency-id="agencyId" :agency-name="agencyName"></training-bundle>
    </modal>
  </div>
</template>

<script>
  import $ from 'jquery';
  import Vue from 'vue';
  import VModal from 'vue-js-modal';
  import TrainingBundle from '../components/compliance_report/add_course_flow/TrainingBundle.vue';
  import ComplianceReportBus from '../helpers/ComplianceReportBus';
  import AddCourseFlowStore from '../stores/AddCourseFlowStore';

  Vue.use(VModal);

  module.exports = {
    props: {
      agencyId: Number,
      agencyName: String,
      paths: Object,
      complianceTypes: Object,
      waiveTypes: Object,
      waiveModalData: Object
    },
    data () {
      return AddCourseFlowStore.state;
    },
    components: {
      TrainingBundle
    },
    methods: {
      showModal () {
        this.$modal.show('add-course-flow-modal');
      },
      modalBeforeOpen () {
        if (AddCourseFlowStore.state.action.startsWith('edit')) {
          AddCourseFlowStore.goToStep(1);
        } else {
          AddCourseFlowStore.clearModal();
        }
      },
      modalOpened () {
        AddCourseFlowStore.state.forceUpdate = !AddCourseFlowStore.state.forceUpdate;
      },
      modalClosed () {
        AddCourseFlowStore.resetData();
      },
      loadCourses () {
        // Fetch list of courses from the server
        // If "caregiver_id" param is set then load courses for the specific caregiver, otherwise load courses for the whole agency
        return Promise.resolve($.ajax({
          url: this.$root.paths.availableCoursesPath,
          data: {
            caregiver_id: (this.caregiverIds != null && this.caregiverIds.length === 1) ? this.caregiverIds[0] : null
          },
          headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
        }));
      }
    },
    computed: {
      modalClasses: function () {
        let classArr = ["add-course-flow", `add-course-flow--${this.action}`, "add-course-flow--step-" + (this.currentStep + 1)];

        if (this.hasDueDate) {
          classArr.push("add-course-flow--has-due-date");
        }

        return classArr;
      },
      selectableCourses() {
        let self = this;
        return this.courses.filter(course => self.action === 'add_historical' ? course.is_external : true);
      }
    },
    watch: {
      editMode: function () {
        AddCourseFlowStore.goToStep(0);
      },
      // Cancel edit mode if user manually switches tabs or steps
      activeTab: function () {
        AddCourseFlowStore.setEditMode(false);
      },
      // Cancel edit mode if user manually switches tabs or steps
      currentStep: function () {
        AddCourseFlowStore.setEditMode(false);
      }
    },
    mounted() {
      var self = this;

      // Single caregiver goal 
        // triggered by the options in a class's "actions" menu as well as by editing a historical class
      ComplianceReportBus.$on('open_course_modal', (goal) => {
        AddCourseFlowStore.selectAction(goal.action);
        if ((self.caregiverIds != null && self.caregiverIds.length === 1 && self.caregiverIds[0] != goal.caregiver_id) ||
          (self.caregiverGoal != null && self.caregiverGoal.id != goal.id) || self.caregiverGoal === null) {
          self.caregiverIds = [goal.caregiver_id];
          self.caregiverGoal = goal;
          AddCourseFlowStore.state.isAdditional = goal.isAdditional;
          AddCourseFlowStore.state.canInputBundleName = false;
          AddCourseFlowStore.state.hasDueDate = false;

          var promise = self.loadCourses();
          promise.then(courses =>
            AddCourseFlowStore.loadCaregiverGoal({
              caregiverId: goal.caregiver_id,
              caregiverGoal: goal,
              courses: courses
            })
          ).catch(error => console.log(error));
        }
        // Display the modal
        if (goal.action.startsWith('edit')) {
          AddCourseFlowStore.selectSingleCourse({courseId: goal.course.id});
          self.courseBeingEdited = goal.course;
          self.action = goal.action;
        }
        self.showModal();
      });

      // Multiple caregivers (bulk) - used only in the toolbar at the top of the compliance report page
      ComplianceReportBus.$on('active_caregivers', (caregiverIds) => {
        self.caregiverIds = caregiverIds;
        AddCourseFlowStore.selectCaregiverIds(caregiverIds);
        AddCourseFlowStore.selectAction("enroll");
        AddCourseFlowStore.state.canInputBundleName = true;
        AddCourseFlowStore.state.hasDueDate = true;

        var promise = self.loadCourses();
        promise.then(courses => self.courses = courses)
          .catch(error => console.log(error));

        // Display the modal
        self.showModal();
      });
    }
  }
</script>