feat(satusehat-mock): implement API Mock integration with filtering and pagination
- Add new API endpoint for fetching SatuSehat data with filtering capabilities - Implement client-side data fetching with status, resource type, date range and search filters - Add pagination support with server-side pagination handling - Improve UI with loading states and pagination controls
This commit is contained in:
Khafid Prayoga
@@ -2,86 +2,80 @@
|
||||
import type { ServiceStatus } from '~/components/pub/base/service-status.type'
|
||||
import type { Summary } from '~/components/pub/base/summary-card.type'
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
|
||||
import { CircleCheckBig, CircleDashed, CircleX, Download, Ellipsis, ListFilter, Search, Send } from 'lucide-vue-next'
|
||||
import { CircleCheckBig, CircleDashed, CircleX, Ellipsis, Search, Send } from 'lucide-vue-next'
|
||||
|
||||
const data = ref([
|
||||
{
|
||||
id: 'RSC001',
|
||||
resource_type: 'Encounter',
|
||||
patient: {
|
||||
name: 'Ahmad Wepe',
|
||||
mrn: 'RM001234',
|
||||
},
|
||||
status: 2,
|
||||
updated_at: '2025-03-12',
|
||||
fhir_id: 'ENC-00123',
|
||||
},
|
||||
{
|
||||
id: 'RSC002',
|
||||
resource_type: 'Encounter',
|
||||
patient: {
|
||||
name: 'Siti Aminah',
|
||||
mrn: 'RM001235',
|
||||
},
|
||||
status: 1,
|
||||
updated_at: '2025-03-10',
|
||||
fhir_id: 'ENC-001235',
|
||||
},
|
||||
{
|
||||
id: 'RSC003',
|
||||
resource_type: 'Encounter',
|
||||
patient: {
|
||||
name: 'Budi Antono',
|
||||
mrn: 'RM001236',
|
||||
},
|
||||
status: 0,
|
||||
updated_at: '2025-03-11',
|
||||
fhir_id: 'ENC-001236',
|
||||
},
|
||||
{
|
||||
id: 'RSC001',
|
||||
resource_type: 'Encounter',
|
||||
patient: {
|
||||
name: 'Ahmad Wepe',
|
||||
mrn: 'RM001234',
|
||||
},
|
||||
status: 2,
|
||||
updated_at: '2025-03-12',
|
||||
fhir_id: 'ENC-00123',
|
||||
},
|
||||
{
|
||||
id: 'RSC001',
|
||||
resource_type: 'Encounter',
|
||||
patient: {
|
||||
name: 'Ahmad Wepe',
|
||||
mrn: 'RM001234',
|
||||
},
|
||||
status: 2,
|
||||
updated_at: '2025-03-12',
|
||||
fhir_id: 'ENC-00123',
|
||||
},
|
||||
{
|
||||
id: 'RSC001',
|
||||
resource_type: 'Encounter',
|
||||
patient: {
|
||||
name: 'Ahmad Wepe',
|
||||
mrn: 'RM001234',
|
||||
},
|
||||
status: 2,
|
||||
updated_at: '2025-03-12',
|
||||
fhir_id: 'ENC-00123',
|
||||
},
|
||||
])
|
||||
// State management
|
||||
const data = ref([])
|
||||
const isLoading = reactive({
|
||||
satusehatConn: true,
|
||||
dataList: false,
|
||||
})
|
||||
|
||||
// Filter states
|
||||
const filters = reactive({
|
||||
search: '',
|
||||
status: '',
|
||||
resource_type: 'all',
|
||||
date_from: '',
|
||||
date_to: '',
|
||||
page: 1,
|
||||
limit: 10,
|
||||
})
|
||||
|
||||
// Pagination state
|
||||
const pagination = ref({
|
||||
total: 0,
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total_pages: 0,
|
||||
has_next: false,
|
||||
has_prev: false,
|
||||
})
|
||||
|
||||
// API function to fetch data
|
||||
async function fetchData() {
|
||||
try {
|
||||
isLoading.dataList = true
|
||||
const response: any = await $fetch('/api/v1/satusehat/list', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
status: filters.status !== '' ? Number(filters.status) : undefined,
|
||||
resource_type: filters.resource_type,
|
||||
date_from: filters.date_from,
|
||||
date_to: filters.date_to,
|
||||
search: filters.search,
|
||||
page: filters.page,
|
||||
limit: filters.limit,
|
||||
},
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
data.value = response.data
|
||||
pagination.value = response.meta
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error)
|
||||
} finally {
|
||||
isLoading.dataList = false
|
||||
}
|
||||
}
|
||||
|
||||
// Debounced search function
|
||||
const debouncedFetchData = useDebounceFn(fetchData, 500)
|
||||
|
||||
const refSearchNav: RefSearchNav = {
|
||||
onClick: () => {
|
||||
// open filter modal
|
||||
},
|
||||
onInput: (_val: string) => {
|
||||
// filter patient list
|
||||
onInput: (val: string) => {
|
||||
filters.search = val
|
||||
filters.page = 1
|
||||
debouncedFetchData()
|
||||
},
|
||||
onClear: () => {
|
||||
// clear url param
|
||||
filters.search = ''
|
||||
filters.page = 1
|
||||
fetchData()
|
||||
},
|
||||
}
|
||||
|
||||
@@ -89,10 +83,25 @@ const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// Loading state management
|
||||
const isLoading = reactive({
|
||||
satusehatConn: true,
|
||||
})
|
||||
// Filter change handlers
|
||||
function onStatusChange(status: string) {
|
||||
filters.status = status
|
||||
filters.page = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
function onResourceTypeChange(resourceType: string) {
|
||||
filters.resource_type = resourceType
|
||||
filters.page = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
function onDateRangeChange(dateFrom: string, dateTo: string) {
|
||||
filters.date_from = dateFrom
|
||||
filters.date_to = dateTo
|
||||
filters.page = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'SATUSEHAT Integration',
|
||||
@@ -157,16 +166,20 @@ async function callSatuSehat() {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
callSatuSehat()
|
||||
// Watch for tab changes
|
||||
watch(() => filters.resource_type, (newType) => {
|
||||
onResourceTypeChange(newType)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await callSatuSehat()
|
||||
await fetchData()
|
||||
})
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
|
||||
const listTitle = 'FHIR Resource'
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
value: 'all',
|
||||
@@ -186,15 +199,12 @@ const tabs = [
|
||||
},
|
||||
]
|
||||
|
||||
const form = [
|
||||
{
|
||||
value: 'search',
|
||||
label: 'Cari pasien'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'Filter berdasarkan tanggal',
|
||||
},
|
||||
// Status filter options
|
||||
const statusOptions = [
|
||||
{ value: '', label: 'Semua Status' },
|
||||
{ value: '0', label: 'Failed' },
|
||||
{ value: '1', label: 'Pending' },
|
||||
{ value: '2', label: 'Success' },
|
||||
]
|
||||
const actions = [
|
||||
{
|
||||
@@ -210,7 +220,13 @@ const actions = [
|
||||
},
|
||||
]
|
||||
|
||||
const activeTabFilter = ref('all')
|
||||
// Sync activeTabFilter with filters.resource_type
|
||||
const activeTabFilter = computed({
|
||||
get: () => filters.resource_type,
|
||||
set: (value) => {
|
||||
filters.resource_type = value
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -224,28 +240,87 @@ const activeTabFilter = ref('all')
|
||||
<Tabs v-model="activeTabFilter">
|
||||
<div class="scrollbar-hide overflow-x-auto flex gap-2 justify-between">
|
||||
<TabsList>
|
||||
<TabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value"
|
||||
class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700">
|
||||
<TabsTrigger
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
:value="tab.value"
|
||||
class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<div class="flex gap-2 items-center">
|
||||
<AppSatusehatPicker />
|
||||
<!-- Status Filter -->
|
||||
<Select v-model="filters.status" @update:model-value="onStatusChange">
|
||||
<SelectTrigger class="w-40 h-9">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="option in statusOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<!-- Date Range Picker -->
|
||||
<AppSatusehatPicker @date-change="onDateRangeChange" />
|
||||
|
||||
<!-- Search Input -->
|
||||
<div class="relative w-full max-w-sm">
|
||||
<Input id="search" type="text" placeholder="Cari pasien..." class="pl-7 h-9" />
|
||||
<Input
|
||||
id="search"
|
||||
v-model="filters.search"
|
||||
type="text"
|
||||
placeholder="Cari pasien..."
|
||||
class="pl-7 h-9"
|
||||
@input="refSearchNav.onInput(filters.search)"
|
||||
/>
|
||||
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
|
||||
<Search class="size-4 text-muted-foreground" />
|
||||
</span>
|
||||
</div>
|
||||
<AppSatusehatButtonAction v-for="action in actions" :key="action.value" :icon="action.icon"
|
||||
:text="action.label" />
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<AppSatusehatButtonAction
|
||||
v-for="action in actions"
|
||||
:key="action.value"
|
||||
:icon="action.icon"
|
||||
:text="action.label"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
|
||||
<div class="rounded-md border p-4">
|
||||
<Ellipsis v-if="isLoading.satusehatConn" class="size-6 animate-pulse text-muted-foreground mx-auto" />
|
||||
<AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
|
||||
<Ellipsis v-if="isLoading.satusehatConn || isLoading.dataList" class="size-6 animate-pulse text-muted-foreground mx-auto" />
|
||||
<AppSatusehatList v-if="!isLoading.satusehatConn && !isLoading.dataList" :data="data" />
|
||||
|
||||
<!-- Pagination -->
|
||||
<div v-if="!isLoading.satusehatConn && !isLoading.dataList && pagination.total > 0" class="mt-4 flex justify-between items-center">
|
||||
<div class="text-sm text-muted-foreground">
|
||||
Menampilkan {{ ((pagination.page - 1) * pagination.limit) + 1 }} -
|
||||
{{ Math.min(pagination.page * pagination.limit, pagination.total) }}
|
||||
dari {{ pagination.total }} data
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
v-if="pagination.has_prev"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="filters.page--; fetchData()"
|
||||
>
|
||||
Sebelumnya
|
||||
</Button>
|
||||
<Button
|
||||
v-if="pagination.has_next"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="filters.page++; fetchData()"
|
||||
>
|
||||
Selanjutnya
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,171 @@
|
||||
export default defineEventHandler(async (event) => {
|
||||
const body = await readBody(event)
|
||||
|
||||
// Mock data lengkap
|
||||
const mockData = [
|
||||
{
|
||||
id: 'RSC001',
|
||||
resource_type: 'Encounter',
|
||||
patient: {
|
||||
name: 'Ahmad Wepe',
|
||||
mrn: 'RM001234',
|
||||
},
|
||||
status: 2, // 0: failed, 1: pending, 2: success
|
||||
updated_at: '2025-01-15',
|
||||
fhir_id: 'ENC-00123',
|
||||
},
|
||||
{
|
||||
id: 'RSC002',
|
||||
resource_type: 'Patient',
|
||||
patient: {
|
||||
name: 'Siti Aminah',
|
||||
mrn: 'RM001235',
|
||||
},
|
||||
status: 1,
|
||||
updated_at: '2025-01-10',
|
||||
fhir_id: 'PAT-001235',
|
||||
},
|
||||
{
|
||||
id: 'RSC003',
|
||||
resource_type: 'Observation',
|
||||
patient: {
|
||||
name: 'Budi Antono',
|
||||
mrn: 'RM001236',
|
||||
},
|
||||
status: 0,
|
||||
updated_at: '2025-01-11',
|
||||
fhir_id: 'OBS-001236',
|
||||
},
|
||||
{
|
||||
id: 'RSC004',
|
||||
resource_type: 'Encounter',
|
||||
patient: {
|
||||
name: 'Maria Sari',
|
||||
mrn: 'RM001237',
|
||||
},
|
||||
status: 2,
|
||||
updated_at: '2025-01-12',
|
||||
fhir_id: 'ENC-001237',
|
||||
},
|
||||
{
|
||||
id: 'RSC005',
|
||||
resource_type: 'Patient',
|
||||
patient: {
|
||||
name: 'Joko Widodo',
|
||||
mrn: 'RM001238',
|
||||
},
|
||||
status: 1,
|
||||
updated_at: '2025-01-13',
|
||||
fhir_id: 'PAT-001238',
|
||||
},
|
||||
{
|
||||
id: 'RSC006',
|
||||
resource_type: 'Observation',
|
||||
patient: {
|
||||
name: 'Dewi Sartika',
|
||||
mrn: 'RM001239',
|
||||
},
|
||||
status: 2,
|
||||
updated_at: '2025-01-14',
|
||||
fhir_id: 'OBS-001239',
|
||||
},
|
||||
{
|
||||
id: 'RSC007',
|
||||
resource_type: 'Encounter',
|
||||
patient: {
|
||||
name: 'Rudi Hartono',
|
||||
mrn: 'RM001240',
|
||||
},
|
||||
status: 0,
|
||||
updated_at: '2025-01-16',
|
||||
fhir_id: 'ENC-001240',
|
||||
},
|
||||
{
|
||||
id: 'RSC008',
|
||||
resource_type: 'Patient',
|
||||
patient: {
|
||||
name: 'Sri Mulyani',
|
||||
mrn: 'RM001241',
|
||||
},
|
||||
status: 2,
|
||||
updated_at: '2025-01-17',
|
||||
fhir_id: 'PAT-001241',
|
||||
}
|
||||
]
|
||||
|
||||
// Ekstrak parameter filter dari request body
|
||||
const {
|
||||
status,
|
||||
resource_type,
|
||||
date_from,
|
||||
date_to,
|
||||
search,
|
||||
page = 1,
|
||||
limit = 10
|
||||
} = body
|
||||
|
||||
let filteredData = [...mockData]
|
||||
|
||||
// Filter berdasarkan status
|
||||
if (status !== undefined && status !== null && status !== '') {
|
||||
filteredData = filteredData.filter(item => item.status === Number(status))
|
||||
}
|
||||
|
||||
// Filter berdasarkan resource_type (transaction type)
|
||||
if (resource_type && resource_type !== 'all') {
|
||||
filteredData = filteredData.filter(item =>
|
||||
item.resource_type.toLowerCase() === resource_type.toLowerCase()
|
||||
)
|
||||
}
|
||||
|
||||
// Filter berdasarkan rentang tanggal
|
||||
if (date_from) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
new Date(item.updated_at) >= new Date(date_from)
|
||||
)
|
||||
}
|
||||
|
||||
if (date_to) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
new Date(item.updated_at) <= new Date(date_to)
|
||||
)
|
||||
}
|
||||
|
||||
// Filter berdasarkan pencarian nama pasien atau MRN
|
||||
if (search) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
item.patient.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
item.patient.mrn.toLowerCase().includes(search.toLowerCase()) ||
|
||||
item.fhir_id.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
}
|
||||
|
||||
// Pagination
|
||||
const totalItems = filteredData.length
|
||||
const totalPages = Math.ceil(totalItems / limit)
|
||||
const offset = (page - 1) * limit
|
||||
const paginatedData = filteredData.slice(offset, offset + limit)
|
||||
|
||||
// Simulasi delay untuk loading state
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: paginatedData,
|
||||
meta: {
|
||||
total: totalItems,
|
||||
page: Number(page),
|
||||
limit: Number(limit),
|
||||
total_pages: totalPages,
|
||||
has_next: page < totalPages,
|
||||
has_prev: page > 1
|
||||
},
|
||||
filters: {
|
||||
status,
|
||||
resource_type,
|
||||
date_from,
|
||||
date_to,
|
||||
search
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user