From 5019d4c2f898ff3efca6c1c346513eb7d6c9c132 Mon Sep 17 00:00:00 2001 From: Steven Nguyen Date: Mon, 8 Jan 2024 16:46:31 -0800 Subject: [PATCH 01/12] Add a route to show user targets There's some code for creating a target, but it must go through design first. --- src/lib/actions/analytics.ts | 2 + src/lib/constants.ts | 1 + .../auth/user-[user]/header.svelte | 5 + .../auth/user-[user]/targets/+page.svelte | 118 ++++++++++++ .../auth/user-[user]/targets/+page.ts | 83 ++++++++ .../auth/user-[user]/targets/create.svelte | 146 +++++++++++++++ .../auth/user-[user]/targets/store.ts | 10 + .../auth/user-[user]/targets/table.svelte | 177 ++++++++++++++++++ 8 files changed, 542 insertions(+) create mode 100644 src/routes/console/project-[project]/auth/user-[user]/targets/+page.svelte create mode 100644 src/routes/console/project-[project]/auth/user-[user]/targets/+page.ts create mode 100644 src/routes/console/project-[project]/auth/user-[user]/targets/create.svelte create mode 100644 src/routes/console/project-[project]/auth/user-[user]/targets/store.ts create mode 100644 src/routes/console/project-[project]/auth/user-[user]/targets/table.svelte diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts index 39551514b2..44ad9b0da0 100644 --- 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', diff --git a/src/lib/constants.ts b/src/lib/constants.ts index da342ce92c..260bae7f1c 100644 --- 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/routes/console/project-[project]/auth/user-[user]/header.svelte b/src/routes/console/project-[project]/auth/user-[user]/header.svelte index 06f7d48f2e..e3e0641fc9 100644 --- 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 new file mode 100644 index 0000000000..e47d65f9d1 --- /dev/null +++ b/src/routes/console/project-[project]/auth/user-[user]/targets/+page.svelte @@ -0,0 +1,118 @@ + + + +
+
+ Targets +
+ +
+
+ + + +
+ +
+ +
+ +
+
+
+
+
+ + +
+
+ + +
+
+
+ {#if data.targets.total} + + + + {:else if $hasPageQueries} + + {:else if data.search} + +
+ Sorry, we couldn't find '{data.search}' +

There are no targets that match your search.

+
+ + + {:else} + + (showAdd = true)} + href="https://appwrite.io/docs/references/cloud/client-web/teams" + target="subscriber" /> + {/if} + + + (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 new file mode 100644 index 0000000000..55a04e0f56 --- /dev/null +++ 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> = {}; + 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 = {}; + 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, + }; +}; diff --git a/src/routes/console/project-[project]/auth/user-[user]/targets/create.svelte b/src/routes/console/project-[project]/auth/user-[user]/targets/create.svelte new file mode 100644 index 0000000000..d8973633cf --- /dev/null +++ b/src/routes/console/project-[project]/auth/user-[user]/targets/create.svelte @@ -0,0 +1,146 @@ + + + + + + {#if providerType === ProviderTypes.Push} + + + + {:else if providerType === ProviderTypes.Email} + + {:else if providerType === ProviderTypes.Sms} + + {/if} + + {#if !showCustomId} +
+ (showCustomId = !showCustomId)} + > +
+ {:else} + + {/if} + + + + + + diff --git a/src/routes/console/project-[project]/auth/user-[user]/targets/store.ts b/src/routes/console/project-[project]/auth/user-[user]/targets/store.ts new file mode 100644 index 0000000000..425b4ccbd4 --- /dev/null +++ b/src/routes/console/project-[project]/auth/user-[user]/targets/store.ts @@ -0,0 +1,10 @@ +import type { Column } from '$lib/helpers/types'; +import { writable } from 'svelte/store'; + +export const columns = writable([ + { id: '$id', title: 'Target ID', type: 'string', show: true, width: 140 }, + { id: 'target', title: 'Target', type: 'string', show: true, filter: false, width: 140 }, + { id: 'providerType', title: 'Type', type: 'string', show: true, filter: true, width: 80 }, + { id: 'provider', title: 'Provider', type: 'string', show: true, filter: false, width: 80 }, + { id: '$createdAt', title: 'Created', type: 'string', show: true, width: 100 } +]); diff --git a/src/routes/console/project-[project]/auth/user-[user]/targets/table.svelte b/src/routes/console/project-[project]/auth/user-[user]/targets/table.svelte new file mode 100644 index 0000000000..7382c498b9 --- /dev/null +++ b/src/routes/console/project-[project]/auth/user-[user]/targets/table.svelte @@ -0,0 +1,177 @@ + + + + + d.$id)} /> + {#each $columns as column} + {#if column.show} + {column.title} + {/if} + {/each} + + + {#each data.targets.targets as target (target.$id)} + {@const provider = data.providersById[target.providerId]} + + + + {#each $columns as column} + {#if column.show} + {#if column.id === '$id'} + {#key $columns} + + + {target[column.id]} + + + {/key} + {:else if column.id === 'target'} + + {#if target.providerType === ProviderTypes.Push} + {target.name} + {:else} + {target.identifier} + {/if} + + {:else if column.id === 'providerType'} + + + + {:else if column.id === 'provider'} + + {#if provider} + + {/if} + + {:else if column.id === '$createdAt'} + + {toLocaleDateTime(target[column.id])} + + {:else} + + {target[column.id]} + + {/if} + {/if} + {/each} + + {/each} + + + + 0}> +
+
+ {selectedIds.length} +

+ + {selectedIds.length > 1 ? 'subscribers' : 'subscriber'} + + selected +

+
+ +
+ + +
+
+ + + +

+ Are you sure you want to delete {selectedIds.length} + {selectedIds.length > 1 ? 'targets' : 'target'}? +

+ + + + + From 0cb05f1180fb27c2cff112aa7a3063707c3a9140 Mon Sep 17 00:00:00 2001 From: Steven Nguyen Date: Thu, 11 Jan 2024 01:57:30 +0000 Subject: [PATCH 02/12] Allow topics with empty string We must pass undefined because the server won't accept an empty string. Undefined will make the server use the default value, which is an empty string. --- .../project-[project]/messaging/topics/create.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/routes/console/project-[project]/messaging/topics/create.svelte b/src/routes/console/project-[project]/messaging/topics/create.svelte index 2bb52245e2..3d9dd416e3 100644 --- a/src/routes/console/project-[project]/messaging/topics/create.svelte +++ b/src/routes/console/project-[project]/messaging/topics/create.svelte @@ -1,8 +1,8 @@ -

Grant access to any authenticated or anonymous user.

+

Select recipients for this message from your users.

Date: Thu, 18 Jan 2024 00:07:53 +0000 Subject: [PATCH 09/12] Remove bullet points from the topics modal --- .../messaging/topicsModal.svelte | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/src/routes/console/project-[project]/messaging/topicsModal.svelte b/src/routes/console/project-[project]/messaging/topicsModal.svelte index f1141b26e0..7285cb44d0 100644 --- a/src/routes/console/project-[project]/messaging/topicsModal.svelte +++ b/src/routes/console/project-[project]/messaging/topicsModal.svelte @@ -1,9 +1,9 @@ @@ -127,6 +131,7 @@ $: sortedSteps = [...steps].sort(([a], [b]) => (a > b ? 1 : -1)); $: isLastStep = $wizard.step === steps.size; + $: currentStep = steps.get($wizard.step); @@ -175,7 +180,7 @@ {/each}
- {#if !isLastStep && sortedSteps[$wizard.step - 1]?.[1]?.optional} + {#if !isLastStep && currentStep?.optional} @@ -187,6 +192,13 @@ {/if} + {#if currentStep?.actions} + {#each currentStep.actions as action} + + {/each} + {/if} + From 708aaf41f07cf15b7f079e6046a38863b828d0f0 Mon Sep 17 00:00:00 2001 From: Steven Nguyen Date: Thu, 18 Jan 2024 18:26:28 -0800 Subject: [PATCH 12/12] Add support for saving messages as draft --- src/lib/actions/analytics.ts | 1 + .../project-[project]/messaging/create.svelte | 114 ------- .../messaging/createMessageDropdown.svelte | 7 +- .../messaging/message-[message]/+layout.ts | 44 +++ .../messaging/message-[message]/+page.svelte | 97 +++++- .../message-[message]/emailPreview.svelte | 20 +- .../message-[message]/pushPreview.svelte | 22 +- .../message-[message]/smsPreview.svelte | 20 +- .../project-[project]/messaging/store.ts | 8 + .../project-[project]/messaging/wizard.svelte | 306 ++++++++++++++++++ .../messaging/wizard/emailFormList.svelte | 36 ++- .../messaging/wizard/pushFormList.svelte | 36 ++- .../messaging/wizard/smsFormList.svelte | 38 ++- .../messaging/wizard/step2.svelte | 10 +- .../messaging/wizard/step3.svelte | 5 +- .../messaging/wizard/store.ts | 6 +- 16 files changed, 566 insertions(+), 204 deletions(-) delete mode 100644 src/routes/console/project-[project]/messaging/create.svelte create mode 100644 src/routes/console/project-[project]/messaging/wizard.svelte diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts index 44ad9b0da0..0afba8018e 100644 --- a/src/lib/actions/analytics.ts +++ b/src/lib/actions/analytics.ts @@ -294,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/routes/console/project-[project]/messaging/create.svelte b/src/routes/console/project-[project]/messaging/create.svelte deleted file mode 100644 index 52e96a0292..0000000000 --- a/src/routes/console/project-[project]/messaging/create.svelte +++ /dev/null @@ -1,114 +0,0 @@ - - - diff --git a/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte b/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte index 7a596496af..7cd6d5814c 100644 --- a/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte +++ b/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte @@ -3,8 +3,8 @@ import { Button } from '$lib/elements/forms'; import { wizard } from '$lib/stores/wizard'; import { providers } from './providers/store'; - import Create from './create.svelte'; - import { messageParams, providerType, targetsById } from './wizard/store'; + import Wizard from './wizard.svelte'; + import { messageParams, operation, providerType, targetsById } from './wizard/store'; import { ProviderTypes } from './providerType.svelte'; import { topicsById } from './store'; @@ -30,6 +30,7 @@ ) return; $providerType = type; + $operation = 'create'; $topicsById = {}; $targetsById = {}; const common = { @@ -60,7 +61,7 @@ break; } showCreateDropdown = false; - wizard.start(Create); + wizard.start(Wizard); }}> {option.name} diff --git a/src/routes/console/project-[project]/messaging/message-[message]/+layout.ts b/src/routes/console/project-[project]/messaging/message-[message]/+layout.ts index 21e6f6aad6..909278a261 100644 --- a/src/routes/console/project-[project]/messaging/message-[message]/+layout.ts +++ b/src/routes/console/project-[project]/messaging/message-[message]/+layout.ts @@ -22,7 +22,51 @@ export const load: LayoutLoad = async ({ params, depends }) => { } ); + const topicsById = {}; + const topicsPromise = Promise.allSettled( + response.topics.map((topicId) => { + return sdk.forProject.client.call( + 'GET', + new URL(`${sdk.forProject.client.config.endpoint}/messaging/topics/${topicId}`), + { + 'X-Appwrite-Project': sdk.forProject.client.config.project, + 'content-type': 'application/json', + 'X-Appwrite-Mode': 'admin' + } + ); + }) + ).then((results) => { + results.forEach((result) => { + if (result.status === 'fulfilled') { + topicsById[result.value.$id] = result.value; + } + }); + }); + + const targetsById = {}; + const targetsPromise = sdk.forProject.client + .call( + 'GET', + new URL( + `${sdk.forProject.client.config.endpoint}/messaging/messages/${params.message}/targets` + ), + { + 'X-Appwrite-Project': sdk.forProject.client.config.project, + 'content-type': 'application/json', + 'X-Appwrite-Mode': 'admin' + } + ) + .then((response) => { + response.targets.forEach((target) => { + targetsById[target.$id] = target; + }); + }); + + await Promise.allSettled([topicsPromise, targetsPromise]); + return { + topicsById, + targetsById, header: Header, breadcrumbs: Breadcrumbs, message: response diff --git a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte index c949eba855..3db50213c1 100644 --- a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte +++ b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte @@ -7,16 +7,107 @@ import { ProviderTypes } from '../providerType.svelte'; import SMSPreview from './smsPreview.svelte'; import PushPreview from './pushPreview.svelte'; + import { + MessageStatuses, + messageParams, + operation, + providerType, + targetsById + } from '../wizard/store'; + import { topicsById } from '../store'; + import { wizard } from '$lib/stores/wizard'; + import Wizard from '../wizard.svelte'; + import type { PageData } from './$types'; + + export let data: PageData; + + async function onEdit() { + $operation = 'update'; + $providerType = $message.providerType; + $topicsById = {}; + $targetsById = {}; + + $topicsById = data.topicsById; + $targetsById = data.targetsById; + + $messageParams[$providerType] = { + messageId: $message.$id, + topics: $message.topics, + users: $message.users, + targets: $message.targets, + description: $message.description, + status: MessageStatuses.DRAFT, + scheduledAt: $message.scheduledAt + }; + + switch ($providerType) { + case ProviderTypes.Email: + { + const { data } = $message; + const params = ['subject', 'content', 'html']; + params.forEach((key) => { + if (typeof data[key] !== 'undefined') { + $messageParams[$providerType][key] = data[key]; + } + }); + } + break; + case ProviderTypes.Sms: + { + const { data } = $message; + const params = ['content']; + params.forEach((key) => { + if (typeof data[key] !== 'undefined') { + $messageParams[$providerType][key] = data[key]; + } + }); + } + break; + case ProviderTypes.Push: + { + const { data } = $message; + const params = [ + 'title', + 'body', + 'action', + 'icon', + 'sound', + 'color', + 'tag', + 'badge' + ]; + params.forEach((key) => { + if (typeof data[key] !== 'undefined') { + $messageParams[$providerType][key] = data[key]; + } + }); + const dataEntries: [string, string][] = []; + Object.entries(data['data'] ?? {}).forEach(([key, value]) => { + dataEntries.push([key, value.toString()]); + }); + $messageParams[$providerType]['data'] = dataEntries || [['', '']]; + } + break; + } + + wizard.start(Wizard); + } {#if $message.providerType === ProviderTypes.Email} - + {:else if $message.providerType === ProviderTypes.Sms} - + {:else if $message.providerType === ProviderTypes.Push} - + {/if} diff --git a/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte index 153a14def8..f3914e6d09 100644 --- a/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte +++ b/src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte @@ -1,7 +1,10 @@ @@ -14,20 +17,17 @@ id="subject" label="Subject" disabled={true} - bind:value={$message.data.subject}> + bind:value={message.data.subject}> + bind:value={message.data.content}> +
+ +
- - - - - diff --git a/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte index b5695ed3fb..f83000aed9 100644 --- a/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte +++ b/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte @@ -1,33 +1,33 @@
Preview
- +
- + + bind:value={message.data.body}> +
+ +
- - - - - diff --git a/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte index 5648c9bf23..b5c9bc6ba9 100644 --- a/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte +++ b/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte @@ -1,14 +1,17 @@
Preview - +
@@ -16,14 +19,11 @@ id="message" label="Message" disabled={true} - bind:value={$message.data.content}> + bind:value={message.data.content}> +
+ +
- - - - - diff --git a/src/routes/console/project-[project]/messaging/store.ts b/src/routes/console/project-[project]/messaging/store.ts index 6c14fb41e7..cb2b4af1d6 100644 --- a/src/routes/console/project-[project]/messaging/store.ts +++ b/src/routes/console/project-[project]/messaging/store.ts @@ -38,6 +38,14 @@ export type Message = { body?: string; subject?: string; title?: string; + html?: boolean; + data?: Record; + action?: string; + icon?: string; + sound?: string; + color?: string; + tag?: string; + badge?: string; }; }; diff --git a/src/routes/console/project-[project]/messaging/wizard.svelte b/src/routes/console/project-[project]/messaging/wizard.svelte new file mode 100644 index 0000000000..61956df099 --- /dev/null +++ b/src/routes/console/project-[project]/messaging/wizard.svelte @@ -0,0 +1,306 @@ + + + diff --git a/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte index 950c749f8e..c951d1f431 100644 --- a/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte +++ b/src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte @@ -16,7 +16,13 @@ - + Targets ('create'); export const providerType = writable(null); export const targetsById = writable>({}); export const messageParams = writable<{