Merge pull request #10409 from Budibase/more-grid-tweaks

More grid tweaks

packages/builder/src/components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import CreateEditRow from "../../modals/CreateEditRow.svelte"
   import { getContext, onMount } from "svelte"
-  import { Modal } from "@budibase/bbui"
+  import { Modal, notifications } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
 
   const { subscribe, rows } = getContext("grid")
@@ -9,6 +9,11 @@
   let modal
   let row
 
+  const deleteRow = e => {
+    rows.actions.deleteRows([e.detail])
+    notifications.success("Deleted 1 row")
+  }
+
   onMount(() =>
     subscribe("add-row", () => {
       row = {}
@@ -24,5 +29,9 @@
 </script>
 
 <Modal bind:this={modal}>
-  <CreateEditRow {row} on:updaterows={e => rows.actions.refreshRow(e.detail)} />
+  <CreateEditRow
+    {row}
+    on:updaterows={e => rows.actions.refreshRow(e.detail)}
+    on:deleteRows={deleteRow}
+  />
 </Modal>

packages/frontend-core/src/components/grid/cells/DataCell.svelte

@@ -48,8 +48,8 @@
   }
 
   const cellAPI = {
-    focus: () => api?.focus(),
+    focus: () => api?.focus?.(),
-    blur: () => api?.blur(),
+    blur: () => api?.blur?.(),
     isActive: () => api?.isActive?.() ?? false,
     onKeyDown: (...params) => api?.onKeyDown(...params),
     isReadonly: () => readonly,

packages/frontend-core/src/components/grid/cells/GutterCell.svelte

@@ -113,11 +113,15 @@
   }
   .expand {
     opacity: 0;
-    pointer-events: none;
     margin-right: 4px;
   }
+  .expand :global(.spectrum-Icon) {
+    pointer-events: none;
+  }
   .expand.visible {
     opacity: 1;
+  }
+  .expand.visible :global(.spectrum-Icon) {
     pointer-events: all;
   }
 </style>

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -93,6 +93,16 @@
     columns.actions.changePrimaryDisplay(column.name)
     open = false
   }
+
+  const hideColumn = () => {
+    columns.update(state => {
+      const index = state.findIndex(col => col.name === column.name)
+      state[index].visible = false
+      return state.slice()
+    })
+    columns.actions.saveChanges()
+    open = false
+  }
 </script>
 
 <div
@@ -184,6 +194,7 @@
     <MenuItem disabled={!canMoveRight} icon="ChevronRight" on:click={moveRight}>
       Move right
     </MenuItem>
+    <MenuItem icon="VisibilityOff" on:click={hideColumn}>Hide column</MenuItem>
   </Menu>
 </Popover>
 

packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Toggle } from "@budibase/bbui"
 
-  const { columns } = getContext("grid")
+  const { columns, stickyColumn } = getContext("grid")
 
   let open = false
   let anchor
@@ -55,13 +55,17 @@
 <Popover bind:open {anchor} align="left">
   <div class="content">
     <div class="columns">
+      {#if $stickyColumn}
+        <Toggle disabled size="S" value={true} />
+        <span>{$stickyColumn.label}</span>
+      {/if}
       {#each $columns as column}
         <Toggle
           size="S"
           value={column.visible}
           on:change={e => toggleVisibility(column, e.detail)}
         />
-        <span>{column.name}</span>
+        <span>{column.label}</span>
       {/each}
     </div>
     <div class="buttons">

packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte

@@ -46,6 +46,7 @@
       }
       return
     } else if (e.key === "Tab") {
+      e.preventDefault()
       api?.blur?.()
       changeFocusedColumn(1)
       return