From c246bb07052e65e9b336529ad638bcb9cc9686cd Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Mon, 27 May 2024 20:32:07 +0200 Subject: [PATCH] feat(frontend): add open/close state of the modal in the outputs (#3822) * feat(frontend): add open/close state of the modal in the outputs * feat(frontend): add onOpen/onClose event handlers * feat(frontend): add onOpen/onClose event hander * feat(frontend): improve close logic for drawers * feat(frontend): refactor handleSideEffect into an util file * feat(frontend): improve code * feat(frontend): improve naming * feat(frontend): improve code * feat(frontend): improve code * feat(frontend): remove on Open/Close actions * feat(frontend): simplify the implementation * feat(frontend): fix callbacks --- .../apps/components/layout/AppDrawer.svelte | 17 +++++++++-- .../apps/components/layout/AppModal.svelte | 29 ++++++++++++++++--- .../apps/editor/component/Component.svelte | 4 +++ .../apps/editor/component/components.ts | 11 +++++-- .../settingsPanel/ComponentPanel.svelte | 16 ++++++++++ 5 files changed, 69 insertions(+), 8 deletions(-) diff --git a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte index c153a18fc8..963731d7ea 100644 --- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte +++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte @@ -20,6 +20,8 @@ export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined export let noWFull = false export let render: boolean + export let onOpenRecomputeIds: string[] | undefined = undefined + export let onCloseRecomputeIds: string[] | undefined = undefined const { app, @@ -28,14 +30,17 @@ worldStore, connectingInput, mode, - componentControl + componentControl, + runnableComponents } = getContext('AppViewerContext') const resolvedConfig = initConfig( components['drawercomponent'].initialData.configuration, configuration ) - initOutput($worldStore, id, {}) + const outputs = initOutput($worldStore, id, { + open: false + }) let appDrawer: Drawer @@ -115,6 +120,14 @@ alwaysOpen positionClass={$mode == 'dnd' ? '!absolute' : '!fixed'} shouldUsePortal={false} + on:open={() => { + outputs?.open.set(true) + onOpenRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.())) + }} + on:close={() => { + outputs?.open.set(false) + onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.())) + }} > ('AppViewerContext') //used so that we can count number of outputs setup for first refresh - initOutput($worldStore, id, {}) + const outputs = initOutput($worldStore, id, { + open: false + }) let css = initCss($app.css?.modalcomponent, customCss) let disposable: Disposable | undefined = undefined @@ -52,6 +58,7 @@ unclickableOutside = false }, 1000) } + $componentControl[id] = { openModal: () => { unclosableModal() @@ -117,7 +124,7 @@ parentComponentId: id, subGridIndex: 0 } - disposable?.toggleDrawer() + disposable?.openDrawer() }} size={resolvedConfig.buttonSize} color={resolvedConfig.buttonColor} @@ -129,7 +136,21 @@ {/if} - + { + outputs?.open.set(true) + onOpenRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.())) + }} + on:close={() => { + outputs?.open.set(false) + onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.())) + }} + >
{:else if component.type === 'mapcomponent'} @@ -735,6 +737,8 @@ configuration={component.configuration} id={component.id} customCss={component.customCss} + onOpenRecomputeIds={component.onOpenRecomputeIds} + onCloseRecomputeIds={component.onCloseRecomputeIds} {render} /> {:else if component.type === 'schemaformcomponent'} diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index cfb060d953..852a9356ef 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -195,7 +195,11 @@ export type ListComponent = BaseComponent<'listcomponent'> export type ContainerComponent = BaseComponent<'containercomponent'> & { groupFields: RichConfigurations } -export type DrawerComponent = BaseComponent<'drawercomponent'> +export type DrawerComponent = BaseComponent<'drawercomponent'> & { + onOpenRecomputeIds: string[] | undefined + onCloseRecomputeIds: string[] | undefined +} + export type MapComponent = BaseComponent<'mapcomponent'> export type VerticalSplitPanesComponent = BaseComponent<'verticalsplitpanescomponent'> & { panes: number[] @@ -204,7 +208,10 @@ export type HorizontalSplitPanesComponent = BaseComponent<'horizontalsplitpanesc panes: number[] } export type PdfComponent = BaseComponent<'pdfcomponent'> -export type ModalComponent = BaseComponent<'modalcomponent'> +export type ModalComponent = BaseComponent<'modalcomponent'> & { + onOpenRecomputeIds: string[] | undefined + onCloseRecomputeIds: string[] | undefined +} export type StepperComponent = BaseComponent<'steppercomponent'> & { tabs: string[] } diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index fabdbc76e9..650616f32b 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -408,6 +408,22 @@ ownId={component.id} /> {/if} + {#if (`onOpenRecomputeIds` in componentSettings.item.data && Array.isArray(componentSettings.item.data.onOpenRecomputeIds)) || componentSettings.item.data.type === 'modalcomponent' || componentSettings.item.data.type === 'drawercomponent'} + + {/if} + {#if (`onCloseRecomputeIds` in componentSettings.item.data && Array.isArray(componentSettings.item.data.onCloseRecomputeIds)) || componentSettings.item.data.type === 'modalcomponent' || componentSettings.item.data.type === 'drawercomponent'} + + {/if} {#if componentSettings.item.data.type === 'checkboxcomponent'}