paulmataruso/libredesk
1
0
Fork 0
mirror of https://github.com/abhinavxd/libredesk.git synced 2025-10-23 05:11:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update SimpleTable component with loading state and skeleton rows

Browse Source 
- remove existing loading table state from activity logs
This commit is contained in:
Abhinav Raut
2025-06-08 12:44:05 +05:30
parent 03b932c1c0
commit 499fc0dad1
2 changed files with 44 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/table/SimpleTable.vue
View File

@@ -10,13 +10,30 @@
>
{{ header }}
</th>
<th scope="col" class="relative px-6 py-3"></th>
<th v-if="showDelete" scope="col" class="relative px-6 py-3"></th>
</tr>
</thead>
<tbody class="bg-background divide-y divide-border">
<template v-if="data.length === 0">
<!-- Loading State -->
<template v-if="loading">
<tr v-for="i in skeletonRows" :key="`skeleton-${i}`" class="hover:bg-accent">
<td
v-for="(header, index) in headers"
:key="`skeleton-cell-${index}`"
class="px-6 py-3 text-sm font-medium text-foreground whitespace-normal break-words"
>
<Skeleton class="h-4 w-[85%]" />
</td>
<td v-if="showDelete" class="px-6 py-4 text-sm text-muted-foreground">
<Skeleton class="h-8 w-8 rounded" />
</td>
</tr>
</template>
<!-- No Results State -->
<template v-else-if="data.length === 0">
<tr>
<td :colspan="headers.length + 1" class="px-6 py-12 text-center">
<td :colspan="headers.length + (showDelete ? 1 : 0)" class="px-6 py-12 text-center">
<div class="flex flex-col items-center space-y-4">
<span class="text-md text-muted-foreground">
{{
@@ -29,6 +46,8 @@
</td>
</tr>
</template>
<!-- Data Rows -->
<template v-else>
<tr v-for="(item, index) in data" :key="index" class="hover:bg-accent">
<td
@@ -53,6 +72,7 @@
import { Trash2 } from 'lucide-vue-next'
import { defineProps, defineEmits } from 'vue'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
defineProps({
headers: {
@@ -73,6 +93,14 @@ defineProps({
showDelete: {
type: Boolean,
default: true
},
loading: {
type: Boolean,
default: false
},
skeletonRows: {
type: Number,
default: 5
}
})

42
frontend/src/features/admin/activity-log/ActivityLog.vue
View File

@@ -63,35 +63,20 @@
</Popover>
</div>
<div v-if="loading" class="w-full">
<div class="flex border-b border-border p-4 font-medium bg-gray-50">
<div class="flex-1 text-muted-foreground">{{ t('globals.terms.name') }}</div>
<div class="w-[200px] text-muted-foreground">{{ t('globals.terms.date') }}</div>
<div class="w-[150px] text-muted-foreground">{{ t('globals.terms.ipAddress') }}</div>
</div>
<div v-for="i in perPage" :key="i" class="flex border-b border-border py-3 px-4">
<div class="flex-1">
<Skeleton class="h-4 w-[90%]" />
</div>
<div class="w-[200px]">
<Skeleton class="h-4 w-[120px]" />
</div>
<div class="w-[150px]">
<Skeleton class="h-4 w-[100px]" />
</div>
</div>
<div class="w-full overflow-x-auto">
<SimpleTable
:headers="[
t('globals.terms.name'),
t('globals.terms.timestamp'),
t('globals.terms.ipAddress')
]"
:keys="['activity_description', 'created_at', 'ip']"
:data="activityLogs"
:showDelete="false"
:loading="loading"
:skeletonRows="15"
/>
</div>
<template v-else>
<div class="w-full overflow-x-auto">
<SimpleTable
:headers="[t('globals.terms.name'), t('globals.terms.timestamp'), t('globals.terms.ipAddress')]"
:keys="['activity_description', 'created_at', 'ip']"
:data="activityLogs"
:showDelete="false"
/>
</div>
</template>
</div>
<!-- TODO: deduplicate this code, copied from contacts list -->
@@ -163,7 +148,6 @@
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { Skeleton } from '@/components/ui/skeleton'
import SimpleTable from '@/components/table/SimpleTable.vue'
import {
Pagination,