WIP Добавил обновление Контактов

src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue

@@ -9,8 +9,8 @@
     :open-edit="openEdit"
     )
     .flex.flex-col.gap-19px.w-full
-      .flex.flex-col.gap-4
+      .flex.flex-col.gap-4.w-full
-        .flex.gap-4.items-center(v-for="(allergy, index) in allergies")
+        .flex.gap-4.items-center.w-full.justify-between(v-for="(allergy, index) in allergies")
           .label-field.font-sm.text-sm.whitespace-nowrap {{ `Аллерген ${index+1}:` }}
           .flex.gap-2.w-full.items-center
             base-input( 
@@ -51,6 +51,7 @@ import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import { checkChangeData } from "@/shared/utils/changesObjects";
 import { mapState, mapGetters } from "vuex";
+import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData";
 
 export default {
   name: "AllergiesForm",
@@ -65,15 +66,35 @@ export default {
   computed: {
     ...mapState({
       allergies: (state) => state.medical.allergies,
+      personId: (state) => state.medical.medicalCard.person.id,
     }),
     ...mapGetters({
       initAllergies: "getAllergiesData",
     }),
   },
   methods: {
+    updateAllergies() {
+      const notEmptyAllergies = this.allergies.filter(
+        (el) => el.name && el.title
+      );
+      return getRequestArrayData(
+        this.initAllergies,
+        notEmptyAllergies,
+        "person",
+        this.personId,
+        "general",
+        "allergic"
+      );
+    },
     saveChange() {
-      this.isEdit = false;
+      this.isLoadingData = true;
-      this.isCheckChange = false;
+      Promise.allSettled(this.updateAllergies())
+        .then(() => this.$store.dispatch("getMedicalCardData"))
+        .then(() => {
+          this.isLoadingData = false;
+          this.isEdit = false;
+          this.isCheckChange = false;
+        });
     },
     cancelEdit() {
       this.$store.dispatch("returnInitData");

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

@@ -8,7 +8,7 @@
     :cancel="cancelEdit" 
     :open-edit="openEdit"
     )
-    .form-wrap.gap-24.w-full
+    q-form.form-wrap.gap-24.w-full(ref="formContacts")
       .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="(data, index) in contact")
@@ -44,6 +44,7 @@
               :disabled="!isEdit" 
               v-model="data.username"
               :mask="configData[key].inputMask"
+              :rule="configData[key].rules"
               @update:model-value="checkChangeInput"
               type="text"  
               :standout="!isEdit" 
@@ -72,6 +73,7 @@ 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";
+import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData";
 import { mapState, mapGetters } from "vuex";
 
 export default {
@@ -92,6 +94,8 @@ export default {
     }),
     ...mapState({
       contacts: (state) => state.medical.contactsData,
+      personId: (state) => state.medical.medicalCard.person.id,
+      initAllContacts: (state) => state.medical.medicalCard.person.contacts,
     }),
   },
   methods: {
@@ -111,11 +115,37 @@ export default {
       this.isEdit = false;
       this.isCheckChange = false;
     },
+    updateContacts() {
+      const allNewContacts = [
+        ...this.contacts.phones,
+        ...this.contacts.emails,
+        ...this.contacts.networks,
+      ];
+      const notEmptyContacts = allNewContacts.filter(
+        (el) => el.kind && el.username
+      );
+      return getRequestArrayData(
+        this.initAllContacts,
+        notEmptyContacts,
+        "person",
+        this.personId,
+        "general",
+        "contact"
+      );
+    },
     saveChange() {
-      this.isLoadingData = true;
+      const form = this.$refs.formContacts;
-      this.$store.dispatch("updateContactsData").then(() => {
+      form.validate().then((validate) => {
-        this.isEdit = false;
+        if (validate) {
-        this.isLoadingData = false;
+          this.isLoadingData = true;
+          Promise.allSettled(this.updateContacts())
+            .then(() => this.$store.dispatch("getMedicalCardData"))
+            .then(() => {
+              this.isLoadingData = false;
+              this.isEdit = false;
+              this.isCheckChange = false;
+            });
+        }
       });
     },
     checkChangeInput() {

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -1,3 +1,5 @@
+import { ruleLengthValue, ruleEmailValue } from "@/shared/utils/rulesInputs";
+
 export const baseDataForm = [
   {
     dataLabel: "Личные данные",
@@ -147,11 +149,13 @@ export const contactsDataForm = {
     title: "Телефон",
     fieldName: "Телефон",
     kind: "PHONE",
+    rules: [(val) => ruleLengthValue(val, 18)],
     inputMask: "+7 (###) ###-##-##",
   },
   emails: {
     title: "Почта",
     fieldName: "Email",
+    rules: [(val) => ruleEmailValue(val)],
     kind: "EMAIL",
   },
   networks: {

src/shared/utils/rulesInputs.js

@@ -0,0 +1,19 @@
+export function ruleNotValue(val, text) {
+  return val || text || false;
+}
+
+export function ruleLengthValue(val, minLength, text) {
+  return (val && val.length === minLength) || text || false;
+}
+
+export function ruleEmailValue(val, text) {
+  return (
+    (val &&
+      val.length < 100 &&
+      val.includes("@") &&
+      val.match(/@(?=\S+)/) &&
+      val.match(/(?<=\S+)@/)) ||
+    text ||
+    false
+  );
+}

src/shared/utils/wrapperRequestChangeData.js

@@ -1,5 +1,5 @@
 import { fetchWrapper } from "../fetchWrapper";
-import { removeEmptyFields } from "./changesObjects";
+import { removeEmptyFields, checkChangeData } from "./changesObjects";
 
 export function getRequestChangeData(
   createData,
@@ -26,3 +26,39 @@ export function getRequestChangeData(
   }
   return Promise.resolve();
 }
+
+export function getRequestArrayData(
+  initData,
+  updateData,
+  updateName,
+  idUpdateName,
+  api,
+  key
+) {
+  const deleteRequests = initData
+    .filter((el) => !updateData.find((data) => data.id === el.id))
+    .map((el) => fetchWrapper.del(`${api}/${key}/${el.id}/delete/`));
+  const requests = updateData.map((el) => {
+    const requestObj = {
+      [updateName]: idUpdateName,
+      ...el,
+    };
+    delete requestObj.id;
+    if (!el?.id) {
+      return fetchWrapper.post(`${api}/${key}/create/`, { ...requestObj });
+    }
+    if (
+      el?.id &&
+      checkChangeData(
+        initData.find((obj) => obj.id === el.id),
+        el
+      )
+    ) {
+      return fetchWrapper.post(`${api}/${key}/${el.id}/update/`, {
+        ...requestObj,
+      });
+    }
+    return Promise.resolve();
+  });
+  return requests.concat(deleteRequests);
+}

src/store/modules/medicalCard.js

@@ -239,46 +239,6 @@ const actions = {
         localStorage.removeItem("medicalId");
       });
   },
-  updateContactsData({ commit, state }) {
-    const personId = state.medicalCard.person.id;
-    const initContacts = state.medicalCard.person.contacts;
-    const allNewContacts = [
-      ...state.contactsData.phones,
-      ...state.contactsData.emails,
-      ...state.contactsData.networks,
-    ];
-    let requestDelete = initContacts
-      .filter((el) => !allNewContacts.find((newNet) => newNet.id === el.id))
-      .map((el) => fetchWrapper.del(`general/contact/${el.id}/delete/`));
-    const request = allNewContacts
-      .map((contact) => {
-        let initNetwork = initContacts.find((el) => el.id === contact.id);
-        if (!contact.id && contact.username && contact.kind) {
-          return fetchWrapper.post(`general/contact/create/`, {
-            person: personId,
-            username: contact.username,
-            kind: contact.kind,
-          });
-        }
-        if (
-          contact.id &&
-          contact.username &&
-          contact.username !== initNetwork.username
-        ) {
-          return fetchWrapper.post(`general/contact/${contact.id}/update/`, {
-            person: personId,
-            username: contact.username,
-            kind: contact.kind,
-          });
-        }
-        return Promise.resolve();
-      })
-      .concat(requestDelete);
-
-    return Promise.allSettled(request).then(() =>
-      actions.getMedicalCardData({ commit })
-    );
-  },
 };
 
 const mutations = {