WIP Доделал форму Контактов

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

@@ -9,35 +9,40 @@
     :open-edit="openEdit"
     )
     .form-wrap.gap-24.w-full
-      .flex.flex-col.gap-4(v-for="(data, key) in contacts")
+      .flex.flex-col.gap-4(v-for="(contact, key) in contacts")
         .font-semibold.text-sm.whitespace-nowrap {{configData[key].title}}
-        .flex.w-full.justify-between.items-center.gap-4(v-for="(value, index) in data")
+        .flex.w-full.justify-between.items-center.gap-4(v-for="(data, index) in contact")
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${configData[key].fieldName} ${index+1} :`}}
           .input-wrapper.items-center.flex.h-10.gap-10px
             .flex(v-if="key === 'networks'")
               .flex.rounded-full.cursor-pointer.items-center.gap-10px.py-1.pl-1.pr-2(
-                v-if="value.kind" 
-                @click="() => copyLinkNetwork(value.username)"
+                v-if="data.id || data.filled" 
+                @click="() => copyLinkNetwork(data.username)"
                 style="background-color: var(--bg-light-grey)"
               )
-                q-icon(:name="mapNetworks[value.kind].icon" style="color: var(--btn-blue-color)")
-                span.text-sm.font-medium {{ mapNetworks[value.kind].title || value.username }}
-              base-input.w-full( 
-                v-else
-                :disabled="!isEdit" 
-                v-model="value.username"
-                :mask="configData[key].inputMask"
-                @keyup.enter="(e) => defineNetworkByValue(e, index)",
-                @update:model-value="checkChangeInput"
-                type="text"  
-                :standout="!isEdit" 
-                :outlined="isEdit" 
-                text-color="black"
-                )
+                q-icon.icon(:name="mapNetworks[data.kind].icon" :class="{old: data.id, new: data.filled}")
+                span.text-sm.font-medium {{ mapNetworks[data.kind].title || data.username }}
+              .flex.gap-10px(v-else v-click-outside="() => checkNetworksField(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(
+                  :disabled="!isEdit" 
+                  v-model="data.username"
+                  :mask="configData[key].inputMask"
+                  type="text"  
+                  :standout="!isEdit" 
+                  :outlined="isEdit" 
+                  text-color="black"
+                  )
             base-input.w-full( 
               v-else
               :disabled="!isEdit" 
-              v-model="value.username"
+              v-model="data.username"
               :mask="configData[key].inputMask"
               @update:model-value="checkChangeInput"
               type="text"  
@@ -60,6 +65,7 @@
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
 import { mapNetworks } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { checkChangeData } from "@/shared/utils/changesObjects";
 import { contactsDataForm } from "@/pages/newMedicalCard/utils/medicalConfig";
@@ -67,7 +73,7 @@ import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "ContactsForm",
-  components: { MedicalFormWrapper, BaseInput },
+  components: { MedicalFormWrapper, BaseInput, BaseSelectNetworks },
   data() {
     return {
       isEdit: false,
@@ -87,6 +93,14 @@ export default {
     }),
   },
   methods: {
+    checkNetworksField(index) {
+      if (
+        this.contacts.networks[index].kind &&
+        this.contacts.networks[index].username
+      ) {
+        this.contacts.networks[index].filled = true;
+      }
+    },
     openEdit() {
       this.isEdit = true;
     },
@@ -108,19 +122,22 @@ export default {
         this.contacts
       );
     },
-    defineNetworkByValue(e, index) {
-      const arrNetworkMap = Object.values(this.mapNetworks);
-      const value = e.target.value;
-      let newKind = arrNetworkMap.find((el) =>
-        value.includes(el.markerLink)
-      )?.kind;
-      this.contacts.networks[index].kind = newKind;
+    chooseNetwork(e, index) {
+      this.contacts.networks[index].kind = e.currentTarget.id;
     },
     addNewContact(key) {
-      this.contacts[key].push({
-        kind: this.configData[key].kind,
-        username: null,
-      });
+      if (key === "networks") {
+        this.contacts[key].push({
+          filled: false,
+          kind: null,
+          username: null,
+        });
+      } else {
+        this.contacts[key].push({
+          kind: this.configData[key].kind,
+          username: null,
+        });
+      }
       this.checkChangeInput();
     },
     deleteContact(key, index) {
@@ -135,6 +152,11 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.icon
+  &.old
+    color: var(--btn-blue-color)
+  &.new
+    color: var(--icon-violet-color)
 .input-wrapper
   width: 324px
 .form-wrap