[WIP] Добавил создание расписания и доработка выбора дат для апдейта

src/pages/schedule/TheSchedule.vue

@@ -15,7 +15,8 @@
         :buttons="buttons",
         :start-month="startMonth",
         :clear-employee="clearEmployee",
-        @new-date="createNewDate"
+        @new-schedule-employee="createNewScheduleEmployee",
+        @schedule-employee="createScheduleEmployee"
       )
       schedule-bar(
         :data-schedule="dataSchedule",
@@ -148,13 +149,19 @@ export default {
       );
     },
     postCreateSchedule() {
-      let currentEmployee = this.clearEmployee.find((e) => e.schedules);
+      let newSchedule = null;
+      if (this.clearEmployee.find((e) => e.schedules))
+        newSchedule = this.clearEmployee.find((e) => e.schedules);
+      else newSchedule = this.serialized.find((e) => e.schedule);
+
       fetchWrapper
         .post("accounts/schedules/create/", {
-          employee: currentEmployee.id,
+          employee: newSchedule.id,
           active_flg: true,
-          start_date: currentEmployee.schedules.start_date,
+          start_date:
-          end_date: currentEmployee.schedules.end_date,
+            newSchedule.schedules.start_date || newSchedule.schedule.start_date,
+          end_date:
+            newSchedule.schedules.end_date || newSchedule.schedule.end_date,
           start_time: this.times.start_time,
           end_time: this.times.end_time,
           status: this.buttons.find((e) => e.active).work,
@@ -175,13 +182,20 @@ export default {
         })
         .then(() => this.fetchSchedules());
     },
-    createNewDate(e) {
+    createNewScheduleEmployee(e) {
       let schedules = {
         start_date: e.start,
         end_date: e.end,
       };
       this.clearEmployee.find((elem) => elem.id === e.id).schedules = schedules;
     },
+    createScheduleEmployee(e) {
+      let schedules = {
+        start_date: e.start,
+        end_date: e.end,
+      };
+      this.serialized.find((elem) => elem.id === e.id).schedule = schedules;
+    },
     switchPreviousMonth() {
       this.startMonth = this.startMonth.clone().subtract(1, "M");
     },

src/pages/schedule/components/ScheduleBody.vue

@@ -24,12 +24,12 @@
           v-for="day in result",
           :key="day",
           :id="schedule.id + day",
-          @click="choiceCell(day, schedule.id)",
+          @click="choiceCell(day, schedule.id, schedule)",
           :class="selectTime(day, schedule.id)",
           :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day) : ''}"
         ) 
           .flex {{choiceDay(day, schedule.id) ? choiceWorks(day) : ''}}
-    .schedule-body.flex.w-full(v-if="clearEmployee", :style="{height: '44px'}")
+    .schedule-body.flex.w-full(v-if="clearEmployee", :style="{height: '44px'}", v-click-outside="saveEmployee")
       .edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}")
         .flex.icon-edit(v-if="currentEmployee.label")
           //- base-button(
@@ -136,7 +136,7 @@ export default {
     setActiveButton() {
       this.activeButton = this.buttons.find((e) => e.active);
     },
-    choiceCell(time, id) {
+    choiceCell(time, id, schedule) {
       let formatTime = time.format("YYYY-MM-DD");
       if (
         this.dateInterval.start &&
@@ -152,9 +152,45 @@ export default {
         this.dateInterval.id = id;
       } else if (time.isAfter(this.dateInterval.start)) {
         this.dateInterval.end = formatTime;
-        if (this.currentEmployee.label)
+        if (this.currentEmployee.label) {
-          this.$emit("new-date", this.dateInterval);
+          this.$emit("new-schedule-employee", this.dateInterval);
+        } else this.$emit("schedule-employee", this.dateInterval);
       } else this.dateInterval.start = formatTime;
+      if (
+        !this.currentEmployee.label &&
+        this.dateInterval.start &&
+        this.dateInterval.end
+      )
+        this.rangeSchdedules(schedule);
+    },
+    rangeSchdedules(schedule) {
+      let insideSchedules = schedule.schedules.filter(
+        (el) =>
+          (el.date > this.dateInterval.start &&
+            el.date < this.dateInterval.end) ||
+          el.date === this.dateInterval.start ||
+          el.date === this.dateInterval.end
+      );
+      let keys = Object.keys(insideSchedules);
+      let outsideSchedules = [];
+      let firstDate = insideSchedules[keys[0]].date;
+      let lastDate = insideSchedules[keys.length - 1].date;
+
+      if (this.dateInterval.start < firstDate) {
+        outsideSchedules.push({
+          before: {
+            start_date: this.dateInterval.start,
+            end_date: moment(firstDate).subtract(1, "d").format("YYYY-MM-DD"),
+          },
+        });
+      }
+      if (this.dateInterval.end > lastDate)
+        outsideSchedules.push({
+          after: {
+            start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"),
+            end_date: this.dateInterval.end,
+          },
+        });
     },
     selectTime(day, id) {
       let formatDay = day.format("YYYY-MM-DD");