From 9795c261e8dafc17526fc3d2d198272dc7b5285f Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 11 Jan 2023 12:07:36 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9D=D0=B0=D1=87=D0=B0=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=B4=D0=B5=D0=BB=D0=B0=D1=82=D1=8C=20select=20=D1=81=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B8=D1=81=D0=BA=D0=BE=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseSearchSelect.vue | 163 +++++++++++++++++++++++
 src/pages/schedule/TheSchedule.vue       |  27 +++-
 2 files changed, 189 insertions(+), 1 deletion(-)
 create mode 100644 src/components/base/BaseSearchSelect.vue

diff --git a/src/components/base/BaseSearchSelect.vue b/src/components/base/BaseSearchSelect.vue
new file mode 100644
index 0000000..19b8053
--- /dev/null
+++ b/src/components/base/BaseSearchSelect.vue
@@ -0,0 +1,163 @@
+<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.cursor-pointer.relative(
+      ref="select",
+      @click="open = !open",
+      :class="{'open': open, 'border-none': borderNone}",
+    )
+      base-input(
+        :class="{'value-color': value.label || placeholderOpacity}",
+        :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"
+        )
+          .item.py-2.px-4.cursor-pointer(
+            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,
+    maxItems: {
+      type: Number,
+      default: 5,
+    },
+    placeholderOpacity: Boolean,
+    center: Boolean,
+    borderNone: Boolean,
+    textStyle: String,
+    labelStyle: String,
+  },
+  data() {
+    return {
+      open: false,
+      searchField: "",
+      saveSearchField: "",
+      selected: undefined,
+    };
+  },
+  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 #D3D4DC
+  border-radius: 4px
+  background-color: white
+  user-select: none
+  height: 40px
+  &.open
+    border: 1.5px solid #4772F2
+.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: #090A15
+  opacity: 0.4
+  text-overflow: ellipsis
+  overflow: hidden
+.item
+  border-bottom: 0.5px solid #D3D4DC
+  color: #090A15
+  &:hover
+   background-color: rgba(215, 217, 255, 0.25)
+  &:last-child
+    border-bottom: none
+.open-icon
+  &.open
+    transform: rotate(180deg)
+.separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+.border-none
+  border: none
+.value-color
+  opacity: 1
+.select-form-separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+.center
+  display: flex
+  justify-content: center
+</style>
diff --git a/src/pages/schedule/TheSchedule.vue b/src/pages/schedule/TheSchedule.vue
index 5f101a3..7ece76d 100644
--- a/src/pages/schedule/TheSchedule.vue
+++ b/src/pages/schedule/TheSchedule.vue
@@ -36,6 +36,10 @@
           :delete-schedule="deleteSchedule",
           :template="template"
         )
+        base-search-select(
+          :items="options",
+          v-model="input"
+        )
 </template>
 
 <script>
@@ -45,10 +49,17 @@ import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
 import ScheduleTable from "@/pages/schedule/components/ScheduleTable.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import BaseLoader from "@/components/Loader/BaseLoader.vue";
+import BaseSearchSelect from "@/components/base/BaseSearchSelect.vue";
 
 export default {
   name: "TheSchedule",
-  components: { ScheduleHeader, ScheduleBar, ScheduleTable, BaseLoader },
+  components: {
+    ScheduleHeader,
+    ScheduleBar,
+    ScheduleTable,
+    BaseLoader,
+    BaseSearchSelect,
+  },
   data() {
     return {
       employeeList: [
@@ -95,6 +106,20 @@ export default {
       startMonth: moment().startOf("month"),
       showTime: false,
       schedulesDate: {},
+      input: {
+        id: null,
+        label: null,
+      },
+      options: [
+        {
+          id: 1,
+          label: "1",
+        },
+        {
+          id: 2,
+          label: "2",
+        },
+      ],
     };
   },
   computed: {