feat(device): integrate api device

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

@@ -9,7 +9,6 @@ import type { DeviceFormData } from '~/schemas/device'
 interface Props {
   schema: z.ZodSchema<any>
   uoms: any[]
-  items: any[]
 }
 
 const isLoading = ref(false)
@@ -32,13 +31,11 @@ const { handleSubmit, defineField, errors } = useForm({
 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
@@ -47,7 +44,6 @@ function onSubmitForm(values: any) {
     name: values.name || '',
     code: values.code || '',
     uom_code: values.uom_code || '',
-    item_id: values.item_id || '',
   }
   emit('submit', formData, resetForm)
 }
@@ -59,7 +55,7 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form class="grid gap-2" @submit="handleSubmit(onSubmitForm)">
+  <form id="form-tools" class="grid gap-2">
     <div class="grid gap-2">
       <label for="code">Kode</label>
       <Input
@@ -102,26 +98,19 @@ function onCancelForm() {
         {{ 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]">
+      <Button
-        <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading"
+        @click="
+          () => {
+            handleSubmit(onSubmitForm)()
+          }
+        "
+      >
+        <!-- <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" /> -->
         Simpan
       </Button>
     </div>

app/components/content/tools/list.vue

@@ -4,32 +4,46 @@ 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 AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
-const isFormEntryDialogOpen = ref(false)
+// Types
-const isRecordConfirmationOpen = ref(false)
+import type { Uom } from '~/models/uom'
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
 
-const uoms = [
+// Handlers
-  { value: 'uom-1', label: 'Satuan 1' },
+import {
-  { value: 'uom-2', label: 'Satuan 2' },
+  recId,
-  { value: 'uom-3', label: 'Satuan 3' },
+  recAction,
-]
+  recItem,
-const items = [
+  isProcessing,
-  { value: 'item-1', label: 'Item 1' },
+  isFormEntryDialogOpen,
-  { value: 'item-2', label: 'Item 2' },
+  isRecordConfirmationOpen,
-  { value: 'item-3', label: 'Item 3' },
+  handleActionSave,
-]
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/device.handler'
 
-async function fetchDeviceData(params: any) {
+// Services
-  const endpoint = transform('/api/v1/device', params)
+import { getSourceDevices, getSourceDeviceDetail } from '~/services/device.service'
-  return await xfetch(endpoint)
+import { getSourceUoms } from '~/services/uom.service'
+
+const uoms = ref<{ value: string; label: string }[]>([])
+
+const getToolsDetail = async (id: number | string) => {
+  const result = await getSourceDeviceDetail(id)
+  if (result.success) {
+    recItem.value = result.data
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+const getUomList = async () => {
+  const result = await getSourceUoms()
+  if (result.success) {
+    uoms.value = result.data.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
+  }
 }
 
-// Menggunakan composable untuk pagination
 const {
   data,
   isLoading,
@@ -37,9 +51,12 @@ const {
   searchInput,
   handlePageChange,
   handleSearch,
-  fetchData: getDeviceList,
+  fetchData: getToolsList,
 } = usePaginatedList({
-  fetchFn: fetchDeviceData,
+  fetchFn: async ({ page }) => {
+    const result = await getSourceDevices({ page })
+    return result.data || []
+  },
   entityName: 'device',
 })
 
@@ -79,106 +96,34 @@ provide('table_data_loader', isLoading)
 watch(recId, () => {
   switch (recAction.value) {
     case ActionEvents.showEdit:
-      // TODO: Handle edit action
+      getToolsDetail(recId.value)
-      // isFormEntryDialogOpen.value = true
       break
     case ActionEvents.showConfirmDelete:
-      // Trigger confirmation modal open
       isRecordConfirmationOpen.value = true
       break
   }
 })
 
-const handleDeleteRow = async (record: any) => {
+onMounted(async () => {
-  try {
+  await getUomList();
-    // 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">
+  <div class="p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <div class="rounded-md border p-4">
       <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
     </div>
 
     <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Peralatan" size="lg" prevent-outside>
-      <AppToolsEntryForm :schema="DeviceSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
+      <AppToolsEntryForm
+        :schema="DeviceSchema"
+        :uoms="uoms"
+        :is-loading="isProcessing"
+        @submit="(values: DeviceFormData, resetForm: any) => handleActionSave(values, getToolsList, resetForm)"
+        @cancel="handleCancelForm"
+      />
     </Dialog>
 
     <!-- Record Confirmation Modal -->
@@ -186,8 +131,8 @@ const handleCancelConfirmation = () => {
       v-model:open="isRecordConfirmationOpen"
       action="delete"
       :record="recItem"
-      @confirm="handleConfirmDelete"
+      @confirm="() => handleActionRemove(recId, getToolsList)"
-      @cancel="handleCancelConfirmation"
+      @cancel=""
     >
       <template #default="{ record }">
         <div class="text-sm">

app/handlers/device.handler.ts

@@ -0,0 +1,87 @@
+import { ref } from 'vue'
+
+// Services
+import { postSourceDevice, putSourceDevice, removeSourceDevice } from '~/services/device.service'
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isProcessing = ref(false)
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+function onResetState() {
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+export async function handleActionSave(values: any, refresh: () => void, reset: () => void) {
+  let isSuccess = false
+  isProcessing.value = true
+  try {
+    const result = await postSourceDevice(values)
+    if (result.success) {
+      isFormEntryDialogOpen.value = false
+      isSuccess = true
+      if (refresh) refresh()
+    }
+  } catch (error) {
+    console.warn('Error saving form:', error)
+    isSuccess = false
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        reset()
+      }, 500)
+    }
+    isProcessing.value = false
+  }
+}
+
+export async function handleActionEdit(id: number | string, values: any, refresh: () => void, reset: () => void) {
+  let isSuccess = false
+  isProcessing.value = true
+  try {
+    const result = await putSourceDevice(id, values)
+    if (result.success) {
+      isFormEntryDialogOpen.value = false
+      isSuccess = true
+      if (refresh) refresh()
+    }
+  } catch (error) {
+    console.warn('Error editing form:', error)
+    isSuccess = false
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        reset()
+      }, 500)
+    }
+    isProcessing.value = false
+  }
+}
+
+export async function handleActionRemove(id: number | string, refresh: () => void) {
+  isProcessing.value = true
+  try {
+    const result = await removeSourceDevice(id)
+    if (result.success) {
+      if (refresh) refresh()
+    }
+  } catch (error) {
+    console.error('Error deleting record:', error)
+  } finally {
+    onResetState()
+    isProcessing.value = false
+  }
+}
+
+export function handleCancelForm(reset: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    reset()
+  }, 500)
+}
+
+export { recId, recAction, recItem, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }

app/models/device.ts

@@ -0,0 +1,5 @@
+export interface Device {
+  code: string
+  name: string
+  uom_code: string
+}

app/schemas/device.ts

@@ -1,13 +1,13 @@
 import { z } from 'zod'
+import type { Device } from '~/models/device'
 
-const schema = z.object({
+const DeviceSchema = 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>
+type DeviceFormData = z.infer<typeof DeviceSchema> & Device
 
-export { schema as DeviceSchema }
+export { DeviceSchema }
-export type { formData as DeviceFormData }
+export type { DeviceFormData }

app/services/device.service.ts

@@ -0,0 +1,72 @@
+import { xfetch } from '~/composables/useXfetch'
+
+export async function getSourceDevices(params: any = null) {
+  try {
+    let url = '/api/v1/device'
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(url, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    if (resp.success) {
+      result.data = (resp.body as Record<string, any>).data
+    }
+    return result
+  } catch (error) {
+    console.error('Error fetching source devices:', error)
+    throw new Error('Failed to fetch source devices')
+  }
+}
+
+export async function getSourceDeviceDetail(id: string | number) {
+  try {
+    const resp = await xfetch(`/api/v1/device/${id}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    if (resp.success) {
+      result.data = (resp.body as Record<string, any>).data
+    }
+    return result
+  } catch (error) {
+    console.error('Error fetching device detail:', error)
+    throw new Error('Failed to fetch device detail')
+  }
+}
+
+export async function postSourceDevice(data: any) {
+  try {
+    const resp = await xfetch('/api/v1/device', 'POST', data)
+    return resp
+  } catch (error) {
+    console.error('Error creating device:', error)
+    throw new Error('Failed to create device')
+  }
+}
+
+export async function putSourceDevice(id: string | number, data: any) {
+  try {
+    const resp = await xfetch(`/api/v1/device/${id}`, 'PUT', data)
+    return resp
+  } catch (error) {
+    console.error('Error updating device:', error)
+    throw new Error('Failed to update device')
+  }
+}
+
+export async function removeSourceDevice(id: string | number) {
+  try {
+    const resp = await xfetch(`/api/v1/device/${id}`, 'DELETE')
+    return resp
+  } catch (error) {
+    console.error('Error deleting device:', error)
+    throw new Error('Failed to delete device')
+  }
+}