feat(material): finishing integration of material

This commit is contained in:
riefive
2025-09-24 17:12:01 +07:00
parent 93a5abba36
commit c3c21f28e7
7 changed files with 67 additions and 44 deletions
+7 -4
View File
@@ -15,10 +15,12 @@ interface Props {
schema: z.ZodSchema<any>
uoms: any[]
values: any
isReadonly?: boolean
}
const isLoading = ref(false)
const props = defineProps<Props>()
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
const emit = defineEmits<{
submit: [values: MaterialFormData, resetForm: () => void]
cancel: [resetForm: () => void]
@@ -75,13 +77,13 @@ function onCancelForm() {
<Cell>
<Label height="">Kode</Label>
<Field :errMessage="errors.code">
<Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading" />
<Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
</Field>
</Cell>
<Cell>
<Label height="compact">Nama</Label>
<Field :errMessage="errors.name">
<Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading" />
<Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
</Field>
</Cell>
<Cell>
@@ -94,20 +96,21 @@ function onCancelForm() {
placeholder="Pilih satuan"
v-bind="uomAttrs"
:items="uoms"
:disabled="isLoading"
:disabled="isLoading || isReadonly"
/>
</Field>
</Cell>
<Cell>
<Label height="compact">Stok</Label>
<Field :errMessage="errors.stock">
<Input id="stock" v-model="stock" type="number" v-bind="stockAttrs" :disabled="isLoading" />
<Input id="stock" v-model="stock" type="number" v-bind="stockAttrs" :disabled="isLoading || isReadonly" />
</Field>
</Cell>
</Block>
<div class="my-2 flex justify-end gap-2 py-2">
<Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
<Button
v-if="!isReadonly"
type="button"
class="w-[120px]"
:disabled="isLoading || !meta.valid"
+20 -19
View File
@@ -14,16 +14,19 @@ import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
interface Props {
schema: z.ZodSchema<any>
uoms: any[]
values: any
isReadonly?: boolean
}
const isLoading = ref(false)
const props = defineProps<Props>()
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
const emit = defineEmits<{
submit: [values: DeviceFormData, resetForm: () => void]
cancel: [resetForm: () => void]
}>()
const { handleSubmit, defineField, errors } = useForm({
const { defineField, errors, meta } = useForm({
validationSchema: toTypedSchema(props.schema),
initialValues: {
code: '',
@@ -37,6 +40,13 @@ const [code, codeAttrs] = defineField('code')
const [name, nameAttrs] = defineField('name')
const [uom, uomAttrs] = defineField('uom_code')
// Fill fields from props.values if provided
if (props.values) {
if (props.values.code !== undefined) code.value = props.values.code
if (props.values.name !== undefined) name.value = props.values.name
if (props.values.uom_code !== undefined) uom.value = props.values.uom_code
}
const resetForm = () => {
code.value = ''
name.value = ''
@@ -46,9 +56,9 @@ const resetForm = () => {
// Form submission handler
function onSubmitForm(values: any) {
const formData: DeviceFormData = {
name: values.name || '',
code: values.code || '',
uom_code: values.uom_code || '',
name: name.value || '',
code: code.value || '',
uom_code: uom.value || '',
}
emit('submit', formData, resetForm)
}
@@ -61,27 +71,17 @@ function onCancelForm() {
<template>
<form id="form-tools">
<Block labelSize="thin" class="!mb-2.5 xl:!mb-3 !pt-0" :colCount="1">
<Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
<Cell>
<Label height="compact">Kode</Label>
<Field :errMessage="errors.code">
<Input
id="code"
v-model="code"
v-bind="codeAttrs"
:disabled="isLoading"
/>
<Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading" />
</Field>
</Cell>
<Cell>
<Label height="compact">Nama</Label>
<Field :errMessage="errors.name">
<Input
id="name"
v-model="name"
v-bind="nameAttrs"
:disabled="isLoading"
/>
<Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading" />
</Field>
</Cell>
<Cell>
@@ -102,10 +102,11 @@ function onCancelForm() {
<div class="my-2 flex justify-end gap-2 py-2">
<Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
<Button
v-if="!isReadonly"
type="button"
class="w-[120px]"
:disabled="isLoading"
@click="handleSubmit(onSubmitForm)"
:disabled="isLoading || !meta.valid"
@click="onSubmitForm"
>
Simpan
</Button>