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

fix: add stable ids to rows in AppTable

Browse Source
This commit is contained in:
Ruben Fiszel
2023-09-07 08:35:34 +02:00
parent 34b48d8256
commit e9e24f0161
1 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+32 -26
View File
@@ -88,17 +88,20 @@
let selectedRowIndex = -1
function toggleRow(row: Record<string, any>, rowIndex: number, force: boolean = false) {
function toggleRow(row: Record<string, any>, force: boolean = false) {
let data = { ...row.original }
let index = data['__index']
delete data['__index']
if (
selectedRowIndex !== rowIndex ||
JSON.stringify(row.original) !== JSON.stringify(result?.[rowIndex]) ||
selectedRowIndex !== index ||
JSON.stringify(data) !== JSON.stringify(result?.[index]) ||
force
) {
selectedRowIndex = rowIndex
outputs?.selectedRow.set(row.original, force)
outputs?.selectedRowIndex.set(rowIndex, force)
selectedRowIndex = index
outputs?.selectedRow.set(data, force)
outputs?.selectedRowIndex.set(index, force)
if (iterContext && listInputs) {
listInputs(id, { selectedRow: row.original, selectedRowIndex: rowIndex })
listInputs(id, { selectedRow: data, selectedRowIndex: index })
}
}
}
@@ -114,16 +117,14 @@
// We need to wait until the component is mounted so the world is created
mounted &&
outputs &&
toggleRow({ original: result[0] }, 0)
toggleRow({ original: { ...result[0], __index: 0 } })
function searchInResult(result: Array<Record<string, any>>, searchValue: string) {
if (searchValue === '') {
return result
}
return result.filter((row) =>
Object.values(row).some((value) =>
value?.toString()?.toLowercase()?.includes(searchValue.toLowerCase())
)
Object.values(row).some((value) => value?.toString()?.includes(searchValue))
)
}
@@ -142,10 +143,14 @@
let filteredResult: Array<Record<string, any>> = []
function setFilteredResult() {
const wIndex = Array.isArray(result)
? (result as any[]).map((x, i) => ({ ...x, __index: i }))
: [{ error: 'input was not an array' }]
if (resolvedConfig.search === 'By Runnable' || resolvedConfig.search === 'Disabled') {
filteredResult = result ?? []
filteredResult = wIndex ?? []
} else {
filteredResult = searchInResult(result ?? [], searchValue)
filteredResult = searchInResult(wIndex ?? [], searchValue)
}
}
$: (result || resolvedConfig.search || searchValue || resolvedConfig.pagination) &&
@@ -191,7 +196,7 @@
if (result) {
//console.log('rerendering table', result[0])
toggleRow({ original: filteredResult[0] }, 0, true)
toggleRow({ original: filteredResult[0] }, true)
}
if (outputs.page.peak()) {
@@ -219,7 +224,7 @@
},
setSelectedIndex: (index: number) => {
if (filteredResult) {
toggleRow({ original: filteredResult[index] }, index, true)
toggleRow({ original: filteredResult[index] }, true)
}
}
}
@@ -321,7 +326,8 @@
class={twMerge('divide-y bg-surface', css?.tableBody?.class ?? '')}
style={css?.tableBody?.style ?? ''}
>
{#each $table.getRowModel().rows as row, rowIndex (row.id)}
{#each $table.getRowModel().rows as row (row.id)}
{@const rowIndex = row.original['__index']}
<tr
class={classNames(
'last-of-type:!border-b-0',
@@ -340,8 +346,8 @@
{#if context}
{@const component = renderCell(cell.column.columnDef.cell, context)}
<td
on:keydown={() => toggleRow(row, rowIndex)}
on:click={() => toggleRow(row, rowIndex)}
on:keydown={() => toggleRow(row)}
on:click={() => toggleRow(row)}
class="p-4 whitespace-pre-wrap truncate text-xs text-primary"
style={'width: ' + cell.column.getSize() + 'px'}
>
@@ -358,8 +364,8 @@
{#if actionButtons.length > 0}
<td
class="p-2"
on:keypress={() => toggleRow(row, rowIndex)}
on:click={() => toggleRow(row, rowIndex)}
on:keypress={() => toggleRow(row)}
on:click={() => toggleRow(row)}
>
<div class="center-center h-full w-full flex-wrap gap-1.5">
{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
@@ -438,7 +444,7 @@
{render}
noWFull
preclickAction={async () => {
toggleRow(row, rowIndex)
toggleRow(row)
}}
id={actionButton.id}
customCss={actionButton.customCss}
@@ -457,7 +463,7 @@
configuration={actionButton.configuration}
recomputeIds={actionButton.recomputeIds}
preclickAction={async () => {
toggleRow(row, rowIndex)
toggleRow(row)
}}
{controls}
/>
@@ -471,7 +477,7 @@
configuration={actionButton.configuration}
recomputeIds={actionButton.recomputeIds}
preclickAction={async () => {
toggleRow(row, rowIndex)
toggleRow(row)
}}
{controls}
/>
@@ -487,7 +493,7 @@
configuration={actionButton.configuration}
recomputeIds={actionButton.recomputeIds}
preclickAction={async () => {
toggleRow(row, rowIndex)
toggleRow(row)
}}
extraQueryParams={{ row: row.original }}
componentInput={actionButton.componentInput}
@@ -501,7 +507,7 @@
configuration={actionButton.configuration}
recomputeIds={actionButton.recomputeIds}
preclickAction={async () => {
toggleRow(row, rowIndex)
toggleRow(row)
}}
/>
{:else if actionButton.type == 'selectcomponent'}
@@ -515,7 +521,7 @@
configuration={actionButton.configuration}
recomputeIds={actionButton.recomputeIds}
preclickAction={async () => {
toggleRow(row, rowIndex)
toggleRow(row)
}}
/>
</div>