feat(material): finishing integration of material

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

@@ -15,10 +15,12 @@ interface Props {
   schema: z.ZodSchema<any>
   uoms: any[]
   values: any
+  isReadonly?: boolean
 }
 
 const isLoading = ref(false)
 const props = defineProps<Props>()
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 const emit = defineEmits<{
   submit: [values: MaterialFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
@@ -75,13 +77,13 @@ function onCancelForm() {
       <Cell>
         <Label height="">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>
@@ -94,20 +96,21 @@ function onCancelForm() {
             placeholder="Pilih satuan"
             v-bind="uomAttrs"
             :items="uoms"
-            :disabled="isLoading"
+            :disabled="isLoading || isReadonly"
           />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Stok</Label>
         <Field :errMessage="errors.stock">
-          <Input id="stock" v-model="stock" type="number" v-bind="stockAttrs" :disabled="isLoading" />
+          <Input id="stock" v-model="stock" type="number" v-bind="stockAttrs" :disabled="isLoading || isReadonly" />
         </Field>
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
       <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
       <Button
+        v-if="!isReadonly"
         type="button"
         class="w-[120px]"
         :disabled="isLoading || !meta.valid"

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

@@ -14,16 +14,19 @@ import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
 interface Props {
   schema: z.ZodSchema<any>
   uoms: any[]
+  values: any
+  isReadonly?: boolean
 }
 
 const isLoading = ref(false)
 const props = defineProps<Props>()
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 const emit = defineEmits<{
   submit: [values: DeviceFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 
-const { handleSubmit, defineField, errors } = useForm({
+const { defineField, errors, meta } = useForm({
   validationSchema: toTypedSchema(props.schema),
   initialValues: {
     code: '',
@@ -37,6 +40,13 @@ const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
 const [uom, uomAttrs] = defineField('uom_code')
 
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.uom_code !== undefined) uom.value = props.values.uom_code
+}
+
 const resetForm = () => {
   code.value = ''
   name.value = ''
@@ -46,9 +56,9 @@ const resetForm = () => {
 // Form submission handler
 function onSubmitForm(values: any) {
   const formData: DeviceFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    uom_code: values.uom_code || '',
+    name: name.value || '',
+    code: code.value || '',
+    uom_code: uom.value || '',
   }
   emit('submit', formData, resetForm)
 }
@@ -61,27 +71,17 @@ function onCancelForm() {
 
 <template>
   <form id="form-tools">
-    <Block labelSize="thin" class="!mb-2.5 xl:!mb-3 !pt-0" :colCount="1">
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
       <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" />
         </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" />
         </Field>
       </Cell>
       <Cell>
@@ -102,10 +102,11 @@ function onCancelForm() {
     <div class="my-2 flex justify-end gap-2 py-2">
       <Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
       <Button
+        v-if="!isReadonly"
         type="button"
         class="w-[120px]"
-        :disabled="isLoading"
-        @click="handleSubmit(onSubmitForm)"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
       >
         Simpan
       </Button>

app/components/content/equipment/list.vue

@@ -15,6 +15,7 @@ import {
   recId,
   recAction,
   recItem,
+  isReadonly,
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
@@ -29,6 +30,7 @@ import { getSourceMaterials, getSourceMaterialDetail } from '~/services/material
 import { getSourceUoms } from '~/services/uom.service'
 
 const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
 
 const getEquipmentDetail = async (id: number | string) => {
   const result = await getSourceMaterialDetail(id)
@@ -85,7 +87,10 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah Perlengkapan',
     icon: 'i-lucide-plus',
     onClick: () => {
+      recItem.value = null
+      recId.value = 0
       isFormEntryDialogOpen.value = true
+      isReadonly.value = false
     },
   },
 }
@@ -98,8 +103,15 @@ provide('table_data_loader', isLoading)
 // Watch for row actions
 watch(recId, () => {
   switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getEquipmentDetail(recId.value)
+      title.value = 'Detail Perlengkapan'
+      isReadonly.value = true
+      break
     case ActionEvents.showEdit:
       getEquipmentDetail(recId.value)
+      title.value = 'Edit Perlengkapan'
+      isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
       isRecordConfirmationOpen.value = true
@@ -122,7 +134,7 @@ onMounted(async () => {
 
     <Dialog
       v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? 'Edit Perlengkapan' : 'Tambah Perlengkapan'"
+      :title="!!recItem ? title : 'Tambah Perlengkapan'"
       size="lg"
       prevent-outside
     >
@@ -131,11 +143,12 @@ onMounted(async () => {
         :values="recItem"
         :uoms="uoms"
         :is-loading="isProcessing"
+        :is-readonly="isReadonly"
         @submit="
           (values: MaterialFormData, resetForm: any) => {
-            if (!!recId) {
+            if (recId > 0) {
               handleActionEdit(recId, values, getEquipmentList, resetForm)
-              return 
+              return
             }
             handleActionSave(values, getEquipmentList, resetForm)
           }