feat (material): update logic validate

app/components/app/material/entry-form.vue

@@ -3,28 +3,13 @@ import Block from '~/components/pub/custom-ui/form/block.vue'
 import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
 import Field from '~/components/pub/custom-ui/form/field.vue'
 import Label from '~/components/pub/custom-ui/form/label.vue'
-import { z } from 'zod'
 
-const props = defineProps<{ modelValue: any }>()
+const props = defineProps<{ modelValue: any; errors: any }>()
 const emit = defineEmits(['update:modelValue', 'event'])
 
-const schema = z.object({
-  code: z.string(),
-  name: z.string(),
-  type: z.string(),
-  stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: "Stok harus berupa angka" })),
-})
-
 const data = computed({
   get: () => props.modelValue,
   set: (val) => {
-    const result = schema.safeParse(val)
-    if (!result.success) {
-      // You can handle the error here, e.g. show a message
-      const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
-      alert(errorMessage)
-      return
-    }
     emit('update:modelValue', val)
   },
 })
@@ -46,12 +31,20 @@ const items = [
               <Input v-model="data.code" />
             </Field>
           </FieldGroup>
+          <FieldGroup v-if="!!props.errors.code">
+            <Label></Label>
+            <span class="text-red-400 text-sm">{{ props.errors.code }}</span>
+          </FieldGroup>
           <FieldGroup :column="1">
             <Label>Nama</Label>
             <Field>
               <Input v-model="data.name" />
             </Field>
           </FieldGroup>
+          <FieldGroup v-if="!!props.errors.name">
+            <Label></Label>
+            <span class="text-red-400 text-sm">{{ props.errors.name }}</span>
+          </FieldGroup>
           <FieldGroup :column="1">
             <Label>Item</Label>
             <Field>
@@ -61,13 +54,13 @@ const items = [
           <FieldGroup :column="1">
             <Label>Satuan</Label>
             <Field>
-              <Select v-model="data.stock" :items="items" placeholder="Pilih item" />
+              <Select v-model="data.uom" :items="items" placeholder="Pilih item" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="1">
             <Label>Stok</Label>
             <Field>
-              <Input v-model="data.stock" />
+              <Input v-model="data.stock" type="number" />
             </Field>
           </FieldGroup>
         </Block>

app/components/flow/material/entry.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
 import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+import { z, ZodError } from 'zod'
 
+const errors = ref({})
 const data = ref({
+  code: '',
   name: '',
-  password: '',
-  status: '',
   type: '',
+  stock: 0,
+})
+
+const schema = z.object({
+  code: z.string().min(1, 'Code must be at least 1 characters long'),
+  name: z.string().min(1, 'Name must be at least 1 characters long'),
+  type: z.string(),
+  stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: 'Stok harus berupa angka' })),
 })
 
 function onClick(type: string) {
@@ -15,6 +24,30 @@ function onClick(type: string) {
     // do something
   } else if (type === 'submit') {
     // do something
+    const input = data.value
+    console.log(input)
+    const errorsParsed: any = {}
+    try {
+      const result = schema.safeParse(input)
+      if (!result.success) {
+        // You can handle the error here, e.g. show a message
+        const errorsCaptures = result?.error?.errors || []
+        const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
+        errorsCaptures.forEach((value: any) => {
+          const keyName = value?.path?.length > 0 ? value.path[0] : 'key'
+          errorsParsed[keyName as string] = value.message || ''
+        })
+        console.log(errorMessage)
+      }
+    } catch (e) {
+      if (e instanceof ZodError) {
+        const jsonError = e.flatten()
+        console.log(JSON.stringify(jsonError, null, 2))
+      }
+    }
+    setTimeout(() => {
+      errors.value = errorsParsed
+    }, 0)
   }
 }
 </script>
@@ -24,7 +57,7 @@ function onClick(type: string) {
     <Icon name="i-lucide-paint-bucket" class="me-2" />
     <span class="font-semibold">Tambah</span> BMHP
   </div>
-  <AppMaterialEntryForm v-model="data" />
+  <AppMaterialEntryForm v-model="data" :errors="errors" />
   <div class="my-2 flex justify-end py-2">
     <Action @click="onClick" />
   </div>