diff --git a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
index 6379291787..660470987c 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
@@ -6,7 +6,7 @@
OneOfConfiguration,
RichConfigurations
} from '../../../types'
- import { components } from '$lib/components/apps/editor/component'
+ import { components, type TableAction } from '$lib/components/apps/editor/component'
import ResolveConfig from '../../helpers/ResolveConfig.svelte'
import { findGridItem, initConfig, initOutput } from '$lib/components/apps/editor/appUtils'
import {
@@ -45,6 +45,7 @@
export let customCss: ComponentCustomCSS<'dbexplorercomponent'> | undefined = undefined
export let render: boolean
export let initializing: boolean = true
+ export let actions: TableAction[] = []
$: table = resolvedConfig.type.configuration?.[resolvedConfig.type?.selected]?.table as
| string
@@ -173,6 +174,7 @@
selectedRow: {},
selectedRows: [] as any[],
result: [] as any[],
+ inputs: {},
loading: false,
page: 0,
newChange: { row: 0, column: '', value: undefined },
@@ -598,6 +600,7 @@
bind:this={deleteRow}
/>
{/if}
+
{#if render}
{/key}
{/if}
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/queries/select.ts b/frontend/src/lib/components/apps/components/display/dbtable/queries/select.ts
index 8e6a487794..41c5e22be4 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/queries/select.ts
+++ b/frontend/src/lib/components/apps/components/display/dbtable/queries/select.ts
@@ -268,7 +268,8 @@ export function getSelectInput(
}
},
type: 'runnable',
- fieldType: 'object'
+ fieldType: 'object',
+ hideRefreshButton: false
}
return getQuery
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
index c00c5a17f4..f7a5b0a610 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
@@ -4,7 +4,7 @@
import { createEventDispatcher, getContext } from 'svelte'
import type { AppViewerContext, ComponentCustomCSS } from '../../../types'
- import type { components } from '$lib/components/apps/editor/component'
+ import type { TableAction, components } from '$lib/components/apps/editor/component'
import Alert from '$lib/components/common/alert/Alert.svelte'
import { deepEqual } from 'fast-equals'
@@ -19,6 +19,7 @@
import { cellRendererFactory } from './utils'
import { Trash2 } from 'lucide-svelte'
import type { ColumnDef } from '../dbtable/utils'
+ import AppAggridTableActions from './AppAggridTableActions.svelte'
// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
export let id: string
@@ -31,9 +32,11 @@
export let state: any = undefined
export let outputs: Record>
export let allowDelete: boolean
+ export let actions: TableAction[] = []
+ let inputs = {}
- const { app, selectedComponent, componentControl, darkMode } =
- getContext('AppViewerContext')
+ const context = getContext('AppViewerContext')
+ const { app, selectedComponent, componentControl, darkMode } = context
let css = initCss($app.css?.aggridcomponent, customCss)
@@ -125,6 +128,57 @@
$: eGui && mountGrid()
+ function refreshActions(actions: TableAction[]) {
+ if (!deepEqual(actions, lastActions)) {
+ lastActions = [...actions]
+
+ updateOptions()
+ }
+ }
+
+ let lastActions: TableAction[] | undefined = undefined
+ $: actions && refreshActions(actions)
+
+ const tableActionsFactory = cellRendererFactory((c, p) => {
+ const rowIndex = p.node.rowIndex ?? 0
+ const row = p.data
+
+ new AppAggridTableActions({
+ target: c.eGui,
+ props: {
+ id: id,
+ actions,
+ rowIndex,
+ row,
+ render: true,
+ wrapActions: resolvedConfig.wrapActions,
+
+ onSet: (id, value) => {
+ if (!inputs[id]) {
+ inputs[id] = { [rowIndex]: value }
+ } else {
+ inputs[id] = { ...inputs[id], [rowIndex]: value }
+ }
+
+ outputs?.inputs.set(inputs, true)
+ },
+ onRemove: (id) => {
+ if (inputs?.[id] == undefined) {
+ return
+ }
+ delete inputs[id][rowIndex]
+ inputs[id] = { ...inputs[id] }
+ if (Object.keys(inputs?.[id] ?? {}).length == 0) {
+ delete inputs[id]
+ inputs = { ...inputs }
+ }
+ outputs?.inputs.set(inputs, true)
+ }
+ },
+ context: new Map([['AppViewerContext', context]])
+ })
+ })
+
function transformColumnDefs(columnDefs: any[]) {
const { isValid, errors } = validateColumnDefs(columnDefs)
@@ -134,6 +188,7 @@
}
let r = columnDefs?.filter((x) => x && !x.ignored) ?? []
+
if (allowDelete) {
r.push({
field: 'delete',
@@ -164,6 +219,19 @@
width: 100
})
}
+
+ if (actions && actions.length > 0) {
+ r.push({
+ headerName: 'Actions',
+ cellRenderer: tableActionsFactory,
+ autoHeight: true,
+ cellStyle: { textAlign: 'center' },
+ cellClass: 'grid-cell-centered',
+ lockPosition: 'right',
+
+ ...(!resolvedConfig?.wrapActions ? { minWidth: 130 * actions?.length } : {})
+ })
+ }
return r
}
@@ -204,6 +272,13 @@
cacheBlockSize: 100,
cacheOverflowSize: 10,
maxBlocksInCache: 20,
+ ...(resolvedConfig?.wrapActions
+ ? {
+ rowHeight: Math.max(44, actions.length * 48)
+ }
+ : {
+ rowHeight: 44
+ }),
suppressColumnMoveAnimation: true,
rowSelection: resolvedConfig?.multipleSelectable ? 'multiple' : 'single',
rowMultiSelectWithClick: resolvedConfig?.multipleSelectable
@@ -288,6 +363,13 @@
editable: resolvedConfig?.allEditable,
onCellValueChanged
},
+ ...(resolvedConfig?.wrapActions
+ ? {
+ rowHeight: Math.max(44, actions.length * 48)
+ }
+ : {
+ rowHeight: 44
+ }),
rowSelection: resolvedConfig?.multipleSelectable ? 'multiple' : 'single',
rowMultiSelectWithClick: resolvedConfig?.multipleSelectable
? resolvedConfig.rowMultiselectWithClick
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
index aa42fd5283..8a3d3fd7c8 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -1,7 +1,7 @@