VIP search fullname

src/components/base/BaseInputWithSearch.vue

@@ -0,0 +1,79 @@
+<template lang="pug">
+.flex 
+  .col
+    base-input(v-model="fullName", debounce="1000")
+    .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 }}
+</template>
+
+<script>
+import BaseInput from "./BaseInput.vue";
+import { fetchWrapper } from "@/shared/fetchWrapper";
+import { v_model } from "@/shared/mixins/v-model";
+export default {
+  name: "BaseInputWithSearch",
+  components: {
+    BaseInput,
+  },
+  mixins: [v_model],
+  emits: ["createPerson", "update:modelValue"],
+  data() {
+    return {
+      fullName: "",
+      message: "",
+      showMessageBar: true,
+      candidates: [],
+    };
+  },
+  watch: {
+    fullName: {
+      immediate: true,
+      handler(val) {
+        if (!val) return;
+        fetchWrapper.get(`persons/?full_name=${val}`).then((result) => {
+          this.candidates = result;
+          this.showMessageBar = true;
+          this.message = `Нужный ${val} не найден?`;
+        });
+      },
+    },
+  },
+  methods: {
+    pickPerson(person) {
+      this.$emit("update:modelValue", { ...person });
+    },
+    createPerson() {
+      this.$emit("createPerson");
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.candidates
+  max-height: 400px
+  overflow-y: auto
+
+  .row
+    border: 1px solid black
+    cursor: pointer
+    &:hover
+      background: gray
+
+.state
+  background: yellow
+</style>