Khafid Prayoga
5e1775d057
- Create new unit list and add pages under org-src feature - Implement unit entry form with validation using zod - Update error types to support readonly path property - Refactor field component to use shared error type
99 lines
3.2 KiB
Vue
99 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import * as z from 'zod'
|
|
import Action from '~/components/pub/custom-ui/nav-footer/ba-su.vue'
|
|
|
|
const { errors, setFromZodError, clearErrors } = useFormErrors()
|
|
|
|
const data = ref({
|
|
code: '',
|
|
name: '',
|
|
parentId: '',
|
|
})
|
|
|
|
const installation = {
|
|
msg: {
|
|
placeholder: '---pilih instalasi utama',
|
|
search: 'kode, nama instalasi',
|
|
empty: 'instalasi tidak ditemukan',
|
|
},
|
|
items: [
|
|
{ value: '1', label: 'Instalasi Medis', code: 'MED' },
|
|
{ value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
|
|
{ value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
|
|
{ value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
|
|
{ value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
|
|
{ value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
|
|
{ value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
|
|
{ value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
|
|
{ value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
|
|
{ value: '10', label: 'Instalasi SDM', code: 'HR' },
|
|
{ value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
|
|
{ value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
|
|
{ value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
|
|
{ value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
|
|
{ value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
|
|
{ value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
|
|
{ value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
|
|
{ value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
|
|
{ value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
|
|
{ value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
|
|
],
|
|
}
|
|
|
|
const schema = z.object({
|
|
name: z.string().min(1, 'Nama unit harus diisi'),
|
|
code: z.string().min(1, 'Kode unit harus diisi'),
|
|
parentId: z.preprocess(
|
|
(input: unknown) => {
|
|
if (typeof input === 'string') {
|
|
// Handle empty string case
|
|
if (input.trim() === '') {
|
|
return 0
|
|
}
|
|
return Number(input)
|
|
}
|
|
|
|
return input
|
|
},
|
|
z.number().refine((num) => num > 0, 'Instalasi induk harus dipilih'),
|
|
),
|
|
})
|
|
|
|
function onClick(type: string) {
|
|
if (type === 'cancel') {
|
|
navigateTo('/org-src/unit')
|
|
} else if (type === 'draft') {
|
|
// do something
|
|
} else if (type === 'submit') {
|
|
// Clear previous errors
|
|
clearErrors()
|
|
|
|
const requestData = schema.safeParse(data.value)
|
|
if (!requestData.success) {
|
|
// Set errors menggunakan composable
|
|
setFromZodError(requestData.error)
|
|
|
|
// Optional: tampilkan toast notification untuk error general
|
|
console.warn('Form validation failed:', requestData.error)
|
|
return
|
|
}
|
|
|
|
console.log('Form data valid:', requestData.data)
|
|
// do something with valid data
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
|
<Icon name="i-lucide-user" class="me-2" />
|
|
<span class="font-semibold">Tambah</span> Unit
|
|
</div>
|
|
<div>
|
|
<AppUnitEntryForm v-model="data" :errors="errors" :installation="installation" />
|
|
</div>
|
|
<div class="my-2 flex justify-end py-2">
|
|
<Action @click="onClick" />
|
|
</div>
|
|
</template>
|