Add messaging providers route

2026-06-06 19:27:48 +00:00 · 2023-12-19 16:15:08 -08:00
parent 7532b8e36f
commit c99ea5b1d8
4 changed files with 324 additions and 0 deletions
@@ -0,0 +1,169 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import {
+        TableHeader,
+        TableBody,
+        TableRowLink,
+        TableCellHead,
+        TableCellText,
+        TableCell,
+        TableCellHeadCheck,
+        TableScroll,
+        TableCellCheck
+    } from '$lib/elements/table';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Empty,
+        EmptySearch,
+        SearchQuery,
+        PaginationWithLimit,
+        Heading,
+        Id,
+        ViewSelector
+    } from '$lib/components';
+    import Create from './create.svelte';
+    import { goto } from '$app/navigation';
+    import { Container } from '$lib/layout';
+    import { base } from '$app/paths';
+    import type { Models } from '@appwrite.io/console';
+    import type { PageData } from './$types';
+    import { showCreate, columns } from './store';
+    import { Pill } from '$lib/elements';
+    import Provider from '../provider.svelte';
+    import ProviderType from '../providerType.svelte';
+    import Filters from '$lib/components/filters/filters.svelte';
+
+    export let data: PageData;
+    let selected: string[] = [];
+
+    const project = $page.params.project;
+    const topicCreated = async (event: CustomEvent<Models.Team<Record<string, unknown>>>) => {
+        await goto(`${base}/console/project-${project}/messaging/topics/topic-${event.detail.$id}`);
+    };
+</script>
+
+<Container>
+    <div class="u-flex u-flex-vertical">
+        <div class="u-flex u-main-space-between">
+            <Heading tag="h2" size="5">Providers</Heading>
+            <div class="is-only-mobile">
+                <Button on:click={() => ($showCreate = true)} event="create_provider">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create provider</span>
+                </Button>
+            </div>
+        </div>
+        <!-- TODO: fix width of search input in mobile -->
+        <SearchQuery search={data.search} placeholder="Search provider">
+            <div class="u-flex u-gap-16 is-not-mobile">
+                <Filters query={data.query} {columns} />
+                <ViewSelector
+                    view={data.view}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
+                <Button on:click={() => ($showCreate = true)} event="create_provider">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create provider</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={data.view}
+                    {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.providers.total}
+        <TableScroll>
+            <TableHeader>
+                <TableCellHeadCheck
+                    bind:selected
+                    pageItemsIds={data.providers.providers.map((d) => d.$id)} />
+                {#each $columns as column}
+                    {#if column.show}
+                        <TableCellHead width={column.width}>{column.title}</TableCellHead>
+                    {/if}
+                {/each}
+            </TableHeader>
+            <TableBody>
+                {#each data.providers.providers as provider (provider.$id)}
+                    <TableRowLink
+                        href={`${base}/console/project-${project}/messaging/providers/provider-${provider.$id}`}>
+                        <TableCellCheck bind:selectedIds={selected} id={provider.$id} />
+                        {#each $columns as column}
+                            {#if column.show}
+                                {#if column.id === '$id'}
+                                    {#key $columns}
+                                        <TableCell title={column.title} width={column.width}>
+                                            <Id value={provider.$id}>{provider.$id}</Id>
+                                        </TableCell>
+                                    {/key}
+                                {:else if column.id === 'provider'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        <Provider provider={provider.provider} size="s" />
+                                    </TableCellText>
+                                {:else if column.id === 'type'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        <ProviderType type={provider.type} size="s" />
+                                    </TableCellText>
+                                {:else if column.id === 'enabled'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        <Pill success={provider.enabled}>
+                                            {#if provider.enabled}
+                                                <span class="icon-check-circle" aria-hidden="true"
+                                                ></span>
+                                            {/if}
+                                            <span class="text u-trim">
+                                                {provider.enabled ? 'enabled' : 'disabled'}
+                                            </span>
+                                        </Pill>
+                                    </TableCellText>
+                                {:else}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {provider[column.id]}
+                                    </TableCellText>
+                                {/if}
+                            {/if}
+                        {/each}
+                    </TableRowLink>
+                {/each}
+            </TableBody>
+        </TableScroll>
+
+        <PaginationWithLimit
+            name="Providers"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.providers.total} />
+    {:else if data.search}
+        <EmptySearch>
+            <div class="u-text-center">
+                <b>Sorry, we couldn't find '{data.search}'</b>
+                <p>There are no providers that match your search.</p>
+            </div>
+            <Button secondary href={`/console/project-${$page.params.project}/messaging/providers`}>
+                Clear search
+            </Button>
+        </EmptySearch>
+    {:else}
+        <!-- TODO: Update docs links -->
+        <Empty
+            single
+            href="https://appwrite.io/docs/references/cloud/client-web/providers"
+            target="provider" />
+    {/if}
+</Container>
+
+<Create bind:showCreate={$showCreate} on:created={topicCreated} />
@@ -0,0 +1,75 @@
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import {
+    View,
+    getLimit,
+    getPage,
+    getQuery,
+    getSearch,
+    getView,
+    pageToOffset
+} from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import { providersById, type Provider } from '../store';
+import { queries, queryParamToMap } from '$lib/components/filters/store';
+
+const providers = Object.values(providersById);
+
+let data: { providers: Provider[]; total: number } = {
+    providers: [...providers],
+    total: providers.length
+};
+
+export const load = async ({ url, route }) => {
+    const page = getPage(url);
+    const search = getSearch(url);
+    const view = getView(url, route, View.Grid);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
+
+    // TODO: get rid of demo data
+    let providers: { providers: Provider[]; total: number } = { providers: [], total: 0 };
+    if (search == 'demo') {
+        providers = data;
+    } else {
+        const params = {
+            queries: [
+                Query.limit(limit),
+                Query.offset(offset),
+                Query.orderDesc(''),
+                ...parsedQueries.values()
+            ]
+        };
+
+        if (search) {
+            params['search'] = search;
+        }
+
+        const response = await sdk.forProject.client.call(
+            'GET',
+            new URL(sdk.forProject.client.config.endpoint + '/messaging/providers'),
+            {
+                'X-Appwrite-Project': sdk.forProject.client.config.project,
+                'content-type': 'application/json',
+                'X-Appwrite-Mode': 'admin'
+            },
+            params
+        );
+
+        providers = response;
+    }
+
+    return {
+        offset,
+        limit,
+        search,
+        query,
+        page,
+        view,
+        providers: providers
+    };
+};
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Modal, CustomId } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { InputText, Button, FormList } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { ID } from '@appwrite.io/console';
+    import { createEventDispatcher } from 'svelte';
+
+    export let showCreate = false;
+
+    const dispatch = createEventDispatcher();
+
+    let name: string, id: string, error: string;
+    let showCustomId = false;
+
+    const create = async () => {
+        try {
+            const team = await sdk.forProject.teams.create(id ?? ID.unique(), name);
+            name = '';
+            showCreate = false;
+            showCustomId = false;
+            addNotification({
+                type: 'success',
+                message: `${team.name} has been created`
+            });
+            trackEvent(Submit.TeamCreate, {
+                customId: !!id
+            });
+            dispatch('created', team);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.TeamCreate);
+        }
+    };
+
+    $: if (!showCreate) {
+        showCustomId = false;
+        error = null;
+    }
+</script>
+
+<Modal title="Create team" {error} size="big" bind:show={showCreate} onSubmit={create}>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="Enter name"
+            autofocus={true}
+            required
+            bind:value={name} />
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}
+                    ><span class="icon-pencil" aria-hidden="true" />
+                    <span class="text"> Team ID </span>
+                </Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showCustomId} name="Team" bind:id />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
@@ -0,0 +1,12 @@
+import { writable } from 'svelte/store';
+import type { Column } from '$lib/helpers/types';
+
+export let showCreate = writable(false);
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Provider ID', type: 'string', show: true },
+    { id: 'name', title: 'Name', type: 'string', show: true },
+    { id: 'provider', title: 'Provider', type: 'string', show: true },
+    { id: 'type', title: 'Type', type: 'string', show: true },
+    { id: 'enabled', title: 'Status', type: 'boolean', show: true }
+]);