windmill-components 1.309.7 → 1.352.0

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

@@ -4,17 +4,20 @@ import { getContext, onDestroy } from 'svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { initConfig, initOutput } from '../../../editor/appUtils';
 import { components } from '../../../editor/component';
-import Alert from '../../../../common/alert/Alert.svelte';
 import ResolveConfig from '../../helpers/ResolveConfig.svelte';
 import { deepEqual } from 'fast-equals';
+import RefreshButton from '../../helpers/RefreshButton.svelte';
+import SyncColumnDefs from './SyncColumnDefs.svelte';
 import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
-import { Loader2 } from 'lucide-svelte';
+import './theme/windmill-theme.css';
+import { ChevronLeft, ChevronRight, Download, Loader2, SkipBack, SkipForward } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { initCss } from '../../../utils';
 import ResolveStyle from '../../helpers/ResolveStyle.svelte';
 import AppAggridTableActions from './AppAggridTableActions.svelte';
-import { cellRendererFactory } from './utils';
+import { cellRendererFactory, defaultCellRenderer } from './utils';
+import Popover from '../../../../Popover.svelte';
+import { Button } from '../../../../common';
 // import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 export let id;
 export let componentInput;
@@ -63,7 +66,7 @@ let outputs = initOutput($worldStore, id, {
     result: [],
     loading: false,
     page: 0,
-    newChange: { row: 0, column: '', value: undefined },
+    newChange: { row: 0, column: '', value: undefined, old: undefined },
     ready: undefined,
     inputs: {},
     filters: {},
@@ -114,7 +117,8 @@ function onCellValueChanged(event) {
         outputs?.newChange?.set({
             row: event.node.rowIndex,
             column: event.colDef.field,
-            value: dataCell
+            value: dataCell,
+            old: result[Number(event.node.data['__index'])][event.colDef.field]
         });
         result[Number(event.node.data['__index'])][event.colDef.field] = dataCell;
         let data = { ...result[event.node.rowIndex] };
@@ -147,6 +151,10 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
             row,
             render,
             wrapActions: resolvedConfig.wrapActions,
+            selectRow: () => {
+                toggleRow(p);
+                p.node.setSelected(true);
+            },
             onSet: (id, value) => {
                 if (!inputs[id]) {
                     inputs[id] = { [rowIndex]: value };
@@ -191,9 +199,16 @@ function mountGrid() {
             }
             createGrid(eGui, {
                 rowData: value,
-                columnDefs: columnDefs,
+                columnDefs: columnDefs.map((fields) => {
+                    let cr = defaultCellRenderer(fields.cellRendererType);
+                    return {
+                        ...fields,
+                        ...(cr ? { cellRenderer: cr } : {})
+                    };
+                }),
                 pagination: resolvedConfig?.pagination,
                 paginationAutoPageSize: resolvedConfig?.pagination,
+                suppressPaginationPanel: true,
                 defaultColDef: {
                     flex: resolvedConfig.flex ? 1 : 0,
                     editable: resolvedConfig?.allEditable,
@@ -208,9 +223,11 @@ function mountGrid() {
                     : undefined,
                 onPaginationChanged: (event) => {
                     outputs?.page.set(event.api.paginationGetCurrentPage());
+                    footerRenderCount++;
                 },
                 initialState: state,
                 suppressRowDeselection: true,
+                suppressDragLeaveHidesColumns: true,
                 ...(resolvedConfig?.extraConfig ?? {}),
                 onStateUpdated: (e) => {
                     state = e?.api?.getState();
@@ -225,7 +242,14 @@ function mountGrid() {
                     $componentControl[id] = {
                         agGrid: { api: e.api, columnApi: e.columnApi },
                         setSelectedIndex: (index) => {
-                            e.api.getRowNode(index.toString())?.setSelected(true);
+                            if (index === null) {
+                                e.api.deselectAll();
+                                outputs?.selectedRow?.set({});
+                                outputs?.selectedRowIndex.set(0);
+                            }
+                            else {
+                                e.api.getRowNode(index.toString())?.setSelected(true);
+                            }
                         }
                     };
                     api = e.api;
@@ -252,7 +276,7 @@ function mountGrid() {
         }
     }
 }
-$: resolvedConfig && updateOptions();
+$: api && resolvedConfig && updateOptions();
 $: value && updateValue();
 $: if (!deepEqual(extraConfig, resolvedConfig.extraConfig)) {
     extraConfig = resolvedConfig.extraConfig;
@@ -302,9 +326,17 @@ function updateOptions() {
         }
         api?.updateGridOptions({
             rowData: value,
-            columnDefs: columnDefs,
+            columnDefs: columnDefs.map((fields) => {
+                let cr = defaultCellRenderer(fields.cellRendererType);
+                return {
+                    ...fields,
+                    ...(cr ? { cellRenderer: cr } : {})
+                };
+            }),
             pagination: resolvedConfig?.pagination,
             paginationAutoPageSize: resolvedConfig?.pagination,
+            suppressPaginationPanel: true,
+            suppressDragLeaveHidesColumns: true,
             defaultColDef: {
                 flex: resolvedConfig.flex ? 1 : 0,
                 editable: resolvedConfig?.allEditable,
@@ -325,6 +357,9 @@ function updateOptions() {
         sendUserToast("Couldn't update the grid:" + e, true);
     }
 }
+let loading = false;
+let refreshCount = 0;
+let footerRenderCount = 0;
 </script>
 
 {#each Object.keys(components['aggridcomponent'].initialData.configuration) as key (key)}
@@ -346,53 +381,151 @@ function updateOptions() {
 	/>
 {/each}
 
-<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-	{#if Array.isArray(value) && value.every(isObject)}
-		{#if Array.isArray(resolvedConfig.columnDefs) && resolvedConfig.columnDefs.every(isObject)}
+<RunnableWrapper
+	{outputs}
+	{render}
+	{componentInput}
+	{id}
+	bind:initializing
+	bind:result
+	bind:loading
+	hideRefreshButton={true}
+>
+	<SyncColumnDefs {id} columnDefs={resolvedConfig.columnDefs} {result}>
+		<div
+			class={twMerge(
+				'flex flex-col h-full component-wrapper divide-y',
+				css?.container?.class,
+				'wm-aggrid-container'
+			)}
+			style={css?.container?.style}
+			bind:clientHeight
+			bind:clientWidth
+		>
+			{#if componentInput?.type === 'runnable' && componentInput.autoRefresh}
+				<div class="absolute top-2 right-2 z-50">
+					<RefreshButton {id} {loading} />
+				</div>
+			{/if}
+
 			<div
-				class={twMerge(
-					'border shadow-sm divide-y flex flex-col h-full',
-					css?.container?.class,
-					'wm-aggrid-container'
-				)}
-				style={css?.container?.style}
-				bind:clientHeight
-				bind:clientWidth
+				on:pointerdown|stopPropagation={() => {
+					$selectedComponent = [id]
+				}}
+				style:height="{clientHeight}px"
+				style:width="{clientWidth}px"
+				class="ag-theme-alpine relative"
+				class:ag-theme-alpine-dark={$darkMode}
 			>
-				<div
-					on:pointerdown|stopPropagation={() => {
-						$selectedComponent = [id]
-					}}
-					style:height="{clientHeight}px"
-					style:width="{clientWidth}px"
-					class="ag-theme-alpine"
-					class:ag-theme-alpine-dark={$darkMode}
-				>
-					{#key resolvedConfig?.pagination}
-						{#if loaded}
-							<div bind:this={eGui} style:height="100%" />
-						{:else}
-							<Loader2 class="animate-spin" />
-						{/if}
-					{/key}
-				</div>
+				{#key resolvedConfig?.pagination}
+					{#if loaded}
+						<div bind:this={eGui} style:height="100%" />
+					{:else}
+						<Loader2 class="animate-spin" />
+					{/if}
+				{/key}
 			</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}
-	{:else if result != undefined}
-		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects, received:
-			<pre class="overflow-auto mt-2"
-				>{JSON.stringify(result)}
-			</pre>
-		</Alert>
-	{/if}
+			{#if resolvedConfig.footer}
+				{#key footerRenderCount}
+					<div class="flex gap-1 w-full justify-between items-center text-sm text-secondary/80 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>
+						<div class="flex flex-row gap-1 items-center">
+							{#if resolvedConfig?.pagination}
+								{#key refreshCount}
+									<div class="text-xs mx-2 text-primary">
+										{(api?.paginationGetPageSize() ?? 0) * (api?.paginationGetCurrentPage() ?? 0) +
+											1}
+										to {Math.min(
+											api?.paginationGetRowCount() ?? 0,
+											((api?.paginationGetCurrentPage() ?? 0) + 1) *
+												(api?.paginationGetPageSize() ?? 0)
+										)}
+										of {api?.paginationGetRowCount()}
+									</div>
+
+									<Button
+										iconOnly
+										startIcon={{ icon: SkipBack }}
+										color="light"
+										size="xs2"
+										disabled={api?.paginationGetCurrentPage() == 0}
+										on:click={() => {
+											api?.paginationGoToFirstPage()
+											refreshCount++
+										}}
+									/>
+									<Button
+										iconOnly
+										startIcon={{ icon: ChevronLeft }}
+										color="light"
+										size="xs2"
+										disabled={api?.paginationGetCurrentPage() == 0}
+										on:click={() => {
+											api?.paginationGoToPreviousPage()
+											refreshCount++
+										}}
+									/>
+									<div class="text-xs mx-2 text-primary">
+										Page {(api?.paginationGetCurrentPage() ?? 0) + 1} of {api?.paginationGetTotalPages() ??
+											0}
+									</div>
+									<Button
+										iconOnly
+										startIcon={{ icon: ChevronRight }}
+										color="light"
+										size="xs2"
+										disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
+											api?.paginationGetTotalPages()}
+										on:click={() => {
+											api?.paginationGoToNextPage()
+											refreshCount++
+										}}
+									/>
+									<Button
+										iconOnly
+										startIcon={{ icon: SkipForward }}
+										color="light"
+										size="xs2"
+										disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
+											api?.paginationGetTotalPages()}
+										on:click={() => {
+											api?.paginationGoToLastPage()
+											refreshCount++
+										}}
+									/>
+								{/key}
+							{/if}
+						</div>
+					</div>
+				{/key}
+			{/if}
+		</div>
+	</SyncColumnDefs>
 </RunnableWrapper>
+
+<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/AppAggridTable.svelte.d.ts

@@ -3,7 +3,7 @@ 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 'ag-grid-community/styles/ag-theme-alpine.css';
+import './theme/windmill-theme.css';
 declare const __propDef: {
     props: {
         id: string;

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

@@ -2,7 +2,8 @@
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import AppButton from '../../buttons/AppButton.svelte';
-import { AppCheckbox, AppSelect } from '../..';
+import AppCheckbox from '../../inputs/AppCheckbox.svelte';
+import AppSelect from '../../inputs/AppSelect.svelte';
 import { twMerge } from 'tailwind-merge';
 import { Popup } from '../../../../common';
 import { Plug2 } from 'lucide-svelte';
@@ -17,6 +18,7 @@ export let row;
 export let onSet;
 export let onRemove;
 export let wrapActions = undefined;
+export let selectRow;
 const dispatch = createEventDispatcher();
 const { selectedComponent, hoverStore, mode, connectingInput } = getContext('AppViewerContext');
 </script>
@@ -43,7 +45,8 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 						$hoverStore = undefined
 					}
 				}}
-				on:pointerdown|stopPropagation={() => {
+				on:pointerdown|stopPropagation={(e) => {
+					selectRow()
 					$selectedComponent = [action.id]
 				}}
 				class={twMerge(
@@ -127,6 +130,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 							noWFull
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								selectRow()
 							}}
 							id={action.id}
 							customCss={action.customCss}
@@ -137,6 +141,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 							}}
 							componentInput={action.componentInput}
 							verticalAlignment="center"
+							replaceCallback={true}
 							{controls}
 						/>
 					{:else if action.type == 'checkboxcomponent'}
@@ -151,6 +156,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 							onToggle={action.onToggle}
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								selectRow()
 							}}
 							verticalAlignment="center"
 							{controls}
@@ -170,6 +176,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 								onSelect={action.onSelect}
 								preclickAction={async () => {
 									dispatch('toggleRow')
+									selectRow()
 								}}
 								{controls}
 							/>
@@ -182,6 +189,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 						{render}
 						preclickAction={async () => {
 							dispatch('toggleRow')
+							selectRow()
 						}}
 						noWFull
 						id={action.id}
@@ -191,6 +199,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 						extraQueryParams={{
 							row
 						}}
+						replaceCallback={true}
 						componentInput={action.componentInput}
 					/>
 				{:else if action.type == 'checkboxcomponent'}
@@ -205,6 +214,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 						onToggle={action.onToggle}
 						preclickAction={async () => {
 							dispatch('toggleRow')
+							selectRow()
 						}}
 					/>
 				{:else if action.type == 'selectcomponent'}
@@ -222,6 +232,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 							onSelect={action.onSelect}
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								selectRow()
 							}}
 						/>
 					</div>

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

@@ -14,6 +14,7 @@ declare const __propDef: {
         onSet: (id: string, value: any) => void;
         onRemove: (id: string) => void;
         wrapActions?: boolean | undefined;
+        selectRow: () => void;
     };
     events: {
         toggleRow: CustomEvent<any>;

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

@@ -2,15 +2,13 @@
 import { createEventDispatcher, tick } from 'svelte';
 import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
+import { isLinkObject } from './utils';
 export let type = 'text';
 export let value;
 export let width;
 let isEditable = writable(false);
 let tempValue = value;
 const dispatch = createEventDispatcher();
-function isLinkObject(value) {
-    return value && typeof value === 'object' && 'href' in value && 'label' in value;
-}
 async function toggleEdit() {
     $isEditable = !$isEditable;
     if ($isEditable) {