From 66465a1f8f97db9a2e07e3e384a1ca2f49170ba1 Mon Sep 17 00:00:00 2001
From: Pushkar <bansalpushkar100@gmail.com>
Date: Fri, 13 Dec 2024 20:53:41 +0530
Subject: [PATCH 1/2] add: search feature in db collections

---
 .../database-[database]/+page.svelte          | 49 +++++++++++++------
 .../databases/database-[database]/+page.ts    |  6 ++-
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte
index 22fb35e11..5bd2faec4 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { Empty, PaginationWithLimit } from '$lib/components';
+    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Container, GridHeader } from '$lib/layout';
+    import { Container, ContainerHeader } from '$lib/layout';
     import { columns, showCreate } from './store';
     import Table from './table.svelte';
     import Grid from './grid.svelte';
@@ -12,19 +12,25 @@
 </script>
 
 <Container>
-    <GridHeader
-        title="Collections"
-        {columns}
-        view={data.view}
-        hideColumns={!data.collections.total}
-        hideView={!data.collections.total}>
-        {#if $canWriteCollections}
-            <Button on:click={() => ($showCreate = true)} event="create_collection">
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create collection</span>
-            </Button>
-        {/if}
-    </GridHeader>
+    <ContainerHeader title="Collections" serviceId="databases" isFlex={false}>
+        <SearchQuery search={data.search} placeholder="Search by collection name">
+            <div class="u-flex u-gap-16 header-right">
+                <div class="header-view-div">
+                    <ViewSelector
+                        view={data.view}
+                        {columns}
+                        hideView={!data.collections.total}
+                        hideColumns={!data.collections.total} />
+                </div>
+                {#if $canWriteCollections}
+                    <Button on:click={() => ($showCreate = true)} event="create_collection">
+                        <span class="icon-plus" aria-hidden="true" />
+                        <span class="text">Create collection</span>
+                    </Button>
+                {/if}
+            </div>
+        </SearchQuery>
+    </ContainerHeader>
 
     {#if data.collections.total}
         {#if data.view === 'grid'}
@@ -47,3 +53,16 @@
             on:click={() => ($showCreate = true)} />
     {/if}
 </Container>
+
+<style>
+    @media (max-width: 480px) {
+        .header-right {
+            flex-direction: column-reverse;
+        }
+    }
+    .header-view-div {
+        display: flex;
+        gap: 16px;
+        margin-bottom: 16px;
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts b/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts
index 03433c2a2..dc67ab4cb 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts
@@ -1,12 +1,13 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
+import { getLimit, getPage, getView, pageToOffset, View, getSearch } from '$lib/helpers/load';
 import type { PageLoad } from './$types';
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
 
 export const load: PageLoad = async ({ params, url, route, depends }) => {
     depends(Dependencies.COLLECTIONS);
     const page = getPage(url);
+    const search = getSearch(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
@@ -14,12 +15,13 @@ export const load: PageLoad = async ({ params, url, route, depends }) => {
         Query.limit(limit),
         Query.offset(offset),
         Query.orderDesc('')
-    ]);
+    ], search);
 
     return {
         offset,
         limit,
         view,
+        search,
         collections
     };
 };

From 44a9d164b50c868f2dfa45c67a84b880f286d62e Mon Sep 17 00:00:00 2001
From: Pushkar <bansalpushkar100@gmail.com>
Date: Fri, 13 Dec 2024 21:03:45 +0530
Subject: [PATCH 2/2] add: emptysearch

---
 .../database-[database]/+page.svelte          | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte
index 5bd2faec4..5a26be807 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
+    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector, EmptySearch } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container, ContainerHeader } from '$lib/layout';
     import { columns, showCreate } from './store';
@@ -7,6 +7,8 @@
     import Grid from './grid.svelte';
     import type { PageData } from './$types';
     import { canWriteCollections } from '$lib/stores/roles';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
 
     export let data: PageData;
 </script>
@@ -44,6 +46,26 @@
             limit={data.limit}
             offset={data.offset}
             total={data.collections.total} />
+    {: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>
+            <div class="u-flex u-gap-16">
+                <Button
+                    external
+                    href="https://appwrite.io/docs/products/databases/collections"
+                    text>
+                    Documentation
+                </Button>
+                <Button
+                    secondary
+                    href={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}`}>
+                    Clear Search
+                </Button>
+            </div>
+        </EmptySearch>
     {:else}
         <Empty
             single