feat(device): update list

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

@@ -76,13 +76,13 @@ function onCancelForm() {
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading" />
+          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading" />
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
         </Field>
       </Cell>
       <Cell>
@@ -95,13 +95,13 @@ function onCancelForm() {
             v-model="uom"
             v-bind="uomAttrs"
             :items="uoms"
-            :disabled="isLoading"
+            :disabled="isLoading || isReadonly"
           />
         </Field>
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
       <Button
         v-if="!isReadonly"
         type="button"

app/components/app/tools/list-cfg.ts

@@ -14,7 +14,7 @@ const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/dat
 
 export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 50 }]
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Satuan' }]]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Satuan' }, { label: '' }]]
 
 export const keys = ['code', 'name', 'uom_code', 'action']
 
@@ -28,10 +28,6 @@ export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
     const recX = rec as SmallDetailDto
     return `${recX.name}`.trim()
   },
-  item_id: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.item_id
-  },
   uom_code: (rec: unknown): unknown => {
     const recX = rec as SmallDetailDto
     return recX.uom_code

app/components/content/equipment/list.vue

@@ -103,8 +103,8 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-// Watch for row actions
+// Watch for row actions when recId or recAction changes
-watch(recId, () => {
+watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
       getEquipmentDetail(recId.value)

app/components/content/tools/list.vue

@@ -8,7 +8,7 @@ import AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
 // helpers
-import { toast } from "~/components/pub/ui/toast"
+import { toast } from '~/components/pub/ui/toast'
 
 // Types
 import type { Uom } from '~/models/uom'
@@ -40,7 +40,6 @@ const getToolsDetail = async (id: number | string) => {
   if (result.success) {
     const currentDevice = result.body?.data || {}
     recItem.value = currentDevice
-    isFormEntryDialogOpen.value = true
   }
 }
 
@@ -104,17 +103,19 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 // Watch for row actions
-watch(recId, () => {
+watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
       getToolsDetail(recId.value)
       title.value = 'Detail Peralatan'
       isReadonly.value = true
+      isFormEntryDialogOpen.value = true
       break
     case ActionEvents.showEdit:
       getToolsDetail(recId.value)
       title.value = 'Edit Peralatan'
       isReadonly.value = false
+      isFormEntryDialogOpen.value = true
       break
     case ActionEvents.showConfirmDelete:
       isRecordConfirmationOpen.value = true