feat(material): finishing integration of material
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user