From 047d89d14eb4a992bbe7d7be4c9ec2ecee3e7835 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Wed, 1 May 2024 10:25:48 +0200 Subject: [PATCH] fix(frontend): sync columnDefs + improve columnDefs management (#3632) * fix(frontend): sync columnDefs + improve columnDefs management * fix(frontend): sync columnDefs + improve columnDefs management * fix(frontend): improve code quality * fix(frontend): improve code quality * fix(frontend): remove useless warning while the config is loading * fix(frontend): Disable actions for database studio, since columnDefs are managed by the component * feat(frontend): Fix Database studio * feat(frontend): revert changes from Database Studio * feat(frontend): fix DB Studio refresh * fix(frontend): improve code quality * fix(frontend): improve code quality * fix(frontend): fix build * fix(frontend): fix wording * fix(frontend): fix aggrid --- .../apps/components/display/AppMap.svelte | 4 +- .../display/dbtable/AppDbExplorer.svelte | 31 +-- .../table/AppAggridExplorerTable.svelte | 62 ++--- .../table/AppAggridInfiniteTable.svelte | 8 +- .../display/table/AppAggridTable.svelte | 245 ++++++++---------- .../display/table/SyncColumnDefs.svelte | 129 +++++++++ .../helpers/RunnableComponent.svelte | 34 ++- .../components/helpers/RunnableWrapper.svelte | 5 + .../apps/editor/AppEditorHeader.svelte | 2 - .../apps/editor/GridEditorMenu.svelte | 2 +- .../apps/editor/component/components.ts | 33 +-- .../secondaryMenu/SecondaryMenu.svelte | 4 +- .../components/wizards/AgGridWizard.svelte | 2 +- 13 files changed, 322 insertions(+), 239 deletions(-) create mode 100644 frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte diff --git a/frontend/src/lib/components/apps/components/display/AppMap.svelte b/frontend/src/lib/components/apps/components/display/AppMap.svelte index e7899b0c2c..7aa941e7ff 100644 --- a/frontend/src/lib/components/apps/components/display/AppMap.svelte +++ b/frontend/src/lib/components/apps/components/display/AppMap.svelte @@ -201,7 +201,7 @@ } } - function handleSyncRegion() { + async function handleSyncRegion() { const gridItem = findGridItem($app, id) if (!map || !gridItem) { return @@ -225,6 +225,8 @@ gridItem.data.configuration.longitude.value = center[0] //@ts-ignore gridItem.data.configuration.latitude.value = center[1] + + $app = $app } } diff --git a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte index 5398953997..7c05cc76d2 100644 --- a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte +++ b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte @@ -111,7 +111,7 @@ }, 1000) } - const { app, worldStore, mode, selectedComponent, runnableComponents } = + const { app, worldStore, mode, selectedComponent } = getContext('AppViewerContext') const editorContext = getContext('AppEditorContext') @@ -205,24 +205,6 @@ }) } - let isCallbackAdded = false - - function addOnRecomputeCallback() { - $runnableComponents[id].cb = [ - ...$runnableComponents[id].cb, - () => - new CancelablePromise(async (resolve) => { - await dbExplorerCount?.computeCount(true) - - aggrid?.clearRows() - resolve() - }) - ] - isCallbackAdded = true - } - - $: $runnableComponents[id]?.cb && !isCallbackAdded && addOnRecomputeCallback() - async function listTables() { let resource = resolvedConfig.type.configuration?.[resolvedConfig.type.selected]?.resource @@ -626,11 +608,19 @@ noInitialize bind:runnableComponent componentInput={input} - autoRefresh={true} + autoRefresh={false} bind:loading {render} {id} {outputs} + overrideCallback={() => + new CancelablePromise(async (resolve) => { + await dbExplorerCount?.computeCount(true) + + aggrid?.clearRows() + resolve() + })} + overrideAutoRefresh={true} >
{#if !(hideSearch === true && hideInsert === true)} @@ -678,6 +668,7 @@ containerHeight={componentContainerHeight - (buttonContainerHeight ?? 0)} on:update={onUpdate} on:delete={onDelete} + allowColumnDefsActions={false} {actions} /> {/key} diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte index 511bc17830..cb10a3f2f6 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte @@ -1,13 +1,12 @@ + +{#if Array.isArray(result) && result.every(isObject)} + {#if Array.isArray(columnDefs) && columnDefs.every(isObject)} + {#if $mode === 'dnd' && columnDefs?.length === 0 && result?.length > 0 && allowColumnDefsActions} +
+ +
+
No columns definition found. Columns found in data:
+
+ {#each Object.keys(result[0] ?? []) as key} + {key} + {/each} +
+
+ +
+
+ +
+ {:else} + + {/if} + {:else if columnDefs !== undefined} +
+ +
+ The columnDefs should be an array of objects, received: + 
+{JSON.stringify(columnDefs)}
+
+ {#if allowColumnDefsActions} +
+ +
+ {/if} +
+ +
+ {:else} +
+ +
+ The columnDefs are undefined. + {#if allowColumnDefsActions} +
+ +
+ {/if} +
+ +
+ {/if} +{/if} diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index 004bf805e5..7239fd71bc 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -54,6 +54,8 @@ export let hasChildrens: boolean export let allowConcurentRequests = false export let noInitialize = false + export let overrideCallback: (() => CancelablePromise) | undefined = undefined + export let overrideAutoRefresh: boolean = false const { worldStore, @@ -538,24 +540,28 @@ undefined onMount(() => { - cancellableRun = (inlineScript?: InlineScript, setRunnableJobEditorPanel?: boolean) => { - let rejectCb: (err: Error) => void - let p: Partial> = new Promise((resolve, reject) => { - rejectCb = reject - donePromise = resolve - executeComponent(true, inlineScript, setRunnableJobEditorPanel).catch(reject) - }) - p.cancel = () => { - resultJobLoader?.cancelJob() - loading = false - rejectCb(new Error('Canceled')) - } + if (overrideCallback) { + cancellableRun = overrideCallback + } else { + cancellableRun = (inlineScript?: InlineScript, setRunnableJobEditorPanel?: boolean) => { + let rejectCb: (err: Error) => void + let p: Partial> = new Promise((resolve, reject) => { + rejectCb = reject + donePromise = resolve + executeComponent(true, inlineScript, setRunnableJobEditorPanel).catch(reject) + }) + p.cancel = () => { + resultJobLoader?.cancelJob() + loading = false + rejectCb(new Error('Canceled')) + } - return p as CancelablePromise + return p as CancelablePromise + } } $runnableComponents[id] = { - autoRefresh: autoRefresh && recomputableByRefreshButton, + autoRefresh: (autoRefresh && recomputableByRefreshButton) || overrideAutoRefresh, refreshOnStart: refreshOnStart, cb: [...($runnableComponents[id]?.cb ?? []), cancellableRun] } diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte index e0c0ef5cb1..790f9e489c 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte @@ -8,10 +8,13 @@ import RunnableComponent from './RunnableComponent.svelte' import { sendUserToast } from '$lib/toast' import InitializeComponent from './InitializeComponent.svelte' + import type { CancelablePromise } from '$lib/gen' export let componentInput: AppInput | undefined export let noInitialize = false export let hideRefreshButton: boolean | undefined = undefined + export let overrideCallback: (() => CancelablePromise) | undefined = undefined + export let overrideAutoRefresh: boolean = false type SideEffectAction = | { @@ -255,6 +258,8 @@ hideRefreshButton={componentInput.hideRefreshButton ?? hideRefreshButton} transformer={componentInput.transformer} {autoRefresh} + {overrideCallback} + {overrideAutoRefresh} recomputableByRefreshButton={componentInput.autoRefresh ?? true} bind:recomputeOnInputChanged={componentInput.recomputeOnInputChanged} {id} diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte index b7b8d6b142..dae5a1f521 100644 --- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte @@ -266,8 +266,6 @@ ) )) as ([string, Record] | undefined)[] - console.log('allTriggers', allTriggers) - delete policy.triggerables policy.triggerables_v2 = Object.fromEntries( allTriggers.filter(Boolean) as [string, Record][] diff --git a/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte b/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte index a1e76def2b..315bb85159 100644 --- a/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte +++ b/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte @@ -45,7 +45,7 @@ { label: 'Show style panel', onClick: () => { - secondaryMenuLeft?.toggle(StylePanel, {}) + secondaryMenuLeft?.toggle(StylePanel, { type: 'style' }) }, icon: Paintbrush2, disabled: $secondaryMenuLeft.isOpen diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index 94232d16f4..ec08b33fde 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -744,11 +744,7 @@ const aggridinfinitecomponentconst = { type: 'static', fieldType: 'array', subFieldType: 'ag-grid', - value: [ - { field: 'id', flex: 1 }, - { field: 'name', editable: true, flex: 1 }, - { field: 'age', flex: 1 } - ] + value: [] } as StaticAppInput, flex: { type: 'static', @@ -818,22 +814,11 @@ const aggridinfinitecomponentconst = { } }, componentInput: { - type: 'static', - fieldType: 'array', - subFieldType: 'object', - value: [ - { - id: 1, - name: 'A cell with a long name', - age: 42 - }, - { - id: 2, - name: 'A briefer cell', - age: 84 - } - ] - } as StaticAppInput + type: 'runnable', + fieldType: 'any', + fields: {}, + runnable: undefined + } } } as const @@ -3670,6 +3655,12 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm' value: false, tooltip: 'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.' + }, + footer: { + type: 'static', + fieldType: 'boolean', + value: true, + tooltip: 'Allow visible footer for pagination and download' } }, componentInput: undefined diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte index 513a2db8c2..4160cc676a 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte @@ -34,7 +34,9 @@ class="flex justify-between {right ? '' : 'flex-row-reverse'} items-center gap-1 px-3 py-2" > secondaryMenu?.close()} /> -
Style Panel
+ {#if $secondaryMenu?.props?.type === 'style'} +
Style Panel
+ {/if}
{#if typeof $secondaryMenu.component === 'string'} diff --git a/frontend/src/lib/components/wizards/AgGridWizard.svelte b/frontend/src/lib/components/wizards/AgGridWizard.svelte index 53831919a4..aa63da849a 100644 --- a/frontend/src/lib/components/wizards/AgGridWizard.svelte +++ b/frontend/src/lib/components/wizards/AgGridWizard.svelte @@ -102,7 +102,7 @@ {#if value}
- Column definition + Column definitions