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

fix: modal action in App AgGrid (#7085)

Browse Source 
* Modal action in App AgGrid

* nit
This commit is contained in:
Diego Imbert
2025-11-07 18:27:06 +01:00
committed by GitHub
parent 9063945161
commit b07c35fe1c
6 changed files with 100 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
+38 -1
View File
@@ -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<any>
@@ -47,8 +48,18 @@
}: Props = $props()
const dispatch = createEventDispatcher()
const { selectedComponent, hoverStore, mode, connectingInput } =
const { selectedComponent, hoverStore, mode, connectingInput, componentControl, app } =
getContext<AppViewerContext>('AppViewerContext')
$componentControl[id] = {
...$componentControl[id],
onDelete: () => {
// Remove associated subgrid
actions.forEach((action) => {
if (action?.type === 'modalcomponent') delete $app.subgrids?.[`${action.id}-0`]
})
}
}
</script>
<RowWrapper
@@ -198,6 +209,19 @@
replaceCallback={true}
{controls}
/>
{:else if action.type == 'modalcomponent'}
<AppModal
{render}
noWFull
id={action.id}
customCss={action.customCss}
configuration={action.configuration}
verticalAlignment="center"
preclickAction={async () => {
dispatch('toggleRow')
selectRow(p)
}}
/>
{:else if action.type == 'checkboxcomponent'}
<AppCheckbox
noInitialize
@@ -256,6 +280,19 @@
replaceCallback={true}
componentInput={action.componentInput}
/>
{:else if action.type == 'modalcomponent'}
<AppModal
{render}
noWFull
id={action.id}
customCss={action.customCss}
configuration={action.configuration}
verticalAlignment="center"
preclickAction={async () => {
dispatch('toggleRow')
selectRow(p)
}}
/>
{:else if action.type == 'checkboxcomponent'}
<AppCheckbox
noInitialize
frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+3 -1
View File
@@ -41,6 +41,7 @@
components,
type ButtonComponent,
type CheckboxComponent,
type ModalComponent,
type SelectComponent
} from '../../../editor/component'
import { initCss } from '../../../utils'
@@ -62,7 +63,8 @@
id: string
componentInput: AppInput | undefined
configuration: RichConfigurations
actionButtons: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[]
actionButtons: (BaseAppComponent &
(ButtonComponent | CheckboxComponent | SelectComponent | ModalComponent))[]
initializing?: boolean | undefined
customCss?: ComponentCustomCSS<'tablecomponent'> | undefined
render: boolean
frontend/src/lib/components/apps/components/layout/AppModal.svelte
+4 -1
View File
@@ -29,6 +29,7 @@
render: boolean
onOpenRecomputeIds?: string[] | undefined
onCloseRecomputeIds?: string[] | undefined
preclickAction?: (() => Promise<void>) | 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
frontend/src/lib/components/apps/editor/component/components.ts
+1 -1
View File
@@ -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'> & {
frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+51 -23
View File
@@ -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>('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}
</div>
</div>
@@ -192,8 +210,8 @@
</div>
<div class="w-full flex gap-2">
<Button
btnClasses="gap-1 flex items-center text-sm text-primary"
wrapperClasses="w-full"
btnClasses="gap-1 flex items-center text-xs text-primary"
wrapperClasses="flex-1"
variant="default"
on:click={() => addComponent('buttoncomponent')}
title="Add Button"
@@ -201,8 +219,8 @@
+ <Inspect size={14} />
</Button>
<Button
btnClasses="gap-1 flex items-center text-sm text-primary"
wrapperClasses="w-full"
btnClasses="gap-1 flex items-center text-xs text-primary"
wrapperClasses="flex-1"
variant="default"
on:click={() => addComponent('checkboxcomponent')}
title="Add Toggle"
@@ -210,14 +228,24 @@
+ <ToggleRightIcon size={14} />
</Button>
<Button
btnClasses="gap-1 flex items-center text-sm text-primary"
wrapperClasses="w-full"
btnClasses="gap-1 flex items-center text-xs text-primary"
wrapperClasses="flex-1"
variant="default"
on:click={() => addComponent('selectcomponent')}
title="Add Select"
>
+ <List size={14} />
</Button>
<DropdownV2
items={[
{
displayName: 'Modal button',
icon: Inspect,
action: () => addComponent('modalcomponent')
}
]}
fixedHeight={false}
></DropdownV2>
</div>
<div class="w-full flex flex-col">
{#if actionsOrder}
frontend/src/lib/components/wizards/TableActionsWizard.svelte
+3 -1
View File
@@ -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
}