[WIP] Добавил отображение сотрудников на графике, поправил стили, изменил запросы логина

src/pages/schedule/components/ScheduleBar.vue

@@ -2,25 +2,22 @@
   .wrapper-bar.flex.flex-col.gap-y-4
     .flex.px-5.py-5.w-full.justify-around
       .time-wrapper.flex.justify-between
-        .flex.flex-col.py-14px.px-4.gap-y-14px
-          .text.text-smm Начало рабочего дня
-          base-input-time.item-input.text-base.select(:width-input="40")
-        .flex.flex-col.py-14px.px-4.gap-y-14px
-          .text.span.text-smm Конец рабочего дня
-          base-input-time.item-input.text-base.select(:width-input="40")
+        .flex.flex-col.items-center.py-14px.px-4.gap-y-14px
+          .text.text-smm Начало
+          base-input-date.select(v-model:value="dataSchedule.endTime")
+        .flex.flex-col.items-center.py-14px.px-4.gap-y-14px
+          .text.span.text-smm Конец
+          base-input-date.select(v-model:value="dataSchedule.startTime")
       .status-wrapper.flex.flex-col
         .flex.justify-center.items-center.h-10
           span.font-semibold Статусы
         .flex.justify-around(class="py-2.5")
-          base-button.button-work.font-semibold(
-            :style="{minWidth: '190px', minHeight: '43px'}"
-          ) Работает
-          base-button.button-status.font-semibold(
-            :style="{minWidth: '190px', minHeight: '43px'}"
-          ) Отпуск/больничный
-          base-button.button-free.font-semibold(
-            :style="{minWidth: '190px', minHeight: '43px'}"
-          ) Выходной
+          base-button.font-semibold(
+            v-for="item in buttons",
+            :class="item.work" ,
+            :style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
+            @click="choiceSchedule(item.work)"
+          ) {{item.name}}
       .graph-template.flex
         base-custom-select(
           :items="scheduleList",
@@ -36,9 +33,10 @@
 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";
 export default {
   name: "ScheduleBar",
-  components: { BaseButton, BaseCustomSelect, BaseInputTime },
+  components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
   data() {
     return {
       scheduleList: [
@@ -48,8 +46,24 @@ export default {
         { label: "5/2", id: 4 },
       ],
       schedule: {},
+      dataSchedule: {
+        startDate: null,
+        endDate: null,
+        status: "",
+      },
+      buttons: [
+        { work: "button-work", name: "Работает", active: false },
+        { work: "button-status", name: "Отпуск/больничный", active: false },
+        { work: "button-free", name: "Статусы", active: false },
+      ],
     };
   },
+  methods: {
+    choiceSchedule(item) {
+      this.buttons.forEach((e) => (e.active = false));
+      this.buttons.find((e) => e.work === item).active = true;
+    },
+  },
 };
 </script>
 
@@ -60,7 +74,7 @@ export default {
   border-radius: 4px
 
 .time-wrapper
-  width: 350px
+  width: 420px
   height: 102px
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px
@@ -128,4 +142,9 @@ export default {
 .graph-template
   width: 218px
   height: 40px
+
+.select
+  height: 40px
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 4px
 </style>