Feat #1385 added search to collections

src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte

@@ -1,30 +1,38 @@
 <script lang="ts">
-    import { Empty, PaginationWithLimit } from '$lib/components';
+    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector, EmptySearch } 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';
     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>
 
 <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'}
@@ -38,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
@@ -47,3 +75,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>

src/routes/(console)/project-[project]/databases/database-[database]/+page.ts

@@ -1,25 +1,27 @@
 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);
     const collections = await sdk.forProject.databases.listCollections(params.database, [
         Query.limit(limit),
         Query.offset(offset),
         Query.orderDesc('')
-    ]);
+    ], search);
 
     return {
         offset,
         limit,
         view,
+        search,
         collections
     };
 };