refactor(equipment): add modal form to component list

app/components/app/equipment/entry-form.vue

@@ -5,20 +5,18 @@ import { useForm } from 'vee-validate'
 // types
 import type z from 'zod'
 import type { MaterialFormData } from '~/schemas/material'
-// components
-import Label from '~/components/pub/custom-ui/form/label.vue'
 
 interface Props {
-  isLoading: boolean
   schema: z.ZodSchema<any>
   uoms: any[]
   items: any[]
 }
 
+const isLoading = ref(false)
 const props = defineProps<Props>()
 const emit = defineEmits<{
-  back: []
-  submit: [data: any]
+  submit: [values: MaterialFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
 }>()
 
 const { handleSubmit, defineField, errors } = useForm({
@@ -38,19 +36,36 @@ const [uom, uomAttrs] = defineField('uom_code')
 const [item, itemAttrs] = defineField('item_id')
 const [stock, stockAttrs] = defineField('stock')
 
-const onSubmit = handleSubmit(async (values) => {
-  try {
-    emit('submit', values)
-  } catch (error) {
-    console.error('Submission failed:', error)
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  uom.value = ''
+  item.value = ''
+  stock.value = 0
+}
+
+// Form submission handler
+function onSubmitForm(values: any) {
+  const formData: MaterialFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    uom_code: values.uom_code || '',
+    item_id: values.item_id || '',
+    stock: values.stock || 0,
   }
-})
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form class="grid gap-2" @submit="onSubmit">
+  <form class="grid gap-2" @submit="onSubmitForm">
     <div class="grid gap-2">
-      <Label for="code">Kode</Label>
+      <label for="code">Kode</label>
       <Input
         id="code"
         v-model="code"
@@ -63,7 +78,7 @@ const onSubmit = handleSubmit(async (values) => {
       </span>
     </div>
     <div class="grid gap-2">
-      <Label for="name">Nama</Label>
+      <label for="name">Nama</label>
       <Input
         id="name"
         v-model="name"
@@ -76,7 +91,7 @@ const onSubmit = handleSubmit(async (values) => {
       </span>
     </div>
     <div class="grid gap-2">
-      <Label for="uom">Satuan</Label>
+      <label for="uom">Satuan</label>
       <Select
         id="uom"
         icon-name="i-lucide-chevron-down"
@@ -92,7 +107,7 @@ const onSubmit = handleSubmit(async (values) => {
       </span>
     </div>
     <div class="grid gap-2">
-      <Label for="item">Item</Label>
+      <label for="item">Item</label>
       <Select
         id="item"
         icon-name="i-lucide-chevron-down"
@@ -108,7 +123,7 @@ const onSubmit = handleSubmit(async (values) => {
       </span>
     </div>
     <div class="grid gap-2">
-      <Label for="stock">Stok</Label>
+      <label for="stock">Stok</label>
       <Input
         id="stock"
         type="number"
@@ -122,7 +137,7 @@ const onSubmit = handleSubmit(async (values) => {
       </span>
     </div>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button variant="secondary" class="w-[120px]" @click="emit('back')"> Kembali </Button>
+      <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

app/components/app/equipment/list.vue

@@ -0,0 +1,38 @@
+<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>
+  <div class="space-y-4">
+    <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>
+  </div>
+</template>

app/components/app/material/list.vue

@@ -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>