Add support for deleting messages

src/lib/constants.ts

@@ -51,6 +51,7 @@ export enum Dependencies {
     CONSOLE_VARIABLES = 'dependency:console_variables',
     MESSAGING_PROVIDERS = 'dependency:messaging_providers',
     MESSAGING_PROVIDER = 'dependency:messaging_provider',
+    MESSAGING_MESSAGES = 'dependency:messaging_messages',
     MESSAGING_MESSAGE = 'dependency:messaging_message',
     MESSAGING_TOPICS = 'dependency:messaging_topics',
     MESSAGING_TOPIC = 'dependency:messaging_topic',

src/lib/elements/table/cellCheck.svelte

@@ -6,6 +6,7 @@
 
     export let id: string;
     export let selectedIds: string[] = [];
+    export let disabled: boolean = false;
     let el: HTMLInputElement;
 
     const handleClick = (e: Event) => {
@@ -35,6 +36,7 @@
         id="select-{id}"
         wrapperTag="div"
         checked={selectedIds.includes(id)}
+        {disabled}
         on:click={handleClick} />
 </TableCell>
 

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

@@ -8,6 +8,7 @@
         FloatingActionBar,
         Heading,
         Id,
+        Modal,
         PaginationWithLimit,
         SearchQuery,
         ViewSelector
@@ -27,17 +28,23 @@
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
-    import { MessagingProviderType } from '@appwrite.io/console';
+    import { MessageType, MessagingProviderType } from '@appwrite.io/console';
     import type { PageData } from './$types';
     import CreateMessageDropdown from './createMessageDropdown.svelte';
     import FailedModal from './failedModal.svelte';
     import MessageStatusPill from './messageStatusPill.svelte';
     import ProviderType from './providerType.svelte';
     import { columns, showCreate } from './store';
+    import { sdk } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
 
     export let data: PageData;
     let selected: string[] = [];
     let showDelete = false;
+    let deleting = false;
     let showFailed = false;
     let errors: string[] = [];
     let showCreateDropdownMobile = false;
@@ -46,7 +53,32 @@
 
     const project = $page.params.project;
 
-    $: console.log(showDelete);
+    async function handleDelete() {
+        showDelete = false;
+
+        const promises = selected.map((id) => sdk.forProject.messaging.delete(id));
+
+        try {
+            await Promise.all(promises);
+            trackEvent(Submit.MessagingMessageDelete, {
+                total: selected.length
+            });
+            addNotification({
+                type: 'success',
+                message: `${selected.length} message${selected.length > 1 ? 's' : ''} deleted`
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingMessageDelete);
+        } finally {
+            invalidate(Dependencies.MESSAGING_MESSAGES);
+            selected = [];
+            showDelete = false;
+        }
+    }
 </script>
 
 <Container>
@@ -106,7 +138,10 @@
                 {#each data.messages.messages as message (message.$id)}
                     <TableRowLink
                         href={`${base}/console/project-${project}/messaging/message-${message.$id}`}>
-                        <TableCellCheck bind:selectedIds={selected} id={message.$id} />
+                        <TableCellCheck
+                            bind:selectedIds={selected}
+                            id={message.$id}
+                            disabled={message.status === MessageType.Processing} />
 
                         {#each $columns as column (column.id)}
                             {#if column.show}
@@ -176,7 +211,6 @@
 
                 <div class="u-flex u-cross-center u-gap-8">
                     <Button text on:click={() => (selected = [])}>Cancel</Button>
-                    <!-- TODO: handle delete -->
                     <Button secondary on:click={() => (showDelete = true)}>
                         <p>Delete</p>
                     </Button>
@@ -249,3 +283,21 @@
 </Container>
 
 <FailedModal bind:show={showFailed} {errors} />
+
+<Modal
+    title="Delete messages"
+    icon="exclamation"
+    state="warning"
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    headerDivider={false}
+    closable={!deleting}>
+    <p class="text" data-private>
+        Are you sure you want to delete <b>{selected.length}</b>
+        {selected.length > 1 ? 'messages' : 'message'}?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
+        <Button secondary submit disabled={deleting}>Delete</Button>
+    </svelte:fragment>
+</Modal>

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

@@ -1,5 +1,5 @@
 import { queries, queryParamToMap } from '$lib/components/filters';
-import { CARD_LIMIT } from '$lib/constants';
+import { CARD_LIMIT, Dependencies } from '$lib/constants';
 import {
     View,
     getLimit,
@@ -13,7 +13,9 @@ import { sdk } from '$lib/stores/sdk';
 import { Query, type Models } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ url, route }) => {
+export const load: PageLoad = async ({ depends, url, route }) => {
+    depends(Dependencies.MESSAGING_MESSAGES);
+
     const page = getPage(url);
     const search = getSearch(url);
     const view = getView(url, route, View.Grid);

src/routes/console/project-[project]/messaging/message-[message]/delete.svelte

@@ -2,6 +2,7 @@
     import { BoxAvatar, CardGrid, Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { MessageType } from '@appwrite.io/console';
     import DeleteModal from './deleteModal.svelte';
     import { message } from './store';
 
@@ -31,7 +32,11 @@
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button secondary on:click={() => (showDelete = true)} event="delete_file">Delete</Button>
+        <Button
+            disabled={$message.status === MessageType.Processing}
+            secondary
+            on:click={() => (showDelete = true)}
+            event="delete_file">Delete</Button>
     </svelte:fragment>
 </CardGrid>