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

src/pages/schedule/TheSchedule.vue

@@ -25,6 +25,7 @@
           :show-time="showTime",
           :clear-select="clearSelect",
           :select-employee="selectEmployee",
+          :template="template",
           @schedule-employee="createScheduleEmployee",
           @schedules="distributeRequest"
         )
@@ -32,7 +33,8 @@
           :buttons="buttons",
           :times="times",
           :create-schedules="postCreateSchedules",
-          :delete-schedule="deleteSchedule"
+          :delete-schedule="deleteSchedule",
+          :template="template"
         )
 </template>
 
@@ -89,6 +91,7 @@ export default {
           text: "'В'",
         },
       ],
+      template: { item: { id: null, label: null } },
       startMonth: moment().startOf("month"),
       showTime: false,
       schedulesDate: {},

src/pages/schedule/components/ScheduleBar.vue

@@ -1,33 +1,46 @@
 <template lang="pug">
-  .wrapper-bar.flex.flex-col.gap-y-4
+  .wrapper-bar.flex.flex-col.gap-y-4.p-5.justify-between
-    .flex.px-5.py-5.w-full.justify-around.gap-x-4
+    .flex.w-full.justify-around.gap-x-4
       .time-wrapper.flex.justify-between
-        base-input-time.py-14px.px-4(v-model="times.start_time", label="Начало")
+        base-input-time.py-14px.px-4.justify-around.items-center(
-        base-input-time.py-14px.px-4(v-model="times.end_time", label="Конец")
+          v-model="times.start_time",
-      .status-wrapper.flex.flex-col
+          label="Начало"
+        )
+        base-input-time.py-14px.px-4.justify-around.items-center(
+          v-model="times.end_time",
+          label="Конец"
+        )
+      .status-wrapper.flex.flex-col.gap-y-3.p-3
         .flex.justify-center.items-center.h-10
           span.font-semibold Статусы
-        .flex.justify-around(class="py-2.5")
+        .flex.justify-around.gap-x-4(class="py-2.5")
-          base-button.font-semibold(
+          base-button.font-semibold.border-none(
             v-for="item in buttons",
             :class="item.class",
             :key="item",
             :style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
             @click="choiceSchedule(item.class)"
           ) {{item.name}}
-      .graph-template.flex.flex-col.justify-between
+      .graph-template.flex.flex-col.items-center.gap-y-4
         base-custom-select(
-          :items="scheduleList",
+          :items="templateList",
           center,
-          v-model="schedule",
+          v-model="template.item",
           placeholder="Шаблоны графиков"
         )
-        base-button.delete-button.font-semibold(
+        base-input.w-28(
-          :size="40",
+          v-if="template.item.id === 1"
-          @click="deleteSchedule"
+          v-mask="'#/#'",
-        ) Удалить
+          placeholder="0/0",
-    .flex.justify-center
+          label="Введите график",
-      base-button.font-semibold(:size="40", @click="createSchedules") Сохранить
+          v-model="template.item.label"
+        )
+    .flex.justify-center.gap-x-6
+      base-button.font-semibold.w-36(:size="40", @click="createSchedules") Сохранить
+      base-button.delete-button.font-semibold.w-36(
+        :size="40",
+        @click="deleteSchedule"
+      ) Удалить
 </template>
 
 <script>
@@ -35,24 +48,34 @@ import BaseButton from "@/components/base/BaseButton.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import { mask } from "vue-the-mask";
+
 export default {
   name: "ScheduleBar",
-  components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
+  components: {
+    BaseButton,
+    BaseInput,
+    BaseCustomSelect,
+    BaseInputTime,
+    BaseInputDate,
+  },
   props: {
     buttons: Array,
+    template: Object,
     times: Object,
     createSchedules: Function,
     deleteSchedule: Function,
   },
+  directives: { mask },
   data() {
     return {
-      scheduleList: [
+      templateList: [
         { label: "Индивидуальный", id: 1 },
         { label: "2/2", id: 2 },
         { label: "3/2", id: 3 },
         { label: "5/2", id: 4 },
       ],
-      schedule: {},
     };
   },
   methods: {
@@ -72,7 +95,7 @@ export default {
   width: calc(100vw - 136px)
 
 .time-wrapper
-  height: 102px
+  height: 120px
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px
 
@@ -95,14 +118,13 @@ export default {
   color: var(--font-grey-color)
 
 .status-wrapper
-  min-width: 690px
+  min-width: 540px
-  height: 102px
+  height: 120px
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px
 
 .button-work
   background: #55CD76
-  border: none
   &:active
     background-color: #55CD76
     opacity: 1
@@ -114,7 +136,6 @@ export default {
 
 .button-vacation
   background: var(--btn-blue-color-2)
-  border: none
   opacity: 1
   &:active
     background: var(--btn-blue-color-2)
@@ -127,7 +148,6 @@ export default {
 
 .button-free
   background: #9294A7
-  border: none
   &:active
     background-color: #9294A7
     opacity: 1
@@ -139,7 +159,7 @@ export default {
 
 .graph-template
   width: 218px
-  height: 102px
+  height: 120px
 
 .delete-button
   background-color: var(--bg-event-red-color)

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;
+      let end = schedule.schedules.find(
-      return `${start} ${end}`;
+        (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 {
+      if (resStart || resMiddle || resEnd)
-        status: (resStart || resMiddle || resEnd) && !!this.activeButton,
+        return {
-        "set-date":
+          status: !!this.activeButton,
-          (!!resStart || !!resMiddle || !!resEnd) && !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
+  border-top: 1.5px solid var(--border-light-grey-color-1)
-    background-color: 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>