allow editing row from modal

packages/builder/package.json

@@ -66,7 +66,7 @@
     "@budibase/bbui": "^1.44.1",
     "@budibase/client": "^0.2.6",
     "@budibase/colorpicker": "^1.0.1",
-    "@budibase/svelte-ag-grid": "^0.0.14",
+    "@budibase/svelte-ag-grid": "^0.0.15",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@sentry/browser": "5.19.1",
     "@svelteschool/svelte-forms": "^0.7.0",

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -1,14 +1,7 @@
 <script>
-  import { goto, params } from "@sveltech/routify"
-  import { onMount } from "svelte"
   import { fade } from "svelte/transition"
-  import { store, backendUiStore } from "builderStore"
-  import api from "builderStore/api"
-  import { Button, Icon } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
-
-  // New
-  import AgGrid from "./AgGrid.svelte"
+  import AgGrid from "@budibase/svelte-ag-grid"
   import { getRenderer, editRowRenderer } from "./cells/cellRenderers";
   import TableHeader from "./TableHeader"
 
@@ -25,10 +18,9 @@
   let options = {
     defaultColDef: {
       flex: 1,
-      minWidth: 150,
       filter: true,
     },
-    rowSelection: "multiple",
+    rowSelection: true,
     rowMultiSelectWithClick: true,
     suppressRowClickSelection: false,
     paginationAutoPageSize: true,
@@ -37,24 +29,23 @@
     popupParent: document.body,
   }
 
