WIP Добавил выбор соцсети и доверенного лица из существующих персон

src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue

@@ -15,41 +15,61 @@
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
         .flex.w-full.h-full.justify-between.gap-4(v-for="field in data.fields")
           .label-field.font-sm.text-sm.whitespace-nowrap.mt-10px {{`${field.label} :`}}
-          .input-wrapper.items-center.flex.h-10.gap-10px
-            .flex.gap-1(v-if="field.key === 'networks'")
-              .flex.rounded-full.cursor-pointer.items-center.gap-10px.py-1.pl-1.pr-2(
+          .input-wrapper.items-center.h-fit.gap-10px
+            .w-full.flex.gap-x-1.gap-y-2(v-if="field.key === 'networks'" :style="{'flex-wrap': 'wrap !important'}")
+              .flex.rounded-full.cursor-pointer.h-fit.items-center.gap-10px.py-1.pl-1.pr-2(
                 v-for="network in confidant.networks"
                 @click="() => copyLinkNetwork(network.username)"
                 style="background-color: var(--bg-light-grey)"
               )
                 q-icon.icon(:name="mapNetworks[network.kind].icon" :class="{old: network.id, new: !network.id}")
-                span.text-sm.font-medium {{ mapNetworks[network.kind].title || network.username }}
-              .flex.add-network.w-7.h-7.rounded-full.items-center.justify-center.cursor-pointer(v-if="isEdit")
-                q-icon.w-3.h-3(name="app:plus")
-              //- .flex.gap-10px(v-else :key="key+index")
-              //-   base-select-networks(
-              //-     :list-data="Object.values(mapNetworks)"
-              //-     :option-data="data.kind"
-              //-     :choose-option="(e) => chooseNetwork(e, index)"
-              //-     :style-border="true"
-              //-     :size-input="50"
-              //-     )
-              //-   base-input.w-full(
-              //-     v-model="data.username"
-              //-     type="text"
-              //-     no-error-icon
-              //-     :name="key"
-              //-     :rule="configData[key].rules"
-              //-     :standout="!isEdit" 
-              //-     :outlined="isEdit" 
-              //-     text-color="black"
-              //-     )
-
+                span.text-smm.font-medium {{ mapNetworks[network.kind].title || network.username }}
+              .flex.relative
+                q-btn(
+                  v-if="isEdit"
+                  icon="add",
+                  size="17px",
+                  class="add-network"
+                  @click.stop
+                  round,
+                  dense,
+                  no-caps,
+                  padding="3px"
+                )
+                  q-menu(v-model="isOpenPopupAdding", anchor="bottom left", self="top right")
+                    .menu-wrapper.flex.flex-col.gap-y-3.p-4
+                      base-adding-network(
+                        :items="Object.values(mapNetworks)",
+                        :network="newNetwork",
+                      )
+                      .w-fit
+                        q-btn(
+                          color="primary",
+                          label="Добавить",
+                          no-caps,
+                          @click="saveNetwork",
+                          padding="8px 24px"
+                        )
+            .flex.w-full.relative(v-else)
+              q-menu.h-fit(
+                v-if="field.key === 'last_name'"
+                fit 
+                v-model="isOpenListConfidant"
+                :style="{'max-height': '160px'}"
+                no-focus 
+                anchor="bottom right" 
+                self="top right"
+                )
+                .flex.flex-col.w-full.h-full.overflow-y-auto
+                  .confidant-item.flex.h-10.items-center.cursor-pointer.text-base.px-2(
+                    v-for="person in listPersons" 
+                    :id="person.id"
+                    @click="(e) => choiceConfidant(e)"
+                    ) {{ `${person.last_name || ""} ${person.first_name || ""} ${person.patronymic || ""}` }}           
               base-input.w-full(
-              v-else
                 :readonly="!isEdit" 
                 v-model="confidant[field.key]"
-              @update:model-value="checkChangeInput"
+                @update:model-value="(val) => checkChangeInput(val, field.key)"
                 :mask="field.mask"
                 :type="field.type"
                 :name="field.key"
@@ -67,6 +87,9 @@ import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWra
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BasePopup from "@/components/base/BasePopup.vue";
+import BaseAddingNetwork from "@/components/base/BaseAddingNetwork.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 import { checkChangeData } from "@/shared/utils/changesObjects";
 import { mapState, mapGetters } from "vuex";
 import {
@@ -76,12 +99,26 @@ import {
 
 export default {
   name: "ConfidantForm",
-  components: { MedicalFormWrapper, BaseInput, BaseSelectNetworks, BaseButton },
+  components: {
+    MedicalFormWrapper,
+    BaseInput,
+    BaseSelectNetworks,
+    BaseSelect,
+    BaseButton,
+    BasePopup,
+    BaseAddingNetwork,
+  },
   data() {
     return {
+      newNetwork: {
+        kind: mapNetworks["TELEGRAM"],
+        username: "",
+      },
       isEdit: false,
       isLoadingData: false,
       isCheckChange: false,
+      isOpenPopupAdding: false,
+      isOpenListConfidant: false,
       configData: confidantConfig,
       mapNetworks: mapNetworks,
     };
@@ -95,11 +132,41 @@ export default {
       initConfidant: "getConfidantData",
     }),
     ...mapState({
+      listPersons: (state) => state.medical.personFiltredList,
       confidants: (state) => state.medical.confidantData,
     }),
   },
   methods: {
-    checkChangeInput() {
+    choiceConfidant(e) {
+      const newConfidant = this.listPersons.find(
+        (el) => el.id === e.currentTarget.id
+      );
+      this.confidants[this.index] = { ...newConfidant, note: "" };
+      this.isOpenListConfidant = false;
+    },
+    saveNetwork() {
+      this.confidants[this.index].networks.push({
+        kind: this.newNetwork.kind.id,
+        username: this.newNetwork.username,
+      });
+      this.isOpenPopupAdding = false;
+    },
+    checkChangeInput(val, key) {
+      if (key === "last_name" && val.length > 0) {
+        localStorage.setItem("searchConfidant", val);
+        this.$store.dispatch("getPersonsFiltredList").then(() => {
+          if (key === "last_name" && val.length > 1) {
+            localStorage.setItem("searchConfidant", val);
+            this.$store.dispatch("getPersonsFiltredList").then(() => {
+              if (this.listPersons.length > 0) {
+                this.isOpenListConfidant = true;
+              } else {
+                this.isOpenListConfidant = false;
+              }
+            });
+          }
+        });
+      }
       this.isCheckChange = checkChangeData(this.initConfidant, this.confidant);
     },
     saveChange() {
@@ -135,6 +202,9 @@ export default {
   color: var(--font-grey-color)
 .input-wrapper
   width: 302px
+.confidant-item
+  &:hover
+    background-color: var(--bg-light-grey)
 .add-network
   color: var(--font-dark-blue-color)
   background-color: var(--bg-light-grey)

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -135,37 +135,44 @@ export const errorMap = {
 
 export const mapNetworks = {
   VK: {
+    id: "VK",
     title: "VK",
     icon: "app:icon-vk",
     network: "VK",
   },
   TELEGRAM: {
+    id: "TELEGRAM",
     title: "Telegram",
     icon: "app:icon-tg",
     network: "TELEGRAM",
   },
   GMAIL: {
+    id: "GMAIL",
     title: "Gmail",
     icon: "app:icon-google",
     network: "GMAIL",
   },
   SLACK: {
+    id: "SLACK",
     title: "Slack",
     icon: "app:icon-slack",
     network: "SLACK",
     markerLink: "slack",
   },
   DISCORD: {
+    id: "DISCORD",
     title: "Discord",
     icon: "app:icon-discord",
     network: "DISCORD",
   },
   VIBER: {
+    id: "VIBER",
     title: "Viber",
     icon: "wifi_calling_3",
     network: "VIBER",
   },
   WHATS_APP: {
+    id: "WHATS_APP",
     title: "WhatsApp",
     icon: "call",
     network: "WHATS_APP",
@@ -218,14 +225,14 @@ export const confidantConfig = [
   {
     dataLabel: "Общая информация",
     fields: [
-      {
-        key: "first_name",
-        label: "Имя",
-      },
       {
         key: "last_name",
         label: "Фамилия",
       },
+      {
+        key: "first_name",
+        label: "Имя",
+      },
       {
         key: "patronymic",
         label: "Отчество",

src/store/modules/medicalCard.js

@@ -4,6 +4,7 @@ import { genderOptions } from "@/pages/newMedicalCard/utils/medicalConfig";
 const state = () => ({
   medicalCard: {},
   confidantData: [],
+  personFiltredList: [],
   contactsData: {
     phones: [],
     emails: [],
@@ -252,6 +253,15 @@ const actions = {
         commit("setConfidantData");
       });
   },
+  getPersonsFiltredList({ commit }) {
+    fetchWrapper
+      .get(
+        `general/person/?last_name=${localStorage.getItem("searchConfidant")}`
+      )
+      .then((res) => {
+        commit("setPersonFiltredList", res.results);
+      });
+  },
   returnInitData({ commit }) {
     commit("setBasicData");
     commit("setContactsData");
@@ -295,6 +305,9 @@ const mutations = {
   setConfidantData(state) {
     state.confidantData = this.getters.getConfidantData;
   },
+  setPersonFiltredList(state, persons) {
+    state.personFiltredList = persons;
+  },
 };
 
 export default {