WIP rework search

src/components/base/BaseInputWithSearch.vue

@@ -1,33 +1,51 @@
 <template lang="pug">
 .flex
   .col
-    base-input(v-model="fullName", debounce="500", size="M" )
-    .state(v-if="showMessageBar")
-      .row
-        .col {{ message }}
-        .col
-          q-btn(
-            @click="createPerson"
-          )
-            q-icon(name="app:icon-plus", size="12px", left)
-            span Создать
-    .candidates
-      .row.w-full(
-        v-for="candidate in candidates",
-        key="candidate.id",
-        @click="pickPerson(candidate)"
-      )
-        .col {{ candidate.last_name + ' ' + candidate.first_name + ' ' + candidate.patronymic }}
+    base-select.search(
+      width="100%",
+      size="M",
+      placeholder="Найти пациента",
+      icon-left,
+      hide-dropdown-icon,
+      use-input
+      :input-debounce="500"
+      :items="candidates",
+      custom-option,
+      :filter-fn="filterFn",
+      :popup-content-style="{height: candidates?.length > 3 ? '216px' : ''}"
+      v-model="value"
+      ref="selectRef"
+    )
+      //template(#selected)
+      //  .text-dark.text-sm.font-medium(v-if="person") {{ person.last_name + ' ' + person.first_name + ' ' + person.patronymic }}
+      template(v-slot:iconLeft)
+        q-icon.search-icon(name="app:search", size="20px")
+      template(v-slot:customOption="{props, data}")
+        .w-full.item.px-4.py-2.flex.gap-x-3.cursor-pointer(
+          v-bind="props"
+        )
+          .flex.flex-col.gap-y-1
+            .text-dark.text-sm.font-medium {{ data.last_name + ' ' + data.first_name + ' ' + data.patronymic }}
+      template(v-slot:beforeOptions)
+        .h-10.w-full.px-4.pt-3.pb-2.flex.items-center
+          span.text-m.grey-color {{message}}
+            span.text-m.primary-color.cursor-pointer.pl-1(@click="createPerson") Создать
+      template(v-slot:noOption)
+        .h-10.w-full.px-4.pt-3.pb-2.flex.items-center
+          span.text-m.grey-color {{message}}
+            span.text-m.primary-color.cursor-pointer.pl-1(@click="createPerson") Создать
 </template>
 
 <script>
 import BaseInput from "./BaseInput.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import { v_model } from "@/shared/mixins/v-model";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
   name: "BaseInputWithSearch",
   components: {
     BaseInput,
+    BaseSelect,
   },
   mixins: [v_model],
   emits: ["createPerson"],
@@ -37,6 +55,7 @@ export default {
       message: "",
       showMessageBar: true,
       candidates: [],
+      person: null,
     };
   },
   computed: {
@@ -51,40 +70,50 @@ export default {
     },
   },
   watch: {
-    fullName(val) {
-      if (!val || val === this.pickedFullName) return;
-      fetchWrapper.get(`persons/?full_name=${val}`).then((result) => {
-        this.candidates = result;
-        this.showMessageBar = true;
-        this.message = `Нужный ${val} не найден?`;
-      });
-    },
-    value() {
-      this.fullName = this.pickedFullName;
+    pickedFullName(val) {
+      this.$refs?.selectRef?.updateInputValue(val, true);
     },
   },
   methods: {
-    pickPerson(person) {
-      this.value = { ...person };
-    },
     createPerson() {
       this.$emit("createPerson");
     },
+    filterFn(val, update) {
+      fetchWrapper.get(`persons/?full_name=${val}`).then((result) => {
+        update(() => {
+          this.candidates = result;
+          this.showMessageBar = true;
+          this.message = `Нужный ${val} не найден?`;
+        });
+      });
+    },
+    test(slotProps) {
+      console.log(slotProps);
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.candidates
-  max-height: 400px
-  overflow-y: auto
+.search-icon :deep(path)
+  fill: var(--font-grey-color)
 
-  .row
-    border: 1px solid black
-    cursor: pointer
-    &:hover
-      background: gray
+.search :deep(.q-field__prepend)
+  padding-right: 4px
 
-.state
-  background: yellow
+.plus :deep(path)
+  fill: var(--default-white)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.primary-color
+  color: var(--btn-blue-color)
+
+.item
+  border-bottom: 1px solid var(--gray-secondary)
+  &:last-child
+    border-bottom: none
+  &:hover
+    background-color: var(--gray-thirdly)
 </style>