Merge branch 'UC-209' into 'master'

WIP Сделала BaseSearchSelect

See merge request andrusyakka/urban-couscous!250

src/components/base/BaseSearchSelect.vue

@@ -0,0 +1,146 @@
+<template lang="pug">
+  .flex.flex-col.gap-y-2
+    .font-semibold.text-sm.opacity-40(
+      v-if="label",
+      :class="labelClass"
+    ) {{ label }}
+    .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.relative(
+      ref="select",
+      @click="open = !open",
+      :class="{'open': open, 'border-none': borderNone}",
+    )
+      input.w-full.outline-0.not-italic(
+        :placeholder="placeholder",
+        v-model="value.label",
+      )
+      .flex.items-center
+        span.icon-down-arrow.open-icon.flex.text-xsm(:class="{'open': open }")
+      base-options(v-if="open")
+        .items-container.mt-1(
+          @click="closeOptions",
+          v-click-outside="leaveSelect",
+          :class="textClass"
+        )
+          .empty-window.py-2.px-4(v-if="items.length === 0") Ничего не найдено
+          .item.py-2.px-4.cursor-pointer(
+            v-else
+            v-for="item in items",
+            :key="item?.id",
+            :class="{'center': center}",
+            @click="clickItem(item?.id, item?.label)"
+          ) {{ item?.label }}
+</template>
+
+<script>
+import BaseOptions from "@/components/base/BaseOptions.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+
+export default {
+  name: "BaseSearchSelect",
+  components: { BaseOptions, BaseInput },
+  props: {
+    placeholder: String,
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    label: String,
+    modelValue: Object,
+    center: Boolean,
+    borderNone: Boolean,
+    textStyle: String,
+    labelStyle: String,
+  },
+  data() {
+    return {
+      open: false,
+      filteredItems: [],
+    };
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+    textClass() {
+      return this.textStyle
+        ? {
+            [this.textStyle]: true,
+          }
+        : {
+            "text-base": true,
+          };
+    },
+    labelClass() {
+      return this.labelStyle
+        ? {
+            [this.labelStyle]: true,
+          }
+        : {
+            "text-sm": true,
+          };
+    },
+  },
+  methods: {
+    clickItem(id, label) {
+      this.value = {
+        id: id,
+        label: label,
+      };
+    },
+    leaveSelect() {
+      this.open = false;
+    },
+    closeOptions(e) {
+      e.stopPropagation();
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.base-select
+  width: 100%
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 4px
+  background-color: white
+  user-select: none
+  height: 40px
+  &.open
+    border: 1.5px solid var(--btn-blue-color)
+.items-container
+  box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
+  border-radius: 4px
+  background-color: white
+  max-height: 142px
+  overflow-y: auto
+.placeholder
+  color: var(--font-black-color)
+  opacity: 0.4
+  text-overflow: ellipsis
+  overflow: hidden
+.item
+  border-bottom: 0.5px solid var(--border-light-grey-color)
+  color: var(--font-black-color)
+  &:hover
+   background-color: rgba(215, 217, 255, 0.25)
+  &:last-child
+    border-bottom: none
+.open-icon
+  &.open
+    transform: rotate(180deg)
+.border-none
+  border: none
+.center
+  display: flex
+  justify-content: center
+.empty-window
+  color: var(--font-black-color)
+  pointer-events: none
+</style>

src/pages/schedule/TheSchedule.vue

@@ -48,7 +48,12 @@ import BaseLoader from "@/components/Loader/BaseLoader.vue";
 
 export default {
   name: "TheSchedule",
-  components: { ScheduleHeader, ScheduleBar, ScheduleTable, BaseLoader },
+  components: {
+    ScheduleHeader,
+    ScheduleBar,
+    ScheduleTable,
+    BaseLoader,
+  },
   data() {
     return {
       employeeList: [