From efaf9687388aab05707eec6491e5a36d69ca39dd Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Fri, 7 Apr 2023 20:00:02 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D0=9E=D1=81=D0=BD=D0=BE=D0=B2=D0=BD=D1=8B=D1=85=20=D0=B4=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D1=85=20=D0=B2=20=D0=91=D0=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BasicDataForm.vue              | 115 +++++++++++++++++-
 .../components/MedicalFormWrapper.vue         |  36 ++----
 .../newMedicalCard/utils/configMedical.js     |   2 +-
 src/shared/utils/changesObjects.js            |  21 ++++
 src/store/modules/medicalCard.js              |   7 +-
 5 files changed, 151 insertions(+), 30 deletions(-)
 create mode 100644 src/shared/utils/changesObjects.js

diff --git a/src/pages/newMedicalCard/components/BasicDataForm.vue b/src/pages/newMedicalCard/components/BasicDataForm.vue
index b1ffc20..8b180c6 100644
--- a/src/pages/newMedicalCard/components/BasicDataForm.vue
+++ b/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"
@@ -32,7 +41,8 @@
           base-input(
             v-else 
             :disabled="!isEdit" 
-            v-model="basic[data.dataKey][field.key]" 
+            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.isEdit = false;
+      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;
diff --git a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
index d65f432..a76c276 100644
--- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
+++ b/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(:size="40" @click="saveChangeForm") Сохранить изменения
+        base-button.text-base.font-semibold(outlined :size="40" @click="cancel") Отменить
+        base-button.text-base.font-semibold(v-if="isCheckChange" :size="40" @click="save") Сохранить изменения
 </template>
 
 <script>
@@ -33,29 +33,17 @@ export default {
       type: Function,
       default: () => {},
     },
-  },
-  data() {
-    return {
-      isEdit: false,
-      isLoadingData: false,
-    };
-  },
-  methods: {
-    clickEditForm() {
-      this.isEdit = true;
-      this.openEdit();
+    isCheckChange: {
+      type: Boolean,
+      default: false,
     },
-    cancelEdit() {
-      this.isEdit = false;
-      this.cancel();
+    isLoadingData: {
+      type: Boolean,
+      default: false,
     },
-    saveChangeForm() {
-      this.isLoadingData = true;
-      setTimeout(() => {
-        this.isLoadingData = false;
-        this.isEdit = false;
-        this.save();
-      }, 2000);
+    isEdit: {
+      type: Boolean,
+      default: false,
     },
   },
 };
diff --git a/src/pages/newMedicalCard/utils/configMedical.js b/src/pages/newMedicalCard/utils/configMedical.js
index 5400f2a..33eec5a 100644
--- a/src/pages/newMedicalCard/utils/configMedical.js
+++ b/src/pages/newMedicalCard/utils/configMedical.js
@@ -1,7 +1,7 @@
 export const baseDataForm = [
   {
     dataLabel: "Личные данные",
-    dataKey: "basicData",
+    dataKey: "personalData",
     fields: [
       {
         key: "last_name",
diff --git a/src/shared/utils/changesObjects.js b/src/shared/utils/changesObjects.js
new file mode 100644
index 0000000..f3ad757
--- /dev/null
+++ b/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;
+}
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index f9672ea..7e023a2 100644
--- a/src/store/modules/medicalCard.js
+++ b/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,
       },
     };
   },