windmill-components 1.309.7 → 1.352.0

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -1,18 +1,18 @@
 <script>import { GridApi, createGrid } from 'ag-grid-community';
-import { isObject, sendUserToast } from '../../../../../utils';
+import { sendUserToast } from '../../../../../utils';
 import { createEventDispatcher, getContext } from 'svelte';
-import Alert from '../../../../common/alert/Alert.svelte';
 import { deepEqual } from 'fast-equals';
+import SyncColumnDefs from './SyncColumnDefs.svelte';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { twMerge } from 'tailwind-merge';
 import { initCss } from '../../../utils';
 import ResolveStyle from '../../helpers/ResolveStyle.svelte';
 import { Button } from '../../../../common';
-import { cellRendererFactory } from './utils';
-import { Trash2 } from 'lucide-svelte';
+import { cellRendererFactory, defaultCellRenderer } from './utils';
+import { Download, Trash2 } from 'lucide-svelte';
 import AppAggridTableActions from './AppAggridTableActions.svelte';
-// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
+import Popover from '../../../../Popover.svelte';
 export let id;
 export let customCss = undefined;
 export let containerHeight = undefined;
@@ -22,32 +22,12 @@ export let state = undefined;
 export let outputs;
 export let allowDelete;
 export let actions = [];
+export let result = undefined;
+export let allowColumnDefsActions = true;
 let inputs = {};
 const context = getContext('AppViewerContext');
 const { app, selectedComponent, componentControl, darkMode } = context;
 let css = initCss($app.css?.aggridcomponent, customCss);
-// let result: any[] | undefined = undefined
-// $: result && setValues()
-// let value: any[] = Array.isArray(result)
-// 	? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() }))
-// 	: [{ 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() }))
-// 		: [{ error: 'input was not an array' }]
-// 	if (api && loaded) {
-// 		let selected = api.getSelectedNodes()
-// 		if (selected && selected.length > 0 && resolvedConfig?.selectFirstRowByDefault != false) {
-// 			let data = { ...selected[0].data }
-// 			delete data['__index']
-// 			outputs?.selectedRow?.set(data)
-// 		}
-// 	}
-// 	if (!loaded) {
-// 		loaded = true
-// 	}
-// }
 let selectedRowIndex = -1;
 function toggleRow(row) {
     if (row) {
@@ -119,6 +99,10 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
             row,
             render: true,
             wrapActions: resolvedConfig.wrapActions,
+            selectRow: () => {
+                toggleRow(p);
+                p.node.setSelected(true);
+            },
             onSet: (id, value) => {
                 if (!inputs[id]) {
                     inputs[id] = { [rowIndex]: value };
@@ -145,6 +129,9 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
     });
 });
 function transformColumnDefs(columnDefs) {
+    if (!columnDefs) {
+        return [];
+    }
     const { isValid, errors } = validateColumnDefs(columnDefs);
     if (!isValid) {
         sendUserToast(`Invalid columnDefs: ${errors.join('\n')}`, true);
@@ -192,13 +179,22 @@ function transformColumnDefs(columnDefs) {
             ...(!resolvedConfig?.wrapActions ? { minWidth: 130 * actions?.length } : {})
         });
     }
-    return r;
+    return r.map((fields) => {
+        let cr = defaultCellRenderer(fields.cellRendererType);
+        return {
+            ...fields,
+            ...(cr ? { cellRenderer: cr } : {})
+        };
+    });
 }
 let firstRow = 0;
 let lastRow = 0;
 function validateColumnDefs(columnDefs) {
     let isValid = true;
     const errors = [];
+    if (!Array.isArray(columnDefs)) {
+        return { isValid: false, errors: ['Column definitions must be an array.'] };
+    }
     // Validate each column definition
     columnDefs.forEach((colDef, index) => {
         // Check if 'field' property exists and is a non-empty string
@@ -233,6 +229,7 @@ function mountGrid() {
                     rowHeight: 44
                 }),
             suppressColumnMoveAnimation: true,
+            suppressDragLeaveHidesColumns: true,
             rowSelection: resolvedConfig?.multipleSelectable ? 'multiple' : 'single',
             rowMultiSelectWithClick: resolvedConfig?.multipleSelectable
                 ? resolvedConfig.rowMultiselectWithClick
@@ -269,7 +266,7 @@ function mountGrid() {
         }, {});
     }
 }
-$: resolvedConfig && updateOptions();
+$: api && resolvedConfig && updateOptions();
 let oldDatasource = datasource;
 $: if (datasource && datasource != oldDatasource) {
     oldDatasource = datasource;
@@ -285,6 +282,9 @@ $: if (!deepEqual(extraConfig, resolvedConfig.extraConfig)) {
 export function clearRows() {
     api?.purgeInfiniteCache();
 }
+export function restoreColumns() {
+    api?.resetColumnState();
+}
 function onSelectionChanged(api) {
     if (resolvedConfig?.multipleSelectable) {
         const rows = api.getSelectedNodes();
@@ -300,6 +300,7 @@ function onSelectionChanged(api) {
     }
 }
 function updateOptions() {
+    // console.debug('updateOptions', resolvedConfig, api)
     api?.updateGridOptions({
         columnDefs: transformColumnDefs(resolvedConfig?.columnDefs),
         defaultColDef: {
@@ -307,6 +308,7 @@ function updateOptions() {
             editable: resolvedConfig?.allEditable,
             onCellValueChanged
         },
+        suppressDragLeaveHidesColumns: true,
         ...(resolvedConfig?.wrapActions
             ? {
                 rowHeight: Math.max(44, actions.length * 48)
@@ -333,9 +335,13 @@ function updateOptions() {
 	/>
 {/each}
 
-{#if Array.isArray(resolvedConfig.columnDefs) && resolvedConfig.columnDefs.every(isObject)}
+<SyncColumnDefs {id} columnDefs={resolvedConfig.columnDefs} {result} {allowColumnDefsActions}>
 	<div
-		class={twMerge('divide-y flex flex-col h-full', css?.container?.class, 'wm-aggrid-container')}
+		class={twMerge(
+			'flex flex-col h-full component-wrapper divide-y',
+			css?.container?.class,
+			'wm-aggrid-container'
+		)}
 		style={containerHeight ? `height: ${containerHeight}px;` : css?.container?.style}
 		bind:clientHeight
 		bind:clientWidth
@@ -351,17 +357,42 @@ function updateOptions() {
 		>
 			<div bind:this={eGui} style:height="100%" />
 		</div>
-		<div class="flex gap-1 w-full justify-end text-sm text-secondary py-1"
-			>{firstRow}{'->'}{lastRow + 1} of {datasource?.rowCount} rows</div
-		>
+		{#if resolvedConfig && 'footer' in resolvedConfig && resolvedConfig.footer}
+			<div class="flex gap-1 w-full justify-between items-center text-xs text-primary p-2">
+				<div>
+					<Popover>
+						<svelte:fragment slot="text">Download</svelte:fragment>
+						<Button
+							startIcon={{ icon: Download }}
+							color="light"
+							size="xs2"
+							on:click={() => {
+								api?.exportDataAsCsv()
+							}}
+							iconOnly
+						/>
+					</Popover>
+				</div>
+				{#if datasource?.rowCount}
+					{firstRow}{'->'}{lastRow + 1} of {datasource?.rowCount} rows
+				{:else}
+					{firstRow}{'->'}{lastRow + 1}
+				{/if}
+			</div>
+		{/if}
 	</div>
-{:else if resolvedConfig.columnDefs != undefined}
-	<Alert title="Parsing issues" type="error" size="xs">
-		The columnDefs should be an array of objects, received:
-		<pre class="overflow-auto">
-				{JSON.stringify(resolvedConfig.columnDefs)}
-			</pre>
-	</Alert>
-{:else}
-	<Alert title="Parsing issues" type="error" size="xs">The columnDefs are undefined</Alert>
-{/if}
+</SyncColumnDefs>
+
+<style>
+	.ag-theme-alpine {
+		--ag-row-border-style: solid;
+		--ag-border-color: rgb(209 213 219);
+		--ag-header-border-style: solid;
+		--ag-border-radius: 0;
+		--ag-alpine-active-color: #d1d5db;
+	}
+
+	.ag-theme-alpine-dark {
+		--ag-border-color: #4b5563;
+		--ag-alpine-active-color: #64748b;
+	}</style>

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte.d.ts

@@ -11,13 +11,16 @@ declare const __propDef: {
         id: string;
         customCss?: ComponentCustomCSS<'aggridcomponent'> | undefined;
         containerHeight?: number | undefined;
-        resolvedConfig: InitConfig<(typeof components)['dbexplorercomponent']['initialData']['configuration']>;
+        resolvedConfig: InitConfig<(typeof components)['dbexplorercomponent']['initialData']['configuration'] | (typeof components)['aggridinfinitecomponent']['initialData']['configuration'] | (typeof components)['aggridinfinitecomponentee']['initialData']['configuration']>;
         datasource: IDatasource;
         state?: any;
         outputs: Record<string, Output<any>>;
         allowDelete: boolean;
         actions?: TableAction[] | undefined;
+        result?: any[] | undefined;
+        allowColumnDefsActions?: boolean | undefined;
         clearRows?: (() => void) | undefined;
+        restoreColumns?: (() => void) | undefined;
     };
     events: {
         update: CustomEvent<any>;
@@ -32,5 +35,6 @@ export type AppAggridExplorerTableEvents = typeof __propDef.events;
 export type AppAggridExplorerTableSlots = typeof __propDef.slots;
 export default class AppAggridExplorerTable extends SvelteComponent<AppAggridExplorerTableProps, AppAggridExplorerTableEvents, AppAggridExplorerTableSlots> {
     get clearRows(): () => void;
+    get restoreColumns(): () => void;
 }
 export {};

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte

@@ -0,0 +1,172 @@
+<script>import { getContext } from 'svelte';
+import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
+import { initConfig, initOutput } from '../../../editor/appUtils';
+import { components } from '../../../editor/component';
+import ResolveConfig from '../../helpers/ResolveConfig.svelte';
+import 'ag-grid-community/styles/ag-grid.css';
+import './theme/windmill-theme.css';
+import { initCss } from '../../../utils';
+import ResolveStyle from '../../helpers/ResolveStyle.svelte';
+import AppAggridExplorerTable from './AppAggridExplorerTable.svelte';
+import { getPrimaryKeys } from '../dbtable/utils';
+import InitializeComponent from '../../helpers/InitializeComponent.svelte';
+import DebouncedInput from '../../helpers/DebouncedInput.svelte';
+import RunnableComponent from '../../helpers/RunnableComponent.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let initializing = undefined;
+export let render;
+export let customCss = undefined;
+export let actions = undefined;
+let runnableComponent = undefined;
+function clear() {
+    setTimeout(() => {
+        aggrid?.clearRows();
+    }, 0);
+}
+const context = getContext('AppViewerContext');
+const { app, worldStore } = context;
+let css = initCss($app.css?.aggridcomponent, customCss);
+let result = undefined;
+let loading = false;
+let resolvedConfig = initConfig(components['aggridinfinitecomponent'].initialData.configuration, configuration);
+let outputs = initOutput($worldStore, id, {
+    selectedRowIndex: 0,
+    selectedRow: {},
+    selectedRows: [],
+    result: [],
+    inputs: {},
+    loading: false,
+    page: 0,
+    newChange: { row: 0, column: '', value: undefined },
+    ready: undefined,
+    params: {
+        offset: 0,
+        limit: 10,
+        orderBy: resolvedConfig.columnDefs?.[0]?.field,
+        isDesc: false,
+        search: ''
+    }
+});
+let aggrid = undefined;
+const datasource = {
+    rowCount: undefined,
+    getRows: async function (params) {
+        if (!render) {
+            return;
+        }
+        const currentParams = {
+            offset: params.startRow,
+            limit: params.endRow - params.startRow,
+            orderBy: params.sortModel?.[0]?.colId ?? undefined,
+            isDesc: params.sortModel?.[0]?.sort === 'desc',
+            search: resolvedConfig.searchEnabled ? searchValue : ''
+        };
+        outputs.params.set(currentParams);
+        if (!runnableComponent && result) {
+            params.successCallback(result, result.length);
+        }
+        runnableComponent?.runComponent(undefined, undefined, undefined, currentParams, {
+            done: (items) => {
+                let lastRow = -1;
+                if (datasource?.rowCount && datasource.rowCount <= params.endRow) {
+                    lastRow = datasource.rowCount;
+                }
+                if (items && Array.isArray(items)) {
+                    let processedData = items.map((item) => {
+                        let primaryKeys = getPrimaryKeys(resolvedConfig.columnDefs);
+                        let o = {};
+                        primaryKeys.forEach((pk) => {
+                            o[pk] = item[pk];
+                        });
+                        item['__index'] = JSON.stringify(o);
+                        return item;
+                    });
+                    if (items.length < params.endRow - params.startRow) {
+                        lastRow = params.startRow + items.length;
+                    }
+                    datasource.rowCount = undefined;
+                    params.successCallback(processedData, lastRow);
+                }
+                else {
+                    params.failCallback();
+                }
+            },
+            cancel: () => {
+                params.failCallback();
+            },
+            error: () => {
+                params.failCallback();
+            }
+        });
+    }
+};
+let searchValue = '';
+function updateSearchInOutputs() {
+    outputs.params.set({
+        ...outputs.params.peak(),
+        search: searchValue
+    });
+    aggrid?.clearRows();
+}
+$: searchValue !== undefined && updateSearchInOutputs();
+</script>
+
+{#each Object.keys(components['aggridinfinitecomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.tablecomponent}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+<RunnableWrapper
+	{outputs}
+	{componentInput}
+	{id}
+	bind:initializing
+	bind:result
+	bind:loading
+	bind:runnableComponent
+	{render}
+	autoRefresh={true}
+	allowConcurentRequests
+	on:argsChanged={() => {
+		clear()
+	}}
+>
+	<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}
+			{result}
+			{actions}
+			allowDelete={false}
+			bind:this={aggrid}
+		/>
+	</div>
+</RunnableWrapper>

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { AppInput } from '../../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import { type TableAction } from '../../../editor/component';
+import 'ag-grid-community/styles/ag-grid.css';
+import './theme/windmill-theme.css';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
+        initializing?: boolean | undefined;
+        render: boolean;
+        customCss?: ComponentCustomCSS<'aggridinfinitecomponent'> | undefined;
+        actions?: TableAction[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppAggridInfiniteTableProps = typeof __propDef.props;
+export type AppAggridInfiniteTableEvents = typeof __propDef.events;
+export type AppAggridInfiniteTableSlots = typeof __propDef.slots;
+export default class AppAggridInfiniteTable extends SvelteComponent<AppAggridInfiniteTableProps, AppAggridInfiniteTableEvents, AppAggridInfiniteTableSlots> {
+}
+export {};

package/package/components/apps/components/display/table/AppAggridInfiniteTableEe.svelte

@@ -0,0 +1,38 @@
+<script context="module">
+</script>
+
+<script>import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import { Loader2 } from 'lucide-svelte';
+import AppAggridInfiniteTable from './AppAggridInfiniteTable.svelte';
+export let id;
+export let license;
+export let componentInput;
+export let configuration;
+export let initializing = undefined;
+export let render;
+export let customCss = undefined;
+export let actions = [];
+let loaded = false;
+async function load() {
+    await import('ag-grid-enterprise');
+    const { LicenseManager } = await import('ag-grid-enterprise');
+    LicenseManager.setLicenseKey(license);
+    loaded = true;
+}
+load();
+</script>
+
+{#if loaded}
+	<AppAggridInfiniteTable
+		{id}
+		{componentInput}
+		{configuration}
+		{initializing}
+		{render}
+		{customCss}
+		{actions}
+	/>
+{:else}
+	<Loader2 class="animate-spin" />
+{/if}

package/package/components/apps/components/display/table/AppAggridInfiniteTableEe.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { AppInput } from '../../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import type { TableAction } from '../../../editor/component';
+declare const __propDef: {
+    props: {
+        id: string;
+        license: string;
+        componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
+        initializing?: boolean | undefined;
+        render: boolean;
+        customCss?: ComponentCustomCSS<'aggridinfinitecomponentee'> | undefined;
+        actions?: TableAction[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppAggridInfiniteTableEeProps = typeof __propDef.props;
+export type AppAggridInfiniteTableEeEvents = typeof __propDef.events;
+export type AppAggridInfiniteTableEeSlots = typeof __propDef.slots;
+export default class AppAggridInfiniteTableEe extends SvelteComponent<AppAggridInfiniteTableEeProps, AppAggridInfiniteTableEeEvents, AppAggridInfiniteTableEeSlots> {
+}
+export {};