From 15c54bd3e6b76295afb8f7b2ac4f2fd92babd668 Mon Sep 17 00:00:00 2001
From: aarizona <ar.ariz.arizona@gmail.com>
Date: Thu, 30 May 2024 13:33:08 +0300
Subject: [PATCH] add validation

---
 front/components/edit.vue | 35 +++++++++++++++++++++--------------
 front/helpers.ts          |  5 +++++
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/front/components/edit.vue b/front/components/edit.vue
index 4016d4c..a2433e4 100644
--- a/front/components/edit.vue
+++ b/front/components/edit.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { object, string, type InferType } from 'yup'
 import { apiBase } from '~/helpers';
-import type { ApiTypeList, ApiTypeExternal } from '~/helpers';
-import type { FormSubmitEvent } from '#ui/types'
+import type { ApiTypeList, ApiTypeExternal, ApiElementSave } from '~/helpers';
+import type { FormError, FormSubmitEvent } from '#ui/types'
 
 const props = defineProps(['elements', 'partner'])
 const route = useRoute()
@@ -36,18 +35,25 @@ const external_data = reactive<ExternalDataType>({
     element: [],
 })
 const elements = ref(props.elements)
-const schema = object({
-    element: string().required('Required'),
-    element_id: string().required('Required')
-})
-type Schema = InferType<typeof schema>
+const validate = (state: any): FormError[] => {
+    const errors = []
+    const txt = 'Это поле обязательно'
+    if (!state.partner) errors.push({ path: 'partner', message: txt })
+    if (!external_data || !external_data.partner || !external_data.partner.find(el => el.Ref_Key == state.partner)) {
+        errors.push({ path: 'partner', message: txt })
+    }
+    if (!state.element_id) errors.push({ path: 'element_id', message: txt })
+    return errors
+}
 
-async function onSubmit(event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<any>) {
     const prepader_data = event.data
+    if (!external_data || !external_data.partner) {
+        return false
+    }
     prepader_data.partner_name = external_data.partner.find(el => el.Ref_Key == state.partner)?.Description
-    if(!prepader_data.partner_name) prepader_data.partner_name = prepader_data.partner
 
-    const data = await $fetch(`${apiBase}/element/`, { method: 'POST', body: JSON.stringify(prepader_data) })
+    const data = await $fetch<ApiElementSave>(`${apiBase}/element/`, { method: 'POST', body: JSON.stringify(prepader_data) })
     const inv_id = route.params.inv_id || data.inventory?.id
     if (!route.params.inv_id) {
         navigateTo(`/organization/p_${data.partner.id}/i_${data.inventory.id}`)
@@ -118,8 +124,8 @@ onMounted(async () => {
 <template>
     <div class="grid grid-cols-10 gap-4">
         <div class="col-span-3">
-            <UForm :state="state" class="flex flex-col gap-4" @submit="onSubmit">
-                <UFormGroup label="Выбрать организацию" name="organization">
+            <UForm :state="state" :validate="validate" class="flex flex-col gap-4" @submit="onSubmit">
+                <UFormGroup label="Выбрать организацию" name="partner">
                     <USelectMenu v-model="state.partner" :options="external_data.partner" value-attribute="Ref_Key"
                         option-attribute="Description" :searchable="searchInExternal"
                         searchable-placeholder="Выберите организацию из списка контрагентов" :loading="loading"
@@ -138,7 +144,8 @@ onMounted(async () => {
                         :placeholder="`Элементы (${external_data.element.length})`" />
                 </UFormGroup>
                 <UFormGroup v-if="state.element"
-                    :label="`Данные об элементе «${external_data.element?.find(el => el['Ref_Key'] === state.element)?.Description}»`">
+                    :label="`Данные об элементе «${external_data.element?.find(el => el['Ref_Key'] === state.element)?.Description}»`"
+                    name="element_id">
                     <UInput placeholder="ID" v-model="state.element_id" />
                 </UFormGroup>
 
diff --git a/front/helpers.ts b/front/helpers.ts
index c653708..e8d3ad7 100644
--- a/front/helpers.ts
+++ b/front/helpers.ts
@@ -14,6 +14,11 @@ export type ApiTypeBase =
 export type ApiPartner = { id: number, external_id: number, name: string, total_inventory: number }
 export type ApiInventory = { id: number, partner: number, name: string }
 export type ApiElement = { id: number, external_id: string, element_id: number, photo: string, additional_text: string, inventory: number }
+export type ApiElementSave = {
+    partner: ApiPartner,
+    inventory: ApiInventory,
+    element: ApiElement
+}
 export type ApiTypeExternal = {
     'НаименованиеПолное': string;
     Description: string;