[WIP] Добавил возможность замены смен, фикс стилей

src/pages/schedule/components/FormChangeShift.vue

@@ -5,14 +5,22 @@
       .flex.pt-2
         .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="closeForm")
     .flex.flex-col.gap-y-6
-      base-input(label="Дата", type="date", outlined)
-      base-select(
-        v-model="currentEmployee",
+      base-input(
+        label="Дата",
+        type="date",
+        v-model="replacementSheet.date",
+        outlined
+      )
+      base-input.input(,
+        type="text"
+        v-model="replacementSheet.currentEmployee",
         label="Текущий сотрудник",
-        placeholder="Выберите сотрудника"
+        outlined,
+        disabled
       )
       base-select(
-        v-model="currentEmployee",
+        :items="ownersList",
+        v-model="replacementSheet.replacementEmployee",
         label="Замена сотрудника",
         placeholder="Выберите сотрудника"
       )
@@ -20,14 +28,14 @@
         base-input(
           type="time",
           label="Начало",
-          v-model="timesShift.start_time",
+          v-model="replacementSheet.start_time",
           outlined
         )
         .flex.items-center.mt-4 —
         base-input(
           type="time",
           label="Конец",
-          v-model="timesShift.end_time",
+          v-model="replacementSheet.end_time",
           outlined
         )
       .flex.justify-center
@@ -36,6 +44,7 @@
           color="primary",
           padding="8px 24px",
           no-caps
+          @click="changeShift(); closeForm()"
         )
 </template>
 
@@ -48,13 +57,41 @@ export default {
   components: { BaseSelect, BaseInput },
   emits: ["update:model-value"],
   props: {
-    timesShift: Object,
+    employees: Array,
+    serialized: Array,
+    replacementSheet: Object,
+    trimOwnerName: Function,
+    changeShift: Function,
     modelValue: Boolean,
   },
-  data() {
-    return {
-      currentEmployee: { label: "", id: null },
-    };
+  computed: {
+    ownersList() {
+      if (this.employees) {
+        let filteredArray = [];
+        this.employees.forEach((elem) => {
+          filteredArray.push({
+            id: elem.id,
+            label: this.trimOwnerName(
+              elem.last_name,
+              elem.first_name,
+              elem.patronymic
+            ),
+          });
+        });
+        this.serialized.forEach((elem) => {
+          filteredArray.push({
+            id: elem.id,
+            label: this.trimOwnerName(
+              elem.last_name,
+              elem.first_name,
+              elem.patronymic
+            ),
+          });
+        });
+        return filteredArray;
+      }
+      return [];
+    },
   },
   methods: {
     closeForm() {
@@ -69,7 +106,7 @@ export default {
   height: fit-content
   width: 534px
   background-color: var(--default-white)
-  box-shadow: var(--default-shadow)
+  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.05)
   border-radius: 4px
   z-index: 5
 </style>