Vereinheitliche Empty States in Tabellen

This commit is contained in:
2026-04-24 14:42:53 +02:00
parent 50c76b67c7
commit 5869f88c1a
12 changed files with 24 additions and 53 deletions

View File

@@ -267,13 +267,8 @@ const selectItem = (item) => {
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
:on-select="(row) => selectItem(row.original)"
style="height: 70vh"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
>
<template #empty>
<div class="flex flex-col items-center justify-center py-8 text-center text-sm text-muted">
<UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 size-5" />
<span>Keine Belege anzuzeigen</span>
</div>
</template>
<template #type-cell="{ row }">
{{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}
</template>

View File

@@ -254,14 +254,8 @@ const selectAllocation = (allocationLike) => {
:columns="normalizeTableColumns(columns)"
:on-select="selectAllocation"
class="w-full"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen im ausgewählten Zeitraum' }"
>
<template #empty>
<div class="flex flex-col items-center justify-center py-10 text-center">
<UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
<p class="font-medium">Keine Buchungen im ausgewählten Zeitraum</p>
</div>
</template>
<template #amount-cell="{ row }">
<span class="text-right text-error" v-if="row.original.amount < 0 || row.original.color === 'red'">{{ useCurrency(row.original.amount) }}</span>
<span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{ useCurrency(row.original.amount) }}</span>

View File

@@ -69,13 +69,8 @@ const columns = [
class="mt-3"
:columns="normalizeTableColumns(columns)"
:data="props.item.times"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
>
<template #empty>
<div class="flex flex-col items-center justify-center py-8 text-center text-sm text-muted">
<UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 size-5" />
<span>Noch keine Einträge</span>
</div>
</template>
<template #state-cell="{ row }">
<span
v-if="row.original.state === 'Entwurf'"

View File

@@ -22,14 +22,11 @@ setupPage()
<template>
<UTable
v-if="openTasks.length > 0"
:data="openTasks"
:columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
:on-select="(i) => router.push(`/tasks/show/${i.id}`)"
:columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
:on-select="(i) => router.push(`/tasks/show/${i.id}`)"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine offenen Aufgaben' }"
/>
<div v-else>
<p class="text-center font-bold">Keine offenen Aufgaben</p>
</div>
</template>
<style scoped>

View File

@@ -585,14 +585,8 @@ onMounted(setupPage)
:columns="normalizeTableColumns(accountColumns)"
:loading="loading"
:on-select="openAccount"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungskonten im ausgewählten Zeitraum' }"
>
<template #empty>
<div class="flex flex-col items-center justify-center py-10 text-center">
<UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
<p class="font-medium">Keine Buchungskonten im ausgewaehlten Zeitraum</p>
</div>
</template>
<template #label-cell="{ row }">
<div class="truncate font-medium">{{ row.original.label }}</div>
</template>
@@ -630,14 +624,8 @@ onMounted(setupPage)
:columns="normalizeTableColumns(ownAccountColumns)"
:loading="loading"
:on-select="openOwnAccount"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine eigenen Buchungen im ausgewählten Zeitraum' }"
>
<template #empty>
<div class="flex flex-col items-center justify-center py-10 text-center">
<UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
<p class="font-medium">Keine eigenen Buchungen im ausgewaehlten Zeitraum</p>
</div>
</template>
<template #label-cell="{ row }">
<div class="truncate font-medium">{{ row.original.label }}</div>
</template>
@@ -676,6 +664,7 @@ onMounted(setupPage)
:data="depreciationRows"
:columns="normalizeTableColumns(depreciationColumns)"
:loading="loading"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Abschreibungen im ausgewählten Zeitraum' }"
>
<template #amount-cell="{ row }">
<div class="text-right text-amber-600 dark:text-amber-400 tabular-nums">{{ useCurrency(row.original.amount) }}</div>

View File

@@ -197,6 +197,7 @@ onMounted(async () => {
])"
:on-select="(row) => router.push(`/administration/users/${row.original?.id || row.id}`)"
class="mt-4"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugeordneten Benutzer gefunden' }"
/>
</UCard>

View File

@@ -211,6 +211,7 @@
:get-row-id="(row) => row.id"
:ui="{ th: { base: 'whitespace-nowrap' } }"
:on-select="toggleExecutionRow"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
>
<template #select-header="{ table }">
<div class="flex justify-center" @click.stop>

View File

@@ -35,13 +35,14 @@ const createExport = async () => {
</template>
</UDashboardNavbar>
<UTable
v-if="createddocuments.length > 0"
:loading="true"
v-model="selected"
:loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
:data="createddocuments" />
:data="createddocuments"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine SEPA-Belege anzuzeigen' }"
/>
</template>
<style scoped>
</style>
</style>

View File

@@ -154,6 +154,7 @@ const createExport = async () => {
{ key: 'type', label: 'Typ' },
{ key: 'download', label: 'Download' },
])"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Exporte anzuzeigen' }"
>
<template #created_at-cell="{row}">
{{dayjs(row.original.created_at).format("DD.MM.YYYY HH:mm")}}

View File

@@ -203,6 +203,7 @@ setupPage()
label: 'Saldo'
},
])"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Bankkonten anzuzeigen' }"
>
<template #expired-cell="{ row }">
<span v-if="row.original.expired" class="text-error-600">Ausgelaufen</span>

View File

@@ -79,13 +79,8 @@
:columns="normalizeTableColumns(columns)"
:loading="pending"
:on-select="(row) => navigateTo(`/staff/profiles/${row.original?.id || row.id}`)"
>
<template #empty>
<div class="py-10 text-center text-sm text-gray-500">
Keine Mitarbeiterprofile gefunden.
</div>
</template>
</UTable>
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Mitarbeiterprofile gefunden' }"
/>
</template>
<style scoped>

View File

@@ -461,6 +461,7 @@ onMounted(async () => {
:data="filteredTasks"
:columns="normalizedListColumns"
:on-select="(task) => openTaskViaRoute(task)"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Aufgaben anzuzeigen' }"
>
<template #actions-cell="{ row }">
<UButton
@@ -490,11 +491,11 @@ onMounted(async () => {
{{ getEntityLabel(plantOptions, row.original.plant?.id || row.original.plant) || "-" }}
</template>
</UTable>
<UAlert
<UTable
v-else
icon="i-heroicons-circle-stack-20-solid"
title="Keine Aufgaben anzuzeigen"
variant="subtle"
:data="[]"
:columns="normalizedListColumns"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Aufgaben anzuzeigen' }"
/>
</UDashboardPanelContent>