From 3487c2cdfd794b6aa2e0c854b0ce5ed6bd28652f Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Wed, 14 Jun 2023 10:03:17 +0200 Subject: [PATCH] fix: improve agGrid persistence when result change + setSelectedIndex --- .../display/table/AppAggridTable.svelte | 40 ++++++++++++++----- .../components/display/table/AppTable.svelte | 5 +++ .../apps/components/helpers/eval.ts | 17 +++++++- .../apps/editor/component/default-codes.ts | 38 ++++++++++++++++++ .../EmptyInlineScript.svelte | 1 + frontend/src/lib/components/apps/types.ts | 1 + frontend/src/lib/components/apps/utils.ts | 1 + 7 files changed, 91 insertions(+), 12 deletions(-) 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 242d0e79d5..b8c19ab71a 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte @@ -20,7 +20,7 @@ export let initializing: boolean | undefined = undefined export let render: boolean - let result: Record[] | undefined = undefined + let result: any[] | undefined = undefined const { worldStore, selectedComponent, componentControl } = getContext('AppViewerContext') @@ -34,7 +34,7 @@ selectedRowIndex: 0, selectedRow: {}, selectedRows: [] as any[], - result: [] as Record[], + result: [] as any[], loading: false, page: 0, newChange: { row: 0, column: '', value: undefined }, @@ -45,7 +45,8 @@ function toggleRow(row: any) { let rowIndex = row.rowIndex - let data = row.data + let data = { ...row.data } + delete data['__index'] if (selectedRowIndex !== rowIndex) { selectedRowIndex = rowIndex outputs?.selectedRow.set(data) @@ -54,21 +55,26 @@ } function toggleRows(rows: any[]) { - console.log(rows) if (rows.length === 0) { outputs?.selectedRows.set([]) } toggleRow(rows[0]) - outputs?.selectedRows.set(rows.map((x) => x.data)) + outputs?.selectedRows.set( + rows.map((x) => { + let data = { ...x.data } + delete data['__index'] + return data + }) + ) } - $: outputs?.result?.set(result ?? []) + $: outputs?.result?.set(value) let clientHeight let clientWidth function onCellValueChanged(event) { - if (result) { + if (value) { let dataCell = event.newValue try { dataCell = JSON.parse(dataCell) @@ -78,9 +84,14 @@ column: event.colDef.field, value: dataCell }) - result[event.node.rowIndex][event.colDef.field] = dataCell + value[event.node.rowIndex][event.colDef.field] = dataCell + let data = { ...value[event.node.rowIndex] } + delete data['__index'] + outputs?.selectedRow?.set(data) } } + + $: value = (result ?? []).map((x, i) => ({ ...x, __index: i.toString() })) {#each Object.keys(components['aggridcomponent'].initialData.configuration) as key (key)} @@ -111,7 +122,7 @@ {#key resolvedConfig?.pagination} {#key resolvedConfig?.extraConfig} data.data['__index']} {...resolvedConfig.extraConfig} onGridReady={(e) => { outputs?.ready.set(true) - $componentControl[id] = { agGrid: { api: e.api, columnApi: e.columnApi } } + if (value.length > 0) { + e.api.getRowNode('0')?.setSelected(true) + } + $componentControl[id] = { + agGrid: { api: e.api, columnApi: e.columnApi }, + setSelectedIndex: (index) => { + e.api.getRowNode(index.toString())?.setSelected(true) + } + } }} /> {/key} 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 dbc90fa951..e0e6178f1c 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte @@ -193,6 +193,11 @@ return true } return false + }, + setSelectedIndex: (index: number) => { + if (filteredResult) { + toggleRow({ original: filteredResult[index] }, index, true) + } } } diff --git a/frontend/src/lib/components/apps/components/helpers/eval.ts b/frontend/src/lib/components/apps/components/helpers/eval.ts index c27237d6bf..36a040b69f 100644 --- a/frontend/src/lib/components/apps/components/helpers/eval.ts +++ b/frontend/src/lib/components/apps/components/helpers/eval.ts @@ -20,7 +20,7 @@ export function computeGlobalContext(world: World | undefined, extraContext: any function create_context_function_template(eval_string, context, noReturn: boolean) { return ` -return async function (context, state, goto, setTab, recompute, getAgGrid, setValue) { +return async function (context, state, goto, setTab, recompute, getAgGrid, setValue, setSelectedIndex) { "use strict"; ${ Object.keys(context).length > 0 @@ -36,7 +36,16 @@ function make_context_evaluator( eval_string, context, noReturn: boolean -): (context, state, goto, setTab, recompute, getAgGrid, setValue) => Promise { +): ( + context, + state, + goto, + setTab, + recompute, + getAgGrid, + setValue, + setSelectedIndex +) => Promise { let template = create_context_function_template(eval_string, context, noReturn) let functor = Function(template) return functor() @@ -86,6 +95,7 @@ export async function eval_like( setTab?: (index: number) => void agGrid?: { api: any; columnApi: any } setValue?: (value: any) => void + setSelectedIndex?: (index: number) => void } >, worldStore: World | undefined, @@ -133,6 +143,9 @@ export async function eval_like( }, (id, value) => { controlComponents[id]?.setValue?.(value) + }, + (id, index) => { + controlComponents[id]?.setSelectedIndex?.(index) } ) } diff --git a/frontend/src/lib/components/apps/editor/component/default-codes.ts b/frontend/src/lib/components/apps/editor/component/default-codes.ts index 9e3dc5d758..d3ec5bd3a7 100644 --- a/frontend/src/lib/components/apps/editor/component/default-codes.ts +++ b/frontend/src/lib/components/apps/editor/component/default-codes.ts @@ -43,6 +43,44 @@ export const DEFAULT_CODES: Partial< type Resource, } from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts"; +export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") { + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return query.rows; +}` + }, + aggridcomponent: { + deno: `export async function main() { + return [ + { + "id": 1, + "name": "A cell with a long name", + "age": 42 + }, + { + "id": 2, + "name": "A briefer cell", + "age": 84 + } + ] +}`, + python3: `def main(): + return [ + { + "id": 1, + "name": "A cell with a long name", + "age": 42 + }, + { + "id": 2, + "name": "A briefer cell", + "age": 84 + } + ]`, + pgsql: `import { + pgSql, + type Resource, +} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts"; + export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") { const query = await pgSql(db)\`SELECT * FROM demo;\`; return query.rows; diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte index 4298b82372..7fa9005fcf 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte @@ -238,6 +238,7 @@ state.foo += 1 // you can also navigate (goto), recompute a script (recompute), or set a tab (setTab) // Inputs and display components support settings their value directly (setValue) +// Tables support setting their selected index (setSelectedIndex) return state.foo`, language: 'frontend', diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index a6f8ffe89d..272142cdd1 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -196,6 +196,7 @@ export type AppViewerContext = { setCode?: (value: string) => void onDelete?: () => void setValue?: (value: any) => void + setSelectedIndex?: (index: number) => void } > > diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index 0b2208b88e..a5a8c06355 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -217,6 +217,7 @@ declare function setTab(id: string, index: string): void; declare function recompute(id: string): void; declare function getAgGrid(id: string): {api: any, columnApi: any} | undefined; declare function setValue(id: string, value: any): void; +declare function setSelectedIndex(id: string, index: number): void; ` : '' }