Add Clear Row Selection action (#13002)

* Add Clear Row Selection action

* update account-portal

* Refactor to use contextActionHandler

* Remove unused code
This commit is contained in:
melohagan 2024-02-14 10:05:14 +00:00 committed by GitHub
parent 573b3a13f8
commit faa8fad0b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 76 additions and 5 deletions

View File

@ -0,0 +1,54 @@
<script>
import { Label, Select, Body } from "@budibase/bbui"
import { findAllMatchingComponents } from "builderStore/componentUtils"
import { currentAsset } from "builderStore"
export let parameters
$: tables = findAllMatchingComponents($currentAsset?.props, component =>
component._component.endsWith("table")
).map(table => ({
label: table._instanceName,
value: table._id,
}))
$: tableBlocks = findAllMatchingComponents($currentAsset?.props, component =>
component._component.endsWith("tableblock")
).map(block => ({
label: block._instanceName,
value: `${block._id}-table`,
}))
$: componentOptions = tables.concat(tableBlocks)
</script>
<div class="root">
<Body size="S">Clear the row selection from the selected table.</Body>
<div class="params">
<Label small>Table</Label>
<Select bind:value={parameters.componentId} options={componentOptions} />
</div>
</div>
<style>
.root {
width: 100%;
max-width: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-xl);
}
.root :global(p) {
line-height: 1.5;
}
.params {
display: grid;
column-gap: var(--spacing-xs);
row-gap: var(--spacing-s);
grid-template-columns: 90px 1fr;
align-items: center;
}
</style>

View File

@ -21,3 +21,4 @@ export { default as ShowNotification } from "./ShowNotification.svelte"
export { default as PromptUser } from "./PromptUser.svelte"
export { default as OpenSidePanel } from "./OpenSidePanel.svelte"
export { default as CloseSidePanel } from "./CloseSidePanel.svelte"
export { default as ClearRowSelection } from "./ClearRowSelection.svelte"

View File

@ -156,6 +156,11 @@
"type": "application",
"component": "CloseSidePanel",
"dependsOnFeature": "sidePanel"
},
{
"name": "Clear Row Selection",
"type": "data",
"component": "ClearRowSelection"
}
]
}

View File

@ -4639,6 +4639,7 @@
"illegalChildren": ["section"],
"hasChildren": true,
"showEmptyState": false,
"actions": ["ClearRowSelection"],
"size": {
"width": 600,
"height": 400

View File

@ -156,13 +156,20 @@
}
}
const actions = [
{
type: ActionTypes.ClearRowSelection,
callback: () => (selectedRows = []),
},
]
onDestroy(() => {
rowSelectionStore.actions.updateSelection($component.id, [])
})
</script>
<div use:styleable={$component.styles} class={size}>
<Provider data={dataContext}>
<Provider {actions} data={dataContext}>
<Table
{data}
{schema}

View File

@ -10,6 +10,7 @@ export const ActionTypes = {
ClearForm: "ClearForm",
ChangeFormStep: "ChangeFormStep",
ScrollTo: "ScrollTo",
ClearRowSelection: "ClearRowSelection",
}
export const DNDPlaceholderID = "dnd-placeholder"

View File

@ -47,6 +47,8 @@ export const getActionContextKey = action => {
return key(action.parameters.componentId, ActionTypes.ClearForm)
case "Change Form Step":
return key(action.parameters.componentId, ActionTypes.ChangeFormStep)
case "Clear Row Selection":
return key(action.parameters.componentId, ActionTypes.ClearRowSelection)
default:
return null
}
@ -383,14 +385,14 @@ const showNotificationHandler = action => {
const promptUserHandler = () => {}
const OpenSidePanelHandler = action => {
const openSidePanelHandler = action => {
const { id } = action.parameters
if (id) {
sidePanelStore.actions.open(id)
}
}
const CloseSidePanelHandler = () => {
const closeSidePanelHandler = () => {
sidePanelStore.actions.close()
}
@ -410,8 +412,8 @@ const handlerMap = {
["Continue if / Stop if"]: continueIfHandler,
["Show Notification"]: showNotificationHandler,
["Prompt User"]: promptUserHandler,
["Open Side Panel"]: OpenSidePanelHandler,
["Close Side Panel"]: CloseSidePanelHandler,
["Open Side Panel"]: openSidePanelHandler,
["Close Side Panel"]: closeSidePanelHandler,
}
const confirmTextMap = {