From 56389263ae49b47a6036b4f286c518db249ffed3 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Mon, 8 Sep 2025 13:48:24 +0700
Subject: [PATCH] refactor(tools): add modal form

---
 app/components/app/device/entry-form.vue      |  64 ------
 app/components/app/device/list.vue            |  19 --
 app/components/app/tools/entry-form.vue       | 129 +++++++++++
 .../app/{device => tools}/list-cfg.ts         |   0
 app/components/app/tools/list.vue             |  36 +++
 .../{flow/device => content/tools}/entry.vue  |   0
 app/components/content/tools/list.vue         | 211 ++++++++++++++++++
 app/components/flow/device/list.vue           |  65 ------
 app/schemas/device.ts                         |  13 ++
 9 files changed, 389 insertions(+), 148 deletions(-)
 delete mode 100644 app/components/app/device/entry-form.vue
 delete mode 100644 app/components/app/device/list.vue
 create mode 100644 app/components/app/tools/entry-form.vue
 rename app/components/app/{device => tools}/list-cfg.ts (100%)
 create mode 100644 app/components/app/tools/list.vue
 rename app/components/{flow/device => content/tools}/entry.vue (100%)
 create mode 100644 app/components/content/tools/list.vue
 delete mode 100644 app/components/flow/device/list.vue
 create mode 100644 app/schemas/device.ts