-  $: console.log(options)
-
   // TODO: refactor
   $: {
     let result = []
     if (allowEditing) {
       result.push({
+        pinned: "left",
         headerName: "Edit",
         sortable: false,
         resizable: false,
         suppressMovable: true,
         suppressMenu: true,
-        minWidth: 0,
-        width: 10,
+        minWidth: 75,
+        width: 75,
         cellRenderer: editRowRenderer
       })
     }
-    columnDefs = [...result, ...Object.keys(schema).map(key => ({
+    columnDefs = [...result, ...Object.keys(schema || {}).map(key => ({
       // headerCheckboxSelection: i === 0 && canEdit,
       // checkboxSelection: i === 0 && canEdit,
       // valueSetter: setters.get(schema[key].type),
@@ -70,9 +61,9 @@
       cellRenderer: getRenderer(schema[key], true),
       autoHeight: true,
       resizable: true,
+      minWidth: 200,
     }))]
   }
-  $: tableId = data?.length ? data[0].tableId : null
 
   // function selectRelationship(row, fieldName) {
   //   if (!row?.[fieldName]?.length) {

packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte

@@ -1,9 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { store, backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import { Modal, ModalContent, Icon } from "@budibase/bbui"
-  import ColumnHeaderPopover from "../popovers/ColumnPopover.svelte"
+  import { Modal, ModalContent } from "@budibase/bbui"
   import CreateEditColumnPopover from "../popovers/CreateEditColumnPopover.svelte"
 
   const SORT_ICON_MAP = {
@@ -12,22 +9,18 @@
   }
 
   export let field
+  export let displayName
   export let column
-  export let gridApi
-  export let enableMenu = true
   export let enableSorting = true
   export let showColumnMenu
   export let progressSort
+  export let gridApi
+  export let enableMenu = true
 
   let menuButton
   let sortDirection = ""
   let modal
 
-  let originalName = field.name
-  let primaryDisplay =
-    $backendUiStore.selectedTable.primaryDisplay == null ||
-    $backendUiStore.selectedTable.primaryDisplay === field.name
-
   function toggleMenu() {
     showColumnMenu(menuButton)
   }
@@ -49,7 +42,7 @@
 
 <header on:click={onSort}>
   <div>
-    <span>{field.name}</span>
+    <span>{displayName}</span>
     {#if enableSorting && sortDirection}
       <i class={`${SORT_ICON_MAP[sortDirection]} sort-icon`} />
     {/if}

packages/builder/src/components/backend/DataTable/cells/cellRenderers.js

@@ -80,33 +80,6 @@ function attachmentRenderer(options, constraints, editable) {
     return container
   }
 }
-/* eslint-disable no-unused-vars */
-// function dateRenderer(options, constraints, editable) {
-//   return function(params) {
-//     const container = document.createElement("div")
-//     const toggle = e => {
-//       params.setValue(e.detail[0][0])
-//     }
-
-//     // Options need to be passed in with minTime and maxTime! Needs bbui update.
-//     new DatePicker({
-//       target: container,
-//       props: {
-//         value: params.value,
-//       },
-//     })
-
-//     return container
-//   }
-// }
-
-function optionsRenderer(options, constraints, editable) {
-  return params => {
-    const container = document.createElement("div")
-    // TODO: show a pill
-    return container
-  }
-}
 
 /* eslint-disable no-unused-vars */
 function linkedRowRenderer(options, constraints, editable) {

packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte

@@ -1,27 +1,17 @@
 <script>
-  import { onMount } from "svelte"
   import {
     Input,
-    TextArea,
     Button,
     Select,
     Toggle,
-    Label,
   } from "@budibase/bbui"
-  import { cloneDeep, merge } from "lodash/fp"
-  import { store, backendUiStore } from "builderStore"
+  import { cloneDeep } from "lodash/fp"
+  import { backendUiStore } from "builderStore"
   import { FIELDS } from "constants/backend"
   import { notifier } from "builderStore/store/notifications"
-  import ButtonGroup from "components/common/ButtonGroup.svelte"
-  import NumberBox from "components/common/NumberBox.svelte"
   import ValuesList from "components/common/ValuesList.svelte"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
-  import Checkbox from "components/common/Checkbox.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
   import DatePicker from "components/common/DatePicker.svelte"
-  import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import * as api from "../api"
 
   let fieldDefinitions = cloneDeep(FIELDS)
 
@@ -63,11 +53,10 @@
     } else {
       backendUiStore.actions.tables.deleteField(field)
       notifier.success("Column deleted")
+      hideDeleteDialog()
     }
-    onClosed()
   }
 
-
   function handleFieldConstraints(event) {
     const { type, constraints } = fieldDefinitions[
       event.target.value.toUpperCase()
@@ -91,8 +80,12 @@
   }
 
   function confirmDelete() {
-    onClosed()
     confirmDeleteDialog.show()
+    onClosed()
+  }
+
+  function hideDeleteDialog() {
+    confirmDeleteDialog.hide()
   }
 </script>
 
@@ -168,9 +161,9 @@
   {/if}
   <footer>
     {#if originalName}
-      <Button secondary on:click={onClosed}>Cancel</Button>
+      <Button red on:click={confirmDelete}>Delete Column</Button>
     {/if}
-    <Button red on:click={confirmDelete}>Delete Column</Button>
+    <Button secondary on:click={onClosed}>Cancel</Button>
     <Button primary on:click={saveColumn}>Save Column</Button>
   </footer>
 </div>
@@ -179,11 +172,11 @@
   body={`Are you sure you wish to delete this column? Your data will be deleted and this action cannot be undone.`}
   okText="Delete Column"
   onOk={deleteColumn}
+  onCancel={hideDeleteDialog}
   title="Confirm Delete" />
 
 <style>
   .actions {
-    /* padding: var(--spacing-xl); */
     display: grid;
     grid-gap: var(--spacing-xl);
     min-width: 400px;

packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte

@@ -14,12 +14,12 @@
   let modal
 
   function showModal() {
-    dropdown.hide()
+    // dropdown.hide()
     modal.show()
   }
 
   function showDelete() {
-    dropdown.hide()
+    // dropdown.hide()
     confirmDeleteDialog.show()
   }
 
@@ -30,10 +30,10 @@
   }
 </script>
 
-<div bind:this={anchor} on:click={dropdown.show}>
+<div on:click={showModal}>
   <i class="ri-more-line" />
 </div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
+<!-- <DropdownMenu bind:this={dropdown} {anchor} align="left">
   <ul>
     <li data-cy="edit-row" on:click={showModal}>
       <Icon name="edit" />
@@ -44,7 +44,7 @@
       <span>Delete</span>
     </li>
   </ul>
-</DropdownMenu>
+</DropdownMenu> -->
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   body={`Are you sure you wish to delete this row? Your data will be deleted and this action cannot be undone.`}

packages/builder/yarn.lock

@@ -731,10 +731,10 @@
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
 
-"@budibase/svelte-ag-grid@^0.0.14":
-  version "0.0.14"
-  resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-0.0.14.tgz#387e0423f726d9eb6fa38c5cfd3e5d3c6fa9ca56"
-  integrity sha512-CYcPDdbEVGB6w3h0GQCBM4/Kg5sTxl9TFDpgFhMKmDmbbOU5+gVqsNQ4TtINP46nRPGQgTBRyfhkh0NJgOGafQ==
+"@budibase/svelte-ag-grid@^0.0.15":
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-0.0.15.tgz#d115243e54b2d00624794afa07fbea4f45c2824d"
+  integrity sha512-1DYrbv07urntexv8nTHsKcgseQOaw6rVNMU0kLQXoDqHJncyyBc9bSh5qCgitAYvKtJ2GhT/Lj/v84z8Kb2fdQ==
   dependencies:
     ag-grid-community "^24.0.0"