@budibase/bbui 1.0.79-alpha.1 → 1.0.79-alpha.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.79-alpha.1",
+  "version": "1.0.79-alpha.4",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "^1.0.79-alpha.1",
+    "@budibase/string-templates": "^1.0.79-alpha.4",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -84,5 +84,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "ca2b3e003a76c97783492aa3f120beaf57515057"
+  "gitHead": "3a3f3d5a06d84231569754305daa2c9dff750690"
 }

package/src/Form/Core/Checkbox.svelte

@@ -47,7 +47,9 @@
       <use xlink:href="#spectrum-css-icon-Dash100" />
     </svg>
   </span>
-  <span class="spectrum-Checkbox-label">{text || ""}</span>
+  {#if text}
+    <span class="spectrum-Checkbox-label">{text}</span>
+  {/if}
 </label>
 
 <style>

package/src/Table/SelectEditRenderer.svelte

@@ -8,9 +8,21 @@
   export let allowEditRows = false
 </script>
 
-{#if allowSelectRows}
-  <Checkbox value={selected} />
-{/if}
-{#if allowEditRows}
-  <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
-{/if}
+<div>
+  {#if allowSelectRows}
+    <Checkbox value={selected} />
+  {/if}
+  {#if allowEditRows}
+    <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
+  {/if}
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+</style>

package/src/Table/Table.svelte

@@ -5,6 +5,7 @@
   import SelectEditRenderer from "./SelectEditRenderer.svelte"
   import { cloneDeep, deepGet } from "../helpers"
   import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
+  import Checkbox from "../Form/Checkbox.svelte"
 
   /**
    * The expected schema is our normal couch schemas for our tables.
@@ -31,7 +32,6 @@
   export let allowEditRows = true
   export let allowEditColumns = true
   export let selectedRows = []
-  export let editColumnTitle = "Edit"
   export let customRenderers = []
   export let disableSorting = false
   export let autoSortColumns = true
@@ -50,6 +50,8 @@
   // Table state
   let height = 0
   let loaded = false
+  let checkboxStatus = false
+
   $: schema = fixSchema(schema)
   $: if (!loading) loaded = true
   $: fields = getFields(schema, showAutoColumns, autoSortColumns)
@@ -67,6 +69,16 @@
   $: showEditColumn = allowEditRows || allowSelectRows
   $: cellStyles = computeCellStyles(schema)
 
+  // Deselect the "select all" checkbox when the user navigates to a new page
+  $: {
+    let checkRowCount = rows.filter(o1 =>
+      selectedRows.some(o2 => o1._id === o2._id)
+    )
+    if (checkRowCount.length === 0) {
+      checkboxStatus = false
+    }
+  }
+
   const fixSchema = schema => {
     let fixedSchema = {}
     Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
@@ -197,13 +209,32 @@
     if (!allowSelectRows) {
       return
     }
-    if (selectedRows.includes(row)) {
-      selectedRows = selectedRows.filter(selectedRow => selectedRow !== row)
+    if (selectedRows.some(selectedRow => selectedRow._id === row._id)) {
+      selectedRows = selectedRows.filter(
+        selectedRow => selectedRow._id !== row._id
+      )
     } else {
       selectedRows = [...selectedRows, row]
     }
   }
 
+  const toggleSelectAll = e => {
+    const select = !!e.detail
+    if (select) {
+      // Add any rows which are not already in selected rows
+      rows.forEach(row => {
+        if (selectedRows.findIndex(x => x._id === row._id) === -1) {
+          selectedRows.push(row)
+        }
+      })
+    } else {
+      // Remove any rows from selected rows that are in the current data set
+      selectedRows = selectedRows.filter(el =>
+        rows.every(f => f._id !== el._id)
+      )
+    }
+  }
+
   const computeCellStyles = schema => {
     let styles = {}
     Object.keys(schema || {}).forEach(field => {
@@ -244,7 +275,14 @@
             <div
               class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
             >
-              {editColumnTitle || ""}
+              {#if allowSelectRows}
+                <Checkbox
+                  bind:value={checkboxStatus}
+                  on:change={toggleSelectAll}
+                />
+              {:else}
+                Edit
+              {/if}
             </div>
           {/if}
           {#each fields as field}
@@ -302,11 +340,16 @@
             {#if showEditColumn}
               <div
                 class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
+                on:click={e => {
+                  toggleSelectRow(row)
+                  e.stopPropagation()
+                }}
               >
                 <SelectEditRenderer
                   data={row}
-                  selected={selectedRows.includes(row)}
-                  onToggleSelection={() => toggleSelectRow(row)}
+                  selected={selectedRows.findIndex(
+                    selectedRow => selectedRow._id === row._id
+                  ) !== -1}
                   onEdit={e => editRow(e, row)}
                   {allowSelectRows}
                   {allowEditRows}