Merge branch 'ASTRA-45' into 'master'

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

See merge request andrusyakka/urban-couscous!311

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);
+      this.isCheckChange = checkChangeData(this.initDataBasic, this.basic);
-      let changeData = JSON.stringify(this.basic);
-      if (initData !== changeData) {
-        this.isCheckChange = true;
-      } else {
-        this.isCheckChange = false;
-      }
     },
     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(
+        .w-full(v-if="isEdit")
-          v-if="isEdit" 
+          .add-contact.w-fit.flex.gap-10px.items-center.cursor-pointer( 
-          @click="() => addNewContact(key)"
+            @click="() => addNewContact(key)"
-          )
+            )
-          .icon-plus
+            .icon-plus
-          span.font-medium.text-base Добавить
+            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.isCheckChange = checkChangeData(
-      //   this.initContactsData,
+        this.initContactsData,
-      //   this.contacts
+        this.contacts
-      // );
+      );
-      let initData = JSON.stringify(this.initContactsData);
+    },
-      let changeData = JSON.stringify(this.contacts);
+    defineNetworkByValue(e, index) {
-      if (initData !== changeData) {
+      const arrNetworkMap = Object.values(this.mapNetworks);
-        this.isCheckChange = true;
+      const value = e.target.value;
-      } else {
+      let newKind = arrNetworkMap.find((el) =>
-        this.isCheckChange = false;
+        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) {
+    deleteContact(key, index) {
-      if (id) {
+      this.contacts[key].splice(index, 1);
-        let deleteIndex = this.contacts[key].findIndex((el) => el.id === id);
+      this.checkChangeInput();
-
+    },
-        this.contacts[key].splice(deleteIndex, 1);
+    copyLinkNetwork(value) {
-      } else {
+      navigator.clipboard.writeText(value);
-        this.contacts[key].pop();
-      }
     },
   },
 };
@@ -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

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: "Телефон",

src/store/modules/medicalCard.js

@@ -131,19 +131,19 @@ const getters = {
     };
   },
   getContactsData(state) {
-    let phones = state.medicalCard.person.contacts.filter(
+    let phones = state.medicalCard.person.contacts
-      (el) => el.kind === "PHONE"
+      .filter((el) => el.kind === "PHONE")
-    );
+      .map((el) => ({ ...el }));
-    let emails = state.medicalCard.person.contacts.filter(
+    let emails = state.medicalCard.person.contacts
-      (el) => el.kind === "EMAIL"
+      .filter((el) => el.kind === "EMAIL")
-    );
+      .map((el) => ({ ...el }));
-    let networks = state.medicalCard.person.contacts.filter(
+    let networks = state.medicalCard.person.contacts
-      (el) => el.kind !== "PHONE" && el.kind !== "EMAIL"
+      .filter((el) => el.kind !== "PHONE" && el.kind !== "EMAIL")
-    );
+      .map((el) => ({ ...el }));
     return {
-      phones: phones,
+      phones: [...phones],
-      emails: emails,
+      emails: [...emails],
-      networks: networks,
+      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 = {