Add wizard for creating provider

appwrite · Nov 30, 2023 · a3619de · a3619de
1 parent 3b7d4bf
commit a3619de
Show file tree

Hide file tree

Showing 11 changed files with 1,162 additions and 84 deletions.
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -282,5 +282,8 @@ export enum Submit {
     SmsResetTemplate = 'submit_sms_reset_template',
     SmsUpdateInviteTemplate = 'submit_sms_update_invite_template',
     SmsUpdateLoginTemplate = 'submit_sms_update_login_template',
-    SmsUpdateVerificationTemplate = 'submit_sms_update_verification_template'
+    SmsUpdateVerificationTemplate = 'submit_sms_update_verification_template',
+    MessagingProviderCreate = 'submit_messaging_provider_create',
+    MessagingProviderDelete = 'submit_messaging_provider_delete',
+    MessagingProviderUpdate = 'submit_messaging_provider_update'
 }
diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+    import { app } from '$lib/stores/app';
+    import { base } from '$app/paths';
+
     export let name: string;
     export let group: string;
     export let value: string | number | boolean;
     export let disabled = false;
     export let padding = 1;
     export let icon: string = null;
+    export let imageIcon: string = null;
     export let fullHeight = true;
     export let borderRadius: 'xsmall' | 'small' | 'medium' | 'large' = 'small';
     export let backgroundColor: string = null;
@@ -47,5 +51,12 @@
         {#if icon}
             <span class={`icon-${icon} u-margin-inline-start-auto`} aria-hidden="true" />
         {/if}
+        {#if imageIcon}
+            <img
+                class="u-margin-inline-start-auto"
+                style:--p-text-size="1.25rem"
+                src={`${base}/icons/${$app.themeInUse}/color/${imageIcon}.svg`}
+                alt={imageIcon} />
+        {/if}
     </div>
 </label>
diff --git a/src/routes/console/project-[project]/messaging/providers/+page.svelte b/src/routes/console/project-[project]/messaging/providers/+page.svelte
@@ -21,36 +21,32 @@
         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 { columns } from './store';
     import { Pill } from '$lib/elements';
     import Filters from '../../databases/database-[database]/collection-[collection]/(filters)/filters.svelte';
     import Provider from '../provider.svelte';
     import ProviderType from '../providerType.svelte';
+    import CreateProviderDropdown from './createProviderDropdown.svelte';
 
     export let data: PageData;
+
+    let showCreateDropdownMobile = false;
+    let showCreateDropdownDesktop = false;
+    let showCreateDropdownEmpty = false;
     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>
+                <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
             </div>
         </div>
         <!-- TODO: fix width of search input in mobile -->
@@ -64,10 +60,7 @@
                     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>
+                <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
             </div>
         </SearchQuery>
         <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
@@ -148,7 +141,7 @@
             limit={data.limit}
             offset={data.offset}
             total={data.providers.total} />
-    {:else if data.search}
+    {:else if data.search && data.search != 'empty'}
         <EmptySearch>
             <div class="u-text-center">
                 <b>Sorry, we couldn't find '{data.search}'</b>
@@ -160,11 +153,33 @@
         </EmptySearch>
     {:else}
         <!-- TODO: Update docs links -->
-        <Empty
-            single
-            href="https://appwrite.io/docs/references/cloud/client-web/providers"
-            target="provider" />
+        <Empty single target="provider">
+            <div class="u-text-center">
+                <Heading size="7" tag="h2" trimmed={false}>
+                    Create your first provider to get started.
+                </Heading>
+                <p class="body-text-2 u-bold u-margin-block-start-4">
+                    Need a hand? Learn more in our documentation.
+                </p>
+            </div>
+            <div class="u-flex u-flex-wrap u-gap-16 u-main-center">
+                <Button
+                    external
+                    href="https://appwrite.io/docs/references/cloud/client-web/providers"
+                    text
+                    event="empty_documentation"
+                    ariaLabel={`create provider`}>
+                    Documentation
+                </Button>
+                <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownEmpty}>
+                    <Button
+                        secondary
+                        on:click={() => (showCreateDropdownEmpty = !showCreateDropdownEmpty)}
+                        event="create_provider">
+                        <span class="text">Create provider</span>
+                    </Button>
+                </CreateProviderDropdown>
+            </div>
+        </Empty>
     {/if}
 </Container>
-
-<Create bind:showCreate={$showCreate} on:created={topicCreated} />
diff --git a/src/routes/console/project-[project]/messaging/providers/+page.ts b/src/routes/console/project-[project]/messaging/providers/+page.ts
@@ -18,12 +18,39 @@ export const load = async ({ url, route }) => {
     const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
+    // 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('')]
+        };
+
+        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,
         page,
         view,
-        providers: data
+        providers
     };
 };