Add description to topics table and details

src/lib/actions/analytics.ts

@@ -296,6 +296,7 @@ export enum Submit {
     MessagingTopicCreate = 'submit_messaging_topic_create',
     MessagingTopicDelete = 'submit_messaging_topic_delete',
     MessagingTopicUpdateName = 'submit_messaging_topic_update_name',
+    MessagingTopicUpdateDescription = 'submit_messaging_topic_update_description',
     MessagingTopicSubscriberAdd = 'submit_messaging_topic_subscriber_add',
     MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete'
 }

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

@@ -100,5 +100,4 @@
     {/if}
 </Container>
 
-<!-- TODO: handle create -->
 <Create bind:showCreate={$showCreate} on:created={topicCreated} />

src/routes/console/project-[project]/messaging/topics/create.svelte

@@ -12,7 +12,7 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, id: string, error: string;
+    let name: string, description: string, id: string, error: string;
     let showCustomId = false;
 
     const create = async () => {
@@ -26,11 +26,13 @@
                     'X-Appwrite-Mode': 'admin'
                 },
                 {
-                    topicId: id ?? ID.unique(),
-                    name: name
+                    name,
+                    description,
+                    topicId: id ?? ID.unique()
                 }
             );
             name = '';
+            description = '';
             showCreate = false;
             showCustomId = false;
             addNotification({
@@ -62,6 +64,12 @@
             autofocus={true}
             required
             bind:value={name} />
+        <InputText
+            id="description"
+            label="Description"
+            placeholder="Enter description"
+            bind:value={description}>
+        </InputText>
         {#if !showCustomId}
             <div>
                 <Pill button on:click={() => (showCustomId = !showCustomId)}

src/routes/console/project-[project]/messaging/topics/store.ts

@@ -6,6 +6,7 @@ export let showCreate = writable(false);
 export const columns = writable<Column[]>([
     { id: '$id', title: 'Topic ID', type: 'string', show: true, width: 140 },
     { id: 'name', title: 'Name', type: 'string', show: true, width: 140 },
+    { id: 'description', title: 'Description', type: 'string', show: true, width: 140 },
     { id: 'total', title: 'Subscribers', type: 'integer', show: true, width: 140 },
     { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
 ]);

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

@@ -1,12 +1,14 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
     import DangerZone from './dangerZone.svelte';
-    import UpdateName from './updateName.svelte';
     import Details from './details.svelte';
+    import UpdateDescription from './updateDescription.svelte';
+    import UpdateName from './updateName.svelte';
 </script>
 
 <Container>
     <Details />
     <UpdateName />
+    <UpdateDescription />
     <DangerZone />
 </Container>

src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateDescription.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { onMount } from 'svelte';
+    import { topic } from './store';
+    import { invalidate } from '$app/navigation';
+    import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+
+    let description: string = null;
+    onMount(async () => {
+        description ??= $topic.description;
+    });
+    async function updateDescription() {
+        try {
+            await sdk.forProject.client.call(
+                'PATCH',
+                new URL(`${sdk.forProject.client.config.endpoint}/messaging/topics/${$topic.$id}`),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                },
+                {
+                    description
+                }
+            );
+            await invalidate(Dependencies.MESSAGING_TOPIC);
+            addNotification({
+                message: 'Description has been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingTopicUpdateDescription);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingTopicUpdateDescription);
+        }
+    }
+</script>
+
+<Form onSubmit={updateDescription}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Description</Heading>
+
+        <svelte:fragment slot="aside">
+            <ul data-private>
+                <InputText
+                    id="description"
+                    label="Description"
+                    placeholder="Enter description"
+                    autocomplete={false}
+                    bind:value={description} />
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={description === $topic.description} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>