nikdoof/pocket-id
1
0
Fork 0
mirror of https://github.com/nikdoof/pocket-id.git synced 2025-12-13 23:02:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: search input not displayed if response hasn't any items

Browse Source
This commit is contained in:
Elias Schneider
2025-01-18 22:29:20 +01:00
parent 6e3728ddc8
commit 05a98ebe87
2 changed files with 119 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
backend/internal/utils/paging_util.go
View File

@@ -63,8 +63,13 @@ func Paginate(page int, pageSize int, query *gorm.DB, result interface{}) (Pagin
return PaginationResponse{}, err return PaginationResponse{}, err
} }
totalPages := (totalItems + int64(pageSize) - 1) / int64(pageSize)
if totalItems == 0 {
totalPages = 1
}
return PaginationResponse{ return PaginationResponse{
TotalPages: (totalItems + int64(pageSize) - 1) / int64(pageSize), TotalPages: totalPages,
TotalItems: totalItems, TotalItems: totalItems,
CurrentPage: page, CurrentPage: page,
ItemsPerPage: pageSize, ItemsPerPage: pageSize,

221
frontend/src/lib/components/advanced-table.svelte
View File

@@ -32,6 +32,8 @@
rows: Snippet<[{ item: T }]>; rows: Snippet<[{ item: T }]>;
} = $props(); } = $props();
let searchValue = $state('');
if (!requestOptions) { if (!requestOptions) {
requestOptions = { requestOptions = {
search: '', search: '',
@@ -55,9 +57,10 @@
return true; return true;
}); });
const onSearch = debounced(async (searchValue: string) => { const onSearch = debounced(async (search: string) => {
requestOptions.search = searchValue; requestOptions.search = search;
onRefresh(requestOptions); await onRefresh(requestOptions);
searchValue = search;
}, 300); }, 300);
async function onAllCheck(checked: boolean) { async function onAllCheck(checked: boolean) {
@@ -95,122 +98,124 @@
} }
</script> </script>
{#if items.data.length === 0} {#if !withoutSearch}
<Input
value={searchValue}
class={cn(
'relative z-50 mb-4 max-w-sm',
items.data.length == 0 && searchValue == '' && 'hidden'
)}
placeholder={'Search...'}
type="text"
oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
/>
{/if}
{#if items.data.length === 0 && searchValue === ''}
<div class="my-5 flex flex-col items-center"> <div class="my-5 flex flex-col items-center">
<Empty class="text-muted-foreground h-20" /> <Empty class="text-muted-foreground h-20" />
<p class="text-muted-foreground mt-3 text-sm">No items found</p> <p class="text-muted-foreground mt-3 text-sm">No items found</p>
</div> </div>
{:else} {:else}
<div class="w-full overflow-x-auto"> <Table.Root class="min-w-full table-auto overflow-x-auto">
{#if !withoutSearch} <Table.Header>
<Input <Table.Row>
class="mb-4 max-w-sm" {#if selectedIds}
placeholder={'Search...'} <Table.Head class="w-12">
type="text" <Checkbox checked={allChecked} onCheckedChange={(c) => onAllCheck(c as boolean)} />
oninput={(e) => onSearch((e.target as HTMLInputElement).value)} </Table.Head>
/> {/if}
{/if} {#each columns as column}
<Table.Head class={cn(column.hidden && 'sr-only', column.sortColumn && 'px-0')}>
<Table.Root class="min-w-full table-auto"> {#if column.sortColumn}
<Table.Header> <Button
<Table.Row> variant="ghost"
{#if selectedIds} class="flex items-center"
<Table.Head class="w-12"> on:click={() =>
<Checkbox checked={allChecked} onCheckedChange={(c) => onAllCheck(c as boolean)} /> onSort(
</Table.Head> column.sortColumn,
{/if} requestOptions.sort?.direction === 'desc' ? 'asc' : 'desc'
{#each columns as column} )}
<Table.Head class={cn(column.hidden && 'sr-only', column.sortColumn && 'px-0')}> >
{#if column.sortColumn}
<Button
variant="ghost"
class="flex items-center"
on:click={() =>
onSort(
column.sortColumn,
requestOptions.sort?.direction === 'desc' ? 'asc' : 'desc'
)}
>
{column.label}
{#if requestOptions.sort?.column === column.sortColumn}
<ChevronDown
class={cn(
'ml-2 h-4 w-4',
requestOptions.sort?.direction === 'asc' ? 'rotate-180' : ''
)}
/>
{/if}
</Button>
{:else}
{column.label} {column.label}
{/if} {#if requestOptions.sort?.column === column.sortColumn}
</Table.Head> <ChevronDown
{/each} class={cn(
</Table.Row> 'ml-2 h-4 w-4',
</Table.Header> requestOptions.sort?.direction === 'asc' ? 'rotate-180' : ''
<Table.Body> )}
{#each items.data as item} />
<Table.Row class={selectedIds?.includes(item.id) ? 'bg-muted/20' : ''}> {/if}
{#if selectedIds} </Button>
<Table.Cell class="w-12"> {:else}
<Checkbox {column.label}
checked={selectedIds.includes(item.id)}
onCheckedChange={(c) => onCheck(c as boolean, item.id)}
/>
</Table.Cell>
{/if} {/if}
{@render rows({ item })} </Table.Head>
</Table.Row>
{/each} {/each}
</Table.Body> </Table.Row>
</Table.Root> </Table.Header>
<Table.Body>
{#each items.data as item}
<Table.Row class={selectedIds?.includes(item.id) ? 'bg-muted/20' : ''}>
{#if selectedIds}
<Table.Cell class="w-12">
<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 flex-col-reverse items-center justify-between gap-3 sm:flex-row"> <div class="mt-5 flex flex-col-reverse items-center justify-between gap-3 sm:flex-row">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<p class="text-sm font-medium">Items per page</p> <p class="text-sm font-medium">Items per page</p>
<Select.Root <Select.Root
selected={{ selected={{
label: items.pagination.itemsPerPage.toString(), label: items.pagination.itemsPerPage.toString(),
value: items.pagination.itemsPerPage value: items.pagination.itemsPerPage
}} }}
onSelectedChange={(v) => onPageSizeChange(v?.value as number)} 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"> <Select.Trigger class="h-9 w-[80px]">
<Pagination.Item> <Select.Value>{items.pagination.itemsPerPage}</Select.Value>
<Pagination.PrevButton /> </Select.Trigger>
</Pagination.Item> <Select.Content>
{#each pages as page (page.key)} {#each availablePageSizes as size}
{#if page.type !== 'ellipsis'} <Select.Item value={size}>{size}</Select.Item>
<Pagination.Item>
<Pagination.Link {page} isActive={items.pagination.currentPage === page.value}>
{page.value}
</Pagination.Link>
</Pagination.Item>
{/if}
{/each} {/each}
<Pagination.Item> </Select.Content>
<Pagination.NextButton /> </Select.Root>
</Pagination.Item>
</Pagination.Content>
</Pagination.Root>
</div> </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' && page.value != 0}
<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} {/if}