diff --git a/app/components/app/device/entry-form.vue b/app/components/app/device/entry-form.vue
deleted file mode 100644
index 38b4aea0..00000000
--- a/app/components/app/device/entry-form.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import Block from '~/components/pub/custom-ui/form/block.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; errors: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
-
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => {
-    emit('update:modelValue', val)
-  },
-})
-
-const items = [
-  { value: 'item1', label: 'Item 1' },
-  { value: 'item2', label: 'Item 2' },
-]
-</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="1">
-            <Label>Kode</Label>
-            <Field>
-              <Input v-model="data.code" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup v-if="!!props.errors.code">
-            <Label></Label>
-            <span class="text-red-400 text-sm">{{ props.errors.code }}</span>
-          </FieldGroup>
-          <FieldGroup :column="1">
-            <Label>Nama</Label>
-            <Field>
-              <Input v-model="data.name" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup v-if="!!props.errors.name">
-            <Label></Label>
-            <span class="text-red-400 text-sm">{{ props.errors.name }}</span>
-          </FieldGroup>
-          <FieldGroup :column="1">
-            <Label>Item</Label>
-            <Field>
-              <Select v-model="data.type" :items="items" placeholder="Pilih item" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="1">
-            <Label>Satuan</Label>
-            <Field>
-              <Select v-model="data.uom" :items="items" placeholder="Pilih item" />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
-    </div>
-  </form>
-</template>
diff --git a/app/components/app/device/list.vue b/app/components/app/device/list.vue
deleted file mode 100644
index 5b8778d9..00000000
--- a/app/components/app/device/list.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
-
-defineProps<{
-  data: any[]
-}>()
-</script>
-
-<template>
-  <PubBaseDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
-</template>
diff --git a/app/components/app/tools/entry-form.vue b/app/components/app/tools/entry-form.vue
new file mode 100644
index 00000000..f1413f62
--- /dev/null
+++ b/app/components/app/tools/entry-form.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+// helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+// types
+import type z from 'zod'
+import type { DeviceFormData } from '~/schemas/device'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  uoms: any[]
+  items: any[]
+}
+
+const isLoading = ref(false)
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  submit: [values: DeviceFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { handleSubmit, defineField, errors } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    uom_code: '',
+    item_id: '',
+  } as Partial<DeviceFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [uom, uomAttrs] = defineField('uom_code')
+const [item, itemAttrs] = defineField('item_id')
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  uom.value = ''
+  item.value = ''
+}
+
+// Form submission handler
+function onSubmitForm(values: any) {
+  const formData: DeviceFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    uom_code: values.uom_code || '',
+    item_id: values.item_id || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form class="grid gap-2" @submit="handleSubmit(onSubmitForm)">
+    <div class="grid gap-2">
+      <label for="code">Kode</label>
+      <Input
+        id="code"
+        v-model="code"
+        v-bind="codeAttrs"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.code }"
+      />
+      <span v-if="errors.code" class="text-sm text-red-500">
+        {{ errors.code }}
+      </span>
+    </div>
+    <div class="grid gap-2">
+      <label for="name">Nama</label>
+      <Input
+        id="name"
+        v-model="name"
+        v-bind="nameAttrs"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.name }"
+      />
+      <span v-if="errors.name" class="text-sm text-red-500">
+        {{ errors.name }}
+      </span>
+    </div>
+    <div class="grid gap-2">
+      <label for="uom">Satuan</label>
+      <Select
+        id="uom"
+        icon-name="i-lucide-chevron-down"
+        placeholder="Pilih satuan"
+        v-model="uom"
+        v-bind="uomAttrs"
+        :items="uoms"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.uom_code }"
+      />
+      <span v-if="errors.uom_code" class="text-sm text-red-500">
+        {{ errors.uom_code }}
+      </span>
+    </div>
+    <div class="grid gap-2">
+      <label for="item">Item</label>
+      <Select
+        id="item"
+        icon-name="i-lucide-chevron-down"
+        placeholder="Pilih item"
+        v-model="item"
+        v-bind="itemAttrs"
+        :items="items"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.item_id }"
+      />
+      <span v-if="errors.item_id" class="text-sm text-red-500">
+        {{ errors.item_id }}
+      </span>
+    </div>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button type="submit" class="w-[120px]">
+        <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/device/list-cfg.ts b/app/components/app/tools/list-cfg.ts
similarity index 100%
rename from app/components/app/device/list-cfg.ts
rename to app/components/app/tools/list-cfg.ts
diff --git a/app/components/app/tools/list.vue b/app/components/app/tools/list.vue
new file mode 100644
index 00000000..5e6d4382
--- /dev/null
+++ b/app/components/app/tools/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta?: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+  <template v-if="paginationMeta">
+    <div v-if="paginationMeta.totalPage > 1">
+      <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </template>
+</template>
diff --git a/app/components/flow/device/entry.vue b/app/components/content/tools/entry.vue
similarity index 100%
rename from app/components/flow/device/entry.vue
rename to app/components/content/tools/entry.vue
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
new file mode 100644
index 00000000..356ce30f
--- /dev/null
+++ b/app/components/content/tools/list.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { DeviceSchema, type DeviceFormData } from '~/schemas/device'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const uoms = [
+  { value: 'uom-1', label: 'Satuan 1' },
+  { value: 'uom-2', label: 'Satuan 2' },
+  { value: 'uom-3', label: 'Satuan 3' },
+]
+const items = [
+  { value: 'item-1', label: 'Item 1' },
+  { value: 'item-2', label: 'Item 2' },
+  { value: 'item-3', label: 'Item 3' },
+]
+
+// Fungsi untuk fetch data division
+async function fetchDeviceData(params: any) {
+  // Prepare query parameters for pagination and search
+  const urlParams = new URLSearchParams({
+    'page-number': params.page.toString(),
+    'page-size': params.pageSize.toString(),
+  })
+
+  if (params.q) {
+    urlParams.append('search', params.q)
+  }
+
+  return await xfetch(`/api/v1/device?${urlParams.toString()}`)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDeviceList,
+} = usePaginatedList({
+  fetchFn: fetchDeviceData,
+  entityName: 'device',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Peralatan',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Perlengkapan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+const handleDeleteRow = async (record: any) => {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/device/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getDeviceList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+const onCancelForm = (resetForm: () => void) => {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+const onSubmitForm = async (values: any, resetForm: () => void) => {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/division', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Refresh data after successful submission
+    await getDeviceList()
+
+    // TODO: Show success message
+    console.log('Device created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+
+// Handle confirmation result
+const handleConfirmDelete = (record: any, action: string) => {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+const handleCancelConfirmation = () => {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
+
+    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Peralatan" size="lg" prevent-outside>
+      <AppEquipmentEntryForm :schema="DeviceSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="handleConfirmDelete"
+      @cancel="handleCancelConfirmation"
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
diff --git a/app/components/flow/device/list.vue b/app/components/flow/device/list.vue
deleted file mode 100644
index 8c7bd672..00000000
--- a/app/components/flow/device/list.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-
-const data = ref([])
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const headerPrep: HeaderPrep = {
-  title: 'Alat Kesehatan',
-  icon: 'i-lucide-paint-bucket',
-  addNav: {
-    label: 'Tambah',
-    onClick: () => navigateTo('/tools-equipment-src/device/add'),
-  },
-}
-
-async function getMaterialList() {
-  isLoading.dataListLoading = true
-
-  const resp = await xfetch('/api/v1/device')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-
-  isLoading.dataListLoading = false
-}
-
-onMounted(() => {
-  getMaterialList()
-})
-
-provide('rec_id', recId)
-provide('rec_action', recAction)
-provide('rec_item', recItem)
-provide('table_data_loader', isLoading)
-</script>
-
-<template>
-  <div class="rounded-md border p-4">
-    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-    <div class="rounded-md border p-4">
-      <AppMaterialList v-if="!isLoading.dataListLoading" :data="data" />
-    </div>
-  </div>
-</template>
diff --git a/app/schemas/device.ts b/app/schemas/device.ts
new file mode 100644
index 00000000..036f3bc7
--- /dev/null
+++ b/app/schemas/device.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod'
+
+const schema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  uom_code: z.string({ required_error: 'Kode unit harus diisi' }).min(1, 'Kode unit harus diisi'),
+  item_id: z.string({ required_error: 'Tipe harus diisi' }).min(1, 'Tipe harus diisi'),
+})
+
+type formData = z.infer<typeof schema>
+
+export { schema as DeviceSchema }
+export type { formData as DeviceFormData }