feat(unit): add unit management pages and form components

- 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
2025-08-29 11:14:19 +07:00
parent ee3bb1cd6e
commit 5e1775d057
6 changed files with 241 additions and 55 deletions
@@ -0,0 +1,98 @@
+<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>