starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-25 08:00:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): add open/close state of the modal in the outputs (#3822)

Browse Source 
* 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
This commit is contained in:
Faton Ramadani
2024-05-27 20:32:07 +02:00
committed by GitHub
parent 621464b550
commit c246bb0705
5 changed files with 69 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+15 -2
View File
@@ -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>('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?.()))
}}
>
<DrawerContent
title={resolvedConfig.drawerTitle}
frontend/src/lib/components/apps/components/layout/AppModal.svelte
+25 -4
View File
@@ -24,6 +24,9 @@
export let noWFull = false
export let render: boolean
export let onOpenRecomputeIds: string[] | undefined = undefined
export let onCloseRecomputeIds: string[] | undefined = undefined
const {
app,
focusedGrid,
@@ -31,11 +34,14 @@
worldStore,
connectingInput,
mode,
componentControl
componentControl,
runnableComponents
} = getContext<AppViewerContext>('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}
<Portal target="#app-editor-top-level-drawer">
<Disposable {id} let:handleClickAway let:zIndex let:open bind:this={disposable}>
<Disposable
{id}
let:handleClickAway
let:zIndex
let:open
bind:this={disposable}
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?.()))
}}
>
<div
class={twMerge(
`${
frontend/src/lib/components/apps/editor/component/Component.svelte
+4
View File
@@ -712,6 +712,8 @@
configuration={component.configuration}
id={component.id}
customCss={component.customCss}
onOpenRecomputeIds={component.onOpenRecomputeIds}
onCloseRecomputeIds={component.onCloseRecomputeIds}
{render}
/>
{: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'}
frontend/src/lib/components/apps/editor/component/components.ts
+9 -2
View File
@@ -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[]
}
frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+16
View File
@@ -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'}
<Recompute
bind:recomputeIds={componentSettings.item.data.onOpenRecomputeIds}
ownId={component.id}
title="Trigger runnables on open"
tooltip="Select components to recompute after this component was opened"
/>
{/if}
{#if (`onCloseRecomputeIds` in componentSettings.item.data && Array.isArray(componentSettings.item.data.onCloseRecomputeIds)) || componentSettings.item.data.type === 'modalcomponent' || componentSettings.item.data.type === 'drawercomponent'}
<Recompute
bind:recomputeIds={componentSettings.item.data.onCloseRecomputeIds}
ownId={component.id}
title="Trigger runnables on close"
tooltip="Select components to recompute after this component was closed"
/>
{/if}
{#if componentSettings.item.data.type === 'checkboxcomponent'}
<Recompute
title="Recompute on toggle"