WIP Добавил обновление данных доверенных лиц

src/components/base/BaseAddingNetwork.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .flex.w-full(class="gap-x-1.5")
     base-select(:items="items", v-model="network.kind")  
-    base-input.w-full(v-model="network.username", placeholder="Ссылкa", outlined)
+    base-input.w-full(v-model="network.username", placeholder="Ссылкa", outlined, :rule="ruleInput", no-error-icon)
 </template>
 
 <script>
@@ -19,6 +19,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    ruleInput: {
+      type: Array,
+      default: () => [],
+    },
   },
   computed: {
     networkInternal: {

src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue

@@ -41,11 +41,13 @@
                       base-adding-network(
                         :items="Object.values(mapNetworks)",
                         :network="newNetwork",
+                        :rule-input="ruleInputNetwork"
                       )
                       .w-fit
                         q-btn(
                           color="primary",
                           label="Добавить",
+                          type="button"
                           no-caps,
                           @click="saveNetwork",
                           padding="8px 24px"
@@ -55,7 +57,7 @@
                 v-if="field.key === 'last_name'"
                 fit 
                 v-model="isOpenListConfidant"
-                :style="{'max-height': '160px'}"
+                :style="{'max-height': '160px', 'position': 'fixed !important'}"
                 no-focus 
                 anchor="bottom right" 
                 self="top right"
@@ -68,7 +70,7 @@
                     ) {{ `${person.last_name || ""} ${person.first_name || ""} ${person.patronymic || ""}` }}           
               base-input.w-full(
                 :readonly="!isEdit" 
-                v-model="confidant[field.key]"
+                v-model="confidant[field.key].value"
                 @update:model-value="(val) => checkChangeInput(val, field.key)"
                 :mask="field.mask"
                 :type="field.type"
@@ -90,12 +92,19 @@ import BaseButton from "@/components/base/BaseButton.vue";
 import BasePopup from "@/components/base/BasePopup.vue";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider.vue";
+import { getFieldsNameUnvalidated } from "@/shared/utils/changesObjects";
+import { getRequestConfidant } from "@/shared/utils/wrapperRequestChangeData";
+import { addNotification } from "@/components/Notifications/notificationContext";
+import { ruleNotValue } from "@/shared/utils/rulesInputs";
 import { checkChangeData } from "@/shared/utils/changesObjects";
+import { getConfidantObject } from "@/pages/newMedicalCard/utils/gettersObjects";
 import { mapState, mapGetters } from "vuex";
 import {
   confidantConfig,
   mapNetworks,
 } from "@/pages/newMedicalCard/utils/medicalConfig";
+import { fetchWrapper } from "@/shared/fetchWrapper";
 
 export default {
   name: "ConfidantForm",
@@ -107,6 +116,7 @@ export default {
     BaseButton,
     BasePopup,
     BaseAddingNetwork,
+    TheNotificationProvider,
   },
   data() {
     return {
@@ -119,8 +129,10 @@ export default {
       isCheckChange: false,
       isOpenPopupAdding: false,
       isOpenListConfidant: false,
+      ruleInputNetwork: [(val) => ruleNotValue(val)],
       configData: confidantConfig,
       mapNetworks: mapNetworks,
+      listPersons: [],
     };
   },
   props: {
@@ -132,7 +144,6 @@ export default {
       initConfidant: "getConfidantData",
     }),
     ...mapState({
-      listPersons: (state) => state.medical.personFiltredList,
       confidants: (state) => state.medical.confidantData,
     }),
   },
@@ -141,39 +152,96 @@ export default {
       const newConfidant = this.listPersons.find(
         (el) => el.id === e.currentTarget.id
       );
-      this.confidants[this.index] = { ...newConfidant, note: "" };
+      this.confidants[this.index] = getConfidantObject(newConfidant);
       this.isOpenListConfidant = false;
     },
     saveNetwork() {
+      if (this.newNetwork.username) {
         this.confidants[this.index].networks.push({
           kind: this.newNetwork.kind.id,
           username: this.newNetwork.username,
         });
         this.isOpenPopupAdding = false;
+        this.newNetwork = {
+          kind: mapNetworks["TELEGRAM"],
+          username: "",
+        };
+      } else {
+        addNotification(
+          "Соцсеть",
+          "Соцсеть",
+          "Отсутсвует ссылка на соцсеть",
+          "error",
+          5000
+        );
+      }
     },
     checkChangeInput(val, key) {
-      if (key === "last_name" && val.length > 0) {
+      if (key === "last_name") {
+        if (val.length > 0) {
           localStorage.setItem("searchConfidant", val);
-        this.$store.dispatch("getPersonsFiltredList").then(() => {
+          this.$store.dispatch("getPersonsFiltredList").then((res) => {
-          if (key === "last_name" && val.length > 1) {
+            if (res.length > 0) {
-            localStorage.setItem("searchConfidant", val);
+              this.listPersons = res;
-            this.$store.dispatch("getPersonsFiltredList").then(() => {
-              if (this.listPersons.length > 0) {
               this.isOpenListConfidant = true;
             } else {
+              this.listPersons = [];
               this.isOpenListConfidant = false;
             }
           });
+        } else {
+          this.isOpenListConfidant = false;
+          this.listPersons = [];
         }
-        });
       }
-      this.isCheckChange = checkChangeData(this.initConfidant, this.confidant);
+      this.isCheckChange = checkChangeData(
+        this.initConfidant[this.index],
+        this.confidant
+      );
+    },
+    returnInitData() {
+      const initData = this.initConfidant.find(
+        (el) => el.id === this.confidant?.id
+      );
+      this.confidants[this.index] = initData || getConfidantObject();
     },
     saveChange() {
-      // console.log(this.confidants);
+      const initConfidantData = this.initConfidant.find(
+        (el) => el.id === this.confidant.id
+      );
+      const initPersonData = this.listPersons.find(
+        (el) => el.id === this.confidant.id
+      );
+      const form = this.$refs.formConfidant;
+      form.validate().then((validate) => {
+        if (validate) {
+          getRequestConfidant(
+            this.confidant,
+            initConfidantData,
+            initPersonData
+          ).then(() => {
+            this.$store.dispatch("getMedicalCardData");
+            this.isLoadingData = false;
+            this.isEdit = false;
+            this.isCheckChange = false;
+          });
+        } else {
+          const config = this.configData.map((el) => el.fields).flat();
+          getFieldsNameUnvalidated(form).forEach((errorKey) => {
+            const configField = config.find((el) => el.key === errorKey);
+            addNotification(
+              configField.label,
+              configField.label,
+              configField.error,
+              "error",
+              5000
+            );
+          });
+        }
+      });
     },
     cancelEdit() {
-      this.$store.dispatch("returnInitData");
+      this.returnInitData();
       this.isEdit = false;
       this.isCheckChange = false;
     },
@@ -181,7 +249,31 @@ export default {
       this.isEdit = true;
     },
     deleteConfidant() {
+      if (this.confidant.id) {
+        fetchWrapper
+          .del(
+            `medical_card/medical_history/${localStorage.getItem(
+              "medicalId"
+            )}/delete_confidant/`,
+            {
+              confidants: [
+                {
+                  person: {
+                    id: this.confidant.id,
+                  },
+                },
+              ],
+            }
+          )
+          .then(() => {
+            this.$store.dispatch("getMedicalCardData");
+          });
+      } else {
         this.confidants.splice(this.index, 1);
+      }
+    },
+    copyLinkNetwork(value) {
+      navigator.clipboard.writeText(value);
     },
   },
 };

src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue

@@ -14,6 +14,7 @@
 <script>
 import ConfidantForm from "@/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import { getConfidantObject } from "@/pages/newMedicalCard/utils/gettersObjects";
 import { mapState } from "vuex";
 
 export default {
@@ -26,14 +27,7 @@ export default {
   },
   methods: {
     addNewConfidant() {
-      this.confidants.push({
+      this.confidants.push(getConfidantObject());
-        networks: [],
-        email: "",
-        phone: "",
-        first_name: "",
-        last_name: "",
-        patronymic: "",
-      });
     },
   },
 };

src/pages/newMedicalCard/utils/gettersObjects.js

@@ -0,0 +1,55 @@
+export function getConfidantObject(data) {
+  if (!data) {
+    return {
+      networks: [],
+      email: {
+        value: null,
+      },
+      phone: {
+        value: null,
+      },
+      first_name: {
+        value: null,
+      },
+      last_name: {
+        value: null,
+      },
+      patronymic: {
+        value: null,
+      },
+      note: {
+        value: null,
+      },
+    };
+  } else {
+    const phone = data.contacts.find((el) => el.kind === "PHONE");
+    const email = data.contacts.find((el) => el.kind === "EMAIL");
+    const networks = data.contacts.filter(
+      (el) => el.kind !== "PHONE" && el.kind !== "EMAIL"
+    );
+    return {
+      id: data.id,
+      first_name: {
+        value: data?.first_name,
+      },
+      last_name: {
+        value: data?.last_name,
+      },
+      patronymic: {
+        value: data?.patronymic,
+      },
+      phone: {
+        value: phone?.username,
+        id: phone?.id,
+      },
+      email: {
+        value: email?.username,
+        id: email?.id,
+      },
+      networks,
+      note: {
+        value: data.note ? data.note.join("") : "",
+      },
+    };
+  }
+}

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -228,14 +228,20 @@ export const confidantConfig = [
       {
         key: "last_name",
         label: "Фамилия",
+        error: "Поля с ФИО должны быть заполнены",
+        rules: [(val) => ruleNotValue(val)],
       },
       {
         key: "first_name",
         label: "Имя",
+        error: "Поля с ФИО должны быть заполнены",
+        rules: [(val) => ruleNotValue(val)],
       },
       {
         key: "patronymic",
         label: "Отчество",
+        error: "Поля с ФИО должны быть заполнены",
+        rules: [(val) => ruleNotValue(val)],
       },
     ],
   },
@@ -246,11 +252,15 @@ export const confidantConfig = [
         key: "phone",
         label: "Телефон",
         mask: "+7 (###) ###-##-##",
+        error:
+          "Не корректно введен номер телефона. Номер телефона должен состоять из 10 цифр (без учета +7)",
         rules: [(val) => ruleLengthValue(val, 18)],
       },
       {
         key: "email",
         label: "Почта",
+        error:
+          "Не корректно введен адрес почты. Почта должна содержать локальное имя, знак @ и имя домена",
         rules: [(val) => ruleEmailValue(val)],
       },
       {
@@ -264,7 +274,7 @@ export const confidantConfig = [
     dataLabel: "Дополнения",
     fields: [
       {
-        key: "additions",
+        key: "note",
         label: "Информация",
         type: "textarea",
         autogrow: true,

src/shared/fetchWrapper.js

@@ -41,8 +41,13 @@ function request(method, url, headers = {}, body, type = "") {
       headers: {
         Authorization: `Bearer ${token}`,
         ...headers,
+        "Content-Type": "application/json",
+        Accept: "application/json",
       },
     };
+    if (body) {
+      requestOptions.body = JSON.stringify(body);
+    }
   }
   if (method === "POST" || method === "PUT") {
     if (type && type === "formData") {
@@ -74,8 +79,8 @@ function get(url, type, headers, attempts = 3) {
   return handleRequest("GET", url, headers, attempts, null, type);
 }
 
-function del(url, headers, attempts = 3) {
+function del(url, body, headers, attempts = 3) {
-  return handleRequest("DELETE", url, headers, attempts, null);
+  return handleRequest("DELETE", url, headers, attempts, body);
 }
 
 function post(url, body, type, headers, attempts = 3) {

src/shared/utils/wrapperRequestChangeData.js

@@ -62,3 +62,130 @@ export function getRequestArrayData(
   });
   return requests.concat(deleteRequests);
 }
+
+export function getRequestConfidant(confidant, initConfidant, initPerson) {
+  const medicalId = localStorage.getItem("medicalId");
+  const fullName = `${confidant.last_name.value} ${confidant.first_name.value} ${confidant.patronymic.value}`;
+  let contacts = [];
+  const phone = confidant.phone.value
+    ? { username: confidant.phone.value, kind: "PHONE" }
+    : null;
+  const email = confidant.email.value
+    ? { username: confidant.email.value, kind: "EMAIL" }
+    : null;
+  if (confidant.phone.id) phone.id = confidant.phone.id;
+  if (confidant.email.id) email.id = confidant.email.id;
+  if (phone) contacts.push(phone);
+  if (email) contacts.push(email);
+  contacts = contacts.concat(confidant.networks);
+  if (!confidant.id) {
+    return fetchWrapper
+      .post(`general/person/create/`, { full_name: fullName })
+      .then((res) => {
+        return Promise.allSettled(
+          getRequestArrayData(
+            [],
+            contacts,
+            "person",
+            res.id,
+            "general",
+            "contact"
+          )
+        ).then(() =>
+          fetchWrapper.post(
+            `medical_card/medical_history/${medicalId}/update/`,
+            {
+              confidant: [
+                {
+                  person: {
+                    id: res.id,
+                  },
+                },
+              ],
+            }
+          )
+        );
+      });
+  } else {
+    if (initPerson) {
+      if (initConfidant && initPerson.id !== initConfidant.id) {
+        fetchWrapper.del(
+          `medical_card/medical_history/${medicalId}/delete_confidant/`,
+          {
+            confidants: [
+              {
+                person: {
+                  id: initConfidant.id,
+                },
+              },
+            ],
+          }
+        );
+      }
+      return fetchWrapper
+        .post(`general/person/${confidant.id}/update/`, {
+          full_name: fullName,
+        })
+        .then(() => {
+          if (contacts.length) {
+            return Promise.allSettled(
+              getRequestArrayData(
+                initPerson.contacts,
+                contacts,
+                "person",
+                confidant.id,
+                "general",
+                "contact"
+              )
+            ).then(() =>
+              fetchWrapper.post(
+                `medical_card/medical_history/${medicalId}/update/`,
+                {
+                  confidant: [
+                    {
+                      person: {
+                        id: confidant.id,
+                      },
+                    },
+                  ],
+                }
+              )
+            );
+          }
+        });
+    }
+    if (initConfidant && !initPerson) {
+      return fetchWrapper
+        .post(`general/person/${confidant.id}/update/`, {
+          full_name: fullName,
+        })
+        .then(() => {
+          if (contacts.length) {
+            return Promise.allSettled(
+              getRequestArrayData(
+                initConfidant.networks,
+                contacts,
+                "person",
+                confidant.id,
+                "general",
+                "contact"
+              )
+            ).then(() =>
+              fetchWrapper.post(
+                `medical_card/medical_history/${medicalId}/update/`,
+                {
+                  confidant: [
+                    {
+                      person: {
+                        id: confidant.id,
+                      },
+                    },
+                  ],
+                }
+              )
+            );
+          }
+        });
+    }
+  }
+}

src/store/modules/medicalCard.js

@@ -1,5 +1,6 @@
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import { genderOptions } from "@/pages/newMedicalCard/utils/medicalConfig";
+import { getConfidantObject } from "@/pages/newMedicalCard/utils/gettersObjects";
 
 const state = () => ({
   medicalCard: {},
@@ -203,18 +204,7 @@ const getters = {
     return [...state.medicalCard.person.allergic.map((el) => ({ ...el }))];
   },
   getConfidantData(state) {
-    return [
+    return [...state.medicalCard.confidant.map((el) => getConfidantObject(el))];
-      ...state.medicalCard.confidant.map((el) => ({
-        ...el,
-        phone: el.contacts.find((contact) => contact.kind === "PHONE")
-          ?.username,
-        email: el.contacts.find((contact) => contact.kind === "EMAIL")
-          ?.username,
-        networks: el.contacts.filter(
-          (contact) => contact.kind !== "PHONE" && contact.kind !== "EMAIL"
-        ),
-      })),
-    ];
   },
   getAvatar(state) {
     let lastName = state?.medicalCard?.person?.last_name;
@@ -253,14 +243,12 @@ const actions = {
         commit("setConfidantData");
       });
   },
-  getPersonsFiltredList({ commit }) {
+  getPersonsFiltredList() {
-    fetchWrapper
+    return fetchWrapper
       .get(
         `general/person/?last_name=${localStorage.getItem("searchConfidant")}`
       )
-      .then((res) => {
+      .then((res) => res.results);
-        commit("setPersonFiltredList", res.results);
-      });
   },
   returnInitData({ commit }) {
     commit("setBasicData");