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

feat(frontend): add search to AgGrid Infinite (#3600)

Browse Source 
* feat(frontend): add search fto AgGrid Infinite

* feat(frontend): add missing actions

* feat(frontend):fix initial previousResult

* feat(frontend): fix reload
This commit is contained in:
Faton Ramadani
2024-04-24 11:51:21 +02:00
committed by GitHub
parent ba5bd7361e
commit acbc05a7ab
16 changed files with 158 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/DiffEditor.svelte
+4
View File
@@ -32,6 +32,10 @@
async function loadDiffEditor() {
await initializeVscode()
if (!diffDivEl) {
return
}
diffEditor = meditor.createDiffEditor(diffDivEl!, {
automaticLayout,
renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH,
frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte
+39 -16
View File
@@ -16,7 +16,7 @@
import { initCss } from '$lib/components/apps/utils'
import ResolveStyle from '../../helpers/ResolveStyle.svelte'
import AppAggridExplorerTable from './AppAggridExplorerTable.svelte'
import type { RunnableComponent } from '../..'
import { DebouncedInput, type RunnableComponent } from '../..'
import { getPrimaryKeys } from '../dbtable/utils'
import InitializeComponent from '../../helpers/InitializeComponent.svelte'
@@ -25,7 +25,7 @@
export let configuration: RichConfigurations
export let initializing: boolean | undefined = undefined
export let render: boolean
export let customCss: ComponentCustomCSS<'aggridcomponent'> | undefined = undefined
export let customCss: ComponentCustomCSS<'aggridinfinitecomponent'> | undefined = undefined
export let actions: TableAction[] | undefined = undefined
let runnableComponent: RunnableComponent | undefined = undefined
@@ -55,7 +55,8 @@
offset: 0,
limit: 10,
orderBy: resolvedConfig.columnDefs?.[0]?.field,
isDesc: false
isDesc: false,
search: ''
}
})
@@ -81,7 +82,8 @@
offset: params.startRow,
limit: params.endRow - params.startRow,
orderBy: params.sortModel?.[0]?.colId ?? resolvedConfig.columnDefs?.[0]?.field,
isDesc: params.sortModel?.[0]?.sort === 'desc'
isDesc: params.sortModel?.[0]?.sort === 'desc',
search: resolvedConfig.searchEnabled ? searchValue : ''
}
outputs.params.set(currentParams)
@@ -129,9 +131,21 @@
})
}
}
let searchValue: string = ''
function updateSearchInOutputs() {
outputs.params.set({
...outputs.params.peak(),
search: searchValue
})
aggrid?.clearRows()
}
$: searchValue !== undefined && updateSearchInOutputs()
</script>
{#each Object.keys(components['aggridcomponent'].initialData.configuration) as key (key)}
{#each Object.keys(components['aggridinfinitecomponent'].initialData.configuration) as key (key)}
<ResolveConfig
{id}
{key}
@@ -161,17 +175,26 @@
bind:loading
bind:runnableComponent
{render}
autoRefresh={false}
autoRefresh={true}
allowConcurentRequests
>
<AppAggridExplorerTable
{id}
{datasource}
{resolvedConfig}
{customCss}
{outputs}
allowDelete={false}
{actions}
bind:this={aggrid}
/>
<div class="flex flex-col h-full">
{#if resolvedConfig.searchEnabled}
<div class="flex flex-row w-full justify-between items-center h-12">
<div class="grow max-w-[300px]">
<DebouncedInput placeholder="Search..." bind:value={searchValue} parentClass="h-full " />
</div>
</div>
{/if}
<AppAggridExplorerTable
{id}
{datasource}
{resolvedConfig}
{customCss}
{outputs}
allowDelete={false}
{actions}
bind:this={aggrid}
/></div
>
</RunnableWrapper>
frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+3 -1
View File
@@ -187,7 +187,9 @@
if (
(c.type === 'aggridcomponent' ||
c.type === 'aggridcomponentee' ||
c.type === 'dbexplorercomponent') &&
c.type === 'dbexplorercomponent' ||
c.type === 'aggridinfinitecomponent' ||
c.type === 'aggridinfinitecomponentee') &&
Array.isArray(c.actions)
) {
r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id })))
frontend/src/lib/components/apps/editor/AppInputs.svelte
+1 -1
View File
@@ -29,7 +29,7 @@
{/each}
</div>
</div>
{:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent'}
{:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent' || gridItem?.data?.type === 'aggridinfinitecomponent' || gridItem?.data?.type === 'aggridinfinitecomponentee'}
<div>
<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
<div class="ml-4 mt-4">
frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+6 -2
View File
@@ -36,7 +36,9 @@
} else if (
x?.data?.type === 'aggridcomponent' ||
x?.data?.type === 'aggridcomponentee' ||
x?.data?.type === 'dbexplorercomponent'
x?.data?.type === 'dbexplorercomponent' ||
x?.data?.type === 'aggridinfinitecomponent' ||
x?.data?.type === 'aggridinfinitecomponentee'
) {
if (x?.data?.actions) {
const tableAction = x.data.actions.find((x) => x.id === id)
@@ -96,7 +98,9 @@
if (
(parent.data.type === 'aggridcomponent' ||
parent.data.type === 'aggridcomponentee' ||
parent.data.type === 'dbexplorercomponent') &&
parent.data.type === 'dbexplorercomponent' ||
parent.data.type === 'aggridinfinitecomponent' ||
parent.data.type === 'aggridinfinitecomponentee') &&
Array.isArray(parent.data.actions)
) {
parent.data.actions = parent.data.actions.filter(
frontend/src/lib/components/apps/editor/appUtils.ts
+18 -6
View File
@@ -75,7 +75,9 @@ export function dfs(
} else if (
(item.data.type == 'aggridcomponent' ||
item.data.type == 'aggridcomponentee' ||
item.data.type == 'dbexplorercomponent') &&
item.data.type == 'dbexplorercomponent' ||
item.data.type == 'aggridinfinitecomponent' ||
item.data.type == 'aggridinfinitecomponentee') &&
item.data.actions?.find((x) => id == x.id)
) {
return [item.id, id]
@@ -175,7 +177,9 @@ export function allsubIds(app: App, parentId: string): string[] {
if (
(item.data.type === 'aggridcomponent' ||
item.data.type === 'aggridcomponentee' ||
item.data.type === 'dbexplorercomponent') &&
item.data.type === 'dbexplorercomponent' ||
item.data.type === 'aggridinfinitecomponent' ||
item.data.type === 'aggridinfinitecomponentee') &&
Array.isArray(item.data.actions)
) {
subIds.push(...item.data.actions?.map((x) => x.id))
@@ -200,7 +204,9 @@ export function getNextGridItemId(app: App): string {
} else if (
(x.data.type === 'aggridcomponent' ||
x.data.type === 'aggridcomponentee' ||
x.data.type === 'dbexplorercomponent') &&
x.data.type === 'dbexplorercomponent' ||
x.data.type === 'aggridinfinitecomponent' ||
x.data.type === 'aggridinfinitecomponentee') &&
Array.isArray(x.data.actions)
) {
return [x.id, ...x.data.actions.map((x) => x.id)]
@@ -445,7 +451,9 @@ export function copyComponent(
} else if (
item.data.type === 'aggridcomponent' ||
item.data.type === 'aggridcomponentee' ||
item.data.type === 'dbexplorercomponent'
item.data.type === 'dbexplorercomponent' ||
item.data.type === 'aggridinfinitecomponent' ||
item.data.type === 'aggridinfinitecomponentee'
) {
return {
...item.data,
@@ -502,7 +510,9 @@ export function getAllSubgridsAndComponentIds(
if (
component.type === 'aggridcomponent' ||
component.type === 'aggridcomponentee' ||
component.type === 'dbexplorercomponent'
component.type === 'dbexplorercomponent' ||
component.type === 'aggridinfinitecomponent' ||
component.type === 'aggridinfinitecomponentee'
) {
components.push(...(component.actions?.map((x) => x.id) ?? []))
}
@@ -537,7 +547,9 @@ export function getAllGridItems(app: App): GridItem[] {
} else if (
(x?.data?.type === 'aggridcomponent' ||
x?.data?.type === 'aggridcomponentee' ||
x?.data?.type === 'dbexplorercomponent') &&
x?.data?.type === 'dbexplorercomponent' ||
x?.data?.type === 'aggridinfinitecomponent' ||
x?.data?.type === 'aggridinfinitecomponentee') &&
Array.isArray(x?.data?.actions)
) {
return [x, ...x?.data?.actions?.map((x) => ({ data: x, id: x.id }))]
frontend/src/lib/components/apps/editor/component/components.ts
+6
View File
@@ -797,6 +797,12 @@ const aggridinfinitecomponentconst = {
value: false,
tooltip:
'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
},
searchEnabled: {
type: 'static',
fieldType: 'boolean',
value: false,
tooltip: 'Enable search in the table'
}
},
componentInput: {
frontend/src/lib/components/apps/editor/component/default-codes.ts
+4 -2
View File
@@ -124,7 +124,8 @@ return [
]`,
postgresql: `-- $1 limit
-- $2 offset
SELECT * FROM demo LIMIT $1::INT OFFSET $2::INT;
-- $3 search
SELECT * FROM demo WHERE id ILIKE '%' || $3 || '%'LIMIT $1::INT OFFSET $2::INT;
`
},
aggridinfinitecomponentee: {
@@ -157,7 +158,8 @@ return [
]`,
postgresql: `-- $1 limit
-- $2 offset
SELECT * FROM demo LIMIT $1::INT OFFSET $2::INT;
-- $3 search
SELECT * FROM demo WHERE id ILIKE '%' || $3 || '%'LIMIT $1::INT OFFSET $2::INT;
`
},
textcomponent: {
frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
+6 -2
View File
@@ -93,7 +93,9 @@
if (
item?.data.type == 'aggridcomponent' ||
item?.data.type == 'aggridcomponentee' ||
item?.data.type == 'dbexplorercomponent'
item?.data.type == 'dbexplorercomponent' ||
item?.data.type == 'aggridinfinitecomponent' ||
item?.data.type == 'aggridinfinitecomponentee'
) {
for (let c of item.data.actions ?? []) {
let old = c.id
@@ -126,7 +128,9 @@
if (
(data.type == 'aggridcomponent' ||
data.type == 'aggridcomponentee' ||
data.type == 'dbexplorercomponent') &&
data.type == 'dbexplorercomponent' ||
data.type == 'aggridinfinitecomponent' ||
data.type == 'aggridinfinitecomponentee') &&
Array.isArray(data.actions)
) {
for (let c of data.actions) {
frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte
+1 -1
View File
@@ -13,7 +13,7 @@
{/each}
</div>
{/if}
{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee' || gridItem.data.type === 'dbexplorercomponent') && gridItem.data.actions?.length > 0}
{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee' || gridItem.data.type === 'dbexplorercomponent' || gridItem.data.type === 'aggridinfinitecomponent' || gridItem.data.type === 'aggridinfinitecomponentee') && gridItem.data.actions?.length > 0}
<div class="ml-2 border-l">
{#each gridItem.data.actions as action, index}
<Output id={action.id} first={index === 0} label="Table action" />
frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+50
View File
@@ -98,6 +98,54 @@
fieldType: 'number'
}
}
} else if (
componentType === 'aggridinfinitecomponent' ||
componentType === 'aggridinfinitecomponentee'
) {
newFields['offset'] = {
type: 'evalv2',
expr: `${id}.params.offset`,
fieldType: 'number'
}
newFields['limit'] = {
type: 'evalv2',
expr: `${id}.params.limit`,
fieldType: 'number'
}
newFields['orderBy'] = {
type: 'evalv2',
expr: `${id}.params.orderBy`,
fieldType: 'string'
}
newFields['isDesc'] = {
type: 'evalv2',
expr: `${id}.params.isDesc`,
fieldType: 'boolean'
}
newFields['search'] = {
type: 'evalv2',
expr: `${id}.params.search`,
fieldType: 'string'
}
}
}
function assertConnections(newFields) {
if (
componentType === 'aggridinfinitecomponent' ||
componentType === 'aggridinfinitecomponentee'
) {
const fields = ['offset', 'limit', 'orderBy', 'isDesc', 'search']
fields.forEach((field) => {
if (newFields[field]?.type !== 'evalv2') {
newFields[field] = {
type: 'evalv2',
expr: `${id}.params.${field}`,
fieldType: newFields[field]?.fieldType ?? 'string'
}
}
})
}
}
@@ -112,6 +160,8 @@
preConnect(newFields)
}
assertConnections(newFields)
if (!deepEqual(newFields, fields)) {
fields = newFields
$stateId++
frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte
+1 -1
View File
@@ -34,7 +34,7 @@
{/each}
{/if}
{#if (gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent') && Array.isArray(gridItem.data.actions)}
{#if (gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent' || gridItem?.data?.type === 'aggridinfinitecomponent' || gridItem?.data?.type === 'aggridinfinitecomponentee') && Array.isArray(gridItem.data.actions)}
{#each gridItem.data.actions as actionButton, index (index)}
{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
<InlineScriptEditorPanel
frontend/src/lib/components/apps/editor/inlineScriptsPanel/utils.ts
+3 -1
View File
@@ -69,7 +69,9 @@ function processGridItemRunnable(gridItem: GridItem, list: AppScriptsList): AppS
if (
component.type === 'aggridcomponent' ||
component.type === 'aggridcomponentee' ||
component.type === 'dbexplorercomponent'
component.type === 'dbexplorercomponent' ||
component.type === 'aggridinfinitecomponent' ||
component.type === 'aggridinfinitecomponentee'
) {
component.actions?.forEach((actionButton) => {
if (actionButton.componentInput?.type !== 'runnable') {
frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+5 -1
View File
@@ -320,7 +320,7 @@
component.type === 'steppercomponent'}
overridenByComponent={component.type === 'aggridinfinitecomponent' ||
component.type === 'aggridinfinitecomponentee'
? ['offset', 'limit', 'orderBy', 'isDesc']
? ['offset', 'limit', 'orderBy', 'isDesc', 'search']
: []}
/>
</div>
@@ -374,6 +374,10 @@
/>
{:else if componentSettings.item.data.type === 'aggridcomponent'}
<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
{:else if componentSettings.item.data.type === 'aggridinfinitecomponent'}
<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
{:else if componentSettings.item.data.type === 'aggridinfinitecomponentee'}
<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
{:else if componentSettings.item.data.type === 'dbexplorercomponent'}
<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+8 -1
View File
@@ -5,6 +5,7 @@
import InputsSpecEditor from './InputsSpecEditor.svelte'
import OneOfInputSpecsEditor from './OneOfInputSpecsEditor.svelte'
import Tooltip from '$lib/components/Tooltip.svelte'
export let id: string
export let inputSpecs: RichConfigurations
@@ -85,7 +86,13 @@
<span class="text-xs font-semibold truncate text-primary">
{k}
</span>
<div class="text-tertiary text-xs">Managed by the component</div>
<div class="text-tertiary text-xs">
Managed by the component
<Tooltip light>
The input is managed by the component and cannot be edited here: It will be injected
by the component itself.
</Tooltip>
</div>
</div>
{/each}
{/if}
frontend/src/lib/components/apps/utils.ts
+3 -1
View File
@@ -294,7 +294,9 @@ export function getAllScriptNames(app: App): string[] {
if (
gridItem.data.type === 'aggridcomponent' ||
gridItem.data.type === 'aggridcomponentee' ||
gridItem.data.type === 'dbexplorercomponent'
gridItem.data.type === 'dbexplorercomponent' ||
gridItem.data.type === 'aggridinfinitecomponent' ||
gridItem.data.type === 'aggridinfinitecomponentee'
) {
gridItem.data.actions?.forEach((actionButton) => {
if (actionButton.componentInput?.type === 'runnable') {