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

refactor(ui): improve layout consistency and table styling

Browse Source 
- 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
2025-08-26 15:15:14 +07:00
parent 5685b31c48
commit e21e5f1e7a
3 changed files with 125 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/flow/doctor/list.vue
+6 -2
View File
@@ -57,6 +57,10 @@ provide('table_data_loader', isLoading)
</script> </script>
<template> <template>
<Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" /> <div class="rounded-md border p-4">
<AppDoctorList v-if="!isLoading.dataListLoading" :data="data" /> <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
<div class="rounded-md border p-4">
<AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
</div>
</div>
</template> </template>
app/components/flow/satusehat/list.vue
+113 -111
View File
@@ -36,6 +36,7 @@ const pagination = ref({
async function fetchData() { async function fetchData() {
try { try {
isLoading.isTableLoading = true isLoading.isTableLoading = true
data.value = []
const response = await xfetch('/api/v1/satusehat/list', 'POST', { const response = await xfetch('/api/v1/satusehat/list', 'POST', {
resource_type: params.value?.resource_type, resource_type: params.value?.resource_type,
date_from: params.value?.date_from, date_from: params.value?.date_from,
@@ -51,6 +52,7 @@ async function fetchData() {
} }
} catch (error) { } catch (error) {
console.error('Error fetching data:', error) console.error('Error fetching data:', error)
data.value = []
} finally { } finally {
isLoading.isTableLoading = false isLoading.isTableLoading = false
} }
@@ -93,131 +95,131 @@ const activeTabFilter = computed({
}, },
set: (value) => { set: (value) => {
queryParams.resource_type = value queryParams.resource_type = value
queryParams.q = '' queryParams.q = defaultQuery.q
queryParams.page = 1 queryParams.page = defaultQuery.page
queryParams.limit = 10 queryParams.limit = defaultQuery.limit
queryParams.date_from = '' queryParams.date_from = defaultQuery.date_from
queryParams.date_to = '' queryParams.date_to = defaultQuery.date_to
}, },
}) })
</script> </script>
<template> <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"> <div class="rounded-md border p-4">
<h2 class="text-md font-semibold py-2">FHIR Resource</h2> <Header :prep="headerPrep" :ref-search-nav="refSearchNav" />
<Tabs v-model="activeTabFilter"> <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
<div class="scrollbar-hide overflow-x-auto flex gap-2 justify-between"> <PubBaseServiceStatus v-bind="service" />
<TabsList> <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
<TabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value" </div>
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"> <div class="rounded-md border p-4">
{{ tab.label }} <h2 class="text-md font-semibold py-2">FHIR Resource</h2>
</TabsTrigger> <Tabs v-model="activeTabFilter">
</TabsList> <div class="scrollbar-hide overflow-x-auto flex gap-2 justify-between">
<div class="flex gap-2 items-center"> <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> <Dialog>
<DialogTrigger> <DialogTrigger>
<Input type="text" placeholder="Cari pasien..." class="pl-3 h-9" /> <Input type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<DialogHeader class="border-b-1"> <DialogHeader class="border-b-1">
<DialogTitle class="pb-2">Pencarian</DialogTitle> <DialogTitle class="pb-2">Pencarian</DialogTitle>
</DialogHeader> </DialogHeader>
<Form> <Form>
<FormField v-slot="{ componentField }" name="username"> <FormField v-slot="{ componentField }" name="username">
<FormItem> <FormItem>
<FormLabel>Pasien</FormLabel> <FormLabel>Pasien</FormLabel>
<FormControl> <FormControl>
<Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" /> <Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
</FormControl> </FormControl>
</FormItem> </FormItem>
</FormField> </FormField>
<FormField v-slot="{ componentField }" name="status"> <FormField v-slot="{ componentField }" name="status">
<FormItem> <FormItem>
<FormLabel>Status</FormLabel> <FormLabel>Status</FormLabel>
<FormControl> <FormControl>
<Select> <Select v-bind="componentField">
<SelectTrigger class="bg-white border border-gray-300"> <SelectTrigger class="bg-white border border-gray-300">
<SelectValue class="text-gray-400" placeholder="-- select item" /> <SelectValue class="text-gray-400" placeholder="-- select item" />
</SelectTrigger> </SelectTrigger>
<SelectContent class="bg-white "> <SelectContent class="bg-white ">
<SelectItem value="0"> <SelectItem value="0">
Gagal Gagal
</SelectItem> </SelectItem>
<SelectItem value="1"> <SelectItem value="1">
Pending Pending
</SelectItem> </SelectItem>
<SelectItem value="2"> <SelectItem value="2">
Terkirim Terkirim
</SelectItem> </SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</FormControl> </FormControl>
</FormItem> </FormItem>
</FormField> </FormField>
<FormField v-slot="{ componentField }" name="fhirId"> <FormField v-slot="{ componentField }" name="fhirId">
<FormItem> <FormItem>
<FormLabel>FHIR ID</FormLabel> <FormLabel>FHIR ID</FormLabel>
<FormControl> <FormControl>
<Input type="text" placeholder="fhir id" v-bind="componentField" /> <Input type="text" placeholder="fhir id" v-bind="componentField" />
</FormControl> </FormControl>
</FormItem> </FormItem>
</FormField> </FormField>
</Form> </Form>
<DialogFooter> <DialogFooter>
<Button variant="outline"> <Button variant="outline">
Reset Reset
</Button> </Button>
<Button> <Button>
Apply Apply
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div>
<!-- Action Buttons -->
<AppSatusehatButtonAction v-for="action in actions" :key="action.value" :icon="action.icon"
:text="action.label" />
</div> </div>
<!-- Action Buttons -->
<AppSatusehatButtonAction v-for="action in actions" :key="action.value" :icon="action.icon"
:text="action.label" />
</div> </div>
</div> <div class="mt-4">
<div class="mt-4"> <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
<TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value"> <div class="rounded-md border p-4">
<div class="rounded-md border p-4"> <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" :data="data" />
<!-- Pagination --> <!-- Pagination -->
<div v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && pagination.total > 0" <div v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && pagination.total > 0"
class="mt-4 flex justify-between items-center"> class="mt-4 flex justify-between items-center">
<div class="text-sm text-muted-foreground"> <div class="text-sm text-muted-foreground">
Menampilkan {{ ((pagination.page - 1) * pagination.limit) + 1 }} - Menampilkan {{ ((pagination.page - 1) * pagination.limit) + 1 }} -
{{ Math.min(pagination.page * pagination.limit, pagination.total) }} {{ Math.min(pagination.page * pagination.limit, pagination.total) }}
dari {{ pagination.total }} data dari {{ pagination.total }} data
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button v-if="pagination.has_prev" variant="outline" size="sm" @click="queryParams.page--"> <Button v-if="pagination.has_prev" variant="outline" size="sm" @click="queryParams.page--">
Sebelumnya Sebelumnya
</Button> </Button>
<Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++"> <Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
Selanjutnya Selanjutnya
</Button> </Button>
</div>
</div> </div>
</div> </div>
</div> </TabsContent>
</TabsContent> </div>
</div> </Tabs>
</Tabs> </div>
</div> </div>
</template> </template>
app/components/pub/base/data-table/data-table.vue
+6 -6
View File
@@ -20,7 +20,7 @@ const loader = inject('table_data_loader') as DataTableLoader
<Table> <Table>
<TableHeader class="bg-gray-50"> <TableHeader class="bg-gray-50">
<TableRow> <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 }"> :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }">
{{ h.label }} {{ h.label }}
</TableHead> </TableHead>
@@ -30,24 +30,24 @@ const loader = inject('table_data_loader') as DataTableLoader
<TableBody v-if="loader.isTableLoading"> <TableBody v-if="loader.isTableLoading">
<!-- Loading state with 5 skeleton rows --> <!-- Loading state with 5 skeleton rows -->
<TableRow v-for="n in 5" :key="`skeleton-${n}`"> <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" /> <Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
<TableBody v-if="rows.length === 0 && !loader.isTableLoading"> <TableBody v-else-if="rows.length === 0">
<TableRow> <TableRow>
<TableCell colspan="100%" class="text-center"> <TableCell :colspan="keys.length" class="text-center py-8">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<Info class="size-5 text-muted-foreground" /> <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> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
<TableBody v-else> <TableBody v-else>
<TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`"> <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 --> <!-- If funcComponent has a renderer -->
<component :is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]" <component :is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
v-bind="funcComponent[key](row, rowIndex)" /> v-bind="funcComponent[key](row, rowIndex)" />