From c8a87350d24258ffbe84db5a62ed1d84bc5deee0 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Wed, 14 Aug 2024 14:27:19 +0530
Subject: [PATCH] update: new deletion flow modal.

---
 .../database-[database]/delete.svelte         | 128 +++++++++++++++++-
 1 file changed, 122 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/delete.svelte b/src/routes/console/project-[project]/databases/database-[database]/delete.svelte
index 4a4c7d2e1..3fee494c9 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/delete.svelte
@@ -4,14 +4,57 @@
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import { Button, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { database } from './store';
+    import { database, collections } from './store';
+    import {
+        TableBody,
+        TableCellHead,
+        TableHeader,
+        TableCell,
+        TableRow,
+        TableScroll
+    } from '$lib/elements/table';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Query } from '@appwrite.io/console';
     const databaseId = $page.params.database;
 
     export let showDelete = false;
 
+    let error = null;
+    let databaseName: string = null;
+    let isLoadingDocumentsCount = false;
+
+    async function listCollections() {
+        isLoadingDocumentsCount = true;
+
+        try {
+            /* can we improve this? */
+            const collectionPromises = $collections.collections.map(async (collection) => {
+                const { total: totalDocuments } = await sdk.forProject.databases.listDocuments(
+                    databaseId, collection.$id,
+                    [
+                        Query.limit(1)
+                    ]
+                );
+
+                return {
+                    id: collection.$id,
+                    name: collection.name,
+                    count: totalDocuments,
+                    updatedAt: collection.$updatedAt
+                };
+            });
+
+            return await Promise.all(collectionPromises);
+        } catch {
+            error = true;
+        } finally {
+            isLoadingDocumentsCount = false;
+        }
+    }
+
     const handleDelete = async () => {
         try {
             await sdk.forProject.databases.delete(databaseId);
@@ -39,11 +82,84 @@
     bind:show={showDelete}
     onSubmit={handleDelete}
     headerDivider={false}>
-    <p class="text" data-private>
-        Are you sure you want to delete <b>{$database.name}</b>?
-    </p>
+    {#await listCollections()}
+        <div class="u-flex u-main-center">
+            <div class="loader" />
+        </div>
+    {:then collections}
+        {#if error}
+            <p class="text" data-private>
+                Are you sure you want to delete <b>{$database.name}</b>?
+            </p>
+        {:else if collections.length > 0}
+            <p class="text" data-private>
+                The following collections and all data associated with <b>{$database.name}</b> will
+                be permanently deleted.
+                <b>This action is irreversible.</b>
+            </p>
+
+            <TableScroll dense noMargin isSticky class="table limited-modal-height">
+                <TableHeader>
+                    <TableCellHead>Collection</TableCellHead>
+                    <TableCellHead># of Documents</TableCellHead>
+                    <TableCellHead>Last Updated</TableCellHead>
+                </TableHeader>
+                <TableBody>
+                    {#each collections as collection}
+                        <TableRow>
+                            <TableCell title="Collection">{collection.name}</TableCell>
+                            <TableCell title="Documents">{collection.count}</TableCell>
+                            <TableCell>{toLocaleDateTime(collection.updatedAt)}</TableCell>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </TableScroll>
+
+            <FormList class="u-padding-block-start-24">
+                <InputText
+                    label={`Confirm the database name to continue`}
+                    placeholder="Enter {$database.name} to continue"
+                    id="database-name"
+                    autofocus
+                    required
+                    bind:value={databaseName} />
+            </FormList>
+        {:else}
+            <p class="text" data-private>
+                Are you sure you want to delete <b>{$database.name}</b>?
+            </p>
+        {/if}
+    {/await}
+
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit>Delete</Button>
+        <Button
+            secondary
+            submit
+            disabled={
+            isLoadingDocumentsCount ||
+            ($collections.total > 0 && !error && (!databaseName || databaseName !== $database.name))
+        }>
+            Delete
+        </Button>
     </svelte:fragment>
 </Modal>
+
+<style>
+    :global(.limited-modal-height .table-wrapper) {
+        max-height: 450px; /* tentative, 650px [in design] looks too big and requires a scroll */
+        overflow-y: scroll;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+
+    :global(.limited-modal-height .table-wrapper)::-webkit-scrollbar {
+        display: none;
+    }
+
+    @media (max-width: 1024px) {
+        :global(.limited-modal-height .table-wrapper) {
+            max-height: 275px;
+        }
+    }
+</style>