add onChange to aggrid tables

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<any> | undefined = $state(undefined)

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}
 		/>
 	</div>

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}
 	<Loader2 class="animate-spin" />

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>('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,

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}
 	<Loader2 class="animate-spin" />

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'}
 			<AppAlert

frontend/src/lib/components/apps/editor/component/components.ts

@@ -185,22 +185,26 @@ export type TableComponent = BaseComponent<'tablecomponent'> & {
 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'> & {

frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte

@@ -35,7 +35,12 @@
 		'textinputcomponent',
 		'textareainputcomponent',
 		'passwordinputcomponent',
-		'emailinputcomponent'
+		'emailinputcomponent',
+		'aggridcomponent',
+		'aggridcomponentee',
+		'aggridinfinitecomponent',
+		'aggridinfinitecomponentee',
+		'dbexplorercomponent'
 	]
 </script>
 
@@ -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'}
 			<EventHandlerItem
 				title="on change"
 				tooltip="When a human change the value of the input"