From 5a47f5062bc554bfcabb689eae8427e8eb2774d0 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Sun, 18 Feb 2024 18:31:49 +0100 Subject: [PATCH] fix: add support for onToggle for app checkboxes --- .../apps/components/display/table/AppTable.svelte | 12 ++++++++++-- .../apps/components/inputs/AppCheckbox.svelte | 4 ++++ .../apps/editor/component/Component.svelte | 1 + .../components/apps/editor/component/components.ts | 6 +++++- .../apps/editor/settingsPanel/ComponentPanel.svelte | 9 +++++++++ .../apps/editor/settingsPanel/Recompute.svelte | 11 ++++++----- .../script/shared/ScriptTriggers.svelte | 8 ++++++++ 7 files changed, 43 insertions(+), 8 deletions(-) diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte index ca7d8f60a9..38e5c3dd6b 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte @@ -25,7 +25,12 @@ import AppTableFooter from './AppTableFooter.svelte' import { tableOptions } from './tableOptions' import Alert from '$lib/components/common/alert/Alert.svelte' - import { components, type ButtonComponent } from '../../../editor/component' + import { + components, + type ButtonComponent, + type CheckboxComponent, + type SelectComponent + } from '../../../editor/component' import { initCss } from '../../../utils' import { twMerge } from 'tailwind-merge' import { connectOutput, initConfig, initOutput } from '$lib/components/apps/editor/appUtils' @@ -43,7 +48,8 @@ export let id: string export let componentInput: AppInput | undefined export let configuration: RichConfigurations - export let actionButtons: (BaseAppComponent & ButtonComponent)[] + export let actionButtons: (BaseAppComponent & + (ButtonComponent | CheckboxComponent | SelectComponent))[] export let initializing: boolean | undefined = undefined export let customCss: ComponentCustomCSS<'tablecomponent'> | undefined = undefined export let render: boolean @@ -579,6 +585,7 @@ customCss={actionButton.customCss} configuration={actionButton.configuration} recomputeIds={actionButton.recomputeIds} + onToggle={actionButton.onToggle} preclickAction={async () => { toggleRow(row) }} @@ -627,6 +634,7 @@ customCss={actionButton.customCss} configuration={actionButton.configuration} recomputeIds={actionButton.recomputeIds} + onToggle={actionButton.onToggle} preclickAction={async () => { toggleRow(row) }} diff --git a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte index 20296cfd60..69eadc3929 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte @@ -27,6 +27,7 @@ export let extraKey: string | undefined = undefined export let preclickAction: (() => Promise) | undefined = undefined export let noInitialize = false + export let onToggle: string[] | undefined = undefined export let controls: { left: () => boolean; right: () => boolean | string } | undefined = undefined @@ -138,6 +139,9 @@ if (recomputeIds) { recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb())) } + if (onToggle) { + onToggle.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb())) + } }} disabled={resolvedConfig.disabled} /> diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte index 6fad139446..73b9b7dcd9 100644 --- a/frontend/src/lib/components/apps/editor/component/Component.svelte +++ b/frontend/src/lib/components/apps/editor/component/Component.svelte @@ -441,6 +441,7 @@ configuration={component.configuration} customCss={component.customCss} recomputeIds={component.recomputeIds} + onToggle={component.onToggle} {render} /> {:else if component.type === 'textinputcomponent'} diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index 3bc83cdc38..d3c15c136e 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -151,7 +151,10 @@ export type SelectComponent = BaseComponent<'selectcomponent'> & RecomputeOthers export type ResourceSelectComponent = BaseComponent<'resourceselectcomponent'> & RecomputeOthersSource export type MultiSelectComponent = BaseComponent<'multiselectcomponent'> -export type CheckboxComponent = BaseComponent<'checkboxcomponent'> & RecomputeOthersSource +export type CheckboxComponent = BaseComponent<'checkboxcomponent'> & + RecomputeOthersSource & { + onToggle?: string[] + } export type RadioComponent = BaseComponent<'radiocomponent'> export type IconComponent = BaseComponent<'iconcomponent'> export type HorizontalDividerComponent = BaseComponent<'horizontaldividercomponent'> @@ -1715,6 +1718,7 @@ This is a paragraph. initialData: { ...defaultAlignement, componentInput: undefined, + onToggle: [], recomputeIds: true, configuration: { label: { diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index bba0ae2731..b5f561ad88 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -385,6 +385,15 @@ ownId={component.id} /> {/if} + {#if componentSettings.item.data.type === 'checkboxcomponent'} + + {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte index a2816af158..c8c5b5767e 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte @@ -7,6 +7,11 @@ export let recomputeIds: string[] | undefined = undefined export let ownId: string + export let title: string = 'Trigger runnables on success' + export let tooltip: string = + 'Select components to recompute after this runnable has successfully run' + export let documentationLink: string = + 'https://www.windmill.dev/docs/apps/app-runnable-panel#recompute-others' const { runnableComponents } = getContext('AppViewerContext') @@ -19,11 +24,7 @@ } - + {#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte index 853750aed3..1aadd48467 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte @@ -26,11 +26,19 @@ function computeOnSuccessEvents(app: App, _id: string) { const nr: string[] = [] getAllGridItems(app).forEach((x) => { + if (!(x.data && typeof x.data == 'object')) { + return + } if (`recomputeIds` in x.data) { if (x.data.recomputeIds?.includes(id)) { nr.push(`success of ${x.id}`) } } + if (`onToggle` in x.data) { + if (x.data.onToggle?.includes(id)) { + nr.push(`toggle of ${x.id}`) + } + } }) onSuccessEvents = nr }