From f9c8cd850600832e088c1ef4eedec1b62ac33e10 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 29 Sep 2021 12:07:35 +0100
Subject: [PATCH] Automatically refresh data as needed when rows or columns are
 updated

---
 .../components/backend/DataTable/DataTable.svelte | 10 +++++++++-
 .../src/components/backend/DataTable/Table.svelte | 15 +++++++++++----
 .../DataTable/buttons/CreateColumnButton.svelte   |  2 +-
 .../DataTable/buttons/DeleteRowsButton.svelte     |  3 +++
 .../DataTable/modals/CreateEditColumn.svelte      |  8 ++++++--
 .../backend/DataTable/modals/CreateEditRow.svelte |  3 +++
 .../DataTable/modals/CreateEditUser.svelte        |  3 +++
 packages/builder/src/stores/backend/tables.js     | 13 +++++++++++--
 8 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index aa7241b62a..c97587c17d 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -49,6 +49,12 @@
       filters: e.detail,
     })
   }
+
+  const onUpdateColumns = () => {
+    search.update({
+      schema,
+    })
+  }
 </script>
 
 <div>
@@ -63,9 +69,11 @@
     on:sort={onSort}
     allowEditing
     disableSorting
+    on:updatecolumns={onUpdateColumns}
+    on:updaterows={search.refresh}
   >
     {#if isInternal}
-      <CreateColumnButton />
+      <CreateColumnButton on:updatecolumns={onUpdateColumns} />
     {/if}
     {#if schema && Object.keys(schema).length > 0}
       {#if !isUsersTable}
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index c4658fff7b..e22ec41162 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -113,12 +113,12 @@
     <div class="popovers">
       <slot />
       {#if !isUsersTable && selectedRows.length > 0}
-        <DeleteRowsButton {selectedRows} {deleteRows} />
+        <DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
       {/if}
     </div>
   </div>
   {#key tableId}
-    <div in:fade={{ delay: 200, duration: 100 }}>
+    <div class="table-wrapper" in:fade={{ delay: 200, duration: 100 }}>
       <Table
         {data}
         {schema}
@@ -141,10 +141,14 @@
 </Layout>
 
 <Modal bind:this={editRowModal}>
-  <svelte:component this={editRowComponent} row={editableRow} />
+  <svelte:component this={editRowComponent} on:updaterows row={editableRow} />
 </Modal>
 <Modal bind:this={editColumnModal}>
-  <CreateEditColumn field={editableColumn} onClosed={editColumnModal.hide} />
+  <CreateEditColumn
+    field={editableColumn}
+    on:updatecolumns
+    onClosed={editColumnModal.hide}
+  />
 </Modal>
 
 <style>
@@ -158,6 +162,9 @@
   .table-title > div {
     margin-left: var(--spacing-xs);
   }
+  .table-wrapper {
+    overflow: hidden;
+  }
 
   .popovers {
     display: flex;
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
index 86aef4ddbb..abf7e25d2a 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -9,5 +9,5 @@
   Create column
 </ActionButton>
 <Modal bind:this={modal}>
-  <CreateEditColumn />
+  <CreateEditColumn on:updatecolumns />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index fb71876316..3d662ed556 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -1,15 +1,18 @@
 <script>
+  import { createEventDispatcher } from "svelte"
   import { Button } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let selectedRows
   export let deleteRows
 
+  const dispatch = createEventDispatcher()
   let modal
 
   async function confirmDeletion() {
     await deleteRows()
     modal?.hide()
+    dispatch("updaterows")
   }
 </script>
 
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 1a7d75f28a..011c9bee43 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -10,6 +10,7 @@
     ModalContent,
     Context,
   } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
   import { tables } from "stores/backend"
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
@@ -30,8 +31,9 @@
   const AUTO_TYPE = "auto"
   const FORMULA_TYPE = FIELDS.FORMULA.type
   const LINK_TYPE = FIELDS.LINK.type
-  let fieldDefinitions = cloneDeep(FIELDS)
+  const dispatch = createEventDispatcher()
   const { hide } = getContext(Context.Modal)
+  let fieldDefinitions = cloneDeep(FIELDS)
 
   export let field = {
     type: "string",
@@ -81,12 +83,13 @@
     if (field.type === AUTO_TYPE) {
       field = buildAutoColumn($tables.draft.name, field.name, field.subtype)
     }
-    tables.saveField({
+    await tables.saveField({
       originalName,
       field,
       primaryDisplay,
       indexes,
     })
+    dispatch("updatecolumns")
   }
 
   function deleteColumn() {
@@ -99,6 +102,7 @@
       hide()
       deletion = false
     }
+    dispatch("updatecolumns")
   }
 
   function handleTypeChange(event) {
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
index ce52287c99..a60d9ecf31 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { createEventDispatcher } from "svelte"
   import { tables, rows } from "stores/backend"
   import { notifications } from "@budibase/bbui"
   import RowFieldControl from "../RowFieldControl.svelte"
@@ -12,6 +13,7 @@
   export let row = {}
 
   let errors = []
+  const dispatch = createEventDispatcher()
 
   $: creating = row?._id == null
   $: table = row.tableId
@@ -43,6 +45,7 @@
 
     notifications.success("Row saved successfully.")
     rows.save(rowResponse)
+    dispatch("updaterows")
   }
 </script>
 
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
index 32f369ce3d..f1de23fb97 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { createEventDispatcher } from "svelte"
   import { tables, rows } from "stores/backend"
   import { roles } from "stores/backend"
   import { notifications } from "@budibase/bbui"
@@ -9,6 +10,7 @@
 
   export let row = {}
 
+  const dispatch = createEventDispatcher()
   let errors = []
 
   $: creating = row?._id == null
@@ -71,6 +73,7 @@
 
     notifications.success("User saved successfully")
     rows.save(rowResponse)
+    dispatch("updaterows")
   }
 </script>
 
diff --git a/packages/builder/src/stores/backend/tables.js b/packages/builder/src/stores/backend/tables.js
index e0b614a63e..161877f660 100644
--- a/packages/builder/src/stores/backend/tables.js
+++ b/packages/builder/src/stores/backend/tables.js
@@ -95,7 +95,13 @@ export function createTablesStore() {
         selected: {},
       }))
     },
-    saveField: ({ originalName, field, primaryDisplay = false, indexes }) => {
+    saveField: async ({
+      originalName,
+      field,
+      primaryDisplay = false,
+      indexes,
+    }) => {
+      let promise
       update(state => {
         // delete the original if renaming
         // need to handle if the column had no name, empty string
@@ -126,9 +132,12 @@ export function createTablesStore() {
           ...state.draft.schema,
           [field.name]: cloneDeep(field),
         }
-        save(state.draft)
+        promise = save(state.draft)
         return state
       })
+      if (promise) {
+        await promise
+      }
     },
     deleteField: field => {
       update(state => {