feat(installation-position): implement crud operations and ui components

- Add installation position handler, service, and schema
- Update list configuration and entry form components
- Enhance pagination component with configurable controls
- Implement installation position list view with search and pagination
This commit is contained in:
Khafid Prayoga
2025-10-28 12:45:57 +07:00
parent bc4f5ddb0b
commit dc653402c7
8 changed files with 229 additions and 67 deletions
@@ -3,8 +3,8 @@
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
import AppInstallationList from '~/components/app/installation/list.vue'
import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
import AppInstallationPositionList from '~/components/app/installation-position/list.vue'
import AppInstallationPositionEntryForm from '~/components/app/installation-position/entry-form.vue'
// Helpers
import { usePaginatedList } from '~/composables/usePaginatedList'
@@ -12,7 +12,7 @@ import { toast } from '~/components/pub/ui/toast'
// Types
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
import { InstallationSchema, type InstallationFormData } from '~/schemas/installation.schema'
import { InstallationPositionSchema, type InstallationPositionFormData } from '~/schemas/installation-position.schema'
// Handlers
import {
@@ -28,13 +28,15 @@ import {
handleActionEdit,
handleActionRemove,
handleCancelForm,
} from '~/handlers/installation.handler'
} from '~/handlers/installation-position.handler'
// Services
import { getList, getDetail } from '~/services/installation.service'
import { getValueLabelListConstants as getEncounterList } from '~/services/encounter.service'
import { getList, getDetail } from '~/services/installation-position.service'
import { getValueLabelList as getInstallationLabelList } from '~/services/installation.service'
import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
const encounterClasses = ref<{ value: string; label: string }[]>([])
const installations = ref<{ value: string | number; label: string }[]>([])
const employees = ref<{ value: string | number; label: string }[]>([])
const title = ref('')
const {
@@ -44,7 +46,7 @@ const {
searchInput,
handlePageChange,
handleSearch,
fetchData: getInstallationList,
fetchData: getInstallationPositionList,
} = usePaginatedList({
fetchFn: async (params: any) => {
const result = await getList({
@@ -52,10 +54,11 @@ const {
sort: 'createdAt:asc',
'page-number': params['page-number'] || 0,
'page-size': params['page-size'] || 10,
includes: 'installation,Employee.Person',
})
return { success: result.success || false, body: result.body || {} }
},
entityName: 'installation',
entityName: 'installation-position',
})
const headerPrep: HeaderPrep = {
@@ -73,7 +76,7 @@ const headerPrep: HeaderPrep = {
onClear: () => {},
},
addNav: {
label: 'Tambah',
label: 'Tambah Posisi',
icon: 'i-lucide-plus',
onClick: () => {
recItem.value = null
@@ -97,18 +100,16 @@ const getCurrentInstallationDetail = async (id: number | string) => {
isFormEntryDialogOpen.value = true
}
}
// Watch for row actions when recId or recAction changes
watch([recId, recAction], () => {
switch (recAction.value) {
case ActionEvents.showDetail:
getCurrentInstallationDetail(recId.value)
title.value = 'Detail Instalasi'
title.value = 'Detail Instalasi - Posisi'
isReadonly.value = true
break
case ActionEvents.showEdit:
getCurrentInstallationDetail(recId.value)
title.value = 'Edit Instalasi'
title.value = 'Edit Instalasi - Posisi'
isReadonly.value = false
break
case ActionEvents.showConfirmDelete:
@@ -118,8 +119,18 @@ watch([recId, recAction], () => {
})
onMounted(async () => {
encounterClasses.value = getEncounterList()
await getInstallationList()
try {
installations.value = await getInstallationLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
} catch (err) {
console.log(err)
// show toast
toast({
title: 'Terjadi Kesalahan',
description: 'Terjadi kesalahan saat memuat data',
variant: 'destructive',
})
}
})
</script>
@@ -139,7 +150,7 @@ onMounted(async () => {
<Dialog
v-model:open="isFormEntryDialogOpen"
:title="!!recItem ? title : 'Tambah Instalasi'"
:title="!!recItem ? title : 'Tambah Instalasi - Posisi'"
size="lg"
prevent-outside
@update:open="
@@ -150,18 +161,19 @@ onMounted(async () => {
"
>
<AppInstallationPositionEntryForm
:schema="InstallationSchema"
:encounter-classes="encounterClasses"
:schema="InstallationPositionSchema"
:employees="employees"
:installations="installations"
:values="recItem"
:is-loading="isProcessing"
:is-readonly="isReadonly"
@submit="
(values: InstallationFormData | Record<string, any>, resetForm: () => void) => {
(values: InstallationPositionFormData | Record<string, any>, resetForm: () => void) => {
if (recId > 0) {
handleActionEdit(recId, values, getInstallationList, resetForm, toast)
handleActionEdit(recId, values, getInstallationPositionList, resetForm, toast)
return
}
handleActionSave(values, getInstallationList, resetForm, toast)
handleActionSave(values, getInstallationPositionList, resetForm, toast)
}
"
@cancel="handleCancelForm"
@@ -173,7 +185,7 @@ onMounted(async () => {
v-model:open="isRecordConfirmationOpen"
action="delete"
:record="recItem"
@confirm="() => handleActionRemove(recId, getInstallationList, toast)"
@confirm="() => handleActionRemove(recId, getInstallationPositionList, toast)"
@cancel=""
>
<template #default="{ record }">