Merge pull request #837 from appwrite/feat-messaging-topics-modal

Fix design issues for topics modal
appwrite · Feb 21, 2024 · 83c35aa · 83c35aa
2 parents 44edd46 + 041ec1f
commit 83c35aa
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 22 deletions.
diff --git a/src/routes/console/project-[project]/messaging/topics/store.ts b/src/routes/console/project-[project]/messaging/topics/store.ts
@@ -6,6 +6,9 @@ export const 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: 'total', title: 'Subscribers', type: 'integer', show: true, width: 140 },
+    { id: 'emailTotal', title: 'Email Subscribers', type: 'integer', show: false, width: 140 },
+    { id: 'smsTotal', title: 'SMS Subscribers', type: 'integer', show: false, width: 140 },
+    { id: 'pushTotal', title: 'Push Subscribers', type: 'integer', show: false, width: 140 },
+    { id: 'total', title: 'Subscribers', type: 'integer', show: true, filter: false, width: 140 },
     { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
 ]);
diff --git a/src/routes/console/project-[project]/messaging/topics/table.svelte b/src/routes/console/project-[project]/messaging/topics/table.svelte
@@ -90,6 +90,10 @@
                                     {toLocaleDateTime(topic[column.id])}
                                 {/if}
                             </TableCellText>
+                        {:else if column.id === 'total'}
+                            <TableCellText title={column.title} width={column.width}>
+                                {topic.emailTotal + topic.smsTotal + topic.pushTotal}
+                            </TableCellText>
                         {:else}
                             <TableCellText title={column.title} width={column.width}>
                                 {topic[column.id]}

diff --git a/src/routes/console/project-[project]/messaging/topicsModal.svelte b/src/routes/console/project-[project]/messaging/topicsModal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { EmptySearch, Modal, PaginationInline } from '$lib/components';
     import { Button, FormList, InputCheckbox, InputSearch } from '$lib/elements/forms';
+    import { Table, TableBody, TableCell, TableRow } from '$lib/elements/table';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@appwrite.io/console';
     import { createEventDispatcher } from 'svelte';
@@ -79,7 +80,7 @@
     }
 </script>
 
-<Modal {title} bind:show onSubmit={submit} on:close={reset} size="big">
+<Modal {title} bind:show onSubmit={submit} on:close={reset} headerDivider={false} size="big">
     <p class="text">
         Select existing topics you want to send this message to its subscribers. The message will be
         sent only to {$providerType} targets.
@@ -91,27 +92,35 @@
         bind:value={search} />
     {#if Object.keys(topicResultsById).length > 0}
         <FormList>
-            {#each Object.entries(topicResultsById) as [topicId, topic]}
-                <InputCheckbox
-                    id={topicId}
-                    disabled={!!topicsById[topicId]}
-                    checked={!!selected[topicId]}
-                    on:change={(event) => onTopicSelection(event, topic)}>
-                    <svelte:fragment slot="description">
-                        <span class="title">
-                            <span class="u-line-height-1-5">
-                                <span class="body-text-2 u-bold" data-private>
-                                    {topic.name}
-                                </span>
-                                <span class="collapsible-button-optional">
-                                    ({getTotal(topic)} subscribers)
-                                </span>
-                            </span></span>
-                    </svelte:fragment>
-                </InputCheckbox>
-            {/each}
+            <Table noMargin noStyles>
+                <TableBody>
+                    {#each Object.entries(topicResultsById) as [topicId, topic]}
+                        <TableRow>
+                            <TableCell>
+                                <InputCheckbox
+                                    id={topicId}
+                                    disabled={!!topicsById[topicId]}
+                                    checked={!!selected[topicId]}
+                                    on:change={(event) => onTopicSelection(event, topic)}>
+                                    <svelte:fragment slot="description">
+                                        <span class="title">
+                                            <span class="u-line-height-1-5">
+                                                <span class="body-text-2 u-bold" data-private>
+                                                    {topic.name}
+                                                </span>
+                                                <span class="collapsible-button-optional">
+                                                    ({getTotal(topic)} subscribers)
+                                                </span>
+                                            </span></span>
+                                    </svelte:fragment>
+                                </InputCheckbox>
+                            </TableCell>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </Table>
         </FormList>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <div class="u-flex u-main-space-between">
             <p class="text">Total results: {totalResults}</p>
             <PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
         </div>