From 4e66d780c185fb26bd30eeb95c5dc9b232a5f335 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Mon, 21 Apr 2025 16:45:13 +0200 Subject: [PATCH] add event handlers to more components --- .../components/inputs/AppDateInput.svelte | 10 ++- .../components/inputs/AppDateTimeInput.svelte | 11 +++- .../components/inputs/AppNumberInput.svelte | 11 +++- .../components/inputs/AppTextInput.svelte | 18 +++++- .../components/inputs/AppTimeInput.svelte | 10 ++- .../editor/component/ComponentInner.svelte | 8 +++ .../apps/editor/component/components.ts | 64 ++++++++++++++----- .../editor/settingsPanel/EventHandlers.svelte | 22 ++++++- 8 files changed, 127 insertions(+), 27 deletions(-) diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte index a17cb29ce2..4544432ae2 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte @@ -17,8 +17,9 @@ export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined export let customCss: ComponentCustomCSS<'dateinputcomponent'> | undefined = undefined export let render: boolean + export let onChange: string[] | undefined = undefined - const { app, worldStore, selectedComponent, componentControl } = + const { app, worldStore, selectedComponent, componentControl, runnableComponents } = getContext('AppViewerContext') let resolvedConfig = initConfig( @@ -64,6 +65,13 @@ } else { outputs?.result.set(undefined) } + fireOnChange() + } + + function fireOnChange() { + if (onChange) { + onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb())) + } } function handleDefault(defaultValue: string | undefined) { diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte index 276d542b79..5c8f3f77b3 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte @@ -25,8 +25,8 @@ export let verticalAlignment: VerticalAlignment | undefined = undefined export let customCss: ComponentCustomCSS<'datetimeinputcomponent'> | undefined = undefined export let render: boolean - - const { app, worldStore, componentControl, selectedComponent } = + export let onChange: string[] | undefined = undefined + const { app, worldStore, componentControl, selectedComponent, runnableComponents } = getContext('AppViewerContext') const iterContext = getContext('ListWrapperContext') @@ -119,6 +119,13 @@ listInputs.set(id, undefined) } } + fireOnChange() + } + + function fireOnChange() { + if (onChange) { + onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb())) + } } function handleDefault(defaultValue: string | undefined) { diff --git a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte index 567094e224..0022fa0885 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte @@ -21,8 +21,8 @@ export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined export let customCss: ComponentCustomCSS<'numberinputcomponent'> | undefined = undefined export let render: boolean - - const { app, worldStore, selectedComponent, componentControl } = + export let onChange: string[] | undefined = undefined + const { app, worldStore, selectedComponent, componentControl, runnableComponents } = getContext('AppViewerContext') const iterContext = getContext('ListWrapperContext') const listInputs: ListInputs | undefined = getContext('ListInputs') @@ -61,6 +61,13 @@ if (iterContext && listInputs) { listInputs.set(id, value ?? undefined) } + fireOnChange() + } + + function fireOnChange() { + if (onChange) { + onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb())) + } } function handleDefault(defaultValue: number | undefined) { diff --git a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte index 731ce20d07..9eba5c8323 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte @@ -28,9 +28,16 @@ | 'emailinputcomponent' | 'textareainputcomponent' = 'textinputcomponent' export let render: boolean + export let onChange: string[] | undefined = undefined - const { app, worldStore, selectedComponent, connectingInput, componentControl } = - getContext('AppViewerContext') + const { + app, + worldStore, + selectedComponent, + connectingInput, + componentControl, + runnableComponents + } = getContext('AppViewerContext') let resolvedConfig = initConfig( components['textinputcomponent'].initialData.configuration, @@ -70,6 +77,13 @@ if (iterContext && listInputs) { listInputs.set(id, val) } + fireOnChange() + } + + function fireOnChange() { + if (onChange) { + onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb())) + } } function handleDefault(defaultValue: string | undefined) { diff --git a/frontend/src/lib/components/apps/components/inputs/AppTimeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTimeInput.svelte index 60a888113f..cfee4a193c 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppTimeInput.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppTimeInput.svelte @@ -15,8 +15,9 @@ export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined export let customCss: ComponentCustomCSS<'timeinputcomponent'> | undefined = undefined export let render: boolean + export let onChange: string[] | undefined = undefined - const { app, worldStore, selectedComponent, componentControl } = + const { app, worldStore, selectedComponent, componentControl, runnableComponents } = getContext('AppViewerContext') let resolvedConfig = initConfig( @@ -78,6 +79,13 @@ // At the end, set the validity outputs?.validity.set(isValid) } + fireOnChange() + } + + function fireOnChange() { + if (onChange) { + onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb())) + } } function handleDefault(defaultValue: string | undefined) { diff --git a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte index acbe2d5b83..c69cd9f178 100644 --- a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte +++ b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte @@ -393,6 +393,7 @@ verticalAlignment={component.verticalAlignment} configuration={component.configuration} customCss={component.customCss} + onChange={component.onChange} {render} /> {:else if component.type === 'quillcomponent'} @@ -405,6 +406,7 @@ customCss={component.customCss} inputType="textarea" appCssKey="textareainputcomponent" + onChange={component.onChange} {render} /> {:else if component.type === 'emailinputcomponent'} @@ -415,6 +417,7 @@ appCssKey="emailinputcomponent" id={component.id} customCss={component.customCss} + onChange={component.onChange} {render} /> {:else if component.type === 'passwordinputcomponent'} @@ -425,6 +428,7 @@ appCssKey="passwordinputcomponent" id={component.id} customCss={component.customCss} + onChange={component.onChange} {render} /> {:else if component.type === 'dateinputcomponent'} @@ -434,6 +438,7 @@ inputType="date" id={component.id} customCss={component.customCss} + onChange={component.onChange} {render} /> {:else if component.type === 'timeinputcomponent'} @@ -442,6 +447,7 @@ configuration={component.configuration} id={component.id} customCss={component.customCss} + onChange={component.onChange} {render} /> {:else if component.type === 'datetimeinputcomponent'} @@ -451,6 +457,7 @@ inputType="date" id={component.id} customCss={component.customCss} + onChange={component.onChange} {render} /> {:else if component.type === 'numberinputcomponent'} @@ -459,6 +466,7 @@ configuration={component.configuration} id={component.id} customCss={component.customCss} + onChange={component.onChange} {render} /> {:else if component.type === 'currencycomponent'} diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index a0b99e4805..bc66fdab8f 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -91,21 +91,51 @@ export type CustomComponentConfig = { reactVersion?: string } } -export type TextComponent = BaseComponent<'textcomponent'> -export type TextInputComponent = BaseComponent<'textinputcomponent'> -export type QuillComponent = BaseComponent<'quillcomponent'> -export type CodeInputComponent = BaseComponent<'codeinputcomponent'> -export type TextareaInputComponent = BaseComponent<'textareainputcomponent'> -export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'> -export type EmailInputComponent = BaseComponent<'emailinputcomponent'> -export type DateInputComponent = BaseComponent<'dateinputcomponent'> -export type TimeInputComponent = BaseComponent<'timeinputcomponent'> -export type DateTimeInputComponent = BaseComponent<'datetimeinputcomponent'> -export type NumberInputComponent = BaseComponent<'numberinputcomponent'> -export type CurrencyComponent = BaseComponent<'currencycomponent'> -export type SliderComponent = BaseComponent<'slidercomponent'> -export type DateSliderComponent = BaseComponent<'dateslidercomponent'> -export type RangeComponent = BaseComponent<'rangecomponent'> +export type TextComponent = BaseComponent<'textcomponent'> & { + onChange?: string[] +} +export type TextInputComponent = BaseComponent<'textinputcomponent'> & { + onChange?: string[] +} +export type QuillComponent = BaseComponent<'quillcomponent'> & { + onChange?: string[] +} +export type CodeInputComponent = BaseComponent<'codeinputcomponent'> & { + onChange?: string[] +} +export type TextareaInputComponent = BaseComponent<'textareainputcomponent'> & { + onChange?: string[] +} +export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'> & { + onChange?: string[] +} +export type EmailInputComponent = BaseComponent<'emailinputcomponent'> & { + onChange?: string[] +} +export type DateInputComponent = BaseComponent<'dateinputcomponent'> & { + onChange?: string[] +} +export type TimeInputComponent = BaseComponent<'timeinputcomponent'> & { + onChange?: string[] +} +export type DateTimeInputComponent = BaseComponent<'datetimeinputcomponent'> & { + onChange?: string[] +} +export type NumberInputComponent = BaseComponent<'numberinputcomponent'> & { + onChange?: string[] +} +export type CurrencyComponent = BaseComponent<'currencycomponent'> & { + onChange?: string[] +} +export type SliderComponent = BaseComponent<'slidercomponent'> & { + onChange?: string[] +} +export type DateSliderComponent = BaseComponent<'dateslidercomponent'> & { + onChange?: string[] +} +export type RangeComponent = BaseComponent<'rangecomponent'> & { + onChange?: string[] +} export type HtmlComponent = BaseComponent<'htmlcomponent'> export type CustomComponent = BaseComponent<'customcomponent'> & { customComponent: CustomComponentConfig @@ -293,7 +323,9 @@ export type NavBarComponent = BaseComponent<'navbarcomponent'> & { navbarItems: NavbarItem[] } -export type DateSelectComponent = BaseComponent<'dateselectcomponent'> +export type DateSelectComponent = BaseComponent<'dateselectcomponent'> & { + onChange?: string[] +} export type RecomputeAllComponent = BaseComponent<'recomputeallcomponent'> diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte index a048a4fb20..8a0e4acafc 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte @@ -23,7 +23,15 @@ 'conditionalwrapper', 'fileinputcomponent', 's3fileinputcomponent', - 'steppercomponent' + 'steppercomponent', + 'dateinputcomponent', + 'datetimeinputcomponent', + 'timeinputcomponent', + 'numberinputcomponent', + 'textinputcomponent', + 'textareainputcomponent', + 'passwordinputcomponent', + 'emailinputcomponent' ] @@ -49,7 +57,7 @@ bind:value={item.data.onCloseRecomputeIds} /> {/if} - {#if (`recomputeIds` in item.data && Array.isArray(item.data.recomputeIds)) || item.data.type === 'buttoncomponent' || item.data.type === 'formcomponent' || item.data.type === 'formbuttoncomponent' || item.data.type === 'checkboxcomponent'} + {#if (`recomputeIds` in item.data && Array.isArray(item.data.recomputeIds)) || item.data.type === 'buttoncomponent' || item.data.type === 'formbuttoncomponent'} id !== ownId)} 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'} + id !== ownId)} + bind:value={item.data.onChange} + /> + {/if} {#if item.data.type === 'resourceselectcomponent' || item.data.type === 'selectcomponent' || item.data.type == 'userresourcecomponent'}