WIP rework search

src/components/base/BaseInput.vue

@@ -25,6 +25,7 @@
       :autofocus="autofocus",
       hide-bottom-space
       :error="error"
+      @focus="e => $emit('focus', e)"
     )
       template(v-slot:prepend, v-if="iconLeft")
         slot(name="iconLeft")
@@ -85,7 +86,7 @@ export default {
     height: String,
     error: Boolean,
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "focus"],
   computed: {
     value: {
       get() {

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>

src/components/base/BaseSelect.vue

@@ -2,6 +2,7 @@
   .flex.flex-col.gap-y-2
     base-input-container(:label="label", :style="{width: width, ...sizeVariable}")
       q-select.select(
+        ref="selectRef"
         v-model="value",
         :options="items",
         :readonly="readonly"
@@ -15,17 +16,13 @@
         dropdown-icon="app:down-arrow",
         :menu-offset="[0, 8]",
         :use-input="useInput",
+        :input-debounce="inputDebounce",
         :placeholder="useInput && placeholder ? placeholder : ''",
         @filter="filterFn",
         :popup-content-style="popupContentStyle"
       )
         template(v-slot:selected)
-          span(v-if="!value?.icon", :class="placeholderColor") {{ textSelect }}
-          q-icon.selected-icon(
-            v-else,
-            :name="iconSelect",
-            size="24px"
-          )
+          slot(name="selected")
         template(v-slot:option="scope", v-if="!customOption")
           q-item(v-bind="scope.itemProps", style="justify-content: center", v-if="value?.icon")
             q-item-section(avatar, style="padding: 0px; min-width: 0px")
@@ -37,9 +34,7 @@
           slot(
             name="customOption",
             :props="itemProps",
-            :label="opt.label"
-            :avatar="opt.avatar",
-            :medcard="opt.medcard"
+            :data="opt"
           )
         template(v-slot:prepend, v-if="iconLeft")
           slot(name="iconLeft")
@@ -77,6 +72,7 @@ export default {
     clearable: Boolean,
     size: String,
     useInput: Boolean,
+    inputDebounce: Number,
     iconLeft: Boolean,
     iconRight: Boolean,
     customOption: Boolean,
@@ -163,6 +159,11 @@ export default {
       };
     },
   },
+  methods: {
+    updateInputValue(value, noFilter) {
+      this.$refs?.selectRef?.updateInputValue(value, noFilter);
+    },
+  },
 };
 </script>
 <style lang="sass">