[WIP] добавил адаптив расписания и бара, исправил апдейт

src/pages/schedule/components/ScheduleTable.vue

@@ -16,9 +16,9 @@
           ) {{day.format("D")}}
           .text.flex.font-bold(
             :style="{opacity: changeOpacity(day)}"
-            ) {{day.format("ddd")}}
+          ) {{day.format("ddd")}}
     .schedule-wrapper.flex.w-full.flex-col
-      .schedule-body.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
+      .flex.w-full(v-for="schedule in serialized", :key="schedule.id")
         .edit.flex.items-center.justify-center.h-11.w-11
           .flex.icon-edit
         .name-employee.flex.justify-center.items-center.cursor-pointer
@@ -33,9 +33,12 @@
             :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
           )
             .flex(
-              :class="{'cell-work': choiceState(day, schedule.id).status, 'show-time': showTime}"
+              :class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
             ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
-    .schedule-select.flex.w-full(v-if="clearEmployee")
+    .flex.w-full.mt-4(
+      v-if="clearEmployee.length > 0",
+      :class="{'schedule-select': selectEmployee.label}"
+    )
       .edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
         .flex.icon-edit(v-if="selectEmployee.label")
           //- base-button(
@@ -47,7 +50,9 @@
           //-   v-if="selectEmployee.label"
           //- )
             //- .icon-ok.text-xsm(class="pt-[3px]")
-      .text.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': selectEmployee.label}")
+      .text.flex.justify-center.items-center.cursor-pointer(
+        :class="{'select-name': selectEmployee.label}"
+      )
         base-custom-select(
           v-if="!selectEmployee.label",
           :items="ownersList",
@@ -81,11 +86,12 @@ export default {
     scheduleList: Array,
     serialized: Array,
     buttons: Array,
-    startMonth: Object,
+    template: Object,
     clearEmployee: Array,
     showTime: Boolean,
     clearSelect: Function,
     selectEmployee: Object,
+    startMonth: Object,
   },
   data() {
     return {
@@ -132,10 +138,12 @@ export default {
     choiceTime(schedule, day) {
       let currentDay = day.format("YYYY-MM-DD");
       let start = schedule.schedules.find(
-        (e) => e.date === currentDay
+        (e) => e.date === currentDay && e.status === "WORKS"
       )?.start_time;
-      let end = schedule.schedules.find((e) => e.date === currentDay)?.end_time;
-      return `${start} ${end}`;
+      let end = schedule.schedules.find(
+        (e) => e.date === currentDay && e.status === "WORKS"
+      )?.end_time;
+      if (start && end) return `${start} ${end}`;
     },
     changelColumnColor(day) {
       return day.format("ddd") === "сб" || day.format("ddd") === "вс"
@@ -165,12 +173,10 @@ export default {
       if (!this.dateInterval.start) {
         this.dateInterval.start = formatTime;
         this.dateInterval.id = id;
-        this.$emit("schedule-employee", this.dateInterval, id);
       } else if (day.isAfter(this.dateInterval.start)) {
         this.dateInterval.end = formatTime;
-        this.$emit("schedule-employee", this.dateInterval, id);
       } else this.dateInterval.start = formatTime;
-
+      this.$emit("schedule-employee", this.dateInterval, id);
       if (
         !this.selectEmployee.label &&
         this.dateInterval.start &&
@@ -224,13 +230,13 @@ export default {
         this.dateInterval.id === id &&
         day.isAfter(this.dateInterval.start);
 
-      return {
-        status: (resStart || resMiddle || resEnd) && !!this.activeButton,
-        "set-date":
-          (!!resStart || !!resMiddle || !!resEnd) && !this.activeButton,
-      };
+      if (resStart || resMiddle || resEnd)
+        return {
+          status: !!this.activeButton,
+          "set-date": !this.activeButton,
+          "set-template": !this.activeButton && this.template.item.label,
+        };
     },
-
     choiceWorks(day, employee) {
       if (this.showTime) {
         return this.choiceTime(employee, day);
@@ -296,23 +302,18 @@ export default {
 
 <style lang="sass" scoped>
 .schedule
-  border: 1.5px solid var(--border-light-grey-color-1)
+  border-top: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px
-  border-right: none
-  border-bottom: none
   min-height: 87px
   width: calc(100vw - 136px)
 
 .schedule-wrapper
   overflow-y: scroll
   max-height: 351px
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
   &::-webkit-scrollbar-track
     border-radius: 0
 
-.schedule-body
-  &:hover
-    background-color: var(--border-light-grey-color-1)
-
 .table-header
   height: 50px
   background-color: #D7D9FF
@@ -322,8 +323,7 @@ export default {
 
 .schedule-select
   border-right: 8px solid var(--bg-ligth-blue-color)
-  &:hover
-    background-color: var(--border-light-grey-color-1)
+  border-top: 1.5px solid var(--border-light-grey-color-1)
 
 .column-wrapper
   overflow: auto
@@ -339,6 +339,7 @@ export default {
 .edit
   border-right: 1.5px solid var(--border-light-grey-color-1)
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  border-left: 1.5px solid var(--border-light-grey-color-1)
 
 .row
   width: calc(75% - 44px)
@@ -357,6 +358,8 @@ export default {
 .cell
   border-right: 1.5px solid var(--border-light-grey-color-1)
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  &:hover
+    background-color: var(--border-light-grey-color-1)
   &:last-child
     border-right: none
 
@@ -381,4 +384,7 @@ export default {
 
 .set-date
   background-color: var(--btn-blue-color-4) !important
+
+.set-template
+  background-color: var(--bg-event-orange-color) !important
 </style>