subscribers route

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

Hide file tree

Showing 4 changed files with 65 additions and 12 deletions.
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
@@ -1,7 +1,14 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Button } from '$lib/elements/forms';
-    import { Empty, EmptySearch, SearchQuery, PaginationWithLimit, Heading } from '$lib/components';
+    import {
+        Empty,
+        EmptySearch,
+        SearchQuery,
+        PaginationWithLimit,
+        Heading,
+        ViewSelector
+    } from '$lib/components';
     import { Container } from '$lib/layout';
     import { ID } from '@appwrite.io/console';
     import type { PageData } from './$types';
@@ -15,6 +22,9 @@
     import UserTargetsModal from '../../../userTargetsModal.svelte';
     import { onMount } from 'svelte';
     import type { Subscriber } from './+page';
+    import Filters from '$lib/components/filters/filters.svelte';
+    import { columns } from './store';
+    import { View } from '$lib/helpers/load';
 
     export let data: PageData;
     let showAdd = false;
@@ -90,12 +100,34 @@
         <!-- TODO: fix width of search input in mobile -->
         <SearchQuery search={data.search} placeholder="Search by name">
             <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={() => (showAdd = true)} event="create_subscriber">
                     <span class="icon-plus" aria-hidden="true" />
                     <span class="text">Add subscriber</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.subscribers.total}
         <Table {data} />

diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts
@@ -1,8 +1,10 @@
+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 { Dependencies, PAGE_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 import type { Target } from '../../../store';
+import { queryParamToMap, queries } from '$lib/components/filters/store';
 
 export type Subscriber = {
     $id: string;
@@ -20,6 +22,23 @@ export const load: PageLoad = async ({ params, url, route, depends, parent }) =>
     const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     const search = getSearch(url);
+    const query = getQuery(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
+
+    const payload = {
+        queries: [
+            Query.limit(limit),
+            Query.offset(offset),
+            Query.orderDesc(''),
+            ...parsedQueries.values()
+        ]
+    };
+
+    if (search) {
+        payload['search'] = search;
+    }
 
     const { topic } = await parent();
 
@@ -35,13 +54,15 @@ export const load: PageLoad = async ({ params, url, route, depends, parent }) =>
                 'X-Appwrite-Project': sdk.forProject.client.config.project,
                 'content-type': 'application/json',
                 'X-Appwrite-Mode': 'admin'
-            }
+            },
+            payload
         );
 
     return {
         offset,
         limit,
         search,
+        query,
         topic,
         subscribers
     };

diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/store.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/store.ts
@@ -1,11 +1,11 @@
+import type { Column } from '$lib/helpers/types';
 import { writable } from 'svelte/store';
-import type { Column } from '$lib/components/viewSelector.svelte';
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Subscriber ID', show: true, width: 140 },
-    { id: 'userName', title: 'Name', show: true, width: 100 },
-    { id: 'targetId', title: 'Target ID', show: true, width: 140 },
-    { id: 'target', title: 'Target', show: true, width: 140 },
-    { id: 'type', title: 'Type', show: true, width: 80 },
-    { id: '$createdAt', title: 'Created', show: true, width: 100 }
+    { id: '$id', title: 'Subscriber ID', type: 'string', show: true, width: 140 },
+    { id: 'userName', title: 'Name', type: 'string', show: true, width: 100 },
+    { id: 'targetId', title: 'Target ID', type: 'string', show: true, width: 140 },
+    { id: 'target', title: 'Target', type: 'string', show: true, width: 140 },
+    { id: 'type', title: 'Type', type: 'string', show: true, width: 80 },
+    { id: '$createdAt', title: 'Created', type: 'string', show: true, width: 100 }
 ]);
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/table.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/table.svelte
@@ -101,7 +101,7 @@
         {/each}
     </TableHeader>
     <TableBody>
-        {#each data.subscribers.subscribers as subscriber}
+        {#each data.subscribers.subscribers as subscriber (subscriber.$id)}
             {@const target = subscriber.target}
             <TableRowLink
                 href={`${base}/console/project-${$project.$id}/auth/user-${subscriber.target.userId}`}>
@@ -133,7 +133,7 @@
                             </TableCell>
                         {:else if column.id === 'type'}
                             <TableCellText title={column.title} width={column.width}>
-                                <ProviderType type={subscriber.target.providerType} />
+                                <ProviderType type={subscriber.target.providerType} size="s" />
                             </TableCellText>
                         {:else if column.id === '$createdAt'}
                             <TableCellText title={column.title} width={column.width}>