munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(division): add division management pages and form validation

Browse Source 
- Create new division list and add pages
- Implement form validation using zod and error handling
- Add useFormErrors composable for form error management
- Update division entry form with validation support
- Add error styling in main.css
This commit is contained in:
Khafid Prayoga
2025-08-29 10:42:07 +07:00
parent 2a74c0a2c7
commit d6b288404f
7 changed files with 375 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/main.css
+10
View File
@@ -327,4 +327,14 @@ body {
.rounded-sm {
border-radius: var(--radius-sm);
}
/* Form Error Styling */
.field-error-info {
@apply text-xs ml-1;
color: hsl(var(--destructive));
/* font-size: 0.875rem; */
margin-top: 0.25rem;
line-height: 1.25;
}
/* .rounded-md { border-radius: var */
app/components/app/divison/entry-form.vue
+24 -17
View File
@@ -1,26 +1,33 @@
<script setup lang="ts">
import type { FormErrors } from '~/composables/useFormErrors'
import Block from '~/components/pub/custom-ui/form/block.vue'
import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
import Field from '~/components/pub/custom-ui/form/field.vue'
import Label from '~/components/pub/custom-ui/form/label.vue'
const props = defineProps<{ modelValue: any }>()
const props = defineProps<{
modelValue: any
division: {
msg: {
placeholder: string
search: string
empty: string
}
items: {
value: string
label: string
code: string
}[]
}
errors?: FormErrors
}>()
const emit = defineEmits(['update:modelValue', 'event'])
const data = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val),
})
const parentDivision = [
{ value: '1', label: 'Medical', code: 'MED' },
{ value: '2', label: 'Nursing', code: 'NUR' },
{ value: '3', label: 'Admin', code: 'ADM' },
{ value: '4', label: 'Support', code: 'SUP' },
{ value: '5', label: 'Education', code: 'EDU' },
]
const defParentDivision = '---pilih divisi utama'
</script>
<template>
@@ -30,25 +37,25 @@ const defParentDivision = '---pilih divisi utama'
<Block>
<FieldGroup :column="2">
<Label>Nama</Label>
<Field>
<Field id="name" :errors="errors">
<Input v-model="data.name" />
</Field>
</FieldGroup>
<FieldGroup :column="2">
<Label>Kode</Label>
<Field>
<Field id="code" :errors="errors">
<Input v-model="data.code" />
</Field>
</FieldGroup>
<FieldGroup :column="2">
<Label>Divisi</Label>
<Field>
<Field id="parentId" :errors="errors">
<Combobox
v-model="data.parentId"
:items="parentDivision"
:placeholder="defParentDivision"
search-placeholder="kode, nama divisi"
empty-message="divisi tidak ditemukan."
:items="props.division.items"
:placeholder="props.division.msg.placeholder"
:search-placeholder="props.division.msg.search"
:empty-message="props.division.msg.empty"
/>
</Field>
</FieldGroup>
app/components/flow/division/entry.vue
+71 -5
View File
@@ -1,19 +1,85 @@
<script setup lang="ts">
import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
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: 0,
parentId: '',
})
const division = {
msg: {
placeholder: '---pilih divisi utama',
search: 'kode, nama divisi',
empty: 'divisi tidak ditemukan',
},
items: [
{ value: '1', label: 'Medical', code: 'MED' },
{ value: '2', label: 'Nursing', code: 'NUR' },
{ value: '3', label: 'Admin', code: 'ADM' },
{ value: '4', label: 'Support', code: 'SUP' },
{ value: '5', label: 'Education', code: 'EDU' },
{ value: '6', label: 'Pharmacy', code: 'PHA' },
{ value: '7', label: 'Radiology', code: 'RAD' },
{ value: '8', label: 'Laboratory', code: 'LAB' },
{ value: '9', label: 'Finance', code: 'FIN' },
{ value: '10', label: 'Human Resources', code: 'HR' },
{ value: '11', label: 'IT Services', code: 'ITS' },
{ value: '12', label: 'Maintenance', code: 'MNT' },
{ value: '13', label: 'Catering', code: 'CAT' },
{ value: '14', label: 'Security', code: 'SEC' },
{ value: '15', label: 'Emergency', code: 'EMR' },
{ value: '16', label: 'Surgery', code: 'SUR' },
{ value: '17', label: 'Outpatient', code: 'OUT' },
{ value: '18', label: 'Inpatient', code: 'INP' },
{ value: '19', label: 'Rehabilitation', code: 'REB' },
{ value: '20', label: 'Research', code: 'RSH' },
],
}
const schema = z.object({
name: z.string().min(1, 'Nama divisi harus diisi'),
code: z.string().min(1, 'Kode divisi 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, 'Divisi harus dipilih'),
),
})
function onClick(type: string) {
if (type === 'cancel') {
navigateTo('/human-src/user')
navigateTo('/org-src/division')
} else if (type === 'draft') {
// do something
} else if (type === 'submit') {
// do something
// 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>
@@ -24,7 +90,7 @@ function onClick(type: string) {
<span class="font-semibold">Tambah</span> Divisi
</div>
<div>
<AppDivisonEntryForm v-model="data" />
<AppDivisonEntryForm v-model="data" :errors="errors" :division="division" />
</div>
<div class="my-2 flex justify-end py-2">
<Action @click="onClick" />
app/composables/README-useFormErrors.md
+73
View File
@@ -0,0 +1,73 @@
# useFormErrors Composable
Composable untuk menangani form validation errors seperti Laravel. Mengkonversi ZodError menjadi format yang mudah digunakan di template.
## Penggunaan
### Basic Usage
```typescript
// Di component parent (entry.vue)
const { errors, setFromZodError, clearErrors } = useFormErrors()
// Validasi dengan Zod
const result = schema.safeParse(data.value)
if (!result.success) {
setFromZodError(result.error)
return
}
```
### Di Template
```vue
<!-- Pass errors ke form component -->
<AppDivisonEntryForm v-model="data" :errors="errors" />
```
### Di Form Component
```vue
<script setup>
import type { FormErrors } from '~/composables/useFormErrors'
const props = defineProps<{
modelValue: any
errors?: FormErrors
}>()
</script>
<template>
<!-- Setiap Field harus memiliki id yang sesuai dengan field name -->
<Field id="name" :errors="errors">
<Input v-model="data.name" />
</Field>
</template>
```
## API Reference
### Methods
- `setFromZodError(zodError)` - Set errors dari ZodError
- `setErrors(errors)` - Set errors manual
- `setError(field, message)` - Set error untuk field tertentu
- `clearError(field)` - Hapus error untuk field tertentu
- `clearErrors()` - Hapus semua errors
- `hasError(field)` - Cek apakah ada error untuk field
- `getError(field)` - Ambil error message untuk field
### Computed Properties
- `hasErrors` - Boolean apakah ada error
- `errorMessages` - Array semua error messages
- `firstError` - Error pertama (untuk alert general)
## Field Component
Field component akan otomatis menampilkan error jika:
1. Field memiliki `id` prop yang sesuai dengan field name
2. Field menerima `errors` prop
3. Ada error untuk field tersebut di dalam errors object
Error akan ditampilkan dengan class `.field-error-info` yang sudah di-style dengan warna merah.
app/composables/useFormErrors.ts
+115
View File
@@ -0,0 +1,115 @@
import type { ZodError } from 'zod'
export interface XError {
message: string
[key: string]: any
}
export interface FormErrors {
[field: string]: XError
}
/**
* Composable untuk menangani form validation errors seperti Laravel
* Mengkonversi ZodError menjadi format yang mudah digunakan di template
*/
export function useFormErrors() {
const errors = ref<FormErrors>({})
/**
* Set errors dari ZodError
*/
function setFromZodError(zodError: ZodError) {
const newErrors: FormErrors = {}
zodError.errors.forEach((error) => {
const field = error.path.join('.')
newErrors[field] = {
message: error.message,
code: error.code,
path: error.path,
}
})
errors.value = newErrors
}
/**
* Set errors manual (untuk error dari API response)
*/
function setErrors(newErrors: FormErrors) {
errors.value = newErrors
}
/**
* Set error untuk field tertentu
*/
function setError(field: string, message: string, extra: Record<string, any> = {}) {
errors.value[field] = {
message,
...extra,
}
}
/**
* Hapus error untuk field tertentu
*/
function clearError(field: string) {
delete errors.value[field]
}
/**
* Hapus semua errors
*/
function clearErrors() {
errors.value = {}
}
/**
* Cek apakah ada error untuk field tertentu
*/
function hasError(field: string): boolean {
return !!errors.value[field]
}
/**
* Ambil error message untuk field tertentu
*/
function getError(field: string): string | null {
return errors.value[field]?.message || null
}
/**
* Cek apakah ada error apapun
*/
const hasErrors = computed(() => Object.keys(errors.value).length > 0)
/**
* Ambil semua error messages sebagai array
*/
const errorMessages = computed(() =>
Object.values(errors.value).map(error => error.message),
)
/**
* Ambil error pertama (untuk menampilkan alert general)
*/
const firstError = computed(() => {
const firstKey = Object.keys(errors.value)[0]
return firstKey ? errors.value[firstKey] : null
})
return {
errors: readonly(errors),
setFromZodError,
setErrors,
setError,
clearError,
clearErrors,
hasError,
getError,
hasErrors,
errorMessages,
firstError,
}
}
app/pages/(features)/org-src/division/add.vue
+41
View File
@@ -0,0 +1,41 @@
<script setup lang="ts">
// import type { PagePermission } from '~/models/role'
import Error from '~/components/pub/base/error/error.vue'
// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
definePageMeta({
// middleware: ['rbac'],
// roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
title: 'Tambah Divisi',
contentFrame: 'cf-full-width',
})
const route = useRoute()
useHead({
title: () => route.meta.title as string,
})
// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
// const { checkRole, hasReadAccess } = useRBAC()
// // Check if user has access to this page
// const hasAccess = checkRole(roleAccess)
// if (!hasAccess) {
// navigateTo('/403')
// }
// Define permission-based computed properties
// const canRead = hasReadAccess(roleAccess)
const canRead = true
</script>
<template>
<div>
<div v-if="canRead">
<FlowDivisionEntry />
</div>
<Error v-else :status-code="403" />
</div>
</template>
app/pages/(features)/org-src/division/index.vue
+41
View File
@@ -0,0 +1,41 @@
<script setup lang="ts">
// import type { PagePermission } from '~/models/role'
import Error from '~/components/pub/base/error/error.vue'
// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
definePageMeta({
// middleware: ['rbac'],
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
title: 'List Division',
contentFrame: 'cf-full-width',
})
const route = useRoute()
useHead({
title: () => route.meta.title as string,
})
// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
// const { checkRole, hasReadAccess } = useRBAC()
// // Check if user has access to this page
// const hasAccess = checkRole(roleAccess)
// if (!hasAccess) {
// navigateTo('/403')
// }
// Define permission-based computed properties
// const canRead = hasReadAccess(roleAccess)
const canRead = true
</script>
<template>
<div>
<div v-if="canRead">
route division list
</div>
<Error v-else :status-code="403" />
</div>
</template>