refactor(material): add zod validation for stock field as number and display error message after submit in
This commit is contained in:
riefive
@@ -1,74 +1,130 @@
|
||||
<script setup lang="ts">
|
||||
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'
|
||||
// helpers
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
// types
|
||||
import type z from 'zod'
|
||||
import type { MaterialFormData } from '~/schemas/material'
|
||||
// components
|
||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||
|
||||
const props = defineProps<{ modelValue: any; errors: any }>()
|
||||
const emit = defineEmits(['update:modelValue', 'event'])
|
||||
interface Props {
|
||||
isLoading: boolean
|
||||
schema: z.ZodSchema<any>
|
||||
items: any[]
|
||||
}
|
||||
|
||||
const data = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => {
|
||||
emit('update:modelValue', val)
|
||||
},
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
back: []
|
||||
submit: [data: any]
|
||||
}>()
|
||||
|
||||
const { handleSubmit, defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: {
|
||||
code: '',
|
||||
name: '',
|
||||
stock: 0,
|
||||
} as Partial<MaterialFormData>,
|
||||
})
|
||||
|
||||
const items = [
|
||||
{ value: 'item1', label: 'Item 1' },
|
||||
{ value: 'item2', label: 'Item 2' },
|
||||
]
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [uom, uomAttrs] = defineField('uom_code')
|
||||
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) {
|
||||
console.error('Submission failed:', error)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form id="entry-form">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<Block>
|
||||
<FieldGroup :column="1">
|
||||
<Label>Kode</Label>
|
||||
<Field>
|
||||
<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>
|
||||
<Select v-model="data.type" :items="items" placeholder="Pilih item" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup :column="1">
|
||||
<Label>Satuan</Label>
|
||||
<Field>
|
||||
<Select v-model="data.uom" :items="items" placeholder="Pilih item" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup :column="1">
|
||||
<Label>Stok</Label>
|
||||
<Field>
|
||||
<Input v-model="data.stock" type="number" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup v-if="!!props.errors.stock">
|
||||
<Label></Label>
|
||||
<span class="text-red-400 text-sm">{{ props.errors.stock }}</span>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
<form class="grid gap-2" @submit="onSubmit">
|
||||
<div class="grid gap-2">
|
||||
<Label for="code">Kode</Label>
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading"
|
||||
:class="{ 'border-red-500': errors.code }"
|
||||
/>
|
||||
<span v-if="errors.code" class="text-sm text-red-500">
|
||||
{{ errors.code }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Nama</Label>
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading"
|
||||
:class="{ 'border-red-500': errors.name }"
|
||||
/>
|
||||
<span v-if="errors.name" class="text-sm text-red-500">
|
||||
{{ errors.name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="uom">Satuan</Label>
|
||||
<Select
|
||||
id="uom"
|
||||
:items="items"
|
||||
placeholder="Pilih satuan"
|
||||
v-model="uom"
|
||||
v-bind="uomAttrs"
|
||||
:disabled="isLoading"
|
||||
:class="{ 'border-red-500': errors.uom }"
|
||||
/>
|
||||
<span v-if="errors.uom" class="text-sm text-red-500">
|
||||
{{ errors.uom }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="item">Item</Label>
|
||||
<Select
|
||||
id="item"
|
||||
:items="items"
|
||||
placeholder="Pilih item"
|
||||
v-model="item"
|
||||
v-bind="itemAttrs"
|
||||
:disabled="isLoading"
|
||||
:class="{ 'border-red-500': errors.item }"
|
||||
/>
|
||||
<span v-if="errors.item" class="text-sm text-red-500">
|
||||
{{ errors.uom }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="stock">Stok</Label>
|
||||
<Input
|
||||
id="stock"
|
||||
type="number"
|
||||
v-model="stock"
|
||||
v-bind="stockAttrs"
|
||||
:disabled="isLoading"
|
||||
:class="{ 'border-red-500': errors.stock }"
|
||||
/>
|
||||
<span v-if="errors.stock" class="text-sm text-red-500">
|
||||
{{ 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>
|
||||
<Button type="submit" class="w-[120px]">
|
||||
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
Reference in New Issue
Block a user