topics route

appwrite · Dec 14, 2023 · 3f068a1 · 3f068a1
1 parent 34cd0c0
commit 3f068a1
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 22 deletions.
diff --git a/src/routes/console/project-[project]/messaging/topics/+page.svelte b/src/routes/console/project-[project]/messaging/topics/+page.svelte
@@ -18,7 +18,8 @@
         SearchQuery,
         PaginationWithLimit,
         Heading,
-        Id
+        Id,
+        ViewSelector
     } from '$lib/components';
     import Create from './create.svelte';
     import { goto } from '$app/navigation';
@@ -27,7 +28,9 @@
     import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
-    import { showCreate } from './store';
+    import { columns, showCreate } from './store';
+    import { View } from '$lib/helpers/load';
+    import Filters from '$lib/components/filters/filters.svelte';
 
     export let data: PageData;
     let selected: string[] = [];
@@ -50,43 +53,78 @@
             </div>
         </div>
         <!-- TODO: fix width of search input in mobile -->
-        <SearchQuery search={data.search} placeholder="Search by name">
+        <SearchQuery search={data.search} placeholder="Search by name or ID">
             <div class="u-flex u-gap-16 is-not-mobile">
+                <Filters query={data.query} {columns} />
+                <ViewSelector
+                    view={View.Table}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
                 <Button on:click={() => ($showCreate = true)} event="create_topic">
                     <span class="icon-plus" aria-hidden="true" />
                     <span class="text">Create topic</span>
                 </Button>
             </div>
         </SearchQuery>
+        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
+            <div class="u-flex-basis-50-percent">
+                <!-- TODO: fix width -->
+                <ViewSelector
+                    view={View.Table}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
+            </div>
+            <div class="u-flex-basis-50-percent">
+                <!-- TODO: fix width -->
+                <Filters query={data.query} {columns} />
+            </div>
+        </div>
     </div>
     {#if data.topics.total}
         <TableScroll>
             <TableHeader>
                 <TableCellHeadCheck
                     bind:selected
                     pageItemsIds={data.topics.topics.map((d) => d.$id)} />
-                <TableCellHead width={140}>ID</TableCellHead>
-                <TableCellHead>Name</TableCellHead>
-                <TableCellHead onlyDesktop>Subscribers</TableCellHead>
-                <TableCellHead onlyDesktop>Created</TableCellHead>
+                {#each $columns as column}
+                    {#if column.show}
+                        <TableCellHead width={column.width}>{column.title}</TableCellHead>
+                    {/if}
+                {/each}
             </TableHeader>
             <TableBody>
-                {#each data.topics.topics as topic}
+                {#each data.topics.topics as topic (topic.$id)}
                     <TableRowLink
                         href={`${base}/console/project-${project}/messaging/topics/topic-${topic.$id}`}>
                         <TableCellCheck bind:selectedIds={selected} id={topic.$id} />
-                        <TableCell title="ID">
-                            <Id value={topic.$id}>
-                                {topic.$id}
-                            </Id>
-                        </TableCell>
-                        <TableCell title="Name">
-                            {topic.name}
-                        </TableCell>
-                        <TableCellText onlyDesktop title="Subscribers">{topic.total}</TableCellText>
-                        <TableCellText onlyDesktop title="Created">
-                            {toLocaleDateTime(topic.$createdAt)}
-                        </TableCellText>
+
+                        {#each $columns as column (column.id)}
+                            {#if column.show}
+                                {#if column.id === '$id'}
+                                    {#key $columns}
+                                        <TableCell title={column.title} width={column.width}>
+                                            <Id value={topic.$id}>{topic.$id}</Id>
+                                        </TableCell>
+                                    {/key}
+                                {:else if column.type === 'datetime'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {#if !topic[column.id]}
+                                            -
+                                        {:else}
+                                            {toLocaleDateTime(topic[column.id])}
+                                        {/if}
+                                    </TableCellText>
+                                {:else}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {topic[column.id]}
+                                    </TableCellText>
+                                {/if}
+                            {/if}
+                        {/each}
                     </TableRowLink>
                 {/each}
             </TableBody>

diff --git a/src/routes/console/project-[project]/messaging/topics/+page.ts b/src/routes/console/project-[project]/messaging/topics/+page.ts
@@ -1,17 +1,27 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
+import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
 import { PAGE_LIMIT } from '$lib/constants';
 import type { Topic } from '../store';
+import { queryParamToMap, queries } from '$lib/components/filters/store';
 
 export const load = async ({ url, route }) => {
     const page = getPage(url);
     const search = getSearch(url);
     const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
 
     const payload = {
-        queries: [Query.limit(limit), Query.offset(offset), Query.orderDesc('')]
+        queries: [
+            Query.limit(limit),
+            Query.offset(offset),
+            Query.orderDesc(''),
+            ...parsedQueries.values()
+        ]
     };
 
     if (search) {
@@ -35,6 +45,7 @@ export const load = async ({ url, route }) => {
         offset,
         limit,
         search,
+        query,
         page,
         topics
     };

diff --git a/src/routes/console/project-[project]/messaging/topics/store.ts b/src/routes/console/project-[project]/messaging/topics/store.ts
@@ -1,3 +1,11 @@
+import type { Column } from '$lib/helpers/types';
 import { writable } from 'svelte/store';
 
 export let showCreate = writable(false);
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Topic ID', type: 'string', show: true, width: 140 },
+    { id: 'name', title: 'Name', type: 'string', show: true, width: 140 },
+    { id: 'total', title: 'Subscribers', type: 'integer', show: true, width: 140 },
+    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
+]);