From c66f5e7e86208958565fb788eeb3fcdcfd41f1e7 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 7 Feb 2024 14:05:05 -0800
Subject: [PATCH 1/2] Show topics in message details

---
 .../messaging/message-[message]/+page.svelte  |  2 +
 .../messaging/message-[message]/topics.svelte | 59 +++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 src/routes/console/project-[project]/messaging/message-[message]/topics.svelte

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 854f2922f8..3c37676f27 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
@@ -13,6 +13,7 @@
     import type { PageData } from './$types';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { MessageType, MessagingProviderType } from '@appwrite.io/console';
+    import Topics from './topics.svelte';
 
     export let data: PageData;
 
@@ -106,5 +107,6 @@
             message={$message}
             onEdit={$message.status === MessageType.Draft ? onEdit : null} />
     {/if}
+    <Topics topics={Object.values(data.topicsById)} />
     <Delete />
 </Container>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/topics.svelte b/src/routes/console/project-[project]/messaging/message-[message]/topics.svelte
new file mode 100644
index 0000000000..75589a7e9d
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/topics.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { Models } from '@appwrite.io/console';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { CardGrid, Heading, Empty, PaginationInline, Id } from '$lib/components';
+
+    export let topics: Models.Topic[];
+
+    let offset = 0;
+    const limit = 10;
+</script>
+
+<CardGrid>
+    <Heading tag="h6" size="7" id="variables">Topics</Heading>
+    <svelte:fragment slot="aside">
+        {@const sum = topics.length}
+        {#if sum}
+            <div class="u-flex u-flex-vertical u-gap-24">
+                <Table noMargin noStyles>
+                    <TableHeader>
+                        <TableCellHead>ID</TableCellHead>
+                        <TableCellHead>Name</TableCellHead>
+                        <TableCellHead>Subscribers</TableCellHead>
+                    </TableHeader>
+                    <TableBody>
+                        {#each topics.slice(offset, offset + limit) as topic (topic.$id)}
+                            <TableRow>
+                                <TableCell title="id">
+                                    <Id value={topic.$id}>{topic.$id}</Id>
+                                </TableCell>
+
+                                <TableCellText title="name">
+                                    {topic.name}
+                                </TableCellText>
+
+                                <TableCellText title="subscribers">
+                                    {topic.total}
+                                </TableCellText>
+                            </TableRow>
+                        {/each}
+                    </TableBody>
+                </Table>
+                <div class="u-flex u-main-space-between">
+                    <p class="text">Total topics: {sum}</p>
+                    <PaginationInline {sum} {limit} bind:offset />
+                </div>
+            </div>
+        {:else}
+            <Empty>Edit the message to add a Topic</Empty>
+        {/if}
+    </svelte:fragment>
+</CardGrid>

From 4f81e48e8a62c53be229874148d993901dd44249 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 7 Feb 2024 14:25:41 -0800
Subject: [PATCH 2/2] Show targets in message details

---
 .../messaging/message-[message]/+layout.ts    | 15 ++++-
 .../messaging/message-[message]/+page.svelte  |  2 +
 .../message-[message]/targets.svelte          | 62 +++++++++++++++++++
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/message-[message]/targets.svelte

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 e6523f71b1..7e3985ea37 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/+layout.ts
+++ b/src/routes/console/project-[project]/messaging/message-[message]/+layout.ts
@@ -4,6 +4,7 @@ import Header from './header.svelte';
 import { sdk } from '$lib/stores/sdk';
 import { Dependencies } from '$lib/constants';
 import { error } from '@sveltejs/kit';
+import type { Models } from '@appwrite.io/console';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.MESSAGING_MESSAGE);
@@ -11,7 +12,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
     try {
         const message = await sdk.forProject.messaging.getMessage(params.message);
 
-        const topicsById = {};
+        const topicsById: Record<string, Models.Topic> = {};
         const topicsPromise = Promise.allSettled(
             message.topics.map((topicId) => sdk.forProject.messaging.getTopic(topicId))
         ).then((results) => {
@@ -22,7 +23,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             });
         });
 
-        const targetsById = {};
+        const targetsById: Record<string, Models.Target> = {};
         const targetsPromise = sdk.forProject.messaging
             .listTargets(params.message)
             .then((response) => {
@@ -33,10 +34,20 @@ export const load: LayoutLoad = async ({ params, depends }) => {
 
         await Promise.allSettled([topicsPromise, targetsPromise]);
 
+        const usersById: Record<string, Models.User<Models.Preferences>> = {};
+        const usersPromise = Object.values(targetsById).map((target) =>
+            sdk.forProject.users.get(target.userId).then((user) => {
+                usersById[user.$id] = user;
+            })
+        );
+
+        await Promise.allSettled(usersPromise);
+
         return {
             message,
             topicsById,
             targetsById,
+            usersById,
             header: Header,
             breadcrumbs: Breadcrumbs
         };
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 3c37676f27..9a094f8c0c 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
@@ -14,6 +14,7 @@
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { MessageType, MessagingProviderType } from '@appwrite.io/console';
     import Topics from './topics.svelte';
+    import Targets from './targets.svelte';
 
     export let data: PageData;
 
@@ -108,5 +109,6 @@
             onEdit={$message.status === MessageType.Draft ? onEdit : null} />
     {/if}
     <Topics topics={Object.values(data.topicsById)} />
+    <Targets targets={Object.values(data.targetsById)} usersById={data.usersById} />
     <Delete />
 </Container>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/targets.svelte b/src/routes/console/project-[project]/messaging/message-[message]/targets.svelte
new file mode 100644
index 0000000000..ca3e6ae031
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/targets.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { CardGrid, Heading, Empty, PaginationInline, Id } from '$lib/components';
+
+    export let targets: Models.Target[];
+    export let usersById: Record<string, Models.User<Models.Preferences>>;
+
+    let offset = 0;
+    const limit = 10;
+</script>
+
+<CardGrid>
+    <Heading tag="h6" size="7" id="variables">Targets</Heading>
+    <svelte:fragment slot="aside">
+        {@const sum = targets.length}
+        {#if sum}
+            <div class="u-flex u-flex-vertical u-gap-24">
+                <Table noMargin noStyles>
+                    <TableHeader>
+                        <TableCellHead>ID</TableCellHead>
+                        <TableCellHead>Name</TableCellHead>
+                        <TableCellHead>Identifier</TableCellHead>
+                    </TableHeader>
+                    <TableBody>
+                        {#each targets.slice(offset, offset + limit) as target (target.$id)}
+                            <TableRow>
+                                <TableCell title="id">
+                                    <Id value={target.$id}>{target.$id}</Id>
+                                </TableCell>
+
+                                <TableCellText title="name">
+                                    {usersById[target.userId]?.name || 'Unknown'}
+                                </TableCellText>
+
+                                <TableCellText title="subscribers">
+                                    {target.providerType === MessagingProviderType.Push
+                                        ? target.name
+                                        : target.identifier}
+                                </TableCellText>
+                            </TableRow>
+                        {/each}
+                    </TableBody>
+                </Table>
+                <div class="u-flex u-main-space-between">
+                    <p class="text">Total targets: {sum}</p>
+                    <PaginationInline {sum} {limit} bind:offset />
+                </div>
+            </div>
+        {:else}
+            <Empty>Edit the message to add a Target</Empty>
+        {/if}
+    </svelte:fragment>
+</CardGrid>