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

src/pages/schedule/components/ScheduleBar.vue

@@ -1,33 +1,46 @@
 <template lang="pug">
-  .wrapper-bar.flex.flex-col.gap-y-4
-    .flex.px-5.py-5.w-full.justify-around.gap-x-4
+  .wrapper-bar.flex.flex-col.gap-y-4.p-5.justify-between
+    .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(v-model="times.end_time", label="Конец")
-      .status-wrapper.flex.flex-col
+        base-input-time.py-14px.px-4.justify-around.items-center(
+          v-model="times.start_time",
+          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")
-          base-button.font-semibold(
+        .flex.justify-around.gap-x-4(class="py-2.5")
+          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(
-          :size="40",
-          @click="deleteSchedule"
-        ) Удалить
-    .flex.justify-center
-      base-button.font-semibold(:size="40", @click="createSchedules") Сохранить
+        base-input.w-28(
+          v-if="template.item.id === 1"
+          v-mask="'#/#'",
+          placeholder="0/0",
+          label="Введите график",
+          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
-  height: 102px
+  min-width: 540px
+  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)