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

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,

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,23 +98,26 @@
 	}
 </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}
 	<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...'}
 		type="text"
 		oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
 	/>
 {/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.Row>
 				{#if selectedIds}
@@ -198,7 +204,7 @@
 					<Pagination.PrevButton />
 				</Pagination.Item>
 				{#each pages as page (page.key)}
-						{#if page.type !== 'ellipsis'}
+					{#if page.type !== 'ellipsis' && page.value != 0}
 						<Pagination.Item>
 							<Pagination.Link {page} isActive={items.pagination.currentPage === page.value}>
 								{page.value}
@@ -212,5 +218,4 @@
 			</Pagination.Content>
 		</Pagination.Root>
 	</div>
-	</div>
 {/if}