[WIP] Добавил поиск на модальное окно выбора льгот, правки кода

src/components/base/BaseCategorySelection.vue

@@ -2,13 +2,19 @@
   .selection-wrapper.flex
     .left-side.flex.flex-col.gap-y-4
       .flex.font-bold.text-xl Категории
-      base-input(placeholder="Поиск", outlined, :width="300")
+      base-input(
-        .flex.items-center.cursor-pointer
+        placeholder="Поиск",
-          q-icon(
+        @keyup.enter="searchCategory",
-            name="app:icon-search",
+        v-model="searchBenefit",
-            size="18px",
+        outlined,
-            style="color: var(--font-dark-blue-color)"
+        :width="300",
-          )
+        iconLeft
+      )
+        q-icon(
+          name="app:icon-search",
+          size="20px",
+          style="color: var(--font-grey-color)"
+        )
       .field.flex.flex-col.overflow-y-scroll
         .flex.items-center(
           v-for="benefit in benefitData",
@@ -24,7 +30,11 @@
           .name.flex.items-center.font-medium.text-xm {{benefit.name}}
       .buttons-group.flex.py-4.px-8.justify-center
         base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить
-        base-button.text-base.font-semibold(:size="40", @click="saveCategories(selected[0])") Сохранить
+        base-button.text-base.font-semibold(
+          v-if="selected.length > 0",
+          :size="40",
+          @click="saveCategories(selected[0])"
+        ) Сохранить
     .right-side.flex.px-14.font-bold.relative
       q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
       .flex.py-10.gap-y-6.flex-col(v-if="selected.length > 0 && selected[0]?.name !== 'Без льготы'")
@@ -58,10 +68,12 @@ export default {
     shiftSelected: Function,
     closeModalCategories: Function,
     saveCategories: Function,
+    showModal: Boolean,
   },
   data() {
     return {
       selected: [],
+      searchBenefit: "",
     };
   },
   computed: {
@@ -75,6 +87,11 @@ export default {
       return this.selected[0]?.privileges.split(",");
     },
   },
+  methods: {
+    searchCategory() {
+      this.$emit("search", this.searchBenefit);
+    },
+  },
   watch: {
     selected: {
       immediate: true,
@@ -83,6 +100,12 @@ export default {
         if (this.selected.length >= 2) this.selected.shift();
       },
     },
+    showModal: {
+      immediate: true,
+      handler(newVal) {
+        if (!newVal) this.searchBenefit = "";
+      },
+    },
   },
 };
 </script>
@@ -91,6 +114,7 @@ export default {
 .selection-wrapper
   width: 895px
   height: 660px
+  font-feature-settings: 'pnum' on, 'lnum' on
 
 .left-side
   width: 364px

src/components/base/BaseInput.vue

@@ -22,10 +22,12 @@
       :autogrow="autogrow",
       :square="square",
       :standout="standout"
-      :accept="accept"
+      :accept="accept",
       hide-bottom-space
     )
-      slot.cursor-pointer
+      template(v-slot:prepend, v-if="iconLeft")
+        slot
+      slot.cursor-pointer(v-if="!iconLeft")
 </template>
 
 <script>
@@ -85,6 +87,7 @@ export default {
     disabled: Boolean,
     label: String,
     readonly: Boolean,
+    iconLeft: Boolean,
   },
   emits: ["update:modelValue"],
   computed: {

src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue

@@ -13,7 +13,8 @@
         .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
         .flex.w-full.justify-between.items-center.gap-4(
           v-for="field in insurance.fields",
-          :key="insurance.insuranceKey + field.key"
+          :key="insurance.insuranceKey + field.key",
+          :style="{marginTop: field.label === 'Документы' ? '20px' : null}"
         )
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'avatar'")
@@ -25,7 +26,7 @@
             .replace-photo.font-medium.text-base.cursor-pointer(
               v-if="isEdit",
               @click="changeModal(insurance.insuranceKey)"
-            ) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото"}}
+            ) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото" }}
             base-modal(
               v-if="insurance.insuranceKey === photoId"
               v-model="showModal",
@@ -36,13 +37,15 @@
                 v-model="basic[photoId][field.key]"
                 :confirm-upload="confirmChangePhoto" 
               )
-          .flex.h-10.relative(v-else-if="field.type === 'select'")
+          .flex.h-10.relative(
-            .flex(@click="openModalCategories")
+            v-else-if="field.type === 'select'",
-              q-field.items-center.cursor-pointer(
+            @click="openModalCategories"
-                standout,
+          )
-                :disable="!isEdit",
+            q-field.items-center.cursor-pointer(
-                :outlined="isEdit",
+              standout,
-              ) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
+              :readonly="!isEdit",
+              :outlined="isEdit",
+            ) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
             base-modal(
               default-padding,
               hide-header,
@@ -52,9 +55,11 @@
               base-category-selection(
                 :benefit-data="benefitData",
                 :close-modal-categories="closeModalCategories",
-                :save-categories="saveCategories"
+                :save-categories="saveCategories",
+                :show-modal="showModalCategories",
+                @search="filterDataBenefit"
               )
-            .flex.font-medium.text-smm.absolute.top-10(
+            .flex.font-medium.text-smm.absolute.top-11(
               v-if="basic?.benefit[insurance?.discount]",
               :style="{color: 'var(--font-grey-color)'}"
             )
@@ -67,18 +72,24 @@
               v-model="basic[insurance.insuranceKey][field.key]",
               @update:model-value="checkChangeInput",
               :mask="field?.inputMask",
-              :disabled="!isEdit",
+              :readonly="!isEdit",
               :standout="!isEdit",
               :outlined="isEdit",
               :type="field.type",
               :width="278",
               text-color="black"
             )
+              q-icon.my-auto.text-lg.label-field(
+                size="18px",
+                name="app:icon-copy",
+                v-if="checkCopiedFields(field.key)",
+                @click="copyValue(basic[insurance.insuranceKey][field.key])"
+              )
 </template>
 
 <script>
 import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/medicalConfig";
-import { mapActions, mapGetters, mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper";
@@ -106,6 +117,7 @@ export default {
       showModal: false,
       showModalCategories: false,
       photoId: "",
+      copiedFields: ["series", "number"],
     };
   },
   computed: {
@@ -118,11 +130,24 @@ export default {
       basic: (state) => state.medical.basicData,
       benefitData: (state) => state.medical.benefitData,
     }),
-    ...mapActions({
-      fetchBenefitData: "getBenefitData",
-    }),
   },
   methods: {
+    filterDataBenefit(text) {
+      if (text.length > 1) {
+        localStorage.setItem("searchBenefit", text);
+        this.$store.dispatch("getBenefitDataSearch");
+      } else {
+        this.$store.dispatch("getBenefitData");
+        localStorage.removeItem("searchBenefit", text);
+      }
+    },
+
+    checkCopiedFields(key) {
+      return !this.isEdit && this.copiedFields.some((elem) => elem === key);
+    },
+    copyValue(text) {
+      navigator.clipboard.writeText(text);
+    },
     selectCategory(str) {
       return str && str.length > 30
         ? str.substr(0, 30) + "..."
@@ -134,6 +159,7 @@ export default {
       this.showModalCategories = false;
       this.basic.benefit.id = obj.id;
       this.basic.benefit.name = obj.name;
+      this.basic.benefit.discount = obj.discount;
       this.isCheckChange = true;
     },
     changeModal(id) {
@@ -290,7 +316,7 @@ export default {
     showModalCategories: {
       immediate: true,
       handler(newVal) {
-        if (newVal) this.fetchBenefitData;
+        if (newVal) this.$store.dispatch("getBenefitData");
       },
     },
   },
@@ -314,9 +340,6 @@ export default {
 .replace-photo
   color: var(--btn-blue-color)
 
-.input
-  color: purple
-
 .form-wrap
   display: grid
   grid-template-columns: repeat(3, 1fr)

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -250,13 +250,13 @@ export const baseInsuranceForm = [
         key: "series",
         label: "Серия",
         type: "text",
-        inputMask: "######",
+        inputMask: "####",
       },
       {
         key: "number",
         label: "Номер",
         type: "text",
-        inputMask: "##########",
+        inputMask: "####-####-####",
       },
       {
         key: "photo",
@@ -273,13 +273,13 @@ export const baseInsuranceForm = [
         key: "series",
         label: "Серия",
         type: "text",
-        inputMask: "######",
+        inputMask: "####",
       },
       {
         key: "number",
         label: "Номер",
         type: "text",
-        inputMask: "##########",
+        inputMask: "####-####-####",
       },
       {
         key: "photo",

src/store/modules/medicalCard.js

@@ -47,6 +47,7 @@ const state = () => ({
     },
     benefit: {
       id: null,
+      discount: null,
       name: null,
       photo: null,
     },
@@ -129,6 +130,7 @@ const getters = {
       benefit: {
         name: person?.benefit?.name,
         id: person?.benefit?.id,
+        discount: person?.benefit?.discount,
         photo: person?.photo_benefit
           ? {
               photo: rootState.getUrl + person?.photo_benefit,
@@ -212,6 +214,14 @@ const actions = {
       commit("setBenefitData", res.results);
     });
   },
+  getBenefitDataSearch({ commit }) {
+    fetchWrapper
+      .get(`general/benefit/?name=${localStorage.getItem("searchBenefit")}`)
+      .then((res) => {
+        commit("setBenefitData", res.results);
+      });
+  },
+
   getMedicalCardData({ commit }) {
     fetchWrapper
       .get(