refactor(ui): improve layout consistency and table styling
- Add container borders and padding for better visual hierarchy - Standardize table cell borders across components - Reset query params to defaults when changing resource type - Clear data on fetch error to prevent stale data display - Translate "No data available" to Indonesian
This commit is contained in:
Khafid Prayoga
@@ -57,6 +57,10 @@ provide('table_data_loader', isLoading)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
|
||||
<AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
|
||||
<div class="rounded-md border p-4">
|
||||
<Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
|
||||
<div class="rounded-md border p-4">
|
||||
<AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -36,6 +36,7 @@ const pagination = ref({
|
||||
async function fetchData() {
|
||||
try {
|
||||
isLoading.isTableLoading = true
|
||||
data.value = []
|
||||
const response = await xfetch('/api/v1/satusehat/list', 'POST', {
|
||||
resource_type: params.value?.resource_type,
|
||||
date_from: params.value?.date_from,
|
||||
@@ -51,6 +52,7 @@ async function fetchData() {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error)
|
||||
data.value = []
|
||||
} finally {
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
@@ -93,131 +95,131 @@ const activeTabFilter = computed({
|
||||
},
|
||||
set: (value) => {
|
||||
queryParams.resource_type = value
|
||||
queryParams.q = ''
|
||||
queryParams.page = 1
|
||||
queryParams.limit = 10
|
||||
queryParams.date_from = ''
|
||||
queryParams.date_to = ''
|
||||
queryParams.q = defaultQuery.q
|
||||
queryParams.page = defaultQuery.page
|
||||
queryParams.limit = defaultQuery.limit
|
||||
queryParams.date_from = defaultQuery.date_from
|
||||
queryParams.date_to = defaultQuery.date_to
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :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">
|
||||
<Header :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">
|
||||
|
||||
<!-- Search Input -->
|
||||
<!-- Search Input -->
|
||||
|
||||
<div class="relative w-full max-w-sm">
|
||||
<div class="relative w-full max-w-sm">
|
||||
|
||||
<Dialog>
|
||||
<DialogTrigger>
|
||||
<Input type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader class="border-b-1">
|
||||
<DialogTitle class="pb-2">Pencarian</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form>
|
||||
<FormField v-slot="{ componentField }" name="username">
|
||||
<FormItem>
|
||||
<FormLabel>Pasien</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
<FormField v-slot="{ componentField }" name="status">
|
||||
<FormItem>
|
||||
<FormLabel>Status</FormLabel>
|
||||
<FormControl>
|
||||
<Select>
|
||||
<SelectTrigger class="bg-white border border-gray-300">
|
||||
<SelectValue class="text-gray-400" placeholder="-- select item" />
|
||||
</SelectTrigger>
|
||||
<SelectContent class="bg-white ">
|
||||
<SelectItem value="0">
|
||||
Gagal
|
||||
</SelectItem>
|
||||
<SelectItem value="1">
|
||||
Pending
|
||||
</SelectItem>
|
||||
<SelectItem value="2">
|
||||
Terkirim
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
<FormField v-slot="{ componentField }" name="fhirId">
|
||||
<FormItem>
|
||||
<FormLabel>FHIR ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" placeholder="fhir id" v-bind="componentField" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Form>
|
||||
<Dialog>
|
||||
<DialogTrigger>
|
||||
<Input type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader class="border-b-1">
|
||||
<DialogTitle class="pb-2">Pencarian</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form>
|
||||
<FormField v-slot="{ componentField }" name="username">
|
||||
<FormItem>
|
||||
<FormLabel>Pasien</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
<FormField v-slot="{ componentField }" name="status">
|
||||
<FormItem>
|
||||
<FormLabel>Status</FormLabel>
|
||||
<FormControl>
|
||||
<Select v-bind="componentField">
|
||||
<SelectTrigger class="bg-white border border-gray-300">
|
||||
<SelectValue class="text-gray-400" placeholder="-- select item" />
|
||||
</SelectTrigger>
|
||||
<SelectContent class="bg-white ">
|
||||
<SelectItem value="0">
|
||||
Gagal
|
||||
</SelectItem>
|
||||
<SelectItem value="1">
|
||||
Pending
|
||||
</SelectItem>
|
||||
<SelectItem value="2">
|
||||
Terkirim
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
<FormField v-slot="{ componentField }" name="fhirId">
|
||||
<FormItem>
|
||||
<FormLabel>FHIR ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" placeholder="fhir id" v-bind="componentField" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Form>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline">
|
||||
Reset
|
||||
</Button>
|
||||
<Button>
|
||||
Apply
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<DialogFooter>
|
||||
<Button variant="outline">
|
||||
Reset
|
||||
</Button>
|
||||
<Button>
|
||||
Apply
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<AppSatusehatButtonAction v-for="action in actions" :key="action.value" :icon="action.icon"
|
||||
:text="action.label" />
|
||||
</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" :data="data" />
|
||||
<div class="mt-4">
|
||||
<TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
|
||||
<div class="rounded-md border p-4">
|
||||
<AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
|
||||
|
||||
<!-- Pagination -->
|
||||
<div v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && 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="queryParams.page--">
|
||||
Sebelumnya
|
||||
</Button>
|
||||
<Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
|
||||
Selanjutnya
|
||||
</Button>
|
||||
<!-- Pagination -->
|
||||
<div v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && 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="queryParams.page--">
|
||||
Sebelumnya
|
||||
</Button>
|
||||
<Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
|
||||
Selanjutnya
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -20,7 +20,7 @@ const loader = inject('table_data_loader') as DataTableLoader
|
||||
<Table>
|
||||
<TableHeader class="bg-gray-50">
|
||||
<TableRow>
|
||||
<TableHead v-for="(h, idx) in header[0]" :key="`head-${idx}`"
|
||||
<TableHead v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
|
||||
:style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }">
|
||||
{{ h.label }}
|
||||
</TableHead>
|
||||
@@ -30,24 +30,24 @@ const loader = inject('table_data_loader') as DataTableLoader
|
||||
<TableBody v-if="loader.isTableLoading">
|
||||
<!-- Loading state with 5 skeleton rows -->
|
||||
<TableRow v-for="n in 5" :key="`skeleton-${n}`">
|
||||
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`">
|
||||
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
|
||||
<Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableBody v-if="rows.length === 0 && !loader.isTableLoading">
|
||||
<TableBody v-else-if="rows.length === 0">
|
||||
<TableRow>
|
||||
<TableCell colspan="100%" class="text-center">
|
||||
<TableCell :colspan="keys.length" class="text-center py-8">
|
||||
<div class="flex items-center justify-center">
|
||||
<Info class="size-5 text-muted-foreground" />
|
||||
<span class="ml-2">No data available</span>
|
||||
<span class="ml-2">Tidak ada data tersedia</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableBody v-else>
|
||||
<TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
|
||||
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
|
||||
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
|
||||
<!-- If funcComponent has a renderer -->
|
||||
<component :is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
|
||||
v-bind="funcComponent[key](row, rowIndex)" />
|
||||
|
||||
Reference in New Issue
Block a user