refactor(material): modify validation uom and item

This commit is contained in:
riefive
2025-09-04 16:21:10 +07:00
parent 21d087e496
commit ffa4a7d191
5 changed files with 41 additions and 27 deletions
+16 -14
View File
@@ -11,6 +11,7 @@ import Label from '~/components/pub/custom-ui/form/label.vue'
interface Props {
isLoading: boolean
schema: z.ZodSchema<any>
uoms: any[]
items: any[]
}
@@ -20,11 +21,13 @@ const emit = defineEmits<{
submit: [data: any]
}>()
const { handleSubmit, defineField, errors, meta } = useForm({
const { handleSubmit, defineField, errors } = useForm({
validationSchema: toTypedSchema(props.schema),
initialValues: {
code: '',
name: '',
uom_code: '',
item_id: '',
stock: 0,
} as Partial<MaterialFormData>,
})
@@ -36,7 +39,6 @@ const [item, itemAttrs] = defineField('item_id')
const [stock, stockAttrs] = defineField('stock')
const onSubmit = handleSubmit(async (values) => {
console.log(errors)
try {
emit('submit', values)
} catch (error) {
@@ -77,30 +79,32 @@ const onSubmit = handleSubmit(async (values) => {
<Label for="uom">Satuan</Label>
<Select
id="uom"
:items="items"
icon-name="i-lucide-chevron-down"
placeholder="Pilih satuan"
v-model="uom"
v-bind="uomAttrs"
:items="uoms"
:disabled="isLoading"
:class="{ 'border-red-500': errors.uom }"
:class="{ 'border-red-500': errors.uom_code }"
/>
<span v-if="errors.uom" class="text-sm text-red-500">
{{ errors.uom }}
<span v-if="errors.uom_code" class="text-sm text-red-500">
{{ errors.uom_code }}
</span>
</div>
<div class="grid gap-2">
<Label for="item">Item</Label>
<Select
id="item"
:items="items"
icon-name="i-lucide-chevron-down"
placeholder="Pilih item"
v-model="item"
v-bind="itemAttrs"
:items="items"
:disabled="isLoading"
:class="{ 'border-red-500': errors.item }"
:class="{ 'border-red-500': errors.item_id }"
/>
<span v-if="errors.item" class="text-sm text-red-500">
{{ errors.uom }}
<span v-if="errors.item_id" class="text-sm text-red-500">
{{ errors.item_id }}
</span>
</div>
<div class="grid gap-2">
@@ -117,10 +121,8 @@ const onSubmit = handleSubmit(async (values) => {
{{ errors.stock }}
</span>
</div>
<div class="flex justify-end gap-2 my-2 py-2">
<Button variant="secondary" class="w-[120px]" @click="emit('back')">
Kembali
</Button>
<div class="my-2 flex justify-end gap-2 py-2">
<Button variant="secondary" class="w-[120px]" @click="emit('back')"> Kembali </Button>
<Button type="submit" class="w-[120px]">
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
Simpan