[WIP] Добавил отображение времени текущей даты при замене смен, скрыл отображение выделенной ячейки при сохранении/удалении

src/pages/schedule/TheSchedule.vue

@@ -28,6 +28,8 @@
           :template="template",
           :trim-owner-name="trimOwnerName",
           :open-form="openForm",
+          :active-cell="activeCell",
+          :set-active-cell="setActiveCell",
           :change-shift="postUpdateSchedule",
           @schedule-employee="createScheduleEmployee",
           @schedules="distributeRequest"
@@ -43,11 +45,11 @@
 
 <script>
 import * as moment from "moment";
+import BaseLoader from "@/components/Loader/BaseLoader.vue";
+import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import ScheduleHeader from "@/pages/schedule/components/ScheduleHeader.vue";
 import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
 import ScheduleTable from "@/pages/schedule/components/ScheduleTable.vue";
-import { fetchWrapper } from "@/shared/fetchWrapper.js";
-import BaseLoader from "@/components/Loader/BaseLoader.vue";
 
 export default {
   name: "TheSchedule",
@@ -78,6 +80,7 @@ export default {
         date: null,
         start_time: "",
         end_time: "",
+        schedules: [],
       },
       buttons: [
         {
@@ -110,6 +113,7 @@ export default {
       showTime: false,
       schedulesDate: {},
       currenSchedule: null,
+      activeCell: true,
     };
   },
   computed: {
@@ -128,6 +132,7 @@ export default {
         e.first_name,
         e.patronymic
       );
+      this.replacementSheet.schedules = e.schedules;
     },
     changeShowTime() {
       this.showTime = !this.showTime;
@@ -137,6 +142,9 @@ export default {
       let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
       return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
     },
+    setActiveCell() {
+      this.activeCell = true;
+    },
     clearSelect(employee) {
       if (employee) {
         employee.label = "";
@@ -145,6 +153,8 @@ export default {
         this.selectEmployee.label = "";
         this.selectEmployeeid = null;
       }
+      if (this.buttons.find((e) => e.active))
+        this.buttons.find((e) => e.active).active = false;
     },
     fetchSchedules() {
       fetchWrapper
@@ -217,6 +227,7 @@ export default {
       this.outsideSchedules = outside;
     },
     postCreateSchedules() {
+      this.activeCell = false;
       let data = {
         employee: this.schedulesDate.id,
         active_flg: true,
@@ -285,6 +296,7 @@ export default {
       };
     },
     deleteSchedule() {
+      this.activeCell = false;
       let ids = "";
       if (this.insideSchedules?.length > 0) {
         this.insideSchedules.forEach((e) => (ids += e.id + ","));
@@ -313,11 +325,26 @@ export default {
       this.replacementSheet.start_time = localDatetime;
       this.replacementSheet.end_time = localDatetime;
     },
+    setShiftTime() {
+      let dateSchedule = this.replacementSheet.schedules.find(
+        (e) =>
+          e.date === moment(this.replacementSheet.date).format("YYYY-MM-DD")
+      );
+      this.replacementSheet.start_time = dateSchedule?.start_time;
+      this.replacementSheet.end_time = dateSchedule?.end_time;
+    },
   },
   watch: {
     startMonth() {
       this.fetchSchedulesEmployee();
     },
+    replacementSheet: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.setShiftTime();
+      },
+      deep: true,
+    },
   },
   mounted() {
     this.fetchSchedules();
@@ -337,14 +364,18 @@ export default {
   opacity: 0
   transform: translateY(0px)
   pointer-events: none
+
 .schedule-enter-active
   transition: 0.3s ease
+
 .schedule-leave-to
   opacity: 0
   transform: translateY(0px)
   pointer-events: none
+
 .schedule-leave-active
   transition: 0.3s ease
+
 .schedule-move
   transition: 0.3s ease
 </style>

src/pages/schedule/components/FormChangeShift.vue

@@ -43,7 +43,7 @@
           label="Сохранить",
           color="primary",
           padding="8px 24px",
-          no-caps
+          no-caps,
           @click="changeShift(); closeForm()"
         )
 </template>
@@ -59,14 +59,14 @@ export default {
   props: {
     employees: Array,
     serialized: Array,
-    replacementSheet: Object,
+    modelValue: Boolean,
     trimOwnerName: Function,
     changeShift: Function,
-    modelValue: Boolean,
+    replacementSheet: Object,
   },
   computed: {
     ownersList() {
-      if (this.employees) {
+      if (this.employees || this.serialized) {
         let filteredArray = [];
         this.employees.forEach((elem) => {
           filteredArray.push({

src/pages/schedule/components/ScheduleTable.vue

@@ -16,6 +16,7 @@
       :replacement-sheet="replacementSheet",
       :employees="employees",
       :change-shift="changeShift"
+      :set-active-cell="setActiveCell"
     )
     schedule-table-select(
       v-if="employees.length > 0",
@@ -24,7 +25,7 @@
       :result="result",
       :choice-cell="choiceCell",
       :choice-state="choiceState",
-      :trim-owner-name="trimOwnerName",
+      :trim-owner-name="trimOwnerName"
     )
 </template>
 
@@ -47,16 +48,18 @@ export default {
     scheduleList: Array,
     serialized: Array,
     buttons: Array,
-    template: Object,
     employees: Array,
     showTime: Boolean,
+    activeCell: Boolean,
     clearSelect: Function,
-    selectEmployee: Object,
-    startMonth: Object,
     trimOwnerName: Function,
     openForm: Function,
-    replacementSheet: Object,
     changeShift: Function,
+    setActiveCell: Function,
+    template: Object,
+    selectEmployee: Object,
+    startMonth: Object,
+    replacementSheet: Object,
   },
   data() {
     return {
@@ -71,7 +74,6 @@ export default {
       },
       activeButton: null,
       choiceMonth: null,
-      act: null,
     };
   },
   computed: {
@@ -79,9 +81,10 @@ export default {
       this.setActiveButton();
       return {
         "--bg-color-status": this.activeButton?.color,
-        "--text-status": !this.template.item?.symbol
+        "--text-status":
-          ? this.activeButton?.text
+          !this.template.item?.symbol && this.activeCell
-          : this.template.item?.symbol,
+            ? this.activeButton?.text
+            : this.template.item?.symbol,
       };
     },
   },
@@ -89,14 +92,14 @@ export default {
     setActiveButton() {
       this.activeButton = this.buttons.find((e) => e.active);
     },
-    setActiveCell() {
+    setActiveTemplate() {
       return (this.buttons.find((e) => e.work === "WORKS").active = true);
     },
     choiceCell(day, id, schedule) {
       if (this.showTime) return;
       let formatTime = day.format("YYYY-MM-DD");
 
-      if (this.dateInterval.id !== id) {
+      if (this.dateInterval.id !== id || !this.activeCell) {
         this.dateInterval.start = "";
         this.dateInterval.end = "";
         this.dateInterval.id = "";
@@ -150,7 +153,7 @@ export default {
       this.$emit("schedules", insideSchedules, outsideSchedules);
     },
     choiceState(day, id) {
-      let formatDay = day.format("YYYY-MM-DD");
+      let formatDay = day?.format("YYYY-MM-DD");
       let resStart =
         this.dateInterval.start &&
         formatDay === this.dateInterval.start &&
@@ -162,16 +165,18 @@ export default {
         this.dateInterval.id === id;
 
       let resMiddle =
-        day.isBefore(this.dateInterval.end) &&
+        day?.isBefore(this.dateInterval.end) &&
         this.dateInterval.id === id &&
-        day.isAfter(this.dateInterval.start);
+        day?.isAfter(this.dateInterval.start);
 
-      if (resStart || resMiddle || resEnd)
+      if (resStart || resMiddle || resEnd) {
         return {
-          "set-template": !!this.template.item?.label && this.setActiveCell(),
+          "set-template":
-          status: !!this.activeButton,
+            !!this.template.item?.label && this.setActiveTemplate(),
-          "set-date": !this.activeButton,
+          status: !!this.activeButton && this.activeCell,
+          "set-date": !this.activeButton && this.activeCell,
         };
+      }
     },
     changeDays() {
       this.days = moment(this.choiceMonth, "YYYY-MM-DD").daysInMonth();

src/pages/schedule/components/ScheduleTableBody.vue

@@ -26,7 +26,7 @@
           v-for="day in result",
           :key="day",
           :id="schedule.id + day",
-          @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)",
+          @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee); setActiveCell()",
           :class="choiceState(day, schedule.id)",
           :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
         )
@@ -43,19 +43,20 @@ export default {
   components: { FormChangeShift },
   props: {
     serialized: Array,
-    trimOwnerName: Function,
     result: Array,
+    buttons: Array,
+    scheduleList: Array,
+    employees: Array,
+    showTime: Boolean,
+    trimOwnerName: Function,
     choiceCell: Function,
     clearSelect: Function,
-    selectEmployee: Object,
     choiceState: Function,
-    buttons: Array,
-    showTime: Boolean,
-    scheduleList: Array,
     openForm: Function,
     changeShift: Function,
+    setActiveCell: Function,
     replacementSheet: Object,
-    employees: Array,
+    selectEmployee: Object,
   },
   data() {
     return {

src/pages/schedule/components/ScheduleTableSelect.vue

@@ -44,12 +44,12 @@ export default {
   name: "ScheduleTableSelect",
   components: { BaseSelect },
   props: {
-    selectEmployee: Object,
     result: Array,
+    employees: Array,
     choiceCell: Function,
     choiceState: Function,
-    employees: Array,
     trimOwnerName: Function,
+    selectEmployee: Object,
   },
   computed: {
     ownersList() {