From b6d30eb154d68e925e1a09e8df933b4f6d213247 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 2 Sep 2025 16:49:19 +0700
Subject: [PATCH] refactor(division): extract entry form to separate component
 and improve form handling

- Move form logic from list component to dedicated entry-form component
- Implement proper form submission and cancellation handlers
- Add type safety with DivisionFormData interface
- Improve form validation using vee-validate
- Refresh data after successful form submission
---
 app/components/app/divison/entry-form.vue | 105 +++++++++++++++------
 app/components/flow/division/list.vue     | 107 ++++++----------------
 2 files changed, 108 insertions(+), 104 deletions(-)

diff --git a/app/components/app/divison/entry-form.vue b/app/components/app/divison/entry-form.vue
index 348f440e..5b24b345 100644
--- a/app/components/app/divison/entry-form.vue
+++ b/app/components/app/divison/entry-form.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Block from '~/components/pub/custom-ui/form/block.vue'
+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<{
-  modelValue: any
   division: {
     msg: {
       placeholder: string
@@ -20,47 +25,95 @@ const props = defineProps<{
       code: string
     }[]
   }
+  schema: any
+  initialValues?: Partial<DivisionFormData>
   errors?: FormErrors
 }>()
-const emit = defineEmits(['update:modelValue', 'event'])
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-})
+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 id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup :column="2">
+  <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>Nama</Label>
             <Field id="name" :errors="errors">
-              <Input v-model="data.name" />
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input type="text" placeholder="Masukkan nama divisi" autocomplete="organization"
+                      v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
+
+          <FieldGroup>
             <Label>Kode</Label>
             <Field id="code" :errors="errors">
-              <Input v-model="data.code" />
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
+
           <FieldGroup :column="2">
-            <Label>Divisi</Label>
+            <Label>Kelompok</Label>
             <Field id="parentId" :errors="errors">
-              <Combobox
-                v-model="data.parentId"
-                :items="props.division.items"
-                :placeholder="props.division.msg.placeholder"
-                :search-placeholder="props.division.msg.search"
-                :empty-message="props.division.msg.empty"
-              />
+              <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>
-        </Block>
+        </div>
       </div>
-    </div>
-  </form>
+
+      <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>
diff --git a/app/components/flow/division/list.vue b/app/components/flow/division/list.vue
index 96b3a66a..b154125f 100644
--- a/app/components/flow/division/list.vue
+++ b/app/components/flow/division/list.vue
@@ -2,9 +2,8 @@
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
-import { toTypedSchema } from '@vee-validate/zod'
 import { refDebounced, useUrlSearchParams } from '@vueuse/core'
-import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
+import AppDivisonEntryForm from '~/components/app/divison/entry-form.vue'
 import Header from '~/components/pub/custom-ui/nav-header/header.vue'
 import { division as divisionConf, schema as schemaConf } from './entry'
 import { defaultQuery, querySchema } from './schema.query'
@@ -73,8 +72,6 @@ const headerPrep: HeaderPrep = {
   },
 }
 
-const formSchema = toTypedSchema(schemaConf)
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
@@ -141,25 +138,16 @@ function handlePageChange(page: number) {
 
 // #endregion region
 
-// #region Utilities & event handlers
+// #region Form event handlers
 
-function clearForm(setValues: (values: Record<string, any>) => void) {
-  // Manually clear all form fields
-  setValues({
-    name: '',
-    code: '',
-    parentId: '',
-  })
-}
-
-function onCancelForm(setValues: (values: Record<string, any>) => void) {
+function onCancelForm(resetForm: () => void) {
   isDialogOpen.value = false
   setTimeout(() => {
-    clearForm(setValues)
+    resetForm()
   }, 500)
 }
 
-async function onSubmitForm(values: any, setValues: (values: Record<string, any>) => void) {
+async function onSubmitForm(values: any, resetForm: () => void) {
   let isSuccess = false
   try {
     // TODO: Implement form submission logic
@@ -175,6 +163,9 @@ async function onSubmitForm(values: any, setValues: (values: Record<string, any>
     isDialogOpen.value = false
     isSuccess = true
 
+    // Refresh data after successful submission
+    await getDivisionList()
+
     // TODO: Show success message
     console.log('Division created successfully')
   } catch (error: unknown) {
@@ -185,7 +176,7 @@ async function onSubmitForm(values: any, setValues: (values: Record<string, any>
   } finally {
     if (isSuccess) {
       setTimeout(() => {
-        clearForm(setValues)
+        resetForm()
       }, 500)
     }
   }
@@ -221,70 +212,30 @@ watch(debouncedSearch, (newValue) => {
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
+    <div class="rounded-md border p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    <Form v-slot="{ handleSubmit, setValues }" as="" keep-values :validation-schema="formSchema">
-      <Dialog v-model:open="isDialogOpen">
-        <DialogContent
-class="sm:max-w-[425px]" @interact-outside="(e) => e.preventDefault()"
-          @pointer-down-outside="(e) => e.preventDefault()"
->
-          <DialogHeader>
-            <DialogTitle>Tambah Divisi</DialogTitle>
-            <DialogDescription></DialogDescription>
-          </DialogHeader>
 
-          <form id="dialogForm" @submit="handleSubmit($event, (values) => onSubmitForm(values, setValues))">
-            <FormField v-slot="{ componentField }" name="name">
-              <FormItem>
-                <FormLabel>Nama</FormLabel>
-                <FormControl>
-                  <Input
-type="text" placeholder="Masukkan nama divisi" autocomplete="organization"
-                    v-bind="componentField"
-/>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
+    <Dialog v-model:open="isDialogOpen">
+      <DialogContent
+        class="sm:max-w-[425px]"
+        @interact-outside="(e) => e.preventDefault()"
+        @pointer-down-outside="(e) => e.preventDefault()"
+      >
+        <DialogHeader>
+          <DialogTitle>Tambah Divisi</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
 
-            <FormField v-slot="{ componentField }" name="code">
-              <FormItem>
-                <FormLabel>Kode</FormLabel>
-                <FormControl>
-                  <Input type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
-
-            <FormField v-slot="{ componentField }" name="parentId">
-              <FormItem>
-                <FormLabel>Kelompok</FormLabel>
-                <FormControl>
-                  <Combobox
-v-bind="componentField" :items="divisionConf.items"
-                    :placeholder="divisionConf.msg.placeholder" :search-placeholder="divisionConf.msg.search"
-                    :empty-message="divisionConf.msg.empty"
-/>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
-          </form>
-
-          <DialogFooter>
-            <Button variant="outline" @click="onCancelForm(setValues)">
-              Batal
-            </Button>
-            <Button type="submit" form="dialogForm">
-              Simpan
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Form>
+        <AppDivisonEntryForm
+          :division="divisionConf"
+          :schema="schemaConf"
+          :initial-values="{ name: '', code: '', parentId: '' }"
+          @submit="onSubmitForm"
+          @cancel="onCancelForm"
+        />
+      </DialogContent>
+    </Dialog>
   </div>
 </template>