Vereinheitliche Empty States in Tabellen
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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")}}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user