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:
parent
573b3a13f8
commit
faa8fad0b5
|
@ -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>
|
|
@ -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"
|
||||
|
|
|
@ -156,6 +156,11 @@
|
|||
"type": "application",
|
||||
"component": "CloseSidePanel",
|
||||
"dependsOnFeature": "sidePanel"
|
||||
},
|
||||
{
|
||||
"name": "Clear Row Selection",
|
||||
"type": "data",
|
||||
"component": "ClearRowSelection"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -4639,6 +4639,7 @@
|
|||
"illegalChildren": ["section"],
|
||||
"hasChildren": true,
|
||||
"showEmptyState": false,
|
||||
"actions": ["ClearRowSelection"],
|
||||
"size": {
|
||||
"width": 600,
|
||||
"height": 400
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -10,6 +10,7 @@ export const ActionTypes = {
|
|||
ClearForm: "ClearForm",
|
||||
ChangeFormStep: "ChangeFormStep",
|
||||
ScrollTo: "ScrollTo",
|
||||
ClearRowSelection: "ClearRowSelection",
|
||||
}
|
||||
|
||||
export const DNDPlaceholderID = "dnd-placeholder"
|
||||
|
|
|
@ -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 = {
|
||||
|
|
Loading…
Reference in New Issue