diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 09ade22627..64d39037fb 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -3,6 +3,7 @@
import "@spectrum-css/table/dist/index-vars.css"
import CellRenderer from "./CellRenderer.svelte"
import SelectEditRenderer from "./SelectEditRenderer.svelte"
+ import Checkbox from "../Form/Checkbox.svelte"
import { cloneDeep } from "lodash"
import { deepGet } from "../utils/helpers"
@@ -29,7 +30,7 @@
export let editColumnTitle = "Edit"
export let customRenderers = []
export let disableSorting = false
-
+ export let allowSelectAllRows = false
const dispatch = createEventDispatcher()
// Config
@@ -204,12 +205,27 @@
dispatch("editrow", cloneDeep(row))
}
+ const toggleSelectAll = e => {
+ if (!allowSelectAllRows) {
+ return
+ }
+ if (e.detail) {
+ selectedRows = rows
+ } else {
+ selectedRows = []
+ }
+ }
+
const toggleSelectRow = row => {
if (!allowSelectRows) {
return
}
- if (selectedRows.includes(row)) {
- selectedRows = selectedRows.filter(selectedRow => selectedRow !== row)
+ if (
+ selectedRows.findIndex(selectedRow => selectedRow._id === row._id) === 0
+ ) {
+ selectedRows = selectedRows.filter(
+ selectedRow => selectedRow._id !== row._id
+ )
} else {
selectedRows = [...selectedRows, row]
}
@@ -234,7 +250,11 @@
{#if showEditColumn}
- {editColumnTitle || ""}
+ {#if allowSelectAllRows}
+
+ {:else}
+ {editColumnTitle || ""}
+ {/if}
|
{/if}
@@ -299,7 +319,9 @@
selectedRow._id === row._id
+ ) !== -1}
onToggleSelection={() => toggleSelectRow(row)}
onEdit={e => editRow(e, row)}
{allowSelectRows}
@@ -364,6 +386,7 @@
overflow: hidden;
position: relative;
z-index: 0;
+ cursor: pointer;
}
.container {
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 0f3cffc4fb..e8381aad1f 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -35,12 +35,14 @@ export const getBindableProperties = (asset, componentId) => {
const urlBindings = getUrlBindings(asset)
const deviceBindings = getDeviceBindings()
const stateBindings = getStateBindings()
+ const rowBindings = getRowBindings()
return [
...contextBindings,
...urlBindings,
...stateBindings,
...userBindings,
...deviceBindings,
+ ...rowBindings,
]
}
@@ -321,13 +323,33 @@ const getDeviceBindings = () => {
return bindings
}
+/**
+ * Gets all row bindings that are globally available.
+ */
+const getRowBindings = () => {
+ let bindings = []
+ if (get(store).clientFeatures?.rowSelection) {
+ const safeState = makePropSafe("rowSelection")
+ bindings = [
+ {
+ type: "context",
+ runtimeBinding: `${safeState}.${makePropSafe("row")}`,
+ readableBinding: "Rows",
+ },
+ ]
+
+ return bindings
+ }
+ return bindings
+}
+
/**
* Gets all state bindings that are globally available.
*/
const getStateBindings = () => {
let bindings = []
- if (get(store).clientFeatures?.state) {
- const safeState = makePropSafe("state")
+ if (get(store).clientFeatures?.rowSelection) {
+ const safeState = makePropSafe("rowSelection")
bindings = getAllStateVariables().map(key => ({
type: "context",
runtimeBinding: `${safeState}.${makePropSafe(key)}`,
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index d838150efc..c4935980be 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -42,6 +42,7 @@ const INITIAL_FRONTEND_STATE = {
intelligentLoading: false,
deviceAwareness: false,
state: false,
+ rowSelection: false,
customThemes: false,
devicePreview: false,
messagePassing: false,
diff --git a/packages/builder/src/stores/portal/apps.js b/packages/builder/src/stores/portal/apps.js
index de944c057d..21b01caf99 100644
--- a/packages/builder/src/stores/portal/apps.js
+++ b/packages/builder/src/stores/portal/apps.js
@@ -66,7 +66,6 @@ export function createAppStore() {
}
async function update(appId, value) {
- console.log({ value })
const response = await api.put(`/api/applications/${appId}`, { ...value })
if (response.status === 200) {
store.update(state => {
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index ab48142ad5..6ad752496e 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -6,7 +6,8 @@
"state": true,
"customThemes": true,
"devicePreview": true,
- "messagePassing": true
+ "messagePassing": true,
+ "rowSelection": true
},
"layout": {
"name": "Layout",
@@ -2707,6 +2708,13 @@
"key": "showAutoColumns",
"defaultValue": false
},
+ {
+ "type": "boolean",
+ "label": "Allow row selection",
+ "key": "allowSelectRows",
+ "defaultValue": false
+ },
+
{
"type": "boolean",
"label": "Link table rows",
@@ -2961,6 +2969,11 @@
"label": "Show auto columns",
"key": "showAutoColumns"
},
+ {
+ "type": "boolean",
+ "label": "Allow row selection",
+ "key": "allowSelectRows"
+ },
{
"type": "boolean",
"label": "Link table rows",
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 7f5bed210e..649df0e377 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -19,6 +19,7 @@
import UserBindingsProvider from "components/context/UserBindingsProvider.svelte"
import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
+ import RowSelectionProvider from "components/context/RowSelectionProvider.svelte"
import SettingsBar from "components/preview/SettingsBar.svelte"
import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
import HoverIndicator from "components/preview/HoverIndicator.svelte"
@@ -90,59 +91,61 @@
-
-
- {#key $builderStore.selectedComponentId}
- {#if $builderStore.inBuilder}
-
- {/if}
- {/key}
+
+
+
+ {#key $builderStore.selectedComponentId}
+ {#if $builderStore.inBuilder}
+
+ {/if}
+ {/key}
-
-
-
-
-
- {#key $screenStore.activeLayout._id}
-
- {/key}
+
+
+
+
+
+ {#key $screenStore.activeLayout._id}
+
+ {/key}
-
-
+
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
+
- {#if $builderStore.inBuilder}
-
-
-
- {/if}
-
+ {#if $builderStore.inBuilder}
+
+
+
+ {/if}
+
+
diff --git a/packages/client/src/components/app/table/Table.svelte b/packages/client/src/components/app/table/Table.svelte
index f462b93551..dfc27534ba 100644
--- a/packages/client/src/components/app/table/Table.svelte
+++ b/packages/client/src/components/app/table/Table.svelte
@@ -14,9 +14,11 @@
export let linkURL
export let linkColumn
export let linkPeek
+ export let allowSelectRows
const component = getContext("component")
- const { styleable, getAction, ActionTypes, routeStore } = getContext("sdk")
+ const { styleable, getAction, ActionTypes, routeStore, rowSelectionStore } =
+ getContext("sdk")
const customColumnKey = `custom-${Math.random()}`
const customRenderers = [
{
@@ -24,7 +26,7 @@
component: SlotRenderer,
},
]
-
+ let selectedRows = []
$: hasChildren = $component.children
$: loading = dataProvider?.loading ?? false
$: data = dataProvider?.rows || []
@@ -36,6 +38,9 @@
ActionTypes.SetDataProviderSorting
)
+ $: {
+ rowSelectionStore.actions.update(selectedRows)
+ }
const getFields = (schema, customColumns, showAutoColumns) => {
// Check for an invalid column selection
let invalid = false
@@ -112,7 +117,9 @@
{rowCount}
{quiet}
{customRenderers}
- allowSelectRows={false}
+ {allowSelectRows}
+ bind:selectedRows
+ allowSelectAllRows={true}
allowEditRows={false}
allowEditColumns={false}
showAutoColumns={true}
diff --git a/packages/client/src/components/context/RowSelectionProvider.svelte b/packages/client/src/components/context/RowSelectionProvider.svelte
new file mode 100644
index 0000000000..2c87a5fa00
--- /dev/null
+++ b/packages/client/src/components/context/RowSelectionProvider.svelte
@@ -0,0 +1,8 @@
+
+
+
+
+
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 9803730541..c814294b55 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -6,6 +6,7 @@ import {
screenStore,
builderStore,
uploadStore,
+ rowSelectionStore,
} from "stores"
import { styleable } from "utils/styleable"
import { linkable } from "utils/linkable"
@@ -19,6 +20,7 @@ export default {
authStore,
notificationStore,
routeStore,
+ rowSelectionStore,
screenStore,
builderStore,
uploadStore,
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js
index 9f6e5f6f50..ddd052fb4e 100644
--- a/packages/client/src/stores/index.js
+++ b/packages/client/src/stores/index.js
@@ -10,7 +10,7 @@ export { peekStore } from "./peek"
export { stateStore } from "./state"
export { themeStore } from "./theme"
export { uploadStore } from "./uploads.js"
-
+export { rowSelectionStore } from "./rowSelection.js"
// Context stores are layered and duplicated, so it is not a singleton
export { createContextStore } from "./context"
diff --git a/packages/client/src/stores/rowSelection.js b/packages/client/src/stores/rowSelection.js
new file mode 100644
index 0000000000..40a86072f6
--- /dev/null
+++ b/packages/client/src/stores/rowSelection.js
@@ -0,0 +1,21 @@
+import { writable } from "svelte/store"
+
+const createRowSelectionStore = () => {
+ const store = writable([])
+
+ function update(rows) {
+ console.log(rows)
+ store.update(state => {
+ state = rows
+ return state
+ })
+ }
+ return {
+ subscribe: store.subscribe,
+ actions: {
+ update,
+ },
+ }
+}
+
+export const rowSelectionStore = createRowSelectionStore()