From 7b65b693e0a40cb6fce98ee9bae516e74fbdc1f2 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 23 Nov 2022 15:03:00 +0000
Subject: [PATCH] Added delete functionality to the edit table row modal

---
 packages/bbui/src/Modal/ModalContent.svelte   |  4 +-
 .../components/backend/DataTable/Table.svelte | 51 ++++++++++++++++---
 .../DataTable/buttons/DeleteRowsButton.svelte |  2 +-
 .../DataTable/modals/CreateEditRow.svelte     | 38 +++++++++-----
 4 files changed, 71 insertions(+), 24 deletions(-)

diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 7d3a8d7c40..eb73e255d5 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -28,9 +28,9 @@
   let loading = false
   $: confirmDisabled = disabled || loading
 
-  async function secondary() {
+  async function secondary(e) {
     loading = true
-    if (!secondaryAction || (await secondaryAction()) !== false) {
+    if (!secondaryAction || (await secondaryAction(e)) !== false) {
       hide()
     }
     loading = false
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index adc35a333d..7c9b5bcf3d 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -4,6 +4,7 @@
   import { Table, Modal, Heading, notifications, Layout } from "@budibase/bbui"
   import { API } from "api"
   import Spinner from "components/common/Spinner.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
   import CreateEditRow from "./modals/CreateEditRow.svelte"
   import CreateEditUser from "./modals/CreateEditUser.svelte"
@@ -34,8 +35,8 @@
   let editRowModal
   let editColumnModal
   let customRenderers = []
+  let confirmDelete
 
-  $: isInternal = type !== "external"
   $: isUsersTable = tableId === TableNames.USERS
   $: data && resetSelectedRows()
   $: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
@@ -89,15 +90,17 @@
     )
   }
 
-  const deleteRows = async () => {
+  const deleteRows = async targetRows => {
     try {
       await API.deleteRows({
         tableId,
-        rows: selectedRows,
+        rows: targetRows,
       })
-      data = data.filter(row => !selectedRows.includes(row))
-      notifications.success(`Successfully deleted ${selectedRows.length} rows`)
-      selectedRows = []
+
+      const deletedRowIds = targetRows.map(row => row._id)
+      data = data.filter(row => deletedRowIds.indexOf(row._id))
+
+      notifications.success(`Successfully deleted ${targetRows.length} rows`)
     } catch (error) {
       notifications.error("Error deleting rows")
     }
@@ -133,7 +136,14 @@
     <div class="popovers">
       <slot />
       {#if !isUsersTable && selectedRows.length > 0}
-        <DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
+        <DeleteRowsButton
+          on:updaterows
+          {selectedRows}
+          deleteRows={async rows => {
+            await deleteRows(rows)
+            resetSelectedRows()
+          }}
+        />
       {/if}
     </div>
   </Layout>
@@ -164,8 +174,33 @@
 </Layout>
 
 <Modal bind:this={editRowModal}>
-  <svelte:component this={editRowComponent} on:updaterows row={editableRow} />
+  <svelte:component
+    this={editRowComponent}
+    on:updaterows
+    on:deleteRows={() => {
+      confirmDelete.show()
+    }}
+    row={editableRow}
+  />
 </Modal>
+
+<ConfirmDialog
+  bind:this={confirmDelete}
+  okText="Delete"
+  onOk={async () => {
+    if (editableRow) {
+      await deleteRows([editableRow])
+    }
+    editableRow = undefined
+  }}
+  onCancel={async () => {
+    editRow(editableRow)
+  }}
+  title="Confirm Deletion"
+>
+  Are you sure you want to delete this row?
+</ConfirmDialog>
+
 <Modal bind:this={editColumnModal}>
   <CreateEditColumn
     field={editableColumn}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index 3d4ab7692b..4241013d89 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -11,7 +11,7 @@
   let modal
 
   async function confirmDeletion() {
-    await deleteRows()
+    await deleteRows(selectedRows)
     modal?.hide()
     dispatch("updaterows")
   }
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
index 14abb1a772..0f616f7937 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
@@ -50,22 +50,34 @@
   }
 </script>
 
-<ModalContent
-  title={creating ? "Create Row" : "Edit Row"}
-  confirmText={creating ? "Create Row" : "Save Row"}
-  onConfirm={saveRow}
->
-  {#each tableSchema as [key, meta]}
-    {#if !meta.autocolumn && meta.type !== FORMULA_TYPE}
-      <div>
-        <RowFieldControl error={errors[key]} {meta} bind:value={row[key]} />
-      </div>
-    {/if}
-  {/each}
-</ModalContent>
+<span class="modal-wrap">
+  <ModalContent
+    title={creating ? "Create Row" : "Edit Row"}
+    confirmText={creating ? "Create Row" : "Save Row"}
+    onConfirm={saveRow}
+    showCancelButton={creating}
+    showSecondaryButton={!creating}
+    secondaryButtonWarning={!creating}
+    secondaryButtonText="Delete"
+    secondaryAction={() => {
+      dispatch("deleteRows", row)
+    }}
+  >
+    {#each tableSchema as [key, meta]}
+      {#if !meta.autocolumn && meta.type !== FORMULA_TYPE}
+        <div>
+          <RowFieldControl error={errors[key]} {meta} bind:value={row[key]} />
+        </div>
+      {/if}
+    {/each}
+  </ModalContent>
+</span>
 
 <style>
   div {
     min-width: 0;
   }
+  .modal-wrap :global(.secondary-action) {
+    margin-right: unset;
+  }
 </style>