astra-frontend/src/pages/calendar/TheCalendar.vue

<template lang="pug">
  .calendar-container.flex
    calendar-sidebar(
      :url="url",
      :schedules-data="schedulesData",
      :open-form-create="openFormCreateEvent",
      :event-statuses="eventStatuses",
      @width="changeWidth",
    )
    calendar-schedule(
      :url="url",
      :schedules-data="schedulesData",
      :current-date="currentDate",
      :time-information="timeInformation",
      :events-data="eventsData",
      :sidebar-width="sidebarWidth",
      :event-statuses="eventStatuses",
      @previous-date="switchPreviousDate",
      @next-date="switchNextDate",
      @selected-layout="changeCalendarLayout",
      @selected-event="writeEventData",
      @delete-event="openModal",
      :open-form-create-event="openFormCreateEvent"
    )
    calendar-form-add-event(
      v-model="isOpenForm",
      :selected-event-data="selectedEvent",
      :event-statuses="eventStatuses",
      :time-information="timeInformation",
      :current-date="currentDate",
      @clear-event-data="clearSelectedEvent"
    )
    base-modal(
      v-model="showModal",
      title="Удаление события"
    ) 
      calendar-delete-modal(
        :event-statuses="eventStatuses",
        :owner-event="selectedEvent",
        :close-modal="changeShowModal",
        @update-events="fetchEventsData"
      )
</template>

<script>
//TODO: Вынести emits в массив
import { fetchWrapper } from "../../shared/fetchWrapper.js";
import * as moment from "moment/moment";
import CalendarSchedule from "./components/CalendarSchedule.vue";
import CalendarSidebar from "./components/CalendarSidebar.vue";
import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import CalendarDeleteModal from "./components/CalendarDeleteModal.vue";
import { statusesConfig } from "@/pages/calendar/utils/statusesConfig";

export default {
  name: "TheCalendar",
  components: {
    CalendarSchedule,
    CalendarSidebar,
    CalendarFormAddEvent,
    BaseModal,
    CalendarDeleteModal,
  },
  props: {
    url: String,
  },
  data() {
    return {
      sidebarWidth: "72px",
      calendarLayout: "",
      currentDate: moment(),
      selectedEvent: {},
      showModal: false,
      timeInformation: {
        dayStartTime: "08:00",
        dayEndTime: "22:00",
      },
      eventsData: [],
      schedulesData: [],
      isOpenForm: false,
      //changeFormWasClosed: false,
      eventStatuses: statusesConfig,
    };
  },
  methods: {
    switchPreviousDate() {
      this.currentDate = this.currentDate.clone().subtract(1, "day");
    },
    switchNextDate() {
      this.currentDate = this.currentDate.clone().add(1, "day");
    },
    changeCalendarLayout(option) {
      this.calendarLayout = option;
    },
    saveEventsData(res) {
      this.eventsData = res.results;
    },
    saveSchedulesData(res) {
      if (res.results.length === 0) {
        this.schedulesData = [];
        return;
      }
      let filteredEmployees = res.results.filter(
        (elem) => elem.status !== "DAY_OFF" && elem.status !== "VACATION"
      );
      if (filteredEmployees.length === 0) {
        this.schedulesData = [];
        return;
      }
      this.schedulesData = filteredEmployees;
    },
    fetchSchedulesData() {
      fetchWrapper
        .get(
          `accounts/schedules/?date_after=${this.currentDate.format(
            "YYYY-MM-DD"
          )}&date_before=${this.currentDate.format("YYYY-MM-DD")}`
        )
        .then((res) => this.saveSchedulesData(res));
    },
    fetchEventsData() {
      fetchWrapper
        .get(
          `registry/event/?limit=100&start=${this.currentDate.format(
            "YYYY-MM-DD"
          )}T${
            this.timeInformation.dayStartTime
          }:00Z&end=${this.currentDate.format("YYYY-MM-DD")}T${
            this.timeInformation.dayEndTime
          }:00Z`
        )
        .then((res) => this.saveEventsData(res));
    },
    changeWidth(value) {
      this.sidebarWidth = value;
    },
    openFormCreateEvent() {
      this.isOpenForm = true;
    },
    closeFormCreateEvent() {
      this.isOpenForm = false;
      this.fetchEventsData();
    },
    /*setChangeFormState() {
      this.changeFormWasClosed = true;
    },
    resetChangeFormState() {
      this.changeFormWasClosed = false;
    },*/
    writeEventData(eventData) {
      this.selectedEvent = eventData;
      this.openFormCreateEvent();
    },
    clearSelectedEvent() {
      this.selectedEvent = {};
      this.closeFormCreateEvent();
    },
    openModal(eventData) {
      this.selectedEvent = eventData;
      this.showModal = true;
    },
    changeShowModal() {
      this.showModal = false;
    },
  },
  watch: {
    showModal: function () {
      if (this.showModal === false) {
        //this.setChangeFormState();
        this.clearSelectedEvent();
      }
    },
    currentDate() {
      this.fetchSchedulesData();
      this.fetchEventsData();
    },
  },
  mounted() {
    this.fetchSchedulesData();
    this.fetchEventsData();
  },
};
</script>

<style lang="sass" scoped>
.calendar-container
  width: calc(100vw - 80px)
</style>