From 7e70eb0f2051f26d971ca26efb228429cb011bab Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 13 Oct 2020 19:37:52 +0100
Subject: [PATCH] Adding info to the table deletion about screens that will be
 deleted and deleted template screens when table deleted.

---
 .../popovers/EditTablePopover.svelte          | 49 +++++++++++++++++--
 .../components/common/ConfirmDialog.svelte    |  2 +-
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 9df5f36993..d9e7e6867b 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -1,9 +1,11 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import screenTemplates from "builderStore/store/screenTemplates"
+  import api from "builderStore/api"
 
   export let table
 
@@ -11,6 +13,8 @@
   let dropdown
   let editing
   let confirmDeleteDialog
+  let templateScreens
+  let willBeDeleted
 
   $: fields = Object.keys(table.schema)
 
@@ -24,12 +28,31 @@
   }
 
   function showModal() {
+    const screens = $store.allScreens
+    templateScreens = screens.filter(screen => screen.props.table === table._id)
+    willBeDeleted = ["All table data"].concat(templateScreens.map(screen => `Screen ${screen.props._instanceName}`))
     hideEditor()
     confirmDeleteDialog.show()
   }
 
+  function deleteTemplateScreens() {
+    store.update(state => {
+      for (let screen of templateScreens) {
+        const mainPageName = state.pages.main.name
+        state.screens = state.screens.filter(c => c.name !== screen.name)
+        // Remove screen from current page as well
+        state.pages[state.currentPageName]._screens = state.pages[mainPageName]._screens.filter(
+          scr => scr.name !== screen.name
+        )
+        api.delete(`/_builder/api/pages/${mainPageName}/screens/${screen.name}`)
+      }
+      return state
+    })
+  }
+
   async function deleteTable() {
     await backendUiStore.actions.tables.delete(table)
+    deleteTemplateScreens()
     notifier.success("Table deleted")
     hideEditor()
   }
@@ -79,10 +102,20 @@
 </DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
-  body={`Are you sure you wish to delete the table '${table.name}'? Your data will be deleted and this action cannot be undone.`}
+  body={`Are you sure you wish to delete the table '${table.name}'?`}
   okText="Delete Table"
   onOk={deleteTable}
-  title="Confirm Delete" />
+  title="Confirm Delete">
+  The following will also be deleted:
+  <b>
+  <div class="delete-items">
+    {#each willBeDeleted as item}
+      <div>{item}</div>
+    {/each}
+  </div>
+  </b>
+  This action cannot be undone.
+</ConfirmDialog>
 
 <style>
   div.icon {
@@ -96,6 +129,16 @@
     font-size: 16px;
   }
 
+  div.delete-items {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+  }
+
+  div.delete-items div {
+    margin-top: 4px;
+  }
+
   .actions {
     padding: var(--spacing-xl);
     display: grid;
diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index 2cd27573f4..7d4c3ff0e2 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -20,7 +20,7 @@
 
 <Modal bind:this={modal} on:hide={onCancel}>
   <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
-    <div class="body">{body}</div>
+    <div class="body">{body}<slot/></div>
   </ModalContent>
 </Modal>