WIP Добавил обновление, контактов персоны

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

@@ -60,6 +60,7 @@ import BaseModal from "@/components/base/BaseModal.vue";
 import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import { getRequestChangeData } from "@/shared/utils/wrapperRequestChangeData";
+import { checkChangeData } from "@/shared/utils/changesObjects";
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import moment from "moment";
 import {
@@ -100,13 +101,7 @@ export default {
   },
   methods: {
     checkChangeInput() {
-      let initData = JSON.stringify(this.initDataBasic);
-      let changeData = JSON.stringify(this.basic);
-      if (initData !== changeData) {
-        this.isCheckChange = true;
-      } else {
-        this.isCheckChange = false;
-      }
+      this.isCheckChange = checkChangeData(this.initDataBasic, this.basic);
     },
     confirmCahngeAvatar() {
       this.showModal = false;

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

@@ -13,8 +13,29 @@
         .font-semibold.text-sm.whitespace-nowrap {{configData[key].title}}
         .flex.w-full.justify-between.items-center.gap-4(v-for="(value, index) in data")
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${configData[key].fieldName} ${index+1} :`}}
-          .input-wrapper.items-center.flex.gap-10px
+          .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)"
+                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"
+                )
             base-input.w-full( 
+              v-else
               :disabled="!isEdit" 
               v-model="value.username"
               :mask="configData[key].inputMask"
@@ -26,19 +47,21 @@
               )
             .delete-contact.icon-cancel.text-xxs.cursor-pointer(
               v-if="isEdit" 
-              @click="() => deleteContact(key, value?.id)"
+              @click="() => deleteContact(key, index)"
               )
-        .add-contact.flex.gap-10px.items-center.cursor-pointer(
-          v-if="isEdit" 
-          @click="() => addNewContact(key)"
-          )
-          .icon-plus
-          span.font-medium.text-base Добавить
+        .w-full(v-if="isEdit")
+          .add-contact.w-fit.flex.gap-10px.items-center.cursor-pointer( 
+            @click="() => addNewContact(key)"
+            )
+            .icon-plus
+            span.font-medium.text-base Добавить
 </template>
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
+import { mapNetworks } from "@/pages/newMedicalCard/utils/medicalConfig";
+import { checkChangeData } from "@/shared/utils/changesObjects";
 import { contactsDataForm } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { mapState, mapGetters } from "vuex";
 
@@ -50,7 +73,9 @@ export default {
       isEdit: false,
       isLoadingData: false,
       isCheckChange: false,
+      isChangeNetwork: false,
       configData: contactsDataForm,
+      mapNetworks: mapNetworks,
     };
   },
   computed: {
@@ -66,37 +91,44 @@ export default {
       this.isEdit = true;
     },
     cancelEdit() {
+      this.$store.dispatch("returnInitData");
       this.isEdit = false;
+      this.isCheckChange = false;
     },
     saveChange() {
-      this.isEdit = false;
+      this.isLoadingData = true;
+      this.$store.dispatch("updateContactsData").then(() => {
+        this.isEdit = false;
+        this.isLoadingData = false;
+      });
     },
     checkChangeInput() {
-      // this.isCheckChange = checkChangeData(
-      //   this.initContactsData,
-      //   this.contacts
-      // );
-      let initData = JSON.stringify(this.initContactsData);
-      let changeData = JSON.stringify(this.contacts);
-      if (initData !== changeData) {
-        this.isCheckChange = true;
-      } else {
-        this.isCheckChange = false;
-      }
+      this.isCheckChange = checkChangeData(
+        this.initContactsData,
+        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;
     },
     addNewContact(key) {
       this.contacts[key].push({
         kind: this.configData[key].kind,
+        username: null,
       });
+      this.checkChangeInput();
     },
-    deleteContact(key, id) {
-      if (id) {
-        let deleteIndex = this.contacts[key].findIndex((el) => el.id === id);
-
-        this.contacts[key].splice(deleteIndex, 1);
-      } else {
-        this.contacts[key].pop();
-      }
+    deleteContact(key, index) {
+      this.contacts[key].splice(index, 1);
+      this.checkChangeInput();
+    },
+    copyLinkNetwork(value) {
+      navigator.clipboard.writeText(value);
     },
   },
 };
@@ -115,6 +147,8 @@ export default {
   @media(max-width: 1320px)
     grid-template-columns: repeat(1, 1fr)
     grid-template-rows: repeat(3, 1fr)
+.network-field
+  background-color: var(--bg-light-grey)
 .label-field
   color: var(--font-grey-color)
 .delete-contact