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

src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue

@@ -8,15 +8,21 @@
     :cancel="cancelEdit" 
     :open-edit="openEdit"
     )
-    .flex.flex-col.gap-19px.w-full
+    q-form.flex.flex-col.gap-19px.w-full(ref="formAllergies")
       .flex.flex-col.gap-4.w-full
-        .flex.gap-4.items-center.w-full.justify-between(v-for="(allergy, index) in allergies")
-          .label-field.font-sm.text-sm.whitespace-nowrap {{ `Аллерген ${index+1}:` }}
-          .flex.gap-2.w-full.items-center
+        .flex.items-center.w-full.justify-between(v-for="(allergy, index) in allergies")
+          .w-32.justify-start
+            .label-field.font-sm.text-sm.whitespace-nowrap {{ `Аллерген ${index+1}:` }}
+          .flex.min-w-64.gap-2.w-full.items-center
             base-input( 
               :disabled="!isEdit" 
               v-model="allergy.name"
               @update:model-value="checkChangeInput"
+              name="name"
+              :rule="configData.name.rules"
+              no-error-icon
+              :width="278"
+              placeholder="Аллерген"
               type="text"  
               :standout="!isEdit" 
               :outlined="isEdit" 
@@ -26,6 +32,10 @@
               :disabled="!isEdit" 
               v-model="allergy.title"
               @update:model-value="checkChangeInput"
+              name="title"
+              :rule="configData.title.rules"
+              no-error-icon
+              placeholder="Проявление аллергии"
               type="text"  
               :standout="!isEdit" 
               :outlined="isEdit" 
@@ -49,18 +59,28 @@
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider.vue";
+import { getFieldsNameUnvalidated } from "@/shared/utils/changesObjects";
+import { addNotification } from "@/components/Notifications/notificationContext";
 import { checkChangeData } from "@/shared/utils/changesObjects";
+import { allergiesConfig } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { mapState, mapGetters } from "vuex";
 import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData";
 
 export default {
   name: "AllergiesForm",
-  components: { MedicalFormWrapper, BaseButton, BaseInput },
+  components: {
+    MedicalFormWrapper,
+    BaseButton,
+    BaseInput,
+    TheNotificationProvider,
+  },
   data() {
     return {
       isEdit: false,
       isLoadingData: false,
       isCheckChange: false,
+      configData: allergiesConfig,
     };
   },
   computed: {
@@ -87,14 +107,29 @@ export default {
       );
     },
     saveChange() {
-      this.isLoadingData = true;
-      Promise.allSettled(this.updateAllergies())
-        .then(() => this.$store.dispatch("getMedicalCardData"))
-        .then(() => {
-          this.isLoadingData = false;
-          this.isEdit = false;
-          this.isCheckChange = false;
-        });
+      const form = this.$refs.formAllergies;
+      form.validate().then((res) => {
+        if (res) {
+          this.isLoadingData = true;
+          Promise.allSettled(this.updateAllergies())
+            .then(() => this.$store.dispatch("getMedicalCardData"))
+            .then(() => {
+              this.isLoadingData = false;
+              this.isEdit = false;
+              this.isCheckChange = false;
+            });
+        } else {
+          getFieldsNameUnvalidated(form).forEach((errorKey) => {
+            addNotification(
+              this.configData[errorKey].title,
+              this.configData[errorKey].title,
+              this.configData[errorKey].error,
+              "error",
+              5000
+            );
+          });
+        }
+      });
     },
     cancelEdit() {
       this.$store.dispatch("returnInitData");