Fix empty topics and targets in message details

appwrite · Feb 9, 2024 · 1053121 · 1053121
1 parent 8c8f0b7
commit 1053121
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 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
@@ -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
@@ -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
@@ -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>