Merge branch 'master' into '3-transition-medical-card'

# Conflicts:
#   src/router.js

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">

src/pages/createMedicalCard/TheCreateMedicalCard.vue

@@ -1,60 +0,0 @@
-<template lang="pug">
-  .w-full.h-full.flex.flex-col
-    .flex.w-full.gap-x-2.pb-2
-      medical-header(
-        v-model="currentMenuItem",
-        :change-shown-remove-modal="changeShownRemoveModal",
-      )
-      medical-records
-    component(
-      v-if="currentMenuItem",
-      v-bind:is="currentMenuItem",
-    )
-    base-modal(
-      v-model="isShownRemoveModal",
-      title="Удаление медкарты"
-    )
-      medical-remove-modal(:change-shown-remove-modal="changeShownRemoveModal")
-</template>
-
-<script>
-import MedicalHeader from "@/pages/newMedicalCard/components/MedicalHeader.vue";
-import MedicalRecords from "@/pages/newMedicalCard/components/MedicalRecords.vue";
-import BaseModal from "@/components/base/BaseModal.vue";
-import MedicalRemoveModal from "@/pages/newMedicalCard/components/MedicalRemoveModal.vue";
-import MedicalBaseInfo from "@/pages/newMedicalCard/components/MedicalBaseInfo.vue";
-
-export default {
-  name: "TheCreateMedicalCard",
-  components: {
-    MedicalRemoveModal,
-    BaseModal,
-    MedicalRecords,
-    MedicalHeader,
-    MedicalBaseInfo,
-  },
-  data() {
-    return {
-      isShownRemoveModal: false,
-      currentMenuItem: "MedicalBaseInfo",
-    };
-  },
-  created() {
-    this.$store.dispatch("setMedicalCardData", {
-      created_at: new Date(),
-      updated_at: new Date(),
-      type: "new",
-      number: "новая",
-      person: {
-        last_name: "Введите",
-        first_name: "имя",
-        patronymic: "пациента",
-        priority: 4,
-        allergic: [],
-      },
-    });
-  },
-};
-</script>
-
-<style scoped lang="sass"></style>

src/router.js

@@ -7,7 +7,6 @@ import TheLogin from "@/pages/login/TheLogin";
 import LoggedInLayout from "@/components/LoggedInLayout";
 import TheMedicalCard from "@/pages/newMedicalCard/TheMedicalCard";
 import { fetchWrapper } from "@/shared/fetchWrapper";
-import TheCreateMedicalCard from "@/pages/createMedicalCard/TheCreateMedicalCard.vue";
 
 const ifNotAuthenticated = async (to, from, next) => {
   const data = await fetchWrapper.get("users/me");
@@ -46,7 +45,6 @@ export default createRouter({
           path: "medical-card/:id?",
           component: TheMedicalCard,
         },
-        { path: "create-medical-card", component: TheCreateMedicalCard },
       ],
     },
   ],