feat(material): update with processing

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

@@ -3,10 +3,8 @@
 import type z from 'zod'
 import type { MaterialFormData } from '~/schemas/material'
 // helpers
-import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
-import Alert from '~/components/pub/ui/alert/Alert.vue'
-// components
+import { toTypedSchema } from '@vee-validate/zod'
 
 interface Props {
   schema: z.ZodSchema<any>
@@ -116,10 +114,11 @@ function onCancelForm() {
       </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="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
       <Button
         type="button"
         class="w-[120px]"
+        :disabled="isLoading"
         @click="
           () => {
             handleSubmit(onSubmitForm)()

app/components/content/equipment/list.vue

@@ -15,6 +15,7 @@ import {
   recId,
   recAction,
   recItem,
+  isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
   handleActionSave,
@@ -119,6 +120,7 @@ onMounted(async () => {
       <AppEquipmentEntryForm
         :schema="MaterialSchema"
         :uoms="uoms"
+        :is-loading="isProcessing"
         @submit="(values: MaterialFormData, resetForm: any) => handleActionSave(values, getEquipmentList, resetForm)"
         @cancel="handleCancelForm"
       />

app/handlers/material.handler.ts

@@ -6,6 +6,7 @@ import { postSourceMaterial, putSourceMaterial, removeSourceMaterial } from '~/s
 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)
 
@@ -17,6 +18,7 @@ function onResetState() {
 
 export async function handleActionSave(values: any, refresh: () => void, reset: () => void) {
   let isSuccess = false
+  isProcessing.value = true
   try {
     const result = await postSourceMaterial(values)
     if (result.success) {
@@ -33,11 +35,13 @@ export async function handleActionSave(values: any, refresh: () => void, reset:
         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 putSourceMaterial(id, values)
     if (result.success) {
@@ -54,10 +58,12 @@ export async function handleActionEdit(id: number | string, values: any, refresh
         reset()
       }, 500)
     }
+    isProcessing.value = false
   }
 }
 
 export async function handleActionRemove(id: number | string, refresh: () => void) {
+  isProcessing.value = true
   try {
     const result = await removeSourceMaterial(id)
     if (result.success) {
@@ -67,6 +73,7 @@ export async function handleActionRemove(id: number | string, refresh: () => voi
     console.error('Error deleting record:', error)
   } finally {
     onResetState()
+    isProcessing.value = false
   }
 }
 
@@ -77,4 +84,4 @@ export function handleCancelForm(reset: () => void) {
   }, 500)
 }
 
-export { recId, recAction, recItem, isFormEntryDialogOpen, isRecordConfirmationOpen }
+export { recId, recAction, recItem, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }