From 381a80f65b0348a5a703d0d58ea0981040a8d8cd Mon Sep 17 00:00:00 2001
From: Orel <ryiseld@gmail.com>
Date: Tue, 14 Mar 2023 21:18:02 +0200
Subject: [PATCH] Add search to database collection

Add a search bar to the database collections page to allow filtering
collections.
---
 .../database-[database]/[[page]]/+page.svelte | 32 +++++++++++++++----
 .../database-[database]/[[page]]/+page.ts     | 14 ++++----
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte
index 7a33759a6d..74247a5fa3 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte
@@ -2,7 +2,16 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Copy, GridItem1, CardContainer, Heading, Pagination } from '$lib/components';
+    import {
+        Empty,
+        EmptySearch,
+        Copy,
+        GridItem1,
+        CardContainer,
+        Heading,
+        Pagination,
+        SearchQuery
+    } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
@@ -29,13 +38,15 @@
 </script>
 
 <Container>
-    <div class="u-flex u-gap-12 common-section u-main-space-between">
+    <div class="u-flex u-flex-vertical u-gap-12 common-section u-main-space-between">
         <Heading tag="h2" size="5">Collections</Heading>
 
-        <Button on:click={() => (showCreate = true)} event="create_collection">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create collection</span>
-        </Button>
+        <SearchQuery search={data.search} placeholder="Search by name">
+            <Button on:click={() => (showCreate = true)} event="create_collection">
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Create collection</span>
+            </Button>
+        </SearchQuery>
     </div>
 
     {#if data.collections.total}
@@ -71,6 +82,15 @@
                 offset={data.offset}
                 sum={data.collections.total} />
         </div>
+    {:else if data.search}
+        <EmptySearch>
+            <div class="u-text-center">
+                <b>Sorry, we couldn't find '{data.search}'</b>
+                <p>There are no collections that match your search.</p>
+            </div>
+            <Button href={`/console/project-${project}/databases/database-${databaseId}`} secondary
+                >Clear Search</Button>
+        </EmptySearch>
     {:else}
         <Empty
             single
diff --git a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts
index d7c69f3caf..939c09e0cd 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts
@@ -4,17 +4,19 @@ import { pageToOffset } from '$lib/helpers/load';
 import { CARD_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent }) => {
+export const load: PageLoad = async ({ params, parent, url }) => {
     await parent();
     const page = Number(params.page);
     const offset = pageToOffset(page, CARD_LIMIT);
+    const search = url.search.slice(1) ?? undefined;
 
     return {
         offset,
-        collections: await sdkForProject.databases.listCollections(params.database, [
-            Query.limit(CARD_LIMIT),
-            Query.offset(offset),
-            Query.orderDesc('$createdAt')
-        ])
+        search,
+        collections: await sdkForProject.databases.listCollections(
+            params.database,
+            [Query.limit(CARD_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            search
+        )
     };
 };