mirror of
https://github.com/pocket-id/pocket-id.git
synced 2025-12-20 17:25:43 +03:00
feat: add list empty indicator
This commit is contained in:
Elias Schneider
@@ -4,6 +4,7 @@
|
|||||||
import * as Pagination from '$lib/components/ui/pagination';
|
import * as Pagination from '$lib/components/ui/pagination';
|
||||||
import * as Select from '$lib/components/ui/select';
|
import * as Select from '$lib/components/ui/select';
|
||||||
import * as Table from '$lib/components/ui/table/index.js';
|
import * as Table from '$lib/components/ui/table/index.js';
|
||||||
|
import Empty from '$lib/icons/empty.svelte';
|
||||||
import type { Paginated } from '$lib/types/pagination.type';
|
import type { Paginated } from '$lib/types/pagination.type';
|
||||||
import { debounced } from '$lib/utils/debounce-util';
|
import { debounced } from '$lib/utils/debounce-util';
|
||||||
import type { Snippet } from 'svelte';
|
import type { Snippet } from 'svelte';
|
||||||
@@ -66,93 +67,102 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="w-full">
|
{#if items.data.length === 0}
|
||||||
{#if !withoutSearch}
|
<div class="my-5 flex flex-col items-center">
|
||||||
<Input
|
<Empty class="text-muted-foreground h-20" />
|
||||||
class="mb-4 max-w-sm"
|
<p class="text-muted-foreground mt-3 text-sm">No items found</p>
|
||||||
placeholder={'Search...'}
|
|
||||||
type="text"
|
|
||||||
oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
<Table.Root>
|
|
||||||
<Table.Header>
|
|
||||||
<Table.Row>
|
|
||||||
{#if selectedIds}
|
|
||||||
<Table.Head>
|
|
||||||
<Checkbox checked={allChecked} onCheckedChange={(c) => onAllCheck(c as boolean)} />
|
|
||||||
</Table.Head>
|
|
||||||
{/if}
|
|
||||||
{#each columns as column}
|
|
||||||
{#if typeof column === 'string'}
|
|
||||||
<Table.Head>{column}</Table.Head>
|
|
||||||
{:else}
|
|
||||||
<Table.Head class={column.hidden ? 'sr-only' : ''}>{column.label}</Table.Head>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</Table.Row>
|
|
||||||
</Table.Header>
|
|
||||||
<Table.Body>
|
|
||||||
{#each items.data as item}
|
|
||||||
<Table.Row class={selectedIds?.includes(item.id) ? 'bg-muted/20' : ''}>
|
|
||||||
{#if selectedIds}
|
|
||||||
<Table.Cell>
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedIds.includes(item.id)}
|
|
||||||
onCheckedChange={(c) => onCheck(c as boolean, item.id)}
|
|
||||||
/>
|
|
||||||
</Table.Cell>
|
|
||||||
{/if}
|
|
||||||
{@render rows({ item })}
|
|
||||||
</Table.Row>
|
|
||||||
{/each}
|
|
||||||
</Table.Body>
|
|
||||||
</Table.Root>
|
|
||||||
<div class="mt-5 flex items-center justify-between space-x-2">
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<p class="text-sm font-medium">Items per page</p>
|
|
||||||
<Select.Root
|
|
||||||
selected={{
|
|
||||||
label: items.pagination.itemsPerPage.toString(),
|
|
||||||
value: items.pagination.itemsPerPage
|
|
||||||
}}
|
|
||||||
onSelectedChange={(v) => onPageSizeChange(v?.value as number)}
|
|
||||||
>
|
|
||||||
<Select.Trigger class="h-9 w-[80px]">
|
|
||||||
<Select.Value>{items.pagination.itemsPerPage}</Select.Value>
|
|
||||||
</Select.Trigger>
|
|
||||||
<Select.Content>
|
|
||||||
{#each availablePageSizes as size}
|
|
||||||
<Select.Item value={size}>{size}</Select.Item>
|
|
||||||
{/each}
|
|
||||||
</Select.Content>
|
|
||||||
</Select.Root>
|
|
||||||
</div>
|
|
||||||
<Pagination.Root
|
|
||||||
class="mx-0 w-auto"
|
|
||||||
count={items.pagination.totalItems}
|
|
||||||
perPage={items.pagination.itemsPerPage}
|
|
||||||
{onPageChange}
|
|
||||||
page={items.pagination.currentPage}
|
|
||||||
let:pages
|
|
||||||
>
|
|
||||||
<Pagination.Content class="flex justify-end">
|
|
||||||
<Pagination.Item>
|
|
||||||
<Pagination.PrevButton />
|
|
||||||
</Pagination.Item>
|
|
||||||
{#each pages as page (page.key)}
|
|
||||||
{#if page.type !== 'ellipsis'}
|
|
||||||
<Pagination.Item>
|
|
||||||
<Pagination.Link {page} isActive={items.pagination.currentPage === page.value}>
|
|
||||||
{page.value}
|
|
||||||
</Pagination.Link>
|
|
||||||
</Pagination.Item>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
<Pagination.Item>
|
|
||||||
<Pagination.NextButton />
|
|
||||||
</Pagination.Item>
|
|
||||||
</Pagination.Content>
|
|
||||||
</Pagination.Root>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{:else}
|
||||||
|
<div class="w-full">
|
||||||
|
{#if !withoutSearch}
|
||||||
|
<Input
|
||||||
|
class="mb-4 max-w-sm"
|
||||||
|
placeholder={'Search...'}
|
||||||
|
type="text"
|
||||||
|
oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<Table.Root>
|
||||||
|
<Table.Header>
|
||||||
|
<Table.Row>
|
||||||
|
{#if selectedIds}
|
||||||
|
<Table.Head>
|
||||||
|
<Checkbox checked={allChecked} onCheckedChange={(c) => onAllCheck(c as boolean)} />
|
||||||
|
</Table.Head>
|
||||||
|
{/if}
|
||||||
|
{#each columns as column}
|
||||||
|
{#if typeof column === 'string'}
|
||||||
|
<Table.Head>{column}</Table.Head>
|
||||||
|
{:else}
|
||||||
|
<Table.Head class={column.hidden ? 'sr-only' : ''}>{column.label}</Table.Head>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Header>
|
||||||
|
<Table.Body>
|
||||||
|
{#each items.data as item}
|
||||||
|
<Table.Row class={selectedIds?.includes(item.id) ? 'bg-muted/20' : ''}>
|
||||||
|
{#if selectedIds}
|
||||||
|
<Table.Cell>
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.includes(item.id)}
|
||||||
|
onCheckedChange={(c) => onCheck(c as boolean, item.id)}
|
||||||
|
/>
|
||||||
|
</Table.Cell>
|
||||||
|
{/if}
|
||||||
|
{@render rows({ item })}
|
||||||
|
</Table.Row>
|
||||||
|
{/each}
|
||||||
|
</Table.Body>
|
||||||
|
</Table.Root>
|
||||||
|
|
||||||
|
<div class="mt-5 flex items-center justify-between space-x-2">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<p class="text-sm font-medium">Items per page</p>
|
||||||
|
<Select.Root
|
||||||
|
selected={{
|
||||||
|
label: items.pagination.itemsPerPage.toString(),
|
||||||
|
value: items.pagination.itemsPerPage
|
||||||
|
}}
|
||||||
|
onSelectedChange={(v) => onPageSizeChange(v?.value as number)}
|
||||||
|
>
|
||||||
|
<Select.Trigger class="h-9 w-[80px]">
|
||||||
|
<Select.Value>{items.pagination.itemsPerPage}</Select.Value>
|
||||||
|
</Select.Trigger>
|
||||||
|
<Select.Content>
|
||||||
|
{#each availablePageSizes as size}
|
||||||
|
<Select.Item value={size}>{size}</Select.Item>
|
||||||
|
{/each}
|
||||||
|
</Select.Content>
|
||||||
|
</Select.Root>
|
||||||
|
</div>
|
||||||
|
<Pagination.Root
|
||||||
|
class="mx-0 w-auto"
|
||||||
|
count={items.pagination.totalItems}
|
||||||
|
perPage={items.pagination.itemsPerPage}
|
||||||
|
{onPageChange}
|
||||||
|
page={items.pagination.currentPage}
|
||||||
|
let:pages
|
||||||
|
>
|
||||||
|
<Pagination.Content class="flex justify-end">
|
||||||
|
<Pagination.Item>
|
||||||
|
<Pagination.PrevButton />
|
||||||
|
</Pagination.Item>
|
||||||
|
{#each pages as page (page.key)}
|
||||||
|
{#if page.type !== 'ellipsis'}
|
||||||
|
<Pagination.Item>
|
||||||
|
<Pagination.Link {page} isActive={items.pagination.currentPage === page.value}>
|
||||||
|
{page.value}
|
||||||
|
</Pagination.Link>
|
||||||
|
</Pagination.Item>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
<Pagination.Item>
|
||||||
|
<Pagination.NextButton />
|
||||||
|
</Pagination.Item>
|
||||||
|
</Pagination.Content>
|
||||||
|
</Pagination.Root>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|||||||
24
frontend/src/lib/icons/empty.svelte
Normal file
24
frontend/src/lib/icons/empty.svelte
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let {
|
||||||
|
class: className
|
||||||
|
}: {
|
||||||
|
class?: string;
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 336.19673868301203 129.38671875"
|
||||||
|
class={className}
|
||||||
|
>
|
||||||
|
<g stroke-linecap="round" transform="translate(10 10) rotate(0 158.09836934150601 54.693359375)">
|
||||||
|
<path
|
||||||
|
d="M27.35 0 C121.36 -0.62, 208.79 0.52, 288.85 0 M288.85 0 C305.5 3.32, 316.8 6.14, 316.2 27.35 M316.2 27.35 C315.58 42.15, 314.92 54.54, 316.2 82.04 M316.2 82.04 C313.79 100.68, 304.9 110.1, 288.85 109.39 M288.85 109.39 C192.86 108.68, 93.17 110.07, 27.35 109.39 M27.35 109.39 C13.09 109.46, -1.61 102.22, 0 82.04 M0 82.04 C-0.35 60.8, -1.11 41.01, 0 27.35 M0 27.35 C1.94 9.62, 8.6 1.41, 27.35 0"
|
||||||
|
stroke="#A1A1AA"
|
||||||
|
stroke-width="4.5"
|
||||||
|
fill="none"
|
||||||
|
stroke-dasharray="8 12"
|
||||||
|
></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
Reference in New Issue
Block a user