munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feat/user

Browse Source
This commit is contained in:
Abizrh
2025-09-09 15:08:20 +07:00
parent a208bbad9c 4f4f11ca84
commit 938278a7a2
7 changed files with 373 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/material/entry-form.vue → app/components/app/equipment/entry-form.vue
+36 -16
View File
@@ -2,23 +2,26 @@
// types
import type z from 'zod'
import type { MaterialFormData } from '~/schemas/material'
<<<<<<< HEAD:app/components/app/equipment/entry-form.vue
=======
// helpers
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
// components
import Label from '~/components/pub/custom-ui/form/label.vue'
>>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2:app/components/app/material/entry-form.vue
interface Props {
isLoading: boolean
schema: z.ZodSchema<any>
uoms: any[]
items: any[]
}
const isLoading = ref(false)
const props = defineProps<Props>()
const emit = defineEmits<{
back: []
submit: [data: any]
submit: [values: MaterialFormData, resetForm: () => void]
cancel: [resetForm: () => void]
}>()
const { handleSubmit, defineField, errors } = useForm({
@@ -38,19 +41,36 @@ const [uom, uomAttrs] = defineField('uom_code')
const [item, itemAttrs] = defineField('item_id')
const [stock, stockAttrs] = defineField('stock')
const onSubmit = handleSubmit(async (values) => {
try {
emit('submit', values)
} catch (error) {
console.error('Submission failed:', error)
const resetForm = () => {
code.value = ''
name.value = ''
uom.value = ''
item.value = ''
stock.value = 0
}
// Form submission handler
function onSubmitForm(values: any) {
const formData: MaterialFormData = {
name: values.name || '',
code: values.code || '',
uom_code: values.uom_code || '',
item_id: values.item_id || '',
stock: values.stock || 0,
}
})
emit('submit', formData, resetForm)
}
// Form cancel handler
function onCancelForm() {
emit('cancel', resetForm)
}
</script>
<template>
<form class="grid gap-2" @submit="onSubmit">
<form class="grid gap-2" @submit="handleSubmit(onSubmitForm)">
<div class="grid gap-2">
<Label for="code">Kode</Label>
<label for="code">Kode</label>
<Input
id="code"
v-model="code"
@@ -63,7 +83,7 @@ const onSubmit = handleSubmit(async (values) => {
</span>
</div>
<div class="grid gap-2">
<Label for="name">Nama</Label>
<label for="name">Nama</label>
<Input
id="name"
v-model="name"
@@ -76,7 +96,7 @@ const onSubmit = handleSubmit(async (values) => {
</span>
</div>
<div class="grid gap-2">
<Label for="uom">Satuan</Label>
<label for="uom">Satuan</label>
<Select
id="uom"
v-model="uom"
@@ -92,7 +112,7 @@ const onSubmit = handleSubmit(async (values) => {
</span>
</div>
<div class="grid gap-2">
<Label for="item">Item</Label>
<label for="item">Item</label>
<Select
id="item"
v-model="item"
@@ -108,7 +128,7 @@ const onSubmit = handleSubmit(async (values) => {
</span>
</div>
<div class="grid gap-2">
<Label for="stock">Stok</Label>
<label for="stock">Stok</label>
<Input
id="stock"
v-model="stock"
@@ -122,7 +142,7 @@ const onSubmit = handleSubmit(async (values) => {
</span>
</div>
<div class="my-2 flex justify-end gap-2 py-2">
<Button variant="secondary" class="w-[120px]" @click="emit('back')"> Kembali </Button>
<Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
<Button type="submit" class="w-[120px]">
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
Simpan
app/components/app/material/list-cfg.ts → app/components/app/equipment/list-cfg.ts
View File
app/components/app/equipment/list.vue
+38
View File
@@ -0,0 +1,38 @@
<script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
interface Props {
data: any[]
paginationMeta?: PaginationMeta
}
defineProps<Props>()
const emit = defineEmits<{
pageChange: [page: number]
}>()
function handlePageChange(page: number) {
emit('pageChange', page)
}
</script>
<template>
<div class="space-y-4">
<PubBaseDataTable
:rows="data"
:cols="cols"
:header="header"
:keys="keys"
:func-parsed="funcParsed"
:func-html="funcHtml"
:func-component="funcComponent"
/>
<template v-if="paginationMeta">
<div v-if="paginationMeta.totalPage > 1">
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
</template>
</div>
</template>
app/components/app/material/list.vue
-19
View File
@@ -1,19 +0,0 @@
<script setup lang="ts">
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
defineProps<{
data: any[]
}>()
</script>
<template>
<PubBaseDataTable
:rows="data"
:cols="cols"
:header="header"
:keys="keys"
:func-parsed="funcParsed"
:func-html="funcHtml"
:func-component="funcComponent"
/>
</template>
app/components/content/equipment/list.vue
+211
View File
@@ -0,0 +1,211 @@
<script setup lang="ts">
import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
import { usePaginatedList } from '~/composables/usePaginatedList'
import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
import Dialog from '~/components/pub/base/modal/dialog.vue'
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
const isFormEntryDialogOpen = ref(false)
const isRecordConfirmationOpen = ref(false)
const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
const uoms = [
{ value: 'uom-1', label: 'Satuan 1' },
{ value: 'uom-2', label: 'Satuan 2' },
{ value: 'uom-3', label: 'Satuan 3' },
]
const items = [
{ value: 'item-1', label: 'Item 1' },
{ value: 'item-2', label: 'Item 2' },
{ value: 'item-3', label: 'Item 3' },
]
// Fungsi untuk fetch data division
async function fetchEquipmentData(params: any) {
// Prepare query parameters for pagination and search
const urlParams = new URLSearchParams({
'page-number': params.page.toString(),
'page-size': params.pageSize.toString(),
})
if (params.q) {
urlParams.append('search', params.q)
}
return await xfetch(`/api/v1/equipment?${urlParams.toString()}`)
}
// Menggunakan composable untuk pagination
const {
data,
isLoading,
paginationMeta,
searchInput,
handlePageChange,
handleSearch,
fetchData: getEquipmentList,
} = usePaginatedList({
fetchFn: fetchEquipmentData,
entityName: 'equipment',
})
const headerPrep: HeaderPrep = {
title: 'Perlengkapan (BMHP)',
icon: 'i-lucide-layout-dashboard',
refSearchNav: {
placeholder: 'Cari (min. 3 karakter)...',
minLength: 3,
debounceMs: 500,
showValidationFeedback: true,
onInput: (_val: string) => {
// Handle search input - this will be triggered by the header component
},
onClick: () => {
// Handle search button click if needed
},
onClear: () => {
// Handle search clear
},
},
addNav: {
label: 'Tambah Perlengkapan',
icon: 'i-lucide-plus',
onClick: () => {
isFormEntryDialogOpen.value = true
},
},
}
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
// Watch for row actions
watch(recId, () => {
switch (recAction.value) {
case ActionEvents.showEdit:
// TODO: Handle edit action
// isFormEntryDialogOpen.value = true
break
case ActionEvents.showConfirmDelete:
// Trigger confirmation modal open
isRecordConfirmationOpen.value = true
break
}
})
const handleDeleteRow = async (record: any) => {
try {
// TODO : hit backend request untuk delete
console.log('Deleting record:', record)
// Simulate API call
// const response = await xfetch(`/api/v1/division/${record.id}`, {
// method: 'DELETE'
// })
// Refresh data setelah berhasil delete
await getEquipmentList()
// TODO: Show success message
console.log('Record deleted successfully')
} catch (error) {
console.error('Error deleting record:', error)
// TODO: Show error message
} finally {
// Reset record state
recId.value = 0
recAction.value = ''
recItem.value = null
}
}
const onCancelForm = (resetForm: () => void) => {
isFormEntryDialogOpen.value = false
setTimeout(() => {
resetForm()
}, 500)
}
const onSubmitForm = async (values: any, resetForm: () => void) => {
let isSuccess = false
try {
// TODO: Implement form submission logic
console.log('Form submitted:', values)
// Simulate API call
// const response = await xfetch('/api/v1/division', {
// method: 'POST',
// body: JSON.stringify(values)
// })
// If successful, mark as success and close dialog
isFormEntryDialogOpen.value = false
isSuccess = true
// Refresh data after successful submission
await getEquipmentList()
// TODO: Show success message
console.log('Division created successfully')
} catch (error: unknown) {
console.warn('Error submitting form:', error)
isSuccess = false
// Don't close dialog or reset form on error
// TODO: Show error message to user
} finally {
if (isSuccess) {
setTimeout(() => {
resetForm()
}, 500)
}
}
}
// Handle confirmation result
const handleConfirmDelete = (record: any, action: string) => {
console.log('Confirmed action:', action, 'for record:', record)
handleDeleteRow(record)
}
const handleCancelConfirmation = () => {
// Reset record state when cancelled
recId.value = 0
recAction.value = ''
recItem.value = null
}
</script>
<template>
<div class="rounded-md border p-4">
<Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
<div class="rounded-md border p-4">
<AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Perlengkapan" size="lg" prevent-outside>
<AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
</Dialog>
<!-- Record Confirmation Modal -->
<RecordConfirmation
v-model:open="isRecordConfirmationOpen"
action="delete"
:record="recItem"
@confirm="handleConfirmDelete"
@cancel="handleCancelConfirmation"
>
<template #default="{ record }">
<div class="text-sm">
<p><strong>ID:</strong> {{ record?.id }}</p>
<p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
<p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
</div>
</template>
</RecordConfirmation>
</div>
</template>
app/pages/(features)/tools-equipment-src/equipment/index.vue
+5 -1
View File
@@ -27,13 +27,17 @@ if (!hasAccess) {
}
// Define permission-based computed properties
const canRead = hasReadAccess(roleAccess)
const canRead = true // hasReadAccess(roleAccess)
</script>
<template>
<div>
<div v-if="canRead">
<<<<<<< HEAD
<ContentEquipmentList />
=======
<ContentMaterialList />
>>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2
</div>
<Error v-else :status-code="403" />
</div>
public/side-menu-items/sys.json
+83 -21
View File
@@ -35,7 +35,7 @@
},
{
"title": "IGD",
"icon": "i-lucide-stethoscope",
"icon": "i-lucide-zap",
"children": [
{
"title": "Triase",
@@ -77,7 +77,7 @@
},
{
"title": "Rehabilitasi Medik",
"icon": "i-lucide-heart",
"icon": "i-lucide-bike",
"link": "/rehabilitasi",
"children": [
{
@@ -103,34 +103,44 @@
]
},
{
"title": "Farmasi",
"icon": "i-lucide-users",
"title": "Obat - Order",
"icon": "i-lucide-briefcase-medical",
"children": [
{
"title": "Permintaan",
"icon": "i-lucide-user",
"link": "/pharmacy/request"
"link": "/medication/order"
},
{
"title": "Standing Order",
"icon": "i-lucide-user",
"link": "/pharmacy/standing-order"
"link": "/medication/standing-order"
}
]
},
{
"title": "Lab",
"icon": "i-lucide-briefcase",
"title": "Lab - Order",
"icon": "i-lucide-microscope",
"link": "/lab-order"
},
{
"title": "Radiologi",
"title": "Lab Mikro - Order",
"icon": "i-lucide-microscope",
"link": "/micro-lab-order"
},
{
"title": "Lab PA - Order",
"icon": "i-lucide-microscope",
"link": "/pa-lab-order"
},
{
"title": "Radiologi - Order",
"icon": "i-lucide-radio",
"link": "/radiology-order"
},
{
"title": "Gizi",
"icon": "i-lucide-briefcase",
"icon": "i-lucide-egg-fried",
"link": "/nutrition-order"
},
{
@@ -160,7 +170,7 @@
"items": [
{
"title": "BPJS",
"icon": "i-lucide-refresh-cw",
"icon": "i-lucide-circuit-board",
"link": "/integration/bpjs",
"badge": "Live"
},
@@ -177,7 +187,7 @@
"items": [
{
"title": "Peralatan dan Perlengkapan",
"icon": "i-lucide-radius",
"icon": "i-lucide-layout-dashboard",
"children": [
{
"title": "Obat",
@@ -192,7 +202,7 @@
{
"title": "Perlengkapan (BMHP)",
"icon": "i-lucide-stethoscope",
"link": "/tools-equipment-src/material"
"link": "/tools-equipment-src/equipment"
},
{
"title": "Metode Obat",
@@ -209,36 +219,88 @@
{
"title": "Pengguna",
"icon": "i-lucide-user",
"link": "/human-src/employee"
"children": [
{
"title": "Pegawai",
"icon": "i-lucide-stethoscope",
"link": "/human-src/employee"
},
{
"title": "PPDS",
"icon": "i-lucide-user",
"link": "/human-src/specialist-intern"
}
]
},
{
"title": "Layanan",
"icon": "i-lucide-card-sim",
"icon": "i-lucide-layout-list",
"children": [
{
"title": "Counter",
"icon": "i-lucide-stethoscope",
"link": "/tools-equipment-src/medicine"
"link": "/service-src/counter"
},
{
"title": "Bed",
"title": "Public Screen (Big Screen)",
"icon": "i-lucide-tools",
"link": "/tools-equipment-src/device"
"link": "/service-src/public-screen"
},
{
"title": "Kasur",
"icon": "i-lucide-tools",
"link": "/service-src/bed"
},
{
"title": "Kamar",
"icon": "i-lucide-stethoscope",
"link": "/tools-equipment-src/medical-device"
"link": "/service-src/chamber"
},
{
"title": "Lantai",
"icon": "i-lucide-user",
"link": "/tools-equipment-src/medicine-method"
"link": "/service-src/floor"
},
{
"title": "Gedung",
"icon": "i-lucide-user",
"link": "/tools-equipment-src/medicine-type"
"link": "/service-src/building"
}
]
},
{
"title": "Item & Item Price",
"icon": "i-lucide-shopping-basket",
"link": "/item-src/item"
},
{
"title": "Organisasi",
"icon": "i-lucide-network",
"children": [
{
"title": "Divisi",
"icon": "i-lucide-stethoscope",
"link": "/org-src/division"
},
{
"title": "Instalasi",
"icon": "i-lucide-tools",
"link": "/org-src/installation"
},
{
"title": "Unit",
"icon": "i-lucide-tools",
"link": "/org-src/unit"
},
{
"title": "Specialist",
"icon": "i-lucide-stethoscope",
"link": "/org-src/specialist"
},
{
"title": "Sub Specialist",
"icon": "i-lucide-user",
"link": "/org-src/subspecialist"
}
]
}