From b07c35fe1c9dbc4955ce47766ef92bd5cfdac4c8 Mon Sep 17 00:00:00 2001 From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com> Date: Fri, 7 Nov 2025 18:27:06 +0100 Subject: [PATCH] fix: modal action in App AgGrid (#7085) * Modal action in App AgGrid * nit --- .../table/AppAggridTableActions.svelte | 39 +++++++++- .../components/display/table/AppTable.svelte | 4 +- .../apps/components/layout/AppModal.svelte | 5 +- .../apps/editor/component/components.ts | 2 +- .../editor/settingsPanel/TableActions.svelte | 74 +++++++++++++------ .../wizards/TableActionsWizard.svelte | 4 +- 6 files changed, 100 insertions(+), 28 deletions(-) diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte index 18b5a8b58b..3b9c3eef96 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte @@ -19,6 +19,7 @@ import RowWrapper from '../../layout/RowWrapper.svelte' import type { ICellRendererParams } from 'ag-grid-community' import Popover from '$lib/components/meltComponents/Popover.svelte' + import AppModal from '../../layout/AppModal.svelte' interface Props { p: ICellRendererParams @@ -47,8 +48,18 @@ }: Props = $props() const dispatch = createEventDispatcher() - const { selectedComponent, hoverStore, mode, connectingInput } = + const { selectedComponent, hoverStore, mode, connectingInput, componentControl, app } = getContext('AppViewerContext') + + $componentControl[id] = { + ...$componentControl[id], + onDelete: () => { + // Remove associated subgrid + actions.forEach((action) => { + if (action?.type === 'modalcomponent') delete $app.subgrids?.[`${action.id}-0`] + }) + } + } + {:else if action.type == 'modalcomponent'} + { + dispatch('toggleRow') + selectRow(p) + }} + /> {:else if action.type == 'checkboxcomponent'} + {:else if action.type == 'modalcomponent'} + { + dispatch('toggleRow') + selectRow(p) + }} + /> {:else if action.type == 'checkboxcomponent'} | undefined render: boolean diff --git a/frontend/src/lib/components/apps/components/layout/AppModal.svelte b/frontend/src/lib/components/apps/components/layout/AppModal.svelte index a5f3113105..968fcc21ce 100644 --- a/frontend/src/lib/components/apps/components/layout/AppModal.svelte +++ b/frontend/src/lib/components/apps/components/layout/AppModal.svelte @@ -29,6 +29,7 @@ render: boolean onOpenRecomputeIds?: string[] | undefined onCloseRecomputeIds?: string[] | undefined + preclickAction?: (() => Promise) | undefined } let { @@ -40,7 +41,8 @@ noWFull = false, render, onOpenRecomputeIds = undefined, - onCloseRecomputeIds = undefined + onCloseRecomputeIds = undefined, + preclickAction }: Props = $props() const { @@ -156,6 +158,7 @@ e?.stopPropagation() }} on:click={async (e) => { + await preclickAction?.() $focusedGrid = { parentComponentId: id, subGridIndex: 0 diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index ab9ca96c19..3a639bfb1b 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -176,7 +176,7 @@ export type AgChartsComponentEe = BaseComponent<'agchartscomponentee'> & { export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'> export type TableAction = BaseAppComponent & - (ButtonComponent | CheckboxComponent | SelectComponent) & + (ButtonComponent | CheckboxComponent | SelectComponent | ModalComponent) & GridItem export type TableComponent = BaseComponent<'tablecomponent'> & { diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte index 73a381acd7..17b301d58c 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte @@ -9,7 +9,12 @@ import { getContext, onMount } from 'svelte' import type { AppViewerContext, BaseAppComponent, RichConfiguration } from '../../types' import { appComponentFromType } from '../appUtils' - import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component' + import type { + ButtonComponent, + CheckboxComponent, + ModalComponent, + SelectComponent + } from '../component' import PanelSection from './common/PanelSection.svelte' import { GripVertical, Inspect, List, ToggleRightIcon, ListOrdered } from 'lucide-svelte' import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action' @@ -17,10 +22,12 @@ import { flip } from 'svelte/animate' import TableActionsWizard from '$lib/components/wizards/TableActionsWizard.svelte' import Alert from '$lib/components/common/alert/Alert.svelte' + import DropdownV2 from '$lib/components/DropdownV2.svelte' interface Props { components: - | (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[] + | (BaseAppComponent & + (ButtonComponent | CheckboxComponent | SelectComponent | ModalComponent))[] | undefined actionsOrder?: RichConfiguration | undefined id: string @@ -48,35 +55,40 @@ const { selectedComponent, app, errorByComponent, hoverStore } = getContext('AppViewerContext') - function addComponent(typ: 'buttoncomponent' | 'checkboxcomponent' | 'selectcomponent') { + function addComponent( + typ: 'buttoncomponent' | 'checkboxcomponent' | 'selectcomponent' | 'modalcomponent' + ) { if (!components) { return } const actionId = getNextId(components.map((x) => x.id.split('_')[1])) - const newComponent = { - ...appComponentFromType(typ)(`${id}_${actionId}`), - recomputeIds: [] - } + const newComponent = appComponentFromType(typ)(`${id}_${actionId}`) - if (typ == 'buttoncomponent') { + if (newComponent?.type == 'buttoncomponent') { if (newComponent?.configuration?.size) { // @ts-ignore newComponent.configuration.size = { type: 'static', value: 'xs2' } } } - - items = [ - ...items, - { - value: newComponent, - id: generateRandomString(), - originalIndex: items.length + if (newComponent?.type == 'modalcomponent') { + if (newComponent?.configuration?.buttonSize) { + // @ts-ignore + newComponent.configuration.buttonSize = { type: 'static', value: 'xs2' } } - ] + // Create associated subgrid + if ($app.subgrids) $app.subgrids[`${newComponent.id}-0`] = [] + newComponent.id + } - components = [...components, newComponent] + const newItem = { + value: newComponent, + id: generateRandomString(), + originalIndex: items.length + } + items = [...items, newItem as any] + components = [...components, newComponent as any] $app = $app } @@ -84,6 +96,10 @@ if (!components) { return } + if (components.find((x) => x.id === cid)?.type === 'modalcomponent') { + // Remove associated subgrid + delete $app.subgrids?.[`${cid}-0`] + } components = components.filter((x) => x.id !== cid) delete $errorByComponent[cid] @@ -171,6 +187,8 @@ Select {:else if component.type == 'checkboxcomponent'} Toggle + {:else if component.type == 'modalcomponent'} + Modal {/if} @@ -192,8 +210,8 @@
+ addComponent('modalcomponent') + } + ]} + fixedHeight={false} + >
{#if actionsOrder} diff --git a/frontend/src/lib/components/wizards/TableActionsWizard.svelte b/frontend/src/lib/components/wizards/TableActionsWizard.svelte index 83b1eb258d..2156848e31 100644 --- a/frontend/src/lib/components/wizards/TableActionsWizard.svelte +++ b/frontend/src/lib/components/wizards/TableActionsWizard.svelte @@ -10,13 +10,15 @@ import type { ButtonComponent, CheckboxComponent, + ModalComponent, SelectComponent } from '../apps/editor/component' interface Props { actionsOrder?: RichConfiguration | undefined selectedId?: string | undefined components: - | (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[] + | (BaseAppComponent & + (ButtonComponent | CheckboxComponent | SelectComponent | ModalComponent))[] | undefined trigger?: import('svelte').Snippet }