feat(material): finishing integration of material
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
// Services
|
||||
import { postSourceDevice, putSourceDevice, removeSourceDevice } from '~/services/device.service'
|
||||
import { postSourceDevice, patchSourceDevice, removeSourceDevice } from '~/services/device.service'
|
||||
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
@@ -43,7 +43,7 @@ export async function handleActionEdit(id: number | string, values: any, refresh
|
||||
let isSuccess = false
|
||||
isProcessing.value = true
|
||||
try {
|
||||
const result = await putSourceDevice(id, values)
|
||||
const result = await patchSourceDevice(id, values)
|
||||
if (result.success) {
|
||||
isFormEntryDialogOpen.value = false
|
||||
isSuccess = true
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
// Services
|
||||
import { postSourceMaterial, putSourceMaterial, removeSourceMaterial } from '~/services/material.service'
|
||||
import { postSourceMaterial, patchSourceMaterial, removeSourceMaterial } from '~/services/material.service'
|
||||
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
const isReadonly = ref(false)
|
||||
const isProcessing = ref(false)
|
||||
const isFormEntryDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
@@ -43,7 +44,7 @@ export async function handleActionEdit(id: number | string, values: any, refresh
|
||||
let isSuccess = false
|
||||
isProcessing.value = true
|
||||
try {
|
||||
const result = await putSourceMaterial(id, values)
|
||||
const result = await patchSourceMaterial(id, values)
|
||||
if (result.success) {
|
||||
isFormEntryDialogOpen.value = false
|
||||
isSuccess = true
|
||||
@@ -84,4 +85,4 @@ export function handleCancelForm(reset: () => void) {
|
||||
}, 500)
|
||||
}
|
||||
|
||||
export { recId, recAction, recItem, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
|
||||
export { recId, recAction, recItem, isReadonly, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
|
||||
|
||||
@@ -16,9 +16,7 @@ export async function getSourceDevices(params: any = null) {
|
||||
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
|
||||
}
|
||||
result.body = (resp.body as Record<string, any>) || {}
|
||||
return result
|
||||
} catch (error) {
|
||||
console.error('Error fetching source devices:', error)
|
||||
@@ -31,9 +29,7 @@ export async function getSourceDeviceDetail(id: string | number) {
|
||||
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
|
||||
}
|
||||
result.body = (resp.body as Record<string, any>) || {}
|
||||
return result
|
||||
} catch (error) {
|
||||
console.error('Error fetching device detail:', error)
|
||||
@@ -44,17 +40,23 @@ export async function getSourceDeviceDetail(id: string | number) {
|
||||
export async function postSourceDevice(data: any) {
|
||||
try {
|
||||
const resp = await xfetch('/api/v1/device', 'POST', data)
|
||||
return resp
|
||||
const result: any = {}
|
||||
result.success = resp.success
|
||||
result.body = (resp.body as Record<string, any>) || {}
|
||||
return result
|
||||
} catch (error) {
|
||||
console.error('Error creating device:', error)
|
||||
throw new Error('Failed to create device')
|
||||
}
|
||||
}
|
||||
|
||||
export async function putSourceDevice(id: string | number, data: any) {
|
||||
export async function patchSourceDevice(id: string | number, data: any) {
|
||||
try {
|
||||
const resp = await xfetch(`/api/v1/device/${id}`, 'PUT', data)
|
||||
return resp
|
||||
const resp = await xfetch(`/api/v1/device/${id}`, 'PATCH', data)
|
||||
const result: any = {}
|
||||
result.success = resp.success
|
||||
result.body = (resp.body as Record<string, any>) || {}
|
||||
return result
|
||||
} catch (error) {
|
||||
console.error('Error updating device:', error)
|
||||
throw new Error('Failed to update device')
|
||||
@@ -64,7 +66,10 @@ export async function putSourceDevice(id: string | number, data: any) {
|
||||
export async function removeSourceDevice(id: string | number) {
|
||||
try {
|
||||
const resp = await xfetch(`/api/v1/device/${id}`, 'DELETE')
|
||||
return resp
|
||||
const result: any = {}
|
||||
result.success = resp.success
|
||||
result.body = (resp.body as Record<string, any>) || {}
|
||||
return result
|
||||
} catch (error) {
|
||||
console.error('Error deleting device:', error)
|
||||
throw new Error('Failed to delete device')
|
||||
|
||||
@@ -50,9 +50,9 @@ export async function postSourceMaterial(record: any) {
|
||||
}
|
||||
}
|
||||
|
||||
export async function putSourceMaterial(id: number | string, record: any) {
|
||||
export async function patchSourceMaterial(id: number | string, record: any) {
|
||||
try {
|
||||
const resp = await xfetch(`/api/v1/material/${id}`, 'PUT', record)
|
||||
const resp = await xfetch(`/api/v1/material/${id}`, 'PATCH', record)
|
||||
const result: any = {}
|
||||
result.success = resp.success
|
||||
result.body = (resp.body as Record<string, any>) || {}
|
||||
|
||||
Reference in New Issue
Block a user