From 105312199958fdeea7a668a75cf568c64150eef3 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 9 Feb 2024 15:25:42 -0800
Subject: [PATCH] Fix empty topics and targets in message details

---
 .../messaging/message-[message]/+page.svelte  |  8 +++-
 .../message-[message]/targets.svelte          | 43 +++++++++++++++++--
 .../messaging/message-[message]/topics.svelte | 42 +++++++++++++++++-
 3 files changed, 86 insertions(+), 7 deletions(-)

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 5e680c334..d0f3efbf1 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
@@ -110,7 +110,11 @@
             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} />
+    <Topics topics={Object.values(data.topicsById)} status={$message.status} {onEdit} />
+    <Targets
+        targets={Object.values(data.targetsById)}
+        usersById={data.usersById}
+        status={$message.status}
+        {onEdit} />
     <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
index ca3e6ae03..040cc143a 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/targets.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/targets.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import { MessageType, MessagingProviderType, type Models } from '@appwrite.io/console';
     import {
         Table,
         TableBody,
@@ -9,10 +9,19 @@
         TableHeader,
         TableRow
     } from '$lib/elements/table';
-    import { CardGrid, Heading, Empty, PaginationInline, Id } from '$lib/components';
+    import { CardGrid, Heading, PaginationInline, Id, EmptySearch } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { wizard } from '$lib/stores/wizard';
 
+    export let status: string;
     export let targets: Models.Target[];
     export let usersById: Record<string, Models.User<Models.Preferences>>;
+    export let onEdit: () => void;
+
+    function openToTargets() {
+        onEdit();
+        wizard.setStep(2);
+    }
 
     let offset = 0;
     const limit = 10;
@@ -56,7 +65,35 @@
                 </div>
             </div>
         {:else}
-            <Empty>Edit the message to add a Target</Empty>
+            <EmptySearch hidePagination>
+                <div class="u-text-center">
+                    No targets have been selected.
+                    {#if status === MessageType.Draft}
+                        <p>Edit the message and select targets to see them here.</p>
+                    {:else}
+                        <p>
+                            Need a hand? Check out our <Button
+                                link
+                                external
+                                href="http://appwrite.io/docs/products/messaging/targets"
+                                text>
+                                documentation</Button
+                            >.
+                        </p>
+                    {/if}
+                </div>
+                {#if status === MessageType.Draft}
+                    <div class="u-flex u-gap-16">
+                        <Button
+                            external
+                            href="http://appwrite.io/docs/products/messaging/targets"
+                            text>
+                            Documentation
+                        </Button>
+                        <Button secondary on:click={openToTargets}>Edit message</Button>
+                    </div>
+                {/if}
+            </EmptySearch>
         {/if}
     </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/topics.svelte b/src/routes/console/project-[project]/messaging/message-[message]/topics.svelte
index 75589a7e9..27d15ddd2 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/topics.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/topics.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { MessageType } from '@appwrite.io/console';
     import type { Models } from '@appwrite.io/console';
     import {
         Table,
@@ -9,9 +10,18 @@
         TableHeader,
         TableRow
     } from '$lib/elements/table';
-    import { CardGrid, Heading, Empty, PaginationInline, Id } from '$lib/components';
+    import { CardGrid, Heading, PaginationInline, Id, EmptySearch } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { wizard } from '$lib/stores/wizard';
 
+    export let status: string;
     export let topics: Models.Topic[];
+    export let onEdit: () => void;
+
+    function openToTargets() {
+        onEdit();
+        wizard.setStep(2);
+    }
 
     let offset = 0;
     const limit = 10;
@@ -53,7 +63,35 @@
                 </div>
             </div>
         {:else}
-            <Empty>Edit the message to add a Topic</Empty>
+            <EmptySearch hidePagination>
+                <div class="u-text-center">
+                    No topics have been selected.
+                    {#if status === MessageType.Draft}
+                        <p>Edit the message and select topics to see them here.</p>
+                    {:else}
+                        <p>
+                            Need a hand? Check out our <Button
+                                link
+                                external
+                                href="http://appwrite.io/docs/products/messaging/targets"
+                                text>
+                                documentation</Button
+                            >.
+                        </p>
+                    {/if}
+                </div>
+                {#if status === MessageType.Draft}
+                    <div class="u-flex u-gap-16">
+                        <Button
+                            external
+                            href="http://appwrite.io/docs/products/messaging/targets"
+                            text>
+                            Documentation
+                        </Button>
+                        <Button secondary on:click={openToTargets}>Edit message</Button>
+                    </div>
+                {/if}
+            </EmptySearch>
         {/if}
     </svelte:fragment>
 </CardGrid>