appwrite · TorstenDittmann · Jan 22, 2024 · Jan 9, 2024 · Jan 11, 2024 · Jan 12, 2024
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -161,6 +161,8 @@ export enum Submit {
     UserUpdateStatus = 'submit_user_update_status',
     UserUpdateVerificationEmail = 'submit_user_update_verification_email',
     UserUpdateVerificationPhone = 'submit_user_update_verification_phone',
+    UserTargetCreate = 'submit_user_target_create',
+    UserTargetDelete = 'submit_user_target_delete',
     OrganizationCreate = 'submit_organization_create',
     OrganizationDelete = 'submit_organization_delete',
     OrganizationUpdateName = 'submit_organization_update_name',
@@ -292,6 +294,7 @@ export enum Submit {
     MessagingProviderDelete = 'submit_messaging_provider_delete',
     MessagingProviderUpdate = 'submit_messaging_provider_update',
     MessagingMessageCreate = 'submit_messaging_message_create',
+    MessagingMessageUpdate = 'submit_messaging_message_update',
     MessagingMessageDelete = 'submit_messaging_message_delete',
     MessagingTopicCreate = 'submit_messaging_topic_create',
     MessagingTopicDelete = 'submit_messaging_topic_delete',

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -16,6 +16,7 @@ export enum Dependencies {
     ACCOUNT_SESSIONS = 'dependency:account_sessions',
     USER = 'dependency:user',
     USERS = 'dependency:users',
+    USER_TARGETS = 'dependency:user_targets',
     SESSIONS = 'dependency:sessions',
     TEAM = 'dependency:team',
     TEAMS = 'dependency:teams',

diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
@@ -6,6 +6,10 @@
             component: typeof SvelteComponent<unknown>;
             optional?: boolean;
             disabled?: boolean;
+            actions?: {
+                label: string;
+                onClick: () => Promise<void>;
+            }[];
         }
     >;
 </script>
@@ -127,6 +131,7 @@
 
     $: sortedSteps = [...steps].sort(([a], [b]) => (a > b ? 1 : -1));
     $: isLastStep = $wizard.step === steps.size;
+    $: currentStep = steps.get($wizard.step);
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -175,7 +180,7 @@
             {/each}
             <div class="form-footer">
                 <div class="u-flex u-main-end u-gap-12">
-                    {#if !isLastStep && sortedSteps[$wizard.step - 1]?.[1]?.optional}
+                    {#if !isLastStep && currentStep?.optional}
                         <Button text on:click={() => dispatch('finish')}>
                             Skip optional steps
                         </Button>
@@ -187,6 +192,13 @@
                         <Button secondary on:click={previousStep}>Back</Button>
                     {/if}
 
+                    {#if currentStep?.actions}
+                        {#each currentStep.actions as action}
+                            <Button secondary on:click={action.onClick}>
+                                {action.label}</Button>
+                        {/each}
+                    {/if}
+
                     <Button submit disabled={$wizard.nextDisabled}>
                         {isLastStep ? finalAction : 'Next'}
                     </Button>

diff --git a/src/routes/console/project-[project]/auth/user-[user]/header.svelte b/src/routes/console/project-[project]/auth/user-[user]/header.svelte
@@ -19,6 +19,11 @@
             title: 'Memberships',
             event: 'memberships'
         },
+        {
+            href: `${path}/targets`,
+            title: 'Targets',
+            event: 'targets'
+        },
         {
             href: `${path}/sessions`,
             title: 'Sessions',

diff --git a/src/routes/console/project-[project]/auth/user-[user]/targets/+page.svelte b/src/routes/console/project-[project]/auth/user-[user]/targets/+page.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Empty,
+        EmptySearch,
+        PaginationWithLimit,
+        Heading,
+        ViewSelector,
+        EmptyFilter
+    } from '$lib/components';
+    import { Container } from '$lib/layout';
+    import type { PageData } from './$types';
+    import Table from './table.svelte';
+    import { Filters, hasPageQueries } from '$lib/components/filters';
+    import { columns } from './store';
+    import { View } from '$lib/helpers/load';
+    import Create from './create.svelte';
+
+    export let data: PageData;
+    let showAdd = false;
+</script>
+
+<Container>
+    <div class="u-flex u-flex-vertical">
+        <div class="u-flex u-main-space-between">
+            <Heading tag="h2" size="5">Targets</Heading>
+            <!-- TODO: Remove u-hide to add creating a target -->
+            <div class="is-only-mobile u-hide">
+                <Button on:click={() => (showAdd = true)} event="create_user_target">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Add target</span>
+                </Button>
+            </div>
+            <!-- TODO: Remove when searching is added -->
+            <div class="u-flex u-main-end u-gap-16 is-not-mobile">
+                <Filters query={data.query} {columns} />
+                <div>
+                    <ViewSelector
+                        view={View.Table}
+                        {columns}
+                        hideView
+                        allowNoColumns
+                        showColsTextMobile />
+                    <div class="u-hide">
+                        <Button on:click={() => (showAdd = true)} event="create_user_target">
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text">Add target</span>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- TODO: Add searching when API supports it -->
+        <!-- <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_user_target">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Add target</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.targets.total}
+        <Table {data} />
+
+        <PaginationWithLimit
+            name="Targets"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.targets.total} />
+    {:else if $hasPageQueries}
+        <EmptyFilter resource="targets" />
+    {:else if data.search}
+        <EmptySearch>
+            <div class="u-text-center">
+                <b>Sorry, we couldn't find '{data.search}'</b>
+                <p>There are no targets that match your search.</p>
+            </div>
+            <Button
+                secondary
+                href={`/console/project-${$page.params.project}/auth/user-${$page.params.user}/targets`}>
+                Clear Search
+            </Button>
+        </EmptySearch>
+    {:else}
+        <!-- TODO: update docs link -->
+        <Empty
+            single
+            on:click={() => (showAdd = true)}
+            href="https://appwrite.io/docs/references/cloud/client-web/teams"
+            target="subscriber" />
+    {/if}
+</Container>
+
+<Create bind:show={showAdd} on:close={() => (showAdd = false)} />
+
diff --git a/src/routes/console/project-[project]/auth/user-[user]/targets/+page.ts b/src/routes/console/project-[project]/auth/user-[user]/targets/+page.ts
@@ -0,0 +1,83 @@
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+import { queryParamToMap, queries } from '$lib/components/filters';
+import type { Provider, Target } from '$routes/console/project-[project]/messaging/store';
+
+export const load: PageLoad = async ({ params, url, route, depends }) => {
+    depends(Dependencies.USER_TARGETS);
+    const page = getPage(url);
+    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;
+    }
+
+    // TODO: remove when the API is ready with data
+    // This allows us to mock w/ data and when search returns 0 results
+    const targets: { targets: Target[]; total: number } =
+        await sdk.forProject.client.call(
+            'GET',
+            new URL(
+                `${sdk.forProject.client.config.endpoint}/users/${params.user}/targets`
+            ),
+            {
+                'X-Appwrite-Project': sdk.forProject.client.config.project,
+                'content-type': 'application/json',
+                'X-Appwrite-Mode': 'admin'
+            },
+            payload
+        );
+
+    const promisesById: Record<string, Promise<any>> = {};
+    targets.targets.forEach((target) => {
+        if (target.providerId && !promisesById[target.providerId]) {
+            promisesById[target.providerId] = sdk.forProject.client.call(
+                'GET',
+                new URL(
+                    `${sdk.forProject.client.config.endpoint}/messaging/providers/${target.providerId}`
+                ),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                }
+            );
+        }
+    });
+
+    const providersById: Record<string, Provider> = {};
+    const resolved = await Promise.allSettled(Object.values(promisesById));
+    resolved.forEach((result) => {
+        if (result.status === 'fulfilled') {
+            const provider = result.value;
+            providersById[provider.$id] = provider;
+        }
+    });
+
+    return {
+        offset,
+        limit,
+        search,
+        query,
+        targets,
+        providersById,
+    };
+};