Show messaging topics and targets in message details

src/routes/console/project-[project]/messaging/message-[message]/+layout.ts

@@ -4,14 +4,15 @@ 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);
 
     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
         };

src/routes/console/project-[project]/messaging/message-[message]/+page.svelte

@@ -13,6 +13,8 @@
     import type { PageData } from './$types';
     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;
 
@@ -106,5 +108,7 @@
             message={$message}
             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>

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>

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>