From 28affd0e71dc6870cfbc31ccdde6d2d17e719fee Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Wed, 8 Oct 2025 20:15:26 +0000 Subject: [PATCH] add onChange to aggrid tables --- .../display/table/AppAggridExplorerTable.svelte | 13 ++++++++++++- .../display/table/AppAggridInfiniteTable.svelte | 5 ++++- .../table/AppAggridInfiniteTableEe.svelte | 5 ++++- .../display/table/AppAggridTable.svelte | 17 ++++++++++++++--- .../display/table/AppAggridTableEe.svelte | 5 ++++- .../apps/editor/component/ComponentInner.svelte | 4 ++++ .../apps/editor/component/components.ts | 5 +++++ .../editor/settingsPanel/EventHandlers.svelte | 9 +++++++-- 8 files changed, 54 insertions(+), 9 deletions(-) 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 24910ffa2b..ec4850b93d 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte @@ -23,6 +23,7 @@ import AppAggridTableActions from './AppAggridTableActions.svelte' import Popover from '$lib/components/Popover.svelte' import { stateSnapshot, withProps } from '$lib/svelte5Utils.svelte' + import { get } from 'svelte/store' interface Props { id: string @@ -40,6 +41,7 @@ actions?: TableAction[] result?: any[] | undefined allowColumnDefsActions?: boolean + onChange?: string[] | undefined } let { @@ -53,7 +55,8 @@ allowDelete, actions = [], result = undefined, - allowColumnDefsActions = true + allowColumnDefsActions = true, + onChange = undefined }: Props = $props() let inputs = {} @@ -99,6 +102,13 @@ const dispatch = createEventDispatcher() + function fireOnChange() { + let runnableComponents = get(context.runnableComponents) + if (onChange) { + onChange.forEach((id) => runnableComponents?.[id]?.cb?.forEach((cb) => cb())) + } + } + function onCellValueChanged(event) { let dataCell = event.newValue outputs?.newChange?.set({ @@ -120,6 +130,7 @@ }) resolvedConfig?.extraConfig?.['defaultColDef']?.['onCellValueChanged']?.(event) + fireOnChange() } let api: GridApi | undefined = $state(undefined) diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte index eaf3804d0a..251ddfb431 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte @@ -31,6 +31,7 @@ render: boolean customCss?: ComponentCustomCSS<'aggridinfinitecomponent'> | undefined actions?: TableAction[] | undefined + onChange?: string[] | undefined } let { @@ -40,7 +41,8 @@ initializing = $bindable(undefined), render, customCss = undefined, - actions = undefined + actions = undefined, + onChange = undefined }: Props = $props() let runnableComponent: RunnableComponent | undefined = $state(undefined) @@ -232,6 +234,7 @@ {result} {actions} allowDelete={false} + {onChange} bind:this={aggrid} /> diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTableEe.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTableEe.svelte index a76821dfb7..891eae4c11 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTableEe.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTableEe.svelte @@ -20,6 +20,7 @@ render: boolean customCss?: ComponentCustomCSS<'aggridinfinitecomponentee'> | undefined actions?: TableAction[] + onChange?: string[] | undefined } let { @@ -30,7 +31,8 @@ initializing = $bindable(undefined), render, customCss = undefined, - actions = [] + actions = [], + onChange = undefined }: Props = $props() let loaded = $state(false) @@ -54,6 +56,7 @@ {render} {customCss} {actions} + {onChange} /> {:else} 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 bd7e73cf5a..5b1bc1cea2 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte @@ -45,6 +45,7 @@ import { Button } from '$lib/components/common' import InputValue from '../../helpers/InputValue.svelte' import { stateSnapshot, withProps } from '$lib/svelte5Utils.svelte' + import { get } from 'svelte/store' interface Props { // import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css' @@ -56,6 +57,7 @@ customCss?: ComponentCustomCSS<'aggridcomponent'> | undefined actions?: TableAction[] | undefined actionsOrder?: RichConfiguration | undefined + onChange?: string[] | undefined } let { @@ -66,7 +68,8 @@ render, customCss = undefined, actions = undefined, - actionsOrder = undefined + actionsOrder = undefined, + onChange = undefined }: Props = $props() const context = getContext('AppViewerContext') @@ -188,6 +191,13 @@ let clientHeight: number = $state(0) let clientWidth: number = $state(0) + function fireOnChange() { + let runnableComponents = get(context.runnableComponents) + if (onChange) { + onChange.forEach((id) => runnableComponents?.[id]?.cb?.forEach((cb) => cb())) + } + } + function onCellValueChanged(event) { if (result) { let dataCell = event.newValue @@ -207,6 +217,7 @@ let data = { ...result[idx] } outputs?.selectedRow?.set(data) resolvedConfig?.extraConfig?.['defaultColDef']?.['onCellValueChanged']?.(event) + fireOnChange() } } @@ -326,7 +337,7 @@ const agColumnDefs = transformColumnDefs({ columnDefs: Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject) - ? [...resolvedConfig?.columnDefs] as WindmillColumnDef[] + ? ([...resolvedConfig?.columnDefs] as WindmillColumnDef[]) : [], actions, customActionsHeader: resolvedConfig?.customActionsHeader, @@ -474,7 +485,7 @@ const agColumnDefs = transformColumnDefs({ columnDefs: Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject) - ? [...resolvedConfig?.columnDefs] as WindmillColumnDef[] + ? ([...resolvedConfig?.columnDefs] as WindmillColumnDef[]) : [], actions, customActionsHeader: resolvedConfig?.customActionsHeader, diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTableEe.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTableEe.svelte index 7456657920..3f80639515 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridTableEe.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTableEe.svelte @@ -25,6 +25,7 @@ customCss?: ComponentCustomCSS<'aggridcomponent'> | undefined actions?: TableAction[] actionsOrder?: RichConfiguration | undefined + onChange?: string[] | undefined } let { @@ -36,7 +37,8 @@ render, customCss = undefined, actions = [], - actionsOrder = undefined + actionsOrder = undefined, + onChange = undefined }: Props = $props() let loaded = $state(false) @@ -61,6 +63,7 @@ {customCss} {actions} {actionsOrder} + {onChange} /> {:else} diff --git a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte index 52ed61403c..cfb53b300f 100644 --- a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte +++ b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte @@ -237,6 +237,7 @@ customCss={component.customCss} actions={component.actions ?? []} actionsOrder={component.actionsOrder ?? undefined} + onChange={component.onChange} {render} /> {:else if component.type === 'aggridcomponentee'} @@ -249,6 +250,7 @@ customCss={component.customCss} actions={component.actions ?? []} actionsOrder={component.actionsOrder ?? undefined} + onChange={component.onChange} {render} /> {:else if component.type === 'aggridinfinitecomponent'} @@ -259,6 +261,7 @@ componentInput={component.componentInput} customCss={component.customCss} actions={component.actions ?? []} + onChange={component.onChange} {render} /> {:else if component.type === 'aggridinfinitecomponentee'} @@ -271,6 +274,7 @@ customCss={component.customCss} actions={component.actions ?? []} {render} + onChange={component.onChange} /> {:else if component.type === 'alertcomponent'} & { export type AggridComponent = BaseComponent<'aggridcomponent'> & { actions: TableAction[] actionsOrder: RichConfiguration | undefined + onChange?: string[] | undefined } export type AggridComponentEe = BaseComponent<'aggridcomponentee'> & { license: string actions: TableAction[] actionsOrder: RichConfiguration | undefined + onChange?: string[] | undefined } export type AggridInfiniteComponent = BaseComponent<'aggridinfinitecomponent'> & { actions: TableAction[] actionsOrder: RichConfiguration | undefined + onChange?: string[] | undefined } export type AggridInfiniteComponentEe = BaseComponent<'aggridinfinitecomponentee'> & { actions: TableAction[] license: string actionsOrder: RichConfiguration | undefined + onChange?: string[] | undefined } export type DisplayComponent = BaseComponent<'displaycomponent'> @@ -289,6 +293,7 @@ export type DBExplorerComponent = BaseComponent<'dbexplorercomponent'> & { columns: RichConfiguration actions: TableAction[] actionsOrder: RichConfiguration | undefined + onChange?: string[] | undefined } export type S3FileInputComponent = BaseComponent<'s3fileinputcomponent'> & { diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte index e6d9f8124d..8f71742aed 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte @@ -35,7 +35,12 @@ 'textinputcomponent', 'textareainputcomponent', 'passwordinputcomponent', - 'emailinputcomponent' + 'emailinputcomponent', + 'aggridcomponent', + 'aggridcomponentee', + 'aggridinfinitecomponent', + 'aggridinfinitecomponentee', + 'dbexplorercomponent' ] @@ -86,7 +91,7 @@ bind:value={item.data.onToggle} /> {/if} - {#if item.data.type === 'dateinputcomponent' || item.data.type === 'datetimeinputcomponent' || item.data.type === 'timeinputcomponent' || item.data.type === 'numberinputcomponent' || item.data.type === 'textinputcomponent' || item.data.type === 'textareainputcomponent' || item.data.type === 'passwordinputcomponent' || item.data.type === 'emailinputcomponent'} + {#if item.data.type === 'dateinputcomponent' || item.data.type === 'datetimeinputcomponent' || item.data.type === 'timeinputcomponent' || item.data.type === 'numberinputcomponent' || item.data.type === 'textinputcomponent' || item.data.type === 'textareainputcomponent' || item.data.type === 'passwordinputcomponent' || item.data.type === 'emailinputcomponent' || item.data.type === 'aggridcomponent' || item.data.type === 'aggridcomponentee' || item.data.type === 'aggridinfinitecomponent' || item.data.type === 'aggridinfinitecomponentee' || item.data.type === 'dbexplorercomponent'}