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

feat: expose settable col id for app aggrid tables

Browse Source
This commit is contained in:
Ruben Fiszel
2024-11-26 16:38:15 +01:00
parent 60f5f8370c
commit 84caddc0ec
5 changed files with 95 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/FlowStatusViewerInner.svelte
-1
View File
@@ -30,7 +30,6 @@
import FlowGraphViewerStep from './FlowGraphViewerStep.svelte'
import FlowGraphV2 from './graph/FlowGraphV2.svelte'
import { buildPrefix } from './graph/graphBuilder'
import { root } from 'postcss'
const dispatch = createEventDispatcher()
frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
+4 -3
View File
@@ -353,9 +353,10 @@
onSelectionChanged(e.api)
resolvedConfig?.extraConfig?.['onSelectionChanged']?.(e)
},
getRowId: (data) => {
return (data as any).data['__index']
}
getRowId: (data) =>
resolvedConfig?.rowIdCol && resolvedConfig?.rowIdCol != ''
? data.data?.[resolvedConfig?.rowIdCol]
: data.data?.['id'] ?? (data as any).data['__index']
},
{}
)
frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+30 -10
View File
@@ -70,17 +70,29 @@
let result: any[] | undefined = undefined
$: resolvedConfig?.rowIdCol && resetValues()
$: result && setValues()
function resetValues() {
api?.setGridOption('rowData', value)
}
let uid = Math.random().toString(36).substring(7)
let prevUid: string | undefined = undefined
let value: any[] = Array.isArray(result)
? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() }))
? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() + '-' + uid }))
: [{ error: 'input was not an array' }]
let loaded = false
async function setValues() {
value = Array.isArray(result)
? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() }))
? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() + '-' + uid }))
: [{ error: 'input was not an array' }]
prevUid = uid
uid = Math.random().toString(36).substring(7)
if (api && loaded) {
let selected = api.getSelectedNodes()
if (selected && selected.length > 0 && resolvedConfig?.selectFirstRowByDefault != false) {
@@ -164,13 +176,16 @@
try {
dataCell = JSON.parse(dataCell)
} catch (e) {}
let idx = Number(event.node.data['__index'].split('-')[0])
uid = prevUid ?? ''
outputs?.newChange?.set({
row: event.node.rowIndex,
column: event.colDef.field,
value: dataCell,
old: result[Number(event.node.data['__index'])][event.colDef.field]
old: result[idx][event.colDef.field]
})
result[Number(event.node.data['__index'])][event.colDef.field] = dataCell
result[idx][event.colDef.field] = dataCell
let data = { ...result[event.node.rowIndex] }
outputs?.selectedRow?.set(data)
}
@@ -279,6 +294,11 @@
}
})
function getIdFromData(data: any): string {
return resolvedConfig?.rowIdCol && resolvedConfig?.rowIdCol != ''
? data?.[resolvedConfig?.rowIdCol] ?? data['__index']
: data['__index']
}
function mountGrid() {
if (eGui) {
try {
@@ -345,12 +365,12 @@
outputs?.ready.set(true)
value = value
if (
result &&
result.length > 0 &&
value &&
value.length > 0 &&
resolvedConfig?.selectFirstRowByDefault === true &&
selectedRowIndex === -1
) {
e.api.getRowNode('0')?.setSelected(true)
e.api.getRowNode(getIdFromData(value))?.setSelected(true)
}
$componentControl[id] = {
agGrid: { api: e.api, columnApi: e.columnApi },
@@ -372,14 +392,14 @@
resolvedConfig?.extraConfig?.['onSelectionChanged']?.(e)
},
onCellEditingStarted: (e) => {
e.api.getRowNode(e.data['__index'])?.setSelected(true)
e.api.getRowNode(getIdFromData(e.data))?.setSelected(true)
},
onFilterChanged: (e) => {
outputs?.filters?.set(e.api.getFilterModel())
outputs?.displayedRowCount?.set(e.api.getDisplayedRowCount())
resolvedConfig?.extraConfig?.['onFilterChanged']?.(e)
},
getRowId: (data) => data.data['__index']
getRowId: (data) => getIdFromData(data.data)
},
{}
)
@@ -415,7 +435,7 @@
}
function updateValue() {
api?.updateGridOptions({ rowData: value })
api?.setGridOption('rowData', value)
const displayedRowCount = api?.getDisplayedRowCount()
if (displayedRowCount) {
frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
+37 -33
View File
@@ -217,23 +217,25 @@
{controls}
/>
{:else if action.type == 'selectcomponent'}
<AppSelect
noDefault
noInitialize
extraKey={'idx' + rowIndex}
{render}
--font-size="10px"
id={action.id}
customCss={action.customCss}
configuration={action.configuration}
recomputeIds={action.recomputeIds}
onSelect={action.onSelect}
preclickAction={async () => {
dispatch('toggleRow')
selectRow(p)
}}
{controls}
/>
<div style="height: 30px; margin-top: -3px;">
<AppSelect
noDefault
noInitialize
extraKey={'idx' + rowIndex}
{render}
--font-size="10px"
id={action.id}
customCss={action.customCss}
configuration={action.configuration}
recomputeIds={action.recomputeIds}
onSelect={action.onSelect}
preclickAction={async () => {
dispatch('toggleRow')
selectRow(p)
}}
{controls}
/>
</div>
{/if}
{:else if action.type == 'buttoncomponent'}
<AppButton
@@ -271,22 +273,24 @@
}}
/>
{:else if action.type == 'selectcomponent'}
<AppSelect
noDefault
noInitialize
extraKey={'idx' + rowIndex}
{render}
--font-size="10px"
id={action.id}
customCss={action.customCss}
configuration={action.configuration}
recomputeIds={action.recomputeIds}
onSelect={action.onSelect}
preclickAction={async () => {
dispatch('toggleRow')
selectRow(p)
}}
/>
<div style="height: 30px; margin-top: -3px;">
<AppSelect
noDefault
noInitialize
extraKey={'idx' + rowIndex}
{render}
--font-size="10px"
id={action.id}
customCss={action.customCss}
configuration={action.configuration}
recomputeIds={action.recomputeIds}
onSelect={action.onSelect}
preclickAction={async () => {
dispatch('toggleRow')
selectRow(p)
}}
/>
</div>
{/if}
</div>
{/each}
frontend/src/lib/components/apps/editor/component/components.ts
+24
View File
@@ -710,6 +710,14 @@ const aggridcomponentconst = {
{ field: 'age', flex: 1 }
]
} as StaticAppInput,
rowIdCol: {
type: 'static',
fieldType: 'text',
value: '',
placeholder: 'id',
tooltip:
'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
},
flex: {
type: 'static',
fieldType: 'boolean',
@@ -818,6 +826,14 @@ const aggridinfinitecomponentconst = {
subFieldType: 'ag-grid',
value: []
} as StaticAppInput,
rowIdCol: {
type: 'static',
fieldType: 'text',
value: '',
placeholder: 'id',
tooltip:
'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
},
flex: {
type: 'static',
fieldType: 'boolean',
@@ -3786,6 +3802,14 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
value: [],
loading: false
} as StaticAppInput,
rowIdCol: {
type: 'static',
fieldType: 'text',
value: '',
placeholder: 'id',
tooltip:
'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
},
whereClause: {
type: 'static',
fieldType: 'text',