From 0ecb56139abe6269e10d564724a39c7cc01679c2 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Fri, 14 Apr 2023 20:06:34 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5,=20=D0=BA=D0=BE=D0=BD=D1=82=D0=B0=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2=20=D0=BF=D0=B5=D1=80=D1=81=D0=BE=D0=BD=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicDataForms/BasicDataForm.vue          |  9 +-
 .../BasicDataForms/ContactsForm.vue           | 90 +++++++++++++------
 .../newMedicalCard/utils/medicalConfig.js     | 45 ++++++++++
 src/store/modules/medicalCard.js              | 60 ++++++++++---
 4 files changed, 157 insertions(+), 47 deletions(-)

diff --git a/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
index 81a9697..5a2630f 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
+++ b/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;
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
index 393c3b9..9da1e53 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
+++ b/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
diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js
index 17ce648..729fcb6 100644
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -103,6 +103,51 @@ export const baseDataForm = [
   },
 ];
 
+export const mapNetworks = {
+  VK: {
+    title: "VK",
+    icon: "app:icon-vk",
+    kind: "VK",
+    markerLink: "vk",
+  },
+  TELEGRAM: {
+    title: "Telegram",
+    icon: "app:icon-tg",
+    kind: "TELEGRAM",
+    markerLink: "t.me",
+  },
+  GMAIL: {
+    title: "Gmail",
+    icon: "app:icon-google",
+    kind: "GMAIL",
+    markerLink: "gmail",
+  },
+  SLACK: {
+    title: "Slack",
+    icon: "app:icon-slack",
+    kind: "SLACK",
+    markerLink: "slack",
+  },
+  DISCORD: {
+    title: "Discord",
+    icon: "app:icon-discord",
+    kind: "DISCORD",
+    markerLink: "discord",
+  },
+  VIBER: {
+    title: "Viber",
+    icon: "wifi_calling_3",
+    kind: "VIBER",
+    markerLink: "viber",
+  },
+  WHATS_APP: {
+    title: "WhatsApp",
+    icon: "call",
+    kind: "WHATS_APP",
+    markerLink: "wa.me",
+  },
+};
+
 export const contactsDataForm = {
   phones: {
     title: "Телефон",
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index 66b64c0..79b64ef 100644
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -131,19 +131,19 @@ const getters = {
     };
   },
   getContactsData(state) {
-    let phones = state.medicalCard.person.contacts.filter(
-      (el) => el.kind === "PHONE"
-    );
-    let emails = state.medicalCard.person.contacts.filter(
-      (el) => el.kind === "EMAIL"
-    );
-    let networks = state.medicalCard.person.contacts.filter(
-      (el) => el.kind !== "PHONE" && el.kind !== "EMAIL"
-    );
+    let phones = state.medicalCard.person.contacts
+      .filter((el) => el.kind === "PHONE")
+      .map((el) => ({ ...el }));
+    let emails = state.medicalCard.person.contacts
+      .filter((el) => el.kind === "EMAIL")
+      .map((el) => ({ ...el }));
+    let networks = state.medicalCard.person.contacts
+      .filter((el) => el.kind !== "PHONE" && el.kind !== "EMAIL")
+      .map((el) => ({ ...el }));
     return {
-      phones: phones,
-      emails: emails,
-      networks: networks,
+      phones: [...phones],
+      emails: [...emails],
+      networks: [...networks],
     };
   },
   getAvatar(state) {
@@ -170,6 +170,7 @@ const actions = {
   },
   returnInitData({ commit }) {
     commit("setBasicData");
+    commit("setContactsData");
   },
   removeMedicalCardData({ commit, rootState }) {
     fetchWrapper
@@ -184,6 +185,41 @@ 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((network) => {
+        let initNetwork = initContacts.find((el) => el.id === network.id);
+        if (!network.id) {
+          return fetchWrapper.post(`general/contact/create/`, {
+            person: personId,
+            ...network,
+          });
+        }
+        if (network.id && network.username !== initNetwork.username) {
+          return fetchWrapper.post(`general/contact/${network.id}/update/`, {
+            person: personId,
+            username: network.username,
+            kind: network.kind,
+          });
+        }
+        return Promise.resolve();
+      })
+      .concat(requestDelete);
+
+    return Promise.allSettled(request).then(() =>
+      actions.getMedicalCardData({ commit })
+    );
+  },
 };
 
 const mutations = {