151 lines
4.0 KiB
Vue
151 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
// Components
|
|
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
|
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
|
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
|
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
|
import Button from '~/components/pub/ui/button/Button.vue'
|
|
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
|
|
|
// Constants
|
|
import { infraGroupCodesKeys } from '~/lib/constants'
|
|
|
|
// Types
|
|
import type { InfraFormData } from '~/schemas/infra.schema'
|
|
|
|
// Helpers
|
|
import type z from 'zod'
|
|
import { useForm } from 'vee-validate'
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
|
|
interface Props {
|
|
schema: z.ZodSchema<any>
|
|
parents: any[]
|
|
values: any
|
|
isLoading?: boolean
|
|
isReadonly?: boolean
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
|
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
|
const emit = defineEmits<{
|
|
submit: [values: InfraFormData, resetForm: () => void]
|
|
cancel: [resetForm: () => void]
|
|
}>()
|
|
|
|
const { defineField, errors, meta } = useForm({
|
|
validationSchema: toTypedSchema(props.schema),
|
|
initialValues: {
|
|
code: '',
|
|
name: '',
|
|
infraGroup_code: infraGroupCodesKeys.bed,
|
|
parent_id: null,
|
|
} as Partial<InfraFormData>,
|
|
})
|
|
|
|
const [code, codeAttrs] = defineField('code')
|
|
const [name, nameAttrs] = defineField('name')
|
|
const [infraGroup_code] = defineField('infraGroup_code')
|
|
const [parent_id, parentIdAttrs] = defineField('parent_id')
|
|
|
|
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.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
|
|
if (props.values.parent_id !== undefined)
|
|
parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
|
|
}
|
|
|
|
const resetForm = () => {
|
|
code.value = ''
|
|
name.value = ''
|
|
infraGroup_code.value = infraGroupCodesKeys.bed
|
|
parent_id.value = null
|
|
}
|
|
|
|
function onSubmitForm() {
|
|
const formData: InfraFormData = {
|
|
code: code.value || '',
|
|
name: name.value || '',
|
|
infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.bed,
|
|
parent_id: parent_id.value ? Number(parent_id.value) : null,
|
|
}
|
|
emit('submit', formData, resetForm)
|
|
}
|
|
|
|
function onCancelForm() {
|
|
emit('cancel', resetForm)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form
|
|
id="form-floor"
|
|
@submit.prevent
|
|
>
|
|
<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 || isReadonly"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
<Cell>
|
|
<Label height="compact">Nama</Label>
|
|
<Field :errMessage="errors.name">
|
|
<Input
|
|
id="name"
|
|
v-model="name"
|
|
v-bind="nameAttrs"
|
|
:disabled="isLoading || isReadonly"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
<Cell>
|
|
<Label height="compact">Kamar</Label>
|
|
<Field :errMessage="errors.parent_id">
|
|
<Combobox
|
|
id="parent"
|
|
v-model="parent_id"
|
|
v-bind="parentIdAttrs"
|
|
:items="parents"
|
|
:is-disabled="isLoading || isReadonly"
|
|
placeholder="Pilih Kamar"
|
|
search-placeholder="Cari Kamar"
|
|
empty-message="Item tidak ditemukan"
|
|
/>
|
|
</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"
|
|
@click="onSubmitForm"
|
|
>
|
|
Simpan
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</template>
|