[WIP] Добавил возможность замены смен, фикс стилей

src/pages/schedule/TheSchedule.vue

@@ -9,9 +9,8 @@
       .relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5(v-else)
         schedule-header(
           :start-month="startMonth",
-          :times-shift="timesShift",
           :change-show-time="changeShowTime",
-          :show-time="showTime"
+          :show-time="showTime",
           @switch-previous-month="switchPreviousMonth",
           @switch-next-month="switchNextMonth"
         )
@@ -21,11 +20,15 @@
           :serialized="serialized",
           :buttons="buttons",
           :start-month="startMonth",
-          :clear-employee="clearEmployee",
+          :employees="employees",
           :show-time="showTime",
           :clear-select="clearSelect",
           :select-employee="selectEmployee",
+          :replacement-sheet="replacementSheet",
           :template="template",
+          :trim-owner-name="trimOwnerName",
+          :open-form="openForm",
+          :change-shift="postUpdateSchedule",
           @schedule-employee="createScheduleEmployee",
           @schedules="distributeRequest"
         )
@@ -62,14 +65,20 @@ export default {
         },
       ],
       scheduleList: [],
-      clearEmployee: [],
+      employees: [],
       serialized: [],
       selectEmployee: {
         label: "",
         id: null,
       },
       times: { start_time: "", end_time: "" },
-      timesShift: { start_time: "", end_time: "" },
+      replacementSheet: {
+        currentEmployee: "",
+        replacementEmployee: "",
+        date: null,
+        start_time: "",
+        end_time: "",
+      },
       buttons: [
         {
           class: "button-work",
@@ -100,6 +109,7 @@ export default {
       startMonth: moment().startOf("month"),
       showTime: false,
       schedulesDate: {},
+      currenSchedule: null,
     };
   },
   computed: {
@@ -111,9 +121,22 @@ export default {
     },
   },
   methods: {
+    openForm(e) {
+      this.currenSchedule = e;
+      this.replacementSheet.currentEmployee = this.trimOwnerName(
+        e.last_name,
+        e.first_name,
+        e.patronymic
+      );
+    },
     changeShowTime() {
       this.showTime = !this.showTime;
     },
+    trimOwnerName(lastName, firstName, patronymic) {
+      let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
+      let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
+      return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
+    },
     clearSelect(employee) {
       if (employee) {
         employee.label = "";
@@ -184,8 +207,8 @@ export default {
       this.filterEmployee();
     },
     filterEmployee() {
-      this.clearEmployee = [];
-      this.clearEmployee = this.employeeList.filter((item) =>
+      this.employees = [];
+      this.employees = this.employeeList.filter((item) =>
         this.serialized.every((el) => el.id !== item.id)
       );
     },
@@ -225,18 +248,34 @@ export default {
       }
     },
     postUpdateSchedule() {
-      let ids = "";
-      this.insideSchedules.forEach((e) => (ids += e.id + ","));
-      ids = ids.slice(0, -1);
-      fetchWrapper
-        .post(`accounts/schedules/${ids}/update/`, {
-          employee: this.insideSchedules[0].employeeId,
-          active_flg: true,
-          start_time: this.times.start_time,
-          end_time: this.times.end_time,
-          status: this.buttons.find((e) => e.active).work,
-        })
-        .then(() => this.fetchSchedules());
+      if (this.replacementSheet.date) {
+        let scheduleList = this.currenSchedule.schedules.find(
+          (el) =>
+            el.date === moment(this.replacementSheet.date).format("YYYY-MM-DD")
+        );
+        fetchWrapper
+          .post(`accounts/schedules/${scheduleList.id}/update/`, {
+            employee: this.replacementSheet.replacementEmployee.id,
+            active_flg: true,
+            start_time: this.replacementSheet.start_time,
+            end_time: this.replacementSheet.end_time,
+            status: scheduleList.status,
+          })
+          .then(() => this.fetchSchedules());
+      } else {
+        let ids = "";
+        this.insideSchedules.forEach((e) => (ids += e.id + ","));
+        ids = ids.slice(0, -1);
+        fetchWrapper
+          .post(`accounts/schedules/${ids}/update/`, {
+            employee: this.insideSchedules[0].employeeId,
+            active_flg: true,
+            start_time: this.times.start_time,
+            end_time: this.times.end_time,
+            status: this.buttons.find((e) => e.active).work,
+          })
+          .then(() => this.fetchSchedules());
+      }
     },
     createScheduleEmployee(e, id) {
       this.schedulesDate = {
@@ -271,8 +310,8 @@ export default {
         (minute < 10 ? "0" + minute.toString() : minute);
       this.times.start_time = localDatetime;
       this.times.end_time = localDatetime;
-      this.timesShift.start_time = localDatetime;
-      this.timesShift.end_time = localDatetime;
+      this.replacementSheet.start_time = localDatetime;
+      this.replacementSheet.end_time = localDatetime;
     },
   },
   watch: {