From 0afd68d474b65ce1d1026bdabb081d775e0dcaa3 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Fri, 12 Apr 2024 11:45:11 +0200 Subject: [PATCH 1/2] fix(frontend): Fix s3 uploader (#3539) * fix(frontend): Correctly handle multiple files * fix(frontend): Correctly handle multiple files * fix(frontend): improve comparaison * feat(frontend): fix drag and drop --- .../common/fileInput/FileInput.svelte | 18 ++++++++ .../common/fileUpload/FileUpload.svelte | 44 +++++++++++-------- 2 files changed, 43 insertions(+), 19 deletions(-) diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte index a115999da6..9ed0a36468 100644 --- a/frontend/src/lib/components/common/fileInput/FileInput.svelte +++ b/frontend/src/lib/components/common/fileInput/FileInput.svelte @@ -77,6 +77,22 @@ }) } + function handleDragOver(event: DragEvent) { + event.preventDefault() + if (event.dataTransfer) { + event.dataTransfer.dropEffect = 'copy' + } + } + + function handleDrop(event: DragEvent) { + event.preventDefault() + if (event.dataTransfer) { + if (event.dataTransfer.files && event.dataTransfer.files.length) { + onChange(event.dataTransfer.files) + } + } + } + function removeFile(index: number) { if (!files) return files.splice(index, 1) @@ -114,6 +130,8 @@ duration-200 rounded-lg p-1`, c )} + on:dragover={handleDragOver} + on:drop={handleDrop} {style} > {#if !hideIcon && !files} diff --git a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte index 9d18a96275..bd45df7b67 100644 --- a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte +++ b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte @@ -44,7 +44,8 @@ } } - let xhr: XMLHttpRequest | undefined = undefined + let activeUploads: { xhr: XMLHttpRequest; fileName: string }[] = [] + async function uploadFileToS3(fileToUpload: File, fileToUploadKey: string) { if (fileToUpload === undefined || fileToUploadKey === undefined) { return @@ -72,6 +73,7 @@ path: path, file: fileToUpload } + $fileUploads = [...$fileUploads, uploadData] // // Use a custom TransformStream to track upload progress @@ -119,7 +121,9 @@ // } // ) - xhr = new XMLHttpRequest() + let xhr = new XMLHttpRequest() + activeUploads.push({ xhr, fileName: fileToUpload.name }) + const response = (await new Promise((resolve, reject) => { xhr?.upload.addEventListener('progress', (event) => { if (event.lengthComputable) { @@ -144,7 +148,8 @@ reject(response) } } - xhr = undefined + + activeUploads = activeUploads.filter((x) => x.fileName !== fileToUpload.name) }) xhr?.open( 'POST', @@ -190,11 +195,21 @@ sendUserToast('File deleted!') } - onDestroy(() => { - if (xhr) { - xhr?.abort - xhr = undefined + function clearRequests() { + activeUploads.forEach(({ xhr }) => xhr.abort()) + activeUploads = [] + } + + function abortUpload(fileName: string) { + const upload = activeUploads.find((x) => x.fileName === fileName) + if (upload) { + upload.xhr.abort() + activeUploads = activeUploads.filter((x) => x.fileName !== fileName) } + } + + onDestroy(() => { + clearRequests() }) @@ -232,10 +247,7 @@ return } - if (xhr) { - xhr.abort() - xhr = undefined - } + abortUpload(fileUpload.name) $fileUploads = $fileUploads.filter( (_fileUpload) => _fileUpload.name !== fileUpload.name @@ -260,10 +272,7 @@ return } - if (xhr) { - xhr.abort() - xhr = undefined - } + clearRequests() $fileUploads = $fileUploads.filter( (_fileUpload) => _fileUpload.name !== fileUpload.name @@ -306,10 +315,7 @@ if (fileUpload.path) { deleteFile(fileUpload.path) } - if (xhr) { - xhr.abort() - xhr = undefined - } + abortUpload(fileUpload.name) }} startIcon={{ icon: Trash From 48ad095633f3e83f16eccc15b1de534c4804d807 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Fri, 12 Apr 2024 11:45:24 +0200 Subject: [PATCH 2/2] feat(frontend): Ag grid actions (#3535) * feat(frontend): wip * feat(frontend): wip * feat(frontend): implement cellRenderer * feat(frontend): wip * feat(frontend): wip * feat(frontend): Fix actions width * feat(frontend): Fix interactions * feat(frontend): Fix styling * feat(frontend): Correctly handleAgGrid EE * feat(frontend): Fix select * feat(frontend): Fix select * feat(frontend): Fix how row is passed * feat(frontend): Fix update * feat(frontend): Correctly implement cache * feat(frontend): Correctly implement cache * feat(frontend): simplify how refreshActions work * feat(frontend): improve comparaison * feat(frontend): simplify refreshactins * feat(frontend): clean up * feat(frontend): clean up * feat(frontend): add inputs output + fix row eval * feat(frontend): add config to wrap actions * feat(frontend): add config to wrap actions --------- Co-authored-by: Ruben Fiszel --- frontend/src/lib/assets/app.css | 13 + .../display/table/AppAggridTable.svelte | 169 ++++++++++-- .../table/AppAggridTableActions.svelte | 244 ++++++++++++++++++ .../display/table/AppAggridTableEe.svelte | 12 +- .../components/display/table/AppTable.svelte | 1 - .../apps/components/inputs/AppCheckbox.svelte | 1 + .../apps/editor/AppEditorHeader.svelte | 3 + .../components/apps/editor/AppInputs.svelte | 9 + .../apps/editor/SettingsPanel.svelte | 13 + .../lib/components/apps/editor/appUtils.ts | 27 ++ .../apps/editor/component/Component.svelte | 2 + .../component/ComponentCallbacks.svelte | 5 + .../apps/editor/component/components.ts | 19 +- .../components/OutputHeader.svelte | 14 + .../components/TableActionsOutput.svelte | 7 + .../InlineScriptsPanelWithTable.svelte | 14 + .../apps/editor/inlineScriptsPanel/utils.ts | 14 + .../settingsPanel/ComponentPanel.svelte | 3 + frontend/src/lib/components/apps/utils.ts | 10 + frontend/src/routes/kitchen_sink/+page.svelte | 2 + 20 files changed, 561 insertions(+), 21 deletions(-) create mode 100644 frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css index e8cc5949b6..d9f1734f4c 100644 --- a/frontend/src/lib/assets/app.css +++ b/frontend/src/lib/assets/app.css @@ -117,3 +117,16 @@ } } } + +.grid-cell-centered { + display: flex; + align-items: center; + justify-content: center; +} +.grid-cell-centered .svelte-select { + height: 32px !important; +} + +.grid-cell-centered .selected-item { + margin-top: -4px; +} diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte index ba3b5adae0..028db8577d 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte @@ -1,23 +1,33 @@ + + +
+ {#each actions as action, actionIndex} + + + +
{ + if (action.id !== $hoverStore) { + $hoverStore = action.id + } + }} + on:mouseout|stopPropagation={() => { + if ($hoverStore !== undefined) { + $hoverStore = undefined + } + }} + on:pointerdown|stopPropagation={() => { + if ($selectedComponent?.includes(action.id)) { + $selectedComponent = [] + } else { + $selectedComponent = [action.id] + } + }} + class={twMerge( + ($selectedComponent?.includes(action.id) || $hoverStore === action.id) && + $mode !== 'preview' + ? 'outline outline-indigo-500 outline-1 outline-offset-1 relative z-50' + : 'relative' + )} + > + {#if $mode !== 'preview'} + + +
{ + $selectedComponent = [action.id] + }} + > + {action.id} +
+ + {#if $connectingInput.opened} +
+ + + + + + connectOutput(connectingInput, 'buttoncomponent', action.id, detail)} + componentId={action.id} + /> + +
+ {/if} + {/if} + {#if rowIndex === 0} + {@const controls = { + left: () => { + if (actionIndex === 0) { + $selectedComponent = [id] + return true + } else if (actionIndex > 0) { + $selectedComponent = [actions[actionIndex - 1].id] + return true + } + return false + }, + right: () => { + if (actionIndex === actions.length - 1) { + return id + } else if (actionIndex < actions.length - 1) { + $selectedComponent = [actions[actionIndex + 1].id] + return true + } + return false + } + }} + {#if action.type == 'buttoncomponent'} + { + dispatch('toggleRow') + }} + id={action.id} + customCss={action.customCss} + configuration={action.configuration} + recomputeIds={action.recomputeIds} + extraQueryParams={{ + row + }} + componentInput={action.componentInput} + verticalAlignment="center" + {controls} + /> + {:else if action.type == 'checkboxcomponent'} + { + dispatch('toggleRow') + }} + verticalAlignment="center" + {controls} + /> + {:else if action.type == 'selectcomponent'} +
+ { + dispatch('toggleRow') + }} + {controls} + /> +
+ {/if} + {:else if action.type == 'buttoncomponent'} + { + dispatch('toggleRow') + }} + noWFull + id={action.id} + customCss={action.customCss} + configuration={action.configuration} + recomputeIds={action.recomputeIds} + extraQueryParams={{ + row + }} + componentInput={action.componentInput} + /> + {:else if action.type == 'checkboxcomponent'} + { + dispatch('toggleRow') + }} + /> + {:else if action.type == 'selectcomponent'} +
+ { + dispatch('toggleRow') + }} + /> +
+ {/if} +
+ {/each} +
+ diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTableEe.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTableEe.svelte index 914fc08595..a7c394dbdf 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridTableEe.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTableEe.svelte @@ -9,6 +9,7 @@ import 'ag-grid-community/styles/ag-grid.css' import 'ag-grid-community/styles/ag-theme-alpine.css' import { Loader2 } from 'lucide-svelte' + import type { TableAction } from '$lib/components/apps/editor/component' export let id: string export let license: string @@ -17,6 +18,7 @@ export let initializing: boolean | undefined = undefined export let render: boolean export let customCss: ComponentCustomCSS<'aggridcomponent'> | undefined = undefined + export let actions: TableAction[] = [] let loaded = false async function load() { @@ -31,7 +33,15 @@ {#if loaded} - + {:else} {/if} 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 2a6abe5e3b..3f19a88ee0 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte @@ -651,7 +651,6 @@ { preclickAction?.() + value = e.detail if (recomputeIds) { recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb())) diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte index 425b864f06..add0256ff8 100644 --- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte @@ -184,6 +184,9 @@ if (c.type === 'tablecomponent') { r.push(...c.actionButtons.map((x) => ({ input: x.componentInput, id: x.id }))) } + if (c.type === 'aggridcomponent' || c.type === 'aggridcomponentee') { + r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id }))) + } if (c.type === 'menucomponent') { r.push(...c.menuItems.map((x) => ({ input: x.componentInput, id: x.id }))) } diff --git a/frontend/src/lib/components/apps/editor/AppInputs.svelte b/frontend/src/lib/components/apps/editor/AppInputs.svelte index a43d0f165f..58d4aab692 100644 --- a/frontend/src/lib/components/apps/editor/AppInputs.svelte +++ b/frontend/src/lib/components/apps/editor/AppInputs.svelte @@ -29,6 +29,15 @@ {/each} + {:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee'} +
+ +
+ {#each gridItem.data.actions as actionButton (actionButton.id)} + + {/each} +
+
{:else} {/if} diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte index f9294d8843..65b79ad007 100644 --- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte +++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte @@ -33,6 +33,13 @@ return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id } } } + } else if (x?.data?.type === 'aggridcomponent' || x?.data?.type === 'aggridcomponentee') { + if (x?.data?.actions) { + const tableAction = x.data.actions.find((x) => x.id === id) + if (tableAction) { + return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id } + } + } } }) .find((x) => x) @@ -81,6 +88,12 @@ (x) => x.id !== tableActionSettings?.item.id ) } + + if (parent.data.type === 'aggridcomponent' || parent.data.type === 'aggridcomponentee') { + parent.data.actions = parent.data.actions.filter( + (x) => x.id !== tableActionSettings?.item.id + ) + } } }} /> diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts index 4564c769f9..d38a30269e 100644 --- a/frontend/src/lib/components/apps/editor/appUtils.ts +++ b/frontend/src/lib/components/apps/editor/appUtils.ts @@ -72,6 +72,11 @@ export function dfs( return [item.id, id] } else if (item.data.type == 'menucomponent' && item.data.menuItems.find((x) => id == x.id)) { return [item.id, id] + } else if ( + (item.data.type == 'aggridcomponent' || item.data.type == 'aggridcomponentee') && + item.data.actions.find((x) => id == x.id) + ) { + return [item.id, id] } else { for (let i = 0; i < (item.data.numberOfSubgrids ?? 0); i++) { const res = dfs(subgrids[`${item.id}-${i}`], id, subgrids) @@ -165,6 +170,9 @@ export function allsubIds(app: App, parentId: string): string[] { if (item.data.type === 'tablecomponent') { subIds.push(...item.data.actionButtons?.map((x) => x.id)) } + if (item.data.type === 'aggridcomponent' || item.data.type === 'aggridcomponentee') { + subIds.push(...item.data.actions?.map((x) => x.id)) + } if (item.data.type === 'menucomponent') { subIds.push(...item.data.menuItems?.map((x) => x.id)) } @@ -182,6 +190,8 @@ export function getNextGridItemId(app: App): string { const allIds = allItems(app.grid, app.subgrids).flatMap((x) => { if (x.data.type === 'tablecomponent') { return [x.id, ...x.data.actionButtons.map((x) => x.id)] + } else if (x.data.type === 'aggridcomponent' || x.data.type === 'aggridcomponentee') { + return [x.id, ...x.data.actions.map((x) => x.id)] } else if (x.data.type === 'menucomponent') { return [x.id, ...x.data.menuItems.map((x) => x.id)] } else { @@ -329,6 +339,7 @@ export function appComponentFromType( customCss: ccomponents[type].customCss as any, recomputeIds: init.recomputeIds ? [] : undefined, actionButtons: init.actionButtons ? [] : undefined, + actions: [], menuItems: init.menuItems ? [] : undefined, numberOfSubgrids: init.numberOfSubgrids, horizontalAlignment: init.horizontalAlignment, @@ -419,6 +430,16 @@ export function copyComponent( id: x.id.replace(`${item.id}_`, `${id}_`) })) ?? [] } + } else if (item.data.type === 'aggridcomponent' || item.data.type === 'aggridcomponentee') { + return { + ...item.data, + id, + actionButtons: + item.data.actions.map((x) => ({ + ...x, + id: x.id.replace(`${item.id}_`, `${id}_`) + })) ?? [] + } } else if (item.data.type === 'menucomponent') { return { ...item.data, @@ -462,6 +483,10 @@ export function getAllSubgridsAndComponentIds( components.push(...component.actionButtons?.map((x) => x.id)) } + if (component.type === 'aggridcomponent' || component.type === 'aggridcomponentee') { + components.push(...component.actions?.map((x) => x.id)) + } + if (component.type === 'menucomponent') { components.push(...component.menuItems?.map((x) => x.id)) } @@ -489,6 +514,8 @@ export function getAllGridItems(app: App): GridItem[] { .map((x) => { if (x?.data?.type === 'tablecomponent') { return [x, ...x?.data?.actionButtons?.map((x) => ({ data: x, id: x.id }))] + } else if (x?.data?.type === 'aggridcomponent' || x?.data?.type === 'aggridcomponentee') { + return [x, ...x?.data?.actions?.map((x) => ({ data: x, id: x.id }))] } else if (x?.data?.type === 'menucomponent') { return [x, ...x?.data?.menuItems?.map((x) => ({ data: x, id: x.id }))] } diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte index 7749183b53..48ac8cae2c 100644 --- a/frontend/src/lib/components/apps/editor/component/Component.svelte +++ b/frontend/src/lib/components/apps/editor/component/Component.svelte @@ -351,6 +351,7 @@ bind:initializing componentInput={component.componentInput} customCss={component.customCss} + actions={component.actions} {render} /> {:else if component.type === 'aggridcomponentee'} @@ -361,6 +362,7 @@ bind:initializing componentInput={component.componentInput} customCss={component.customCss} + actions={component.actions} {render} /> {:else if component.type === 'textcomponent'} diff --git a/frontend/src/lib/components/apps/editor/component/ComponentCallbacks.svelte b/frontend/src/lib/components/apps/editor/component/ComponentCallbacks.svelte index 7594c5854e..61e5afeb0e 100644 --- a/frontend/src/lib/components/apps/editor/component/ComponentCallbacks.svelte +++ b/frontend/src/lib/components/apps/editor/component/ComponentCallbacks.svelte @@ -62,6 +62,11 @@ if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) { $selectedComponent = [left.data.actionButtons[left.data.actionButtons.length - 1].id] + } else if ( + (left.data.type === 'aggridcomponent' || left.data.type === 'aggridcomponentee') && + left.data.actions.length >= 1 + ) { + $selectedComponent = [left.data.actions[left.data.actions.length - 1].id] } else { $selectedComponent = [left.id] } diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index ca62d63616..cc9477660c 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -137,12 +137,19 @@ export type AgChartsComponentEe = BaseComponent<'agchartscomponentee'> & { export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'> +export type TableAction = BaseAppComponent & + (ButtonComponent | CheckboxComponent | SelectComponent) & + GridItem + export type TableComponent = BaseComponent<'tablecomponent'> & { - actionButtons: (BaseAppComponent & ButtonComponent & GridItem)[] + actionButtons: TableAction[] +} +export type AggridComponent = BaseComponent<'aggridcomponent'> & { + actions: TableAction[] } -export type AggridComponent = BaseComponent<'aggridcomponent'> export type AggridComponentEe = BaseComponent<'aggridcomponentee'> & { license: string + actions: TableAction[] } export type DisplayComponent = BaseComponent<'displaycomponent'> export type LogComponent = BaseComponent<'logcomponent'> @@ -348,6 +355,7 @@ export interface InitialAppComponent extends Partial { numberOfSubgrids?: number recomputeIds?: boolean actionButtons?: boolean + actions?: boolean menuItems?: boolean tabs?: string[] panes?: number[] @@ -674,6 +682,13 @@ const aggridcomponentconst = { value: 'normal', selectOptions: ['normal', 'compact', 'comfortable'], tooltip: 'Change the row height' + }, + wrapActions: { + type: 'static', + fieldType: 'boolean', + value: false, + tooltip: + 'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.' } }, componentInput: { diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte index a88e03d81c..6987c2129d 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte @@ -90,6 +90,14 @@ } } + if (item?.data.type == 'aggridcomponent' || item?.data.type == 'aggridcomponentee') { + for (let c of item.data.actions) { + let old = c.id + c.id = c.id.replace(id + '_', newId + '_') + propagateRename(old, c.id) + } + } + if (item?.data.type === 'menucomponent') { for (let c of item.data.menuItems) { let old = c.id @@ -111,6 +119,12 @@ } } + if (data.type == 'aggridcomponent' || data.type == 'aggridcomponentee') { + for (let c of data.actions) { + renameComponent(from, to, c) + } + } + if (data.type === 'menucomponent') { for (let c of data.menuItems) { renameComponent(from, to, c) diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte index 22c070821b..1f23a4b356 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte @@ -13,4 +13,11 @@ {/each} {/if} + {#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee') && gridItem.data.actions.length > 0} +
+ {#each gridItem.data.actions as action, index} + + {/each} +
+ {/if} diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte index f656142491..71bcf040fa 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte @@ -34,6 +34,20 @@ {/each} {/if} +{#if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee'} + {#each gridItem.data.actions as actionButton, index (index)} + {#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor} + + {/if} + {/each} +{/if} + {#if gridItem?.data?.type === 'menucomponent'} {#each gridItem.data.menuItems as actionButton, index (index)} {#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor} diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/utils.ts b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/utils.ts index cb52429441..45b6a64e06 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/utils.ts +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/utils.ts @@ -66,6 +66,20 @@ function processGridItemRunnable(gridItem: GridItem, list: AppScriptsList): AppS }) } + if (component.type === 'aggridcomponent' || component.type === 'aggridcomponentee') { + component.actions.forEach((actionButton) => { + if (actionButton.componentInput?.type !== 'runnable') { + return + } + processRunnable( + actionButton.componentInput.runnable, + actionButton.componentInput.transformer, + actionButton.id, + list + ) + }) + } + if (component.type === 'menucomponent') { component.menuItems?.forEach((menuItem) => { if (menuItem.componentInput?.type !== 'runnable') { diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index ca5e1eaa3a..8ae4b439ec 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -335,6 +335,7 @@ /> {:else if componentSettings.item.data.type === 'aggridcomponentee'} + {:else if componentSettings.item.data.type === 'agchartscomponentee'} {:else if componentSettings.item.data.type === 'steppercomponent'} @@ -364,6 +365,8 @@ bind:panes={componentSettings.item.data.panes} bind:component={componentSettings.item.data} /> + {:else if componentSettings.item.data.type === 'aggridcomponent' && Array.isArray(componentSettings.item.data.actions)} + {:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)} {:else if componentSettings.item.data.type === 'menucomponent' && Array.isArray(componentSettings.item.data.menuItems)} diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index da7d8a781a..751e05e82f 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -291,6 +291,16 @@ export function getAllScriptNames(app: App): string[] { }) } + if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee') { + gridItem.data.actions.forEach((actionButton) => { + if (actionButton.componentInput?.type === 'runnable') { + if (actionButton.componentInput.runnable?.type === 'runnableByName') { + acc.push(actionButton.componentInput.runnable.name) + } + } + }) + } + if (gridItem.data.type === 'menucomponent') { gridItem.data.menuItems.forEach((menuItem) => { if (menuItem.componentInput?.type === 'runnable') { diff --git a/frontend/src/routes/kitchen_sink/+page.svelte b/frontend/src/routes/kitchen_sink/+page.svelte index 72367f90f4..106cc0e296 100644 --- a/frontend/src/routes/kitchen_sink/+page.svelte +++ b/frontend/src/routes/kitchen_sink/+page.svelte @@ -25,6 +25,8 @@
Contained buttons
+ +