[WIP] Добавил отображение рабочего времени, фикс create and update

src/pages/schedule/components/ScheduleHeader.vue

@@ -29,7 +29,13 @@
           .text.flex.items-center
             .text.font-medium.text-base {{ dateString }}
             .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
-        base-button.font-semibold(:size="40", @click="openForm") Замена смен
+        .flex.gap-x-4
+          base-button.font-semibold(
+            :size="40",
+            :style="{minWidth: '176px'}",
+            @click="changeShowTime"
+          ) {{textButton}}
+          base-button.font-semibold(:size="40", @click="openForm") Замена смен
 </template>
 
 <script>
@@ -43,6 +49,8 @@ export default {
   props: {
     startMonth: Object,
     timesShift: Object,
+    changeShowTime: Function,
+    showTime: Boolean,
   },
   data() {
     return {
@@ -61,6 +69,9 @@ export default {
         })
         .join(" ");
     },
+    textButton() {
+      return this.showTime ? "Скрыть время" : "Показать время";
+    },
   },
   methods: {
     openForm() {

src/pages/schedule/components/ScheduleTable.vue

@@ -26,13 +26,14 @@
           v-for="day in result",
           :key="day",
           :id="schedule.id + day",
-          @click="choiceCell(day, schedule.id, schedule); saveEmployee()",
+          @click="choiceCell(day, schedule.id, schedule); clearData()",
           :class="choiceState(day, schedule.id)",
           :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
         )
           .flex(
-            :class="{'cell-work': choiceState(day, schedule.id).status}"
+            :class="{'cell-work': choiceState(day, schedule.id).status, 'show-time': showTime}"
           ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
+
     .schedule-select.flex.w-full.pr-2(v-if="clearEmployee")
       .edit.flex.items-center.justify-center.h-11.w-11(v-if="currentEmployee.label")
         .flex.icon-edit(v-if="currentEmployee.label")
@@ -45,7 +46,7 @@
           //-   v-if="currentEmployee.label"
           //- )
             //- .icon-ok.text-xsm(class="pt-[3px]")
-      .name.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}")
+      .text.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}")
         base-custom-select(
           v-if="!currentEmployee.label",
           :items="ownersList",
@@ -71,7 +72,7 @@ import BaseButton from "@/components/base/BaseButton.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 
 export default {
-  name: "ScheduleBody",
+  name: "ScheduleTable",
   components: { BaseModal, BaseButton, BaseCustomSelect },
   props: {
     scheduleList: Array,
@@ -79,6 +80,7 @@ export default {
     buttons: Array,
     startMonth: Object,
     clearEmployee: Array,
+    showTime: Boolean,
   },
   data() {
     return {
@@ -125,6 +127,14 @@ export default {
     },
   },
   methods: {
+    choiceTime(schedule, day) {
+      let currentDay = day.format("YYYY-MM-DD");
+      let start = schedule.schedules.find(
+        (e) => e.date === currentDay
+      )?.start_time;
+      let end = schedule.schedules.find((e) => e.date === currentDay)?.end_time;
+      return `${start} ${end}`;
+    },
     changelColumnColor(day) {
       return day.format("ddd") === "сб" || day.format("ddd") === "вс"
         ? true
@@ -134,6 +144,7 @@ export default {
       this.activeButton = this.buttons.find((e) => e.active);
     },
     choiceCell(time, id, schedule) {
+      if (this.showTime) return;
       let formatTime = time.format("YYYY-MM-DD");
       let insideSchedules = schedule?.schedules.filter(
         (el) =>
@@ -158,9 +169,7 @@ export default {
         this.dateInterval.id = id;
       } else if (time.isAfter(this.dateInterval.start)) {
         this.dateInterval.end = formatTime;
-        if (this.currentEmployee.label) {
-          this.$emit("new-schedule-employee", this.dateInterval);
-        } else this.$emit("schedule-employee", this.dateInterval);
+        this.$emit("schedule-employee", this.dateInterval, id);
       } else this.dateInterval.start = formatTime;
 
       if (
@@ -197,7 +206,12 @@ export default {
           start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"),
           end_date: this.dateInterval.end,
         });
-      this.$emit("schedules", insideSchedules, outsideSchedules);
+      this.$emit(
+        "schedules",
+        insideSchedules,
+        outsideSchedules,
+        this.currentEmployee
+      );
     },
     choiceState(day, id) {
       let formatDay = day.format("YYYY-MM-DD");
@@ -218,16 +232,20 @@ export default {
 
       return {
         status: (resStart || resMiddle || resEnd) && !!this.activeButton,
+        "set-time": this.showTime,
         "from-date": !!resStart && !this.activeButton,
         "to-date": !!resEnd && !this.activeButton,
         "middle-dates": !!resMiddle && !this.activeButton,
       };
     },
-    saveEmployee() {
+    clearData() {
       this.currentEmployee.label = "";
       this.currentEmployee.id = null;
     },
     choiceWorks(day, employee) {
+      if (this.showTime) {
+        return this.choiceTime(employee, day);
+      }
       let currentDay = day.format("YYYY-MM-DD");
       let res = employee.schedules.find((e) => e.date === currentDay)?.status;
       return this.buttons.find((e) => e.work === res)?.text[1];
@@ -235,6 +253,9 @@ export default {
     choiceColor(day, employee) {
       let currentDay = day.format("YYYY-MM-DD");
       let res = employee.schedules.find((e) => e.date === currentDay)?.status;
+      if (res !== "WORKS" && this.showTime) {
+        return "var(--default-white)";
+      }
       return this.buttons.find((e) => e.work === res)?.color;
     },
     changeDays() {
@@ -315,11 +336,6 @@ export default {
   border-right: 1.5px solid var(--border-light-grey-color-1)
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
 
-.name
-  color: var(--btn-blue-color)
-  border-bottom: 1.5px solid var(--border-light-grey-color-1)
-  border-right: 1.5px solid var(--border-light-grey-color-1)
-
 .select-name
   width: 25%
   border-right: 1.5px solid var(--border-light-grey-color-1)
@@ -334,6 +350,10 @@ export default {
   border-right: 1.5px solid var(--border-light-grey-color-1)
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
 
+.show-time
+  text-align: center
+  font-size: 12px
+
 .modal-wrapper
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px