Khafid Prayoga
a9c286bd0a
feat(form): add accessibility improvements to form components - Add labelFor prop to Label component for better form element association - Enhance Combobox with ARIA attributes for better screen reader support - Update form fields with proper IDs and label associations feat(pagination): adjust button width based on page number length Add dynamic button sizing for pagination items to accommodate different digit lengths (1-99, 100-999, 1000+). This improves visual consistency when displaying varying page numbers. feat(modal): add reusable dialog component and refactor division form - Create new Dialog.vue component with configurable size and outside click prevention - Replace inline dialog implementation in division list with new Dialog component - Fix formatting in entry-form.vue feat(data-table): add click handling for action cells Implement handleActionCellClick function to manage click events on action cells, triggering dropdown buttons when clicked outside interactive elements. Add cursor-pointer class and click handler to action cells for better UX. refactor(custom-ui): centralize action event strings in types Replace hardcoded action event strings with constants from types.ts to improve maintainability and reduce potential typos feat(confirmation): add reusable confirmation modal components - Implement base confirmation.vue component with customizable props - Create record-specific record-confirmation.vue for data operations - Add comprehensive README.md documentation for usage - Integrate confirmation flow in division list component refactor(components): move dialog component to base directory and update imports The dialog component was moved from custom-ui/modal to base/modal to better reflect its shared usage across the application. All import paths referencing the old location have been updated accordingly. refactor(select): reorganize imports and adjust conditional formatting - Reorder imports in Select.vue for better organization - Adjust logical operator formatting in SelectContent.vue for consistency
126 lines
3.9 KiB
Vue
126 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import type { FormErrors } from '~/types/error'
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
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'
|
|
|
|
interface DivisionFormData {
|
|
name: string
|
|
code: string
|
|
parentId: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
division: {
|
|
msg: {
|
|
placeholder: string
|
|
search: string
|
|
empty: string
|
|
}
|
|
items: {
|
|
value: string
|
|
label: string
|
|
code: string
|
|
}[]
|
|
}
|
|
schema: any
|
|
initialValues?: Partial<DivisionFormData>
|
|
errors?: FormErrors
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'submit': [values: DivisionFormData, resetForm: () => void]
|
|
'cancel': [resetForm: () => void]
|
|
}>()
|
|
|
|
const formSchema = toTypedSchema(props.schema)
|
|
|
|
// Form submission handler
|
|
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
|
const formData: DivisionFormData = {
|
|
name: values.name || '',
|
|
code: values.code || '',
|
|
parentId: values.parentId || '',
|
|
}
|
|
emit('submit', formData, resetForm)
|
|
}
|
|
|
|
// Form cancel handler
|
|
function onCancelForm({ resetForm }: { resetForm: () => void }) {
|
|
emit('cancel', resetForm)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Form
|
|
v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
|
|
:initial-values="initialValues"
|
|
>
|
|
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
|
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
|
<div class="flex flex-col justify-between">
|
|
<FieldGroup>
|
|
<Label label-for="name">Nama</Label>
|
|
<Field id="name" :errors="errors">
|
|
<FormField v-slot="{ componentField }" name="name">
|
|
<FormItem>
|
|
<FormControl>
|
|
<Input
|
|
id="name" type="text" placeholder="Masukkan nama divisi" autocomplete="off"
|
|
v-bind="componentField"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</Field>
|
|
</FieldGroup>
|
|
|
|
<FieldGroup>
|
|
<Label label-for="code">Kode</Label>
|
|
<Field id="code" :errors="errors">
|
|
<FormField v-slot="{ componentField }" name="code">
|
|
<FormItem>
|
|
<FormControl>
|
|
<Input id="code" type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</Field>
|
|
</FieldGroup>
|
|
|
|
<FieldGroup :column="2">
|
|
<Label label-for="parentId">Kelompok</Label>
|
|
<Field id="parentId" :errors="errors">
|
|
<FormField v-slot="{ componentField }" name="parentId">
|
|
<FormItem>
|
|
<FormControl>
|
|
<Combobox
|
|
id="parentId" v-bind="componentField" :items="props.division.items"
|
|
:placeholder="props.division.msg.placeholder" :search-placeholder="props.division.msg.search"
|
|
:empty-message="props.division.msg.empty"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</Field>
|
|
</FieldGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-2 mt-4">
|
|
<Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
|
|
Batal
|
|
</Button>
|
|
<Button type="submit">
|
|
Simpan
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</template>
|