WIP Добвил обновление Основных данных в БД

src/pages/newMedicalCard/components/BasicDataForm.vue

@@ -1,5 +1,13 @@
 <template lang="pug">
-  medical-form-wrapper(title="Основные данные" :cancel="cancelEdit" :open-edit="openEdit" :save="saveChange")
+  medical-form-wrapper(
+    title="Основные данные"
+    :is-check-change="isCheckChange" 
+    :is-loading-data="isLoadingData" 
+    :is-edit="isEdit" 
+    :save="saveChange" 
+    :cancel="cancelEdit" 
+    :open-edit="openEdit"
+    )
     .form-wrap.gap-24.w-full
       .data-section.flex.flex-col.gap-4(v-for="data in configData")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
@@ -22,6 +30,7 @@
           .select(v-else-if="field.type === 'select'")
             base-select(
               v-model="basic[data.dataKey][field.key]"
+              @input="checkChangeInput"
               :hide-dropdown-icon="!isEdit"
               :disable="!isEdit"
               :outlined="isEdit"
@@ -33,6 +42,7 @@
             v-else 
             :disabled="!isEdit" 
             v-model="basic[data.dataKey][field.key]"
+            @input="checkChangeInput"
             :type="field.type" 
             :width="300" 
             :standout="!isEdit" 
@@ -49,6 +59,9 @@ import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import { fetchWrapper } from "@/shared/fetchWrapper";
+import { removeEmptyFields } from "@/shared/utils/changesObjects";
+import moment from "moment";
 import {
   baseDataForm,
   genderOptions,
@@ -69,6 +82,8 @@ export default {
     return {
       showModal: false,
       isEdit: false,
+      isLoadingData: false,
+      isCheckChange: false,
       genderOptions: genderOptions,
       configData: baseDataForm,
     };
@@ -77,12 +92,22 @@ export default {
     ...mapGetters({
       url: "getUrl",
       avatar: "getAvatar",
+      initDataBasic: "getBasicData",
     }),
     ...mapState({
       basic: (state) => state.medical.basicData,
     }),
   },
   methods: {
+    checkChangeInput() {
+      let initData = JSON.stringify(this.initDataBasic);
+      let changeData = JSON.stringify(this.basic);
+      if (initData !== changeData) {
+        this.isCheckChange = true;
+      } else {
+        this.isCheckChange = false;
+      }
+    },
     confirmCahngeAvatar() {
       this.showModal = false;
     },
@@ -90,8 +115,92 @@ export default {
       this.$store.dispatch("returnInitData");
       this.isEdit = false;
     },
+    updateBasicData() {
+      let registration = this.basic.registrationAddress;
+      let residence = this.basic.residenceAddress;
+      let personal = this.basic.personalData;
+      const request = Object.keys(this.basic).map((key) => {
+        if (key === "personalData") {
+          let updatePersonal = {
+            full_name: `${personal.last_name} ${personal.first_name} ${personal.patronymic}`,
+            gender: personal.gender?.id,
+            birth_date:
+              personal.birth_date &&
+              moment(personal.birth_date).format("YYYY-MM-DD"),
+          };
+          if (
+            JSON.stringify(this.basic[key]) !==
+            JSON.stringify(this.initDataBasic[key])
+          ) {
+            return fetchWrapper.post(
+              `general/person/${personal.id}/update/`,
+              updatePersonal
+            );
+          }
+          return Promise.resolve();
+        }
+        if (key === "registrationAddress") {
+          let initRegistration = Object.keys(
+            removeEmptyFields(this.initDataBasic[key])
+          );
+          if (Object.keys(removeEmptyFields(this.basic[key])).length) {
+            if (!initRegistration.length) {
+              return fetchWrapper.post(`general/address/create/`, {
+                person: personal.id,
+                registration_flg: true,
+                ...removeEmptyFields(registration),
+              });
+            }
+            if (
+              JSON.stringify(this.basic[key]) !==
+              JSON.stringify(this.initDataBasic[key])
+            ) {
+              return fetchWrapper.post(
+                `general/address/${registration.id}/update/`,
+                removeEmptyFields(registration)
+              );
+            }
+            return Promise.resolve();
+          }
+          return Promise.resolve();
+        }
+        if (key === "residenceAddress") {
+          let initResidence = Object.keys(
+            removeEmptyFields(this.initDataBasic[key])
+          );
+          if (Object.keys(removeEmptyFields(this.basic[key])).length) {
+            if (!initResidence.length) {
+              return fetchWrapper.post(`general/address/create/`, {
+                person: personal.id,
+                residence_flg: true,
+                ...removeEmptyFields(residence),
+              });
+            }
+            if (
+              JSON.stringify(this.basic[key]) !==
+              JSON.stringify(this.initDataBasic[key])
+            ) {
+              return fetchWrapper.post(
+                `general/address/${residence.id}/update/`,
+                removeEmptyFields(residence)
+              );
+            }
+            return Promise.resolve();
+          }
+          return Promise.resolve();
+        }
+      });
+      return request;
+    },
     saveChange() {
+      this.isLoadingData = true;
+      let updateBasic = this.updateBasicData();
+      Promise.allSettled(updateBasic)
+        .then(() => this.$store.dispatch("getMedicalCardData"))
+        .then(() => {
+          this.isLoadingData = false;
           this.isEdit = false;
+        });
     },
     openEdit() {
       this.isEdit = true;

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -6,11 +6,11 @@
     .flex.flex-col.h-full.gap-25px.p-6
       .flex.w-fit.gap-11px.items-center
         span.font-bold.text-base {{title}}
-        q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="clickEditForm" size="20")
+        q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="openEdit" size="20")
       slot
       .flex.h-fit.w-fit.gap-2(v-if="isEdit")
-        base-button.text-base.font-semibold(outlined :size="40" @click="cancelEdit") Отменить
+        base-button.text-base.font-semibold(outlined :size="40" @click="cancel") Отменить
-        base-button.text-base.font-semibold(:size="40" @click="saveChangeForm") Сохранить изменения
+        base-button.text-base.font-semibold(v-if="isCheckChange" :size="40" @click="save") Сохранить изменения
 </template>
 
 <script>
@@ -33,29 +33,17 @@ export default {
       type: Function,
       default: () => {},
     },
+    isCheckChange: {
+      type: Boolean,
+      default: false,
     },
-  data() {
+    isLoadingData: {
-    return {
+      type: Boolean,
-      isEdit: false,
+      default: false,
-      isLoadingData: false,
-    };
     },
-  methods: {
+    isEdit: {
-    clickEditForm() {
+      type: Boolean,
-      this.isEdit = true;
+      default: false,
-      this.openEdit();
-    },
-    cancelEdit() {
-      this.isEdit = false;
-      this.cancel();
-    },
-    saveChangeForm() {
-      this.isLoadingData = true;
-      setTimeout(() => {
-        this.isLoadingData = false;
-        this.isEdit = false;
-        this.save();
-      }, 2000);
     },
   },
 };

src/pages/newMedicalCard/utils/configMedical.js

@@ -1,7 +1,7 @@
 export const baseDataForm = [
   {
     dataLabel: "Личные данные",
-    dataKey: "basicData",
+    dataKey: "personalData",
     fields: [
       {
         key: "last_name",

src/shared/utils/changesObjects.js

@@ -0,0 +1,21 @@
+export function removeEmptyFields(obj) {
+  let resultObj = {};
+  Object.keys(obj)
+    .filter(
+      (key) => obj[key] !== undefined && obj[key] !== null && obj[key] !== ""
+    )
+    .forEach((key) => {
+      resultObj[key] = obj[key];
+    });
+  return resultObj;
+}
+
+export function getObjectChangeField(objInit, objUpdate) {
+  const resultObj = {};
+  Object.keys(objUpdate).forEach((key) => {
+    if (objUpdate[key] !== objInit[key]) {
+      resultObj[key] = objUpdate[key];
+    }
+  });
+  return resultObj;
+}

src/store/modules/medicalCard.js

@@ -4,7 +4,7 @@ import { genderOptions } from "@/pages/newMedicalCard/utils/configMedical";
 const state = () => ({
   medicalCard: {},
   basicData: {
-    basicData: {
+    personalData: {
       last_name: null,
       first_name: null,
       patronymic: null,
@@ -39,7 +39,7 @@ const getters = {
       state?.medicalCard?.person?.address?.find((el) => el.residence_flg) || {};
     let person = state.medicalCard.person;
     return {
-      basicData: {
+      personalData: {
         last_name: person?.last_name,
         first_name: person?.first_name,
         patronymic: person?.patronymic,
@@ -50,6 +50,7 @@ const getters = {
           ? new Date(person?.birth_date)
           : new Date(),
         photo: person?.photo ? rootState.getUrl + person?.photo : null,
+        id: person?.id,
       },
       registrationAddress: {
         region: registrationAddress?.region,
@@ -57,6 +58,7 @@ const getters = {
         street: registrationAddress?.street,
         house_number: registrationAddress?.house_number,
         apartment_number: registrationAddress?.apartment_number,
+        id: registrationAddress?.id,
       },
       residenceAddress: {
         region: residenceAddress?.region,
@@ -64,6 +66,7 @@ const getters = {
         street: residenceAddress?.street,
         house_number: residenceAddress?.house_number,
         apartment_number: residenceAddress?.apartment_number,
+        id: residenceAddress?.id,
       },
     };
   },