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

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
-          ? this.activeButton?.text
-          : this.template.item?.symbol,
+        "--text-status":
+          !this.template.item?.symbol && this.activeCell
+            ? 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(),
-          status: !!this.activeButton,
-          "set-date": !this.activeButton,
+          "set-template":
+            !!this.template.item?.label && this.setActiveTemplate(),
+          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() {