WIP Исправил баги ASTRA-53, ASTRA-54, добавил валибацию

src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue

@@ -8,7 +8,7 @@
     :cancel="cancelEdit" 
     :open-edit="openEdit"
     )
-    .form-wrap.gap-24.w-full
+    q-form.form-wrap.gap-24.w-full(ref="formBasicData")
       .flex.flex-col.gap-4(v-for="data in configData")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
         .flex.w-full.justify-between.items-center.gap-4(v-for="field in data.fields")
@@ -43,10 +43,12 @@
             :disabled="!isEdit" 
             v-model="basic[data.dataKey][field.key]"
             @update:model-value="checkChangeInput"
-            :type="field.type" 
+            :type="field.type"
+            :name="field.key" 
             :width="278" 
             :standout="!isEdit" 
-            :outlined="isEdit" 
+            :outlined="isEdit"
+            no-error-icon
             :rule="field.rules"
             text-color="black"
             )
@@ -59,6 +61,9 @@ import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider.vue";
+import { getFieldsNameUnvalidated } from "@/shared/utils/changesObjects";
+import { addNotification } from "@/components/Notifications/notificationContext";
 import { getRequestChangeData } from "@/shared/utils/wrapperRequestChangeData";
 import { checkChangeData } from "@/shared/utils/changesObjects";
 import { fetchWrapper } from "@/shared/fetchWrapper";
@@ -66,6 +71,7 @@ import moment from "moment";
 import {
   baseDataForm,
   genderOptions,
+  errorMap,
 } from "@/pages/newMedicalCard/utils/medicalConfig.js";
 import { mapGetters, mapState } from "vuex";
 
@@ -78,6 +84,7 @@ export default {
     BaseSelect,
     BaseModal,
     BaseUploadPhoto,
+    TheNotificationProvider,
   },
   data() {
     return {
@@ -87,6 +94,7 @@ export default {
       isCheckChange: false,
       genderOptions: genderOptions,
       configData: baseDataForm,
+      errorMapBasic: errorMap,
     };
   },
   computed: {
@@ -176,15 +184,30 @@ export default {
       return request;
     },
     saveChange() {
-      this.isLoadingData = true;
-      let updateBasic = this.updateBasicData();
-      Promise.allSettled(updateBasic)
-        .then(() => this.$store.dispatch("getMedicalCardData"))
-        .then(() => {
-          this.isLoadingData = false;
-          this.isEdit = false;
-          this.isCheckChange = false;
-        });
+      const form = this.$refs.formBasicData;
+      form.validate().then((validate) => {
+        if (validate) {
+          this.isLoadingData = true;
+          let updateBasic = this.updateBasicData();
+          Promise.allSettled(updateBasic)
+            .then(() => this.$store.dispatch("getMedicalCardData"))
+            .then(() => {
+              this.isLoadingData = false;
+              this.isEdit = false;
+              this.isCheckChange = false;
+            });
+        } else {
+          getFieldsNameUnvalidated(form).forEach((errorKey) => {
+            addNotification(
+              this.errorMapBasic[errorKey].title,
+              this.errorMapBasic[errorKey].title,
+              this.errorMapBasic[errorKey].error,
+              "error",
+              5000
+            );
+          });
+        }
+      });
     },
     openEdit() {
       this.isEdit = true;