From 05a98ebe87d7a88e8b96b144c53250a40d724ec3 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Sat, 18 Jan 2025 22:29:20 +0100
Subject: [PATCH] fix: search input not displayed if response hasn't any items

---
 backend/internal/utils/paging_util.go         |   7 +-
 .../src/lib/components/advanced-table.svelte  | 221 +++++++++---------
 2 files changed, 119 insertions(+), 109 deletions(-)

diff --git a/backend/internal/utils/paging_util.go b/backend/internal/utils/paging_util.go
index 13143d7..8698bba 100644
--- a/backend/internal/utils/paging_util.go
+++ b/backend/internal/utils/paging_util.go
@@ -63,8 +63,13 @@ func Paginate(page int, pageSize int, query *gorm.DB, result interface{}) (Pagin
 		return PaginationResponse{}, err
 	}
 
+	totalPages := (totalItems + int64(pageSize) - 1) / int64(pageSize)
+	if totalItems == 0 {
+		totalPages = 1
+	}
+
 	return PaginationResponse{
-		TotalPages:   (totalItems + int64(pageSize) - 1) / int64(pageSize),
+		TotalPages:   totalPages,
 		TotalItems:   totalItems,
 		CurrentPage:  page,
 		ItemsPerPage: pageSize,
diff --git a/frontend/src/lib/components/advanced-table.svelte b/frontend/src/lib/components/advanced-table.svelte
index c7ef605..c41a9f3 100644
--- a/frontend/src/lib/components/advanced-table.svelte
+++ b/frontend/src/lib/components/advanced-table.svelte
@@ -32,6 +32,8 @@
 		rows: Snippet<[{ item: T }]>;
 	} = $props();
 
+	let searchValue = $state('');
+
 	if (!requestOptions) {
 		requestOptions = {
 			search: '',
@@ -55,9 +57,10 @@
 		return true;
 	});
 
-	const onSearch = debounced(async (searchValue: string) => {
-		requestOptions.search = searchValue;
-		onRefresh(requestOptions);
+	const onSearch = debounced(async (search: string) => {
+		requestOptions.search = search;
+		await onRefresh(requestOptions);
+		searchValue = search;
 	}, 300);
 
 	async function onAllCheck(checked: boolean) {
@@ -95,122 +98,124 @@
 	}
 </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">
 		<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}
-			<Input
-				class="mb-4 max-w-sm"
-				placeholder={'Search...'}
-				type="text"
-				oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
-			/>
-		{/if}
-
-		<Table.Root class="min-w-full table-auto">
-			<Table.Header>
-				<Table.Row>
-					{#if selectedIds}
-						<Table.Head class="w-12">
-							<Checkbox checked={allChecked} onCheckedChange={(c) => onAllCheck(c as boolean)} />
-						</Table.Head>
-					{/if}
-					{#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}
+	<Table.Root class="min-w-full table-auto overflow-x-auto">
+		<Table.Header>
+			<Table.Row>
+				{#if selectedIds}
+					<Table.Head class="w-12">
+						<Checkbox checked={allChecked} onCheckedChange={(c) => onAllCheck(c as boolean)} />
+					</Table.Head>
+				{/if}
+				{#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}
-						</Table.Head>
-					{/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 class="w-12">
-								<Checkbox
-									checked={selectedIds.includes(item.id)}
-									onCheckedChange={(c) => onCheck(c as boolean, item.id)}
-								/>
-							</Table.Cell>
+								{#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}
 						{/if}
-						{@render rows({ item })}
-					</Table.Row>
+					</Table.Head>
 				{/each}
-			</Table.Body>
-		</Table.Root>
+			</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 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="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
+	<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">
+			<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)}
 			>
-				<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}
+				<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}
-					<Pagination.Item>
-						<Pagination.NextButton />
-					</Pagination.Item>
-				</Pagination.Content>
-			</Pagination.Root>
+				</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' && 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>
 {/if}