nikdoof/pocket-id
1
0
Fork 0
mirror of https://github.com/nikdoof/pocket-id.git synced 2025-12-14 07:12:19 +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,

33
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,23 +98,26 @@
} }
</script> </script>
{#if items.data.length === 0}
<div class="my-5 flex flex-col items-center">
<Empty class="text-muted-foreground h-20" />
<p class="text-muted-foreground mt-3 text-sm">No items found</p>
</div>
{:else}
<div class="w-full overflow-x-auto">
{#if !withoutSearch} {#if !withoutSearch}
<Input <Input
class="mb-4 max-w-sm" value={searchValue}
class={cn(
'relative z-50 mb-4 max-w-sm',
items.data.length == 0 && searchValue == '' && 'hidden'
)}
placeholder={'Search...'} placeholder={'Search...'}
type="text" type="text"
oninput={(e) => onSearch((e.target as HTMLInputElement).value)} oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
/> />
{/if} {/if}
<Table.Root class="min-w-full table-auto"> {#if items.data.length === 0 && searchValue === ''}
<div class="my-5 flex flex-col items-center">
<Empty class="text-muted-foreground h-20" />
<p class="text-muted-foreground mt-3 text-sm">No items found</p>
</div>
{:else}
<Table.Root class="min-w-full table-auto overflow-x-auto">
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
{#if selectedIds} {#if selectedIds}
@@ -198,7 +204,7 @@
<Pagination.PrevButton /> <Pagination.PrevButton />
</Pagination.Item> </Pagination.Item>
{#each pages as page (page.key)} {#each pages as page (page.key)}
{#if page.type !== 'ellipsis'} {#if page.type !== 'ellipsis' && page.value != 0}
<Pagination.Item> <Pagination.Item>
<Pagination.Link {page} isActive={items.pagination.currentPage === page.value}> <Pagination.Link {page} isActive={items.pagination.currentPage === page.value}>
{page.value} {page.value}
@@ -212,5 +218,4 @@
</Pagination.Content> </Pagination.Content>
</Pagination.Root> </Pagination.Root>
</div> </div>
</div>
{/if} {/if}