a5f9e3fc68
- 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
330 lines
8.4 KiB
Vue
330 lines
8.4 KiB
Vue
<script setup lang="ts">
|
|
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, Ellipsis, Search, Send } from 'lucide-vue-next'
|
|
|
|
// 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) => {
|
|
filters.search = val
|
|
filters.page = 1
|
|
debouncedFetchData()
|
|
},
|
|
onClear: () => {
|
|
filters.search = ''
|
|
filters.page = 1
|
|
fetchData()
|
|
},
|
|
}
|
|
|
|
const recId = ref<number>(0)
|
|
const recAction = ref<string>('')
|
|
const recItem = ref<any>(null)
|
|
|
|
// 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',
|
|
icon: 'i-lucide-box',
|
|
addNav: {
|
|
label: 'Kirim Resource',
|
|
icon: 'i-lucide-send',
|
|
// onClick: () => navigateTo('/patient/add'),
|
|
},
|
|
}
|
|
|
|
// SATUSEHAT Service integration
|
|
const service = reactive<ServiceStatus>({
|
|
serviceName: 'SATUSEHAT',
|
|
serviceDesc: 'SATUSEHAT - FHIR R4 Compliant',
|
|
sessionActive: false,
|
|
status: 'connecting',
|
|
isSkeleton: false,
|
|
})
|
|
|
|
// Initial/default data structure
|
|
const summaryData: Summary[] = [
|
|
{
|
|
title: 'Resource Terkirim',
|
|
icon: Send,
|
|
metric: 1245,
|
|
trend: 0,
|
|
timeframe: 'daily',
|
|
},
|
|
{
|
|
title: 'Sync Success',
|
|
icon: CircleCheckBig,
|
|
metric: '97%',
|
|
trend: 0,
|
|
timeframe: 'daily',
|
|
},
|
|
{
|
|
title: 'Pending Queue',
|
|
icon: CircleDashed,
|
|
metric: 32,
|
|
trend: 0,
|
|
timeframe: 'daily',
|
|
},
|
|
{
|
|
title: 'Failed Items',
|
|
icon: CircleX,
|
|
metric: 10,
|
|
trend: 0,
|
|
timeframe: 'daily',
|
|
},
|
|
]
|
|
|
|
async function callSatuSehat() {
|
|
try {
|
|
await new Promise((resolve) => setTimeout(resolve, 500))
|
|
service.status = 'connected'
|
|
// service.status = 'error'
|
|
service.sessionActive = true
|
|
// service.sessionActive = false
|
|
} finally {
|
|
isLoading.satusehatConn = false
|
|
}
|
|
}
|
|
|
|
// 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 tabs = [
|
|
{
|
|
value: 'all',
|
|
label: 'Semua Resource',
|
|
},
|
|
{
|
|
value: 'patient',
|
|
label: 'Patient',
|
|
},
|
|
{
|
|
value: 'encounter',
|
|
label: 'Encounter',
|
|
},
|
|
{
|
|
value: 'observation',
|
|
label: 'Observation',
|
|
},
|
|
]
|
|
|
|
// Status filter options
|
|
const statusOptions = [
|
|
{ value: '', label: 'Semua Status' },
|
|
{ value: '0', label: 'Failed' },
|
|
{ value: '1', label: 'Pending' },
|
|
{ value: '2', label: 'Success' },
|
|
]
|
|
const actions = [
|
|
{
|
|
value: 'filter',
|
|
label: 'Filter',
|
|
icon: 'i-lucide-list-filter',
|
|
},
|
|
{
|
|
value: 'export',
|
|
label: 'Ekspor',
|
|
icon: 'i-lucide-download',
|
|
|
|
},
|
|
]
|
|
|
|
// Sync activeTabFilter with filters.resource_type
|
|
const activeTabFilter = computed({
|
|
get: () => filters.resource_type,
|
|
set: (value) => {
|
|
filters.resource_type = value
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<PubNavHeaderPrep :prep="headerPrep" :ref-search-nav="refSearchNav" />
|
|
<div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
|
|
<PubBaseServiceStatus v-bind="service" />
|
|
<AppSatusehatCardSummary :is-loading="isLoading.satusehatConn" :summary-data="summaryData" />
|
|
</div>
|
|
<div class="rounded-md border p-4">
|
|
<h2 class="text-md font-semibold py-2">FHIR Resource</h2>
|
|
<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"
|
|
>
|
|
{{ tab.label }}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<div class="flex gap-2 items-center">
|
|
<!-- 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"
|
|
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>
|
|
|
|
<!-- 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 || 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>
|
|
</Tabs>
|
|
</div>
|
|
</template>
|