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

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() {
-      this.confidants[this.index].networks.push({
-        kind: this.newNetwork.kind.id,
-        username: this.newNetwork.username,
-      });
-      this.isOpenPopupAdding = false;
+      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) {
-        localStorage.setItem("searchConfidant", val);
-        this.$store.dispatch("getPersonsFiltredList").then(() => {
-          if (key === "last_name" && val.length > 1) {
-            localStorage.setItem("searchConfidant", val);
-            this.$store.dispatch("getPersonsFiltredList").then(() => {
-              if (this.listPersons.length > 0) {
-                this.isOpenListConfidant = true;
-              } else {
-                this.isOpenListConfidant = false;
-              }
-            });
-          }
-        });
+      if (key === "last_name") {
+        if (val.length > 0) {
+          localStorage.setItem("searchConfidant", val);
+          this.$store.dispatch("getPersonsFiltredList").then((res) => {
+            if (res.length > 0) {
+              this.listPersons = res;
+              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() {
-      this.confidants.splice(this.index, 1);
+      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({
-        networks: [],
-        email: "",
-        phone: "",
-        first_name: "",
-        last_name: "",
-        patronymic: "",
-      });
+      this.confidants.push(getConfidantObject());
     },
   },
 };