65 lines
1.9 KiB
Vue
65 lines
1.9 KiB
Vue
<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: '',
|
|
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: 'Stock must be a number' }).min(1)),
|
|
})
|
|
|
|
function onClick(type: string) {
|
|
if (type === 'cancel') {
|
|
navigateTo('/tools-equipment-src/material')
|
|
} else if (type === 'draft') {
|
|
// 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>
|
|
|
|
<template>
|
|
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
|
<Icon name="i-lucide-paint-bucket" class="me-2" />
|
|
<span class="font-semibold">Tambah</span> BMHP
|
|
</div>
|
|
<AppMaterialEntryForm v-model="data" :errors="errors" />
|
|
<div class="my-2 flex justify-end py-2">
|
|
<Action @click="onClick" />
|
|
</div>
|
|
</template>
|