Merge branch 'ASTRA-45' into 'master'

WIP Добавил обновление контактов персоны See merge request andrusyakka/urban-couscous!311
2023-04-14 17:09:55 +00:00
parent d67ec3c6bb 0ecb56139a
commit 604115ccf5
4 changed files with 157 additions and 47 deletions
--- 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;
--- 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,10 +47,10 @@
              )
            .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" 
+        .w-full(v-if="isEdit")
+          .add-contact.w-fit.flex.gap-10px.items-center.cursor-pointer( 
            @click="() => addNewContact(key)"
            )
            .icon-plus
@@ -39,6 +60,8 @@
 <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.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
--- 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: "Телефон",
--- 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 = {