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] 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 854f2922f..3c37676f2 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 000000000..75589a7e9
--- /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>