add validation to create event form

src/components/Notifications/TheNotificationProvider.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   teleport(:to="appContainer")
-  .absolute.top-0.p-2.right-0.overflow-hidden.z-50(class="w-1/4 xl:w-1/3 sm:w-1/2")
+  .absolute.top-0.p-2.right-0.overflow-hidden.wrapper(class="w-1/4 xl:w-1/3 sm:w-1/2")
     .pt-32(v-if="displayPadding")
     .flex.gap-2.flex-col.relative
       transition-group(name="list", @before-leave="displayPadding = true", @after-leave="displayPadding = false")
@@ -41,6 +41,9 @@ export default {
 </script>
 
 <style scoped>
+.wrapper {
+  z-index: 10000;
+}
 .list-enter-active,
 .list-leave-active {
   transition: all 0.5s ease;

src/components/Notifications/notificationContext.js

@@ -2,7 +2,7 @@ import { reactive } from "vue";
 
 export const notifications = reactive({});
 
-export const addNotification = (id, title, message, type, lifeTime = 0) => {
+export const addNotification = (id, title, message, type, lifeTime = 3000) => {
   notifications[id] = {
     title,
     message,

src/components/base/BaseInput.vue

@@ -23,7 +23,7 @@
       :debounce="debounce",
       :shadow-text="shadowText",
       :autofocus="autofocus",
-      hide-bottom-space
+      hide-bottom-space,
       :error="error",
       @focus="e => $emit('focus', e)"
     )
@@ -86,6 +86,7 @@ export default {
     circle: Boolean,
     height: String,
     error: Boolean,
+    hint: String,
   },
   emits: ["update:modelValue", "focus"],
   computed: {

src/pages/newCalendar/components/CreateEventForm.vue

@@ -3,8 +3,8 @@
   header-record-form(
     :current-status="currentStatus",
     :statuses="patientData.statuses",
-    :choice-status="choiceStatus"
-    v-model="time"
+    :choice-status="choiceStatus",
+    v-model="time",
   )
   base-input-with-search(v-model="patient", @create-person="createPerson")
   .flex.flex-col.flex-auto.l.gap-y-8
@@ -47,6 +47,8 @@ import { fetchWrapper } from "@/shared/fetchWrapper";
 import { mapActions } from "vuex";
 import PatientCreationForm from "@/components/PatientCreationForm.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
+import { addNotification } from "@/components/Notifications/notificationContext";
+import { errors } from "@/shared/errors";
 
 export default {
   name: "CreateEventForm",
@@ -70,6 +72,7 @@ export default {
       patientData: patientData,
       currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
       showCreateModal: false,
+      errors: {},
     };
   },
   computed: {
@@ -106,6 +109,10 @@ export default {
         await this.getEvents();
         this.closeForm();
       }
+      if (event?.code) {
+        this.errors = event?.fields;
+        addNotification(new Date(), "Ошибка", errors[event?.type], "error");
+      }
     },
   },
   mounted() {},

src/pages/newCalendar/components/HeaderRecordForm.vue

@@ -35,7 +35,7 @@
       .flex.gap-x-3.items-center
         .text.font-semibold Время:
         .flex.gap-x-1
-          base-input.input.no-border(size="XS", mask="##:## - ##:##", v-model="times" )
+          base-input.input.no-border(size="XS", mask="##:## - ##:##", v-model="times", :error="!!errors?.['start'] || !!errors?.['end']")
     .flex.h-14.gap-x-3.items-center.text-smm
       .text.font-semibold Медкарта:
       .flex.gap-x-1
@@ -86,7 +86,12 @@ export default {
     MedcardModal,
   },
   mixins: [v_model],
-  props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
+  props: {
+    currentStatus: Object,
+    statuses: Array,
+    choiceStatus: Function,
+    errors: Object,
+  },
   data() {
     return {
       noname,

src/shared/errors.js

@@ -0,0 +1,4 @@
+export const errors = {
+  internal_error: "Внутренняя ошибка",
+  validation_error: "Ошибка валидации",
+};