windmill-components 1.306.10 → 1.309.2

package/package/components/apps/components/display/dbtable/AppDbExplorer.svelte

@@ -25,6 +25,7 @@ export let configuration;
 export let customCss = undefined;
 export let render;
 export let initializing = true;
+export let actions = [];
 $: table = resolvedConfig.type.configuration?.[resolvedConfig.type?.selected]?.table;
 $: table !== null && render && clearColumns();
 function clearColumns() {
@@ -95,6 +96,7 @@ let outputs = initOutput($worldStore, id, {
     selectedRow: {},
     selectedRows: [],
     result: [],
+    inputs: {},
     loading: false,
     page: 0,
     newChange: { row: 0, column: '', value: undefined },
@@ -414,6 +416,7 @@ $: hideInsert = resolvedConfig.hideInsert;
 		bind:this={deleteRow}
 	/>
 {/if}
+
 <UpdateCell {id} bind:this={updateCell} />
 {#if render}
 	<DbExplorerCount
@@ -484,6 +487,7 @@ $: hideInsert = resolvedConfig.hideInsert;
 					containerHeight={componentContainerHeight - (buttonContainerHeight ?? 0)}
 					on:update={onUpdate}
 					on:delete={onDelete}
+					{actions}
 				/>
 			{/key}
 		{/if}

package/package/components/apps/components/display/dbtable/AppDbExplorer.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import { type TableAction } from '../../../editor/component';
 declare const __propDef: {
     props: {
         id: string;
@@ -7,6 +8,7 @@ declare const __propDef: {
         customCss?: ComponentCustomCSS<'dbexplorercomponent'> | undefined;
         render: boolean;
         initializing?: boolean | undefined;
+        actions?: TableAction[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/display/dbtable/queries/count.js

@@ -1,4 +1,3 @@
-import { Preview } from '../../../../../../gen';
 import { buildParameters } from '../utils';
 import { getLanguageByResourceType, buildVisibleFieldList } from '../utils';
 function makeCountQuery(dbType, table, whereClause = undefined, columnDefs) {
@@ -89,7 +88,7 @@ function makeCountQuery(dbType, table, whereClause = undefined, columnDefs) {
         query += quicksearchCondition;
     }
     if (!whereClause &&
-        (dbType === Preview.language.MYSQL ||
+        (dbType === 'mysql' ||
             dbType === 'postgresql' ||
             dbType === 'snowflake' ||
             dbType === 'bigquery')) {

package/package/components/apps/components/display/dbtable/queries/delete.js

@@ -1,32 +1,40 @@
 import { getLanguageByResourceType, buildParameters } from '../utils';
 function deleteWithAllValues(table, columns, dbType) {
-    let query = buildParameters(columns, dbType);
+    let query = buildParameters(dbType === 'snowflake' ? columns.flatMap((c) => [c, c]) : columns, dbType);
     switch (dbType) {
         case 'postgresql': {
             const conditions = columns
-                .map((c, i) => `${c.field} = $${i + 1}::text::${c.datatype} `)
-                .join(' AND ');
-            query += `\nDELETE FROM ${table} WHERE ${conditions} RETURNING 1;`;
+                .map((c, i) => `($${i + 1}::${c.datatype} IS NULL AND ${c.field} IS NULL OR ${c.field} = $${i + 1}::${c.datatype})`)
+                .join('\n    AND ');
+            query += `\nDELETE FROM ${table} \nWHERE ${conditions} RETURNING 1;`;
             return query;
         }
         case 'mysql': {
-            const conditions = columns.map((c) => `${c.field} = :${c.field}`).join(' AND ');
-            query += `\nDELETE FROM ${table} WHERE ${conditions}`;
+            const conditions = columns
+                .map((c) => `(:${c.field} IS NULL AND ${c.field} IS NULL OR ${c.field} = :${c.field})`)
+                .join('\n    AND ');
+            query += `\nDELETE FROM ${table} \nWHERE ${conditions}`;
             return query;
         }
         case 'ms_sql_server': {
-            const conditions = columns.map((c, i) => `${c.field} = @p${i + 1} `).join(' AND ');
-            query += `\nDELETE FROM ${table} WHERE ${conditions}`;
+            const conditions = columns
+                .map((c, i) => `(@p${i + 1} IS NULL AND ${c.field} IS NULL OR ${c.field} = @p${i + 1})`)
+                .join('\n    AND ');
+            query += `\nDELETE FROM ${table} \nWHERE ${conditions}`;
             return query;
         }
         case 'snowflake': {
-            const conditions = columns.map((c, i) => `${c.field} = ? `).join(' AND ');
-            query += `\nDELETE FROM ${table} WHERE ${conditions}`;
+            const conditions = columns
+                .map((c, i) => `(? = 'null' AND ${c.field} IS NULL OR ${c.field} = ?)`)
+                .join('\n    AND ');
+            query += `\nDELETE FROM ${table} \nWHERE ${conditions}`;
             return query;
         }
         case 'bigquery': {
-            const conditions = columns.map((c, i) => `${c.field} = @${c.field}`).join(' AND ');
-            query += `\nDELETE FROM ${table} WHERE ${conditions}`;
+            const conditions = columns
+                .map((c, i) => `(CAST(@${c.field} AS STRING) = 'null' AND ${c.field} IS NULL OR ${c.field} = @${c.field})`)
+                .join('\n    AND ');
+            query += `\nDELETE FROM ${table} \nWHERE ${conditions}`;
             return query;
         }
         default:

package/package/components/apps/components/display/dbtable/queries/select.js

@@ -192,7 +192,8 @@ export function getSelectInput(resource, table, columnDefs, whereClause, dbType,
             }
         },
         type: 'runnable',
-        fieldType: 'object'
+        fieldType: 'object',
+        hideRefreshButton: false
     };
     return getQuery;
 }

package/package/components/apps/components/display/dbtable/queries/update.js

@@ -5,35 +5,43 @@ function updateWithAllValues(table, column, columns, dbType) {
             field: 'value_to_update',
             datatype: column.datatype
         },
-        ...columns
+        ...(dbType === 'snowflake' ? columns.flatMap((c) => [c, c]) : columns)
     ], dbType);
     query += `\n`;
     switch (dbType) {
         case 'postgresql': {
             const conditions = columns
-                .map((c, i) => `${c.field} = $${i + 2}::text::${c.datatype} `)
-                .join(' AND ');
-            query += `\nUPDATE ${table} SET ${column.field} = $1::text::${column.datatype} WHERE ${conditions}	RETURNING 1`;
+                .map((c, i) => `($${i + 2}::${c.datatype} IS NULL AND ${c.field} IS NULL OR ${c.field} = $${i + 2}::${c.datatype})`)
+                .join('\n    AND ');
+            query += `\nUPDATE ${table} SET ${column.field} = $1::${column.datatype} \nWHERE ${conditions}	RETURNING 1`;
             return query;
         }
         case 'mysql': {
-            const conditions = columns.map((c) => `${c.field} = :${c.field}`).join(' AND ');
-            query += `\nUPDATE ${table} SET ${column.field} = :value_to_update WHERE ${conditions}`;
+            const conditions = columns
+                .map((c) => `(:${c.field} IS NULL AND ${c.field} IS NULL OR ${c.field} = :${c.field})`)
+                .join('\n    AND ');
+            query += `\nUPDATE ${table} SET ${column.field} = :value_to_update \nWHERE ${conditions}`;
             return query;
         }
         case 'ms_sql_server': {
-            const conditions = columns.map((c, i) => `${c.field} = @p${i + 2} `).join(' AND ');
-            query += `\nUPDATE ${table} SET ${column.field} = @p1 WHERE ${conditions}`;
+            const conditions = columns
+                .map((c, i) => `(@p${i + 2} IS NULL AND ${c.field} IS NULL OR ${c.field} = @p${i + 2})`)
+                .join('\n    AND ');
+            query += `\nUPDATE ${table} SET ${column.field} = @p1 \nWHERE ${conditions}`;
             return query;
         }
         case 'snowflake': {
-            const conditions = columns.map((c, i) => `${c.field} = ? `).join(' AND ');
-            query += `\nUPDATE ${table} SET ${column.field} = ? WHERE ${conditions}`;
+            const conditions = columns
+                .map((c, i) => `(? = 'null' AND ${c.field} IS NULL OR ${c.field} = ?)`)
+                .join('\n    AND ');
+            query += `\nUPDATE ${table} SET ${column.field} = ? \nWHERE ${conditions}`;
             return query;
         }
         case 'bigquery': {
-            const conditions = columns.map((c, i) => `${c.field} = @${c.field}`).join(' AND ');
-            query += `\nUPDATE ${table} SET ${column.field} = @value_to_update WHERE ${conditions}`;
+            const conditions = columns
+                .map((c, i) => `(CAST(@${c.field} AS STRING) = 'null' AND ${c.field} IS NULL OR ${c.field} = @${c.field})`)
+                .join('\n    AND ');
+            query += `\nUPDATE ${table} SET ${column.field} = @value_to_update \nWHERE ${conditions}`;
             return query;
         }
         default:

package/package/components/apps/components/display/dbtable/utils.d.ts

@@ -1,3 +1,4 @@
+import { type Preview } from '../../../../../gen';
 import type { DBSchema, DBSchemas, SQLSchema } from '../../../../../stores';
 import { type IntrospectionQuery } from 'graphql';
 export declare enum ColumnIdentity {
@@ -75,7 +76,7 @@ export declare function formatGraphqlSchema(schema: IntrospectionQuery): string;
 export declare function getFieldType(type: string, databaseType: DbType): "number" | "text" | "date" | "checkbox";
 export type DbType = 'mysql' | 'ms_sql_server' | 'postgresql' | 'snowflake' | 'bigquery';
 export declare function buildVisibleFieldList(columnDefs: ColumnDef[], dbType: DbType): string[];
-export declare function getLanguageByResourceType(name: string): any;
+export declare function getLanguageByResourceType(name: string): Preview['language'];
 export declare function buildParameters(columns: Array<{
     field: string;
     datatype: string;

package/package/components/apps/components/display/dbtable/utils.js

@@ -1,4 +1,4 @@
-import { JobService, Preview, ResourceService } from '../../../../../gen';
+import { JobService, ResourceService } from '../../../../../gen';
 import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql';
 import { tryEvery } from '../../../../../utils';
 import { stringifySchema } from '../../../../copilot/lib';
@@ -14,10 +14,10 @@ export async function loadTableMetaData(resource, workspace, table, resourceType
     }
     let code = '';
     if (resourceType === 'mysql') {
-        const resourceObj = await ResourceService.getResourceValue({
+        const resourceObj = (await ResourceService.getResourceValue({
             workspace,
             path: resource.split(':')[1]
-        });
+        }));
         code = `
 	SELECT 
 			COLUMN_NAME as field,
@@ -135,10 +135,10 @@ order by c.ORDINAL_POSITION;`;
                 }
             });
             await new Promise((resolve) => setTimeout(resolve, 3000));
-            const testResult = await JobService.getCompletedJob({
+            const testResult = (await JobService.getCompletedJob({
                 workspace: workspace,
                 id: job
-            });
+            }));
             if (testResult.success) {
                 attempts = maxRetries;
                 if (resourceType === 'ms_sql_server') {
@@ -379,7 +379,8 @@ export async function getDbSchemas(resourceType, resourcePath, workspace, dbSche
                                 };
                             }
                             else {
-                                if (typeof testResult.result !== 'object' || !('__schema' in testResult.result)) {
+                                if (typeof testResult.result !== 'object' ||
+                                    !('__schema' in (testResult?.result ?? {}))) {
                                     console.error('Invalid GraphQL schema');
                                     errorCallback('Invalid GraphQL schema');
                                 }
@@ -538,11 +539,11 @@ export function buildVisibleFieldList(columnDefs, dbType) {
 }
 export function getLanguageByResourceType(name) {
     const language = {
-        postgresql: Preview.language.POSTGRESQL,
-        mysql: Preview.language.MYSQL,
-        ms_sql_server: Preview.language.MSSQL,
-        snowflake: Preview.language.SNOWFLAKE,
-        bigquery: Preview.language.BIGQUERY
+        postgresql: 'postgresql',
+        mysql: 'mysql',
+        ms_sql_server: 'mssql',
+        snowflake: 'snowflake',
+        bigquery: 'bigquery'
     };
     return language[name];
 }
@@ -586,10 +587,10 @@ export async function getTablesByResource(schema, dbType, resourcePath, workspac
             return paths;
         }
         case 'mysql': {
-            const resourceObj = await ResourceService.getResourceValue({
+            const resourceObj = (await ResourceService.getResourceValue({
                 workspace,
                 path: resourcePath
-            });
+            }));
             const paths = [];
             for (const key in s?.schema) {
                 for (const subKey in s.schema[key]) {

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

@@ -11,6 +11,7 @@ import ResolveStyle from '../../helpers/ResolveStyle.svelte';
 import { Button } from '../../../../common';
 import { cellRendererFactory } from './utils';
 import { Trash2 } from 'lucide-svelte';
+import AppAggridTableActions from './AppAggridTableActions.svelte';
 // import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 export let id;
 export let customCss = undefined;
@@ -20,7 +21,10 @@ export let datasource;
 export let state = undefined;
 export let outputs;
 export let allowDelete;
-const { app, selectedComponent, componentControl, darkMode } = getContext('AppViewerContext');
+export let actions = [];
+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()
@@ -95,6 +99,51 @@ function onCellValueChanged(event) {
 let api = undefined;
 let eGui;
 $: eGui && mountGrid();
+function refreshActions(actions) {
+    if (!deepEqual(actions, lastActions)) {
+        lastActions = [...actions];
+        updateOptions();
+    }
+}
+let lastActions = undefined;
+$: actions && refreshActions(actions);
+const tableActionsFactory = cellRendererFactory((c, p) => {
+    const rowIndex = p.node.rowIndex ?? 0;
+    const row = p.data;
+    new AppAggridTableActions({
+        target: c.eGui,
+        props: {
+            id: id,
+            actions,
+            rowIndex,
+            row,
+            render: true,
+            wrapActions: resolvedConfig.wrapActions,
+            onSet: (id, value) => {
+                if (!inputs[id]) {
+                    inputs[id] = { [rowIndex]: value };
+                }
+                else {
+                    inputs[id] = { ...inputs[id], [rowIndex]: value };
+                }
+                outputs?.inputs.set(inputs, true);
+            },
+            onRemove: (id) => {
+                if (inputs?.[id] == undefined) {
+                    return;
+                }
+                delete inputs[id][rowIndex];
+                inputs[id] = { ...inputs[id] };
+                if (Object.keys(inputs?.[id] ?? {}).length == 0) {
+                    delete inputs[id];
+                    inputs = { ...inputs };
+                }
+                outputs?.inputs.set(inputs, true);
+            }
+        },
+        context: new Map([['AppViewerContext', context]])
+    });
+});
 function transformColumnDefs(columnDefs) {
     const { isValid, errors } = validateColumnDefs(columnDefs);
     if (!isValid) {
@@ -132,6 +181,17 @@ function transformColumnDefs(columnDefs) {
             width: 100
         });
     }
+    if (actions && actions.length > 0) {
+        r.push({
+            headerName: 'Actions',
+            cellRenderer: tableActionsFactory,
+            autoHeight: true,
+            cellStyle: { textAlign: 'center' },
+            cellClass: 'grid-cell-centered',
+            lockPosition: 'right',
+            ...(!resolvedConfig?.wrapActions ? { minWidth: 130 * actions?.length } : {})
+        });
+    }
     return r;
 }
 let firstRow = 0;
@@ -165,6 +225,13 @@ function mountGrid() {
             cacheBlockSize: 100,
             cacheOverflowSize: 10,
             maxBlocksInCache: 20,
+            ...(resolvedConfig?.wrapActions
+                ? {
+                    rowHeight: Math.max(44, actions.length * 48)
+                }
+                : {
+                    rowHeight: 44
+                }),
             suppressColumnMoveAnimation: true,
             rowSelection: resolvedConfig?.multipleSelectable ? 'multiple' : 'single',
             rowMultiSelectWithClick: resolvedConfig?.multipleSelectable
@@ -240,6 +307,13 @@ function updateOptions() {
             editable: resolvedConfig?.allEditable,
             onCellValueChanged
         },
+        ...(resolvedConfig?.wrapActions
+            ? {
+                rowHeight: Math.max(44, actions.length * 48)
+            }
+            : {
+                rowHeight: 44
+            }),
         rowSelection: resolvedConfig?.multipleSelectable ? 'multiple' : 'single',
         rowMultiSelectWithClick: resolvedConfig?.multipleSelectable
             ? resolvedConfig.rowMultiselectWithClick

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import { type IDatasource } from 'ag-grid-community';
 import type { ComponentCustomCSS } from '../../../types';
-import type { components } from '../../../editor/component';
+import type { TableAction, components } from '../../../editor/component';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import type { Output } from '../../../rx';
@@ -16,6 +16,7 @@ declare const __propDef: {
         state?: any;
         outputs: Record<string, Output<any>>;
         allowDelete: boolean;
+        actions?: TableAction[] | undefined;
         clearRows?: (() => void) | undefined;
     };
     events: {

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

@@ -1,6 +1,6 @@
 <script>import { GridApi, createGrid } from 'ag-grid-community';
 import { isObject, sendUserToast } from '../../../../../utils';
-import { SvelteComponent, getContext, onDestroy } from 'svelte';
+import { getContext, onDestroy } from 'svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { initConfig, initOutput } from '../../../editor/appUtils';
 import { components } from '../../../editor/component';
@@ -14,6 +14,7 @@ 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 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 export let id;
 export let componentInput;
@@ -125,33 +126,20 @@ let api = undefined;
 let eGui;
 let state = undefined;
 $: loaded && eGui && mountGrid();
-const cachedDivs = new Map();
 function refreshActions(actions) {
     if (!deepEqual(actions, lastActions)) {
         lastActions = [...actions];
-        cachedDivs.forEach((cachedDiv) => {
-            cachedDiv.svelteComponent.$destroy();
-            cachedDiv.div.remove();
-        });
-        cachedDivs.clear();
         updateOptions();
     }
 }
 let lastActions = undefined;
 $: actions && refreshActions(actions);
 let inputs = {};
-function actionRenderer(params) {
-    const { rowIndex, data: row } = params;
-    if (rowIndex === -1 || actions == undefined || actions?.length == 0) {
-        return null;
-    }
-    if (cachedDivs.has(rowIndex)) {
-        return cachedDivs.get(rowIndex)?.div;
-    }
-    const div = document.createElement('div');
-    div.classList.add('flex', 'flex-row', 'items-center', 'w-full', 'h-full');
-    const svelteComponent = new AppAggridTableActions({
-        target: div,
+const tableActionsFactory = cellRendererFactory((c, p) => {
+    const rowIndex = p.node.rowIndex ?? 0;
+    const row = p.data;
+    new AppAggridTableActions({
+        target: c.eGui,
         props: {
             id: id,
             actions,
@@ -183,13 +171,7 @@ function actionRenderer(params) {
         },
         context: new Map([['AppViewerContext', context]])
     });
-    cachedDivs.set(rowIndex, {
-        div,
-        actions,
-        svelteComponent
-    });
-    return div;
-}
+});
 function mountGrid() {
     if (eGui) {
         try {
@@ -200,7 +182,7 @@ function mountGrid() {
             if (actions && actions.length > 0) {
                 columnDefs.push({
                     headerName: 'Actions',
-                    cellRenderer: actionRenderer,
+                    cellRenderer: tableActionsFactory,
                     autoHeight: true,
                     cellStyle: { textAlign: 'center' },
                     cellClass: 'grid-cell-centered',
@@ -311,7 +293,7 @@ function updateOptions() {
         if (actions && actions.length > 0) {
             columnDefs.push({
                 headerName: 'Actions',
-                cellRenderer: actionRenderer,
+                cellRenderer: tableActionsFactory,
                 autoHeight: true,
                 cellStyle: { textAlign: 'center' },
                 cellClass: 'grid-cell-centered',

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

@@ -24,8 +24,8 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 <RowWrapper value={row} index={rowIndex} {onSet} {onRemove}>
 	<div
 		class={twMerge(
-			'flex flex-row justify-center items-center gap-4 h-full px-4 py-1',
-			!wrapActions ? 'flex-wrap' : ''
+			'flex flex-row justify-center items-center gap-4 h-full px-4 py-1 w-full',
+			wrapActions ? 'flex-wrap' : ''
 		)}
 	>
 		{#each actions as action, actionIndex}

package/package/components/apps/components/display/table/utils.js

@@ -22,7 +22,6 @@ export class AbstractCellRenderer {
     }
     refresh(params) {
         this.value = params.value;
-        this.eGui.innerHTML = '';
         return true;
     }
 }

package/package/components/apps/components/inputs/AppTextInput.svelte

@@ -146,7 +146,7 @@ async function handleAfterIcon() {
 					<input
 						class={twMerge(
 							classInput,
-							resolvedConfig.beforeIcon != undefined ? '!pl-8' : '',
+							resolvedConfig.beforeIcon ? '!pl-8' : '',
 							resolvedConfig.afterIcon ? '!pr-8' : ''
 						)}
 						style={css?.input?.style ?? ''}