windmill-components 1.309.7 → 1.339.2

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

@@ -1,15 +1,16 @@
-<script>import Button from '../../../../common/button/Button.svelte';
-import { ChevronLeft, ChevronRight, Download } from 'lucide-svelte';
+<script>import Popover from '../../../../Popover.svelte';
+import Button from '../../../../common/button/Button.svelte';
+import { ChevronLeft, ChevronRight, Columns, Download } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 export let result;
 export let manualPagination;
 export let pageSize;
 export let table;
+export let download = true;
+export let loading = false;
 let c = '';
 export { c as class };
 export let style = '';
-export let download = true;
-export let loading = false;
 function convertJSONToCSV(objArray) {
     let str = '';
     const headers = Object.keys(objArray[0]);
@@ -47,6 +48,37 @@ $: if (!loading) {
 		class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
 		{style}
 	>
+		<div class="flex items-center gap-1 flex-row">
+			{#if download}
+				<Popover>
+					<svelte:fragment slot="text">Download as CSV</svelte:fragment>
+
+					<Button
+						size="xs2"
+						color="light"
+						on:click={downloadResultAsCSV}
+						startIcon={{ icon: Download }}
+						wrapperClasses="app-table-footer-btn"
+						iconOnly
+					/>
+				</Popover>
+			{/if}
+			{#if !$table.getIsAllColumnsVisible()}
+				<Popover>
+					<svelte:fragment slot="text">Display hidden columns</svelte:fragment>
+					<Button
+						size="xs2"
+						color="light"
+						on:click={() => {
+							$table.getAllColumns().forEach((column) => column.toggleVisibility(true))
+						}}
+						startIcon={{ icon: Columns }}
+						wrapperClasses="app-table-footer-btn"
+						iconOnly
+					/>
+				</Popover>
+			{/if}
+		</div>
 		{#if result.length > pageSize || manualPagination}
 			<div class="flex items-center gap-2 flex-row">
 				<Button
@@ -64,6 +96,7 @@ $: if (!loading) {
 				>
 					Previous
 				</Button>
+
 				<Button
 					size="xs2"
 					variant="border"
@@ -79,26 +112,12 @@ $: if (!loading) {
 				>
 					Next
 				</Button>
-				{$table.getState().pagination.pageIndex + 1}
-				{$table.getPageCount() > 0 ? ` of ${$table.getPageCount()}` : ''}
+				<div>
+					Page:
+					{$table.getState().pagination.pageIndex + 1}
+					{$table.getPageCount() > 0 ? ` of ${$table.getPageCount()}` : ''}
+				</div>
 			</div>
-		{:else}
-			<div />
 		{/if}
-		<div class="flex items-center gap-2 flex-row">
-			{#if download}
-				<Button
-					size="xs"
-					variant="border"
-					color="light"
-					btnClasses="!py-1"
-					on:click={downloadResultAsCSV}
-					startIcon={{ icon: Download }}
-					wrapperClasses="app-table-footer-btn"
-				>
-					Download
-				</Button>
-			{/if}
-		</div>
 	</div>
 {/if}

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

@@ -7,10 +7,10 @@ declare const __propDef: {
         manualPagination: boolean;
         pageSize: number;
         table: Readable<Table<Record<string, any>>>;
-        class?: string | undefined;
-        style?: string | undefined;
         download?: boolean | undefined;
         loading?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,119 @@
+<script>import { getContext, tick } from 'svelte';
+import { findGridItem } from '../../../editor/appUtils';
+import Button from '../../../../common/button/Button.svelte';
+import { RefreshCw } from 'lucide-svelte';
+import Badge from '../../../../common/badge/Badge.svelte';
+import Alert from '../../../../common/alert/Alert.svelte';
+import { isObject } from '../../../../../utils';
+export let id;
+export let columnDefs = [];
+export let result = [];
+export let allowColumnDefsActions = true;
+const { app, mode, selectedComponent } = getContext('AppViewerContext');
+async function syncColumns() {
+    let gridItem = findGridItem($app, id);
+    if (gridItem && result) {
+        const keys = Object.keys(result[0] ?? {}) ?? [];
+        if (gridItem.data.configuration.columnDefs.type === 'static') {
+            gridItem.data.configuration.columnDefs.value = keys.map((key) => ({
+                field: key,
+                headerName: key,
+                flex: 1
+            }));
+        }
+        else if (gridItem.data.configuration.columnDefs.type === 'evalv2') {
+            gridItem.data.configuration.columnDefs.expr = JSON.stringify(keys.map((key, index) => ({
+                field: key,
+                headerName: key,
+                flex: 1
+            })));
+        }
+        await updateConfiguration();
+    }
+}
+async function setEmptyColumns() {
+    let gridItem = findGridItem($app, id);
+    if (gridItem && gridItem.data.configuration.columnDefs.type === 'static') {
+        gridItem.data.configuration.columnDefs.value = [];
+        await updateConfiguration();
+    }
+    else if (gridItem && gridItem.data.configuration.columnDefs.type === 'evalv2') {
+        gridItem.data.configuration.columnDefs.expr = '[]';
+        await updateConfiguration();
+    }
+}
+async function updateConfiguration() {
+    $selectedComponent = undefined;
+    await tick();
+    $selectedComponent = [id];
+}
+</script>
+
+{#if Array.isArray(result) && result.every(isObject)}
+	{#if Array.isArray(columnDefs) && columnDefs.every(isObject)}
+		{#if $mode === 'dnd' && columnDefs?.length === 0 && result?.length > 0 && allowColumnDefsActions}
+			<div class="m-16">
+				<Alert title="Missing column definitions">
+					<div class="flex flex-col items-start gap-2">
+						<div class="text-xs"> No columns definition found. Columns found in data: </div>
+						<div class="text-sm flex flex-row gap-2">
+							{#each Object.keys(result[0] ?? []) as key}
+								<Badge small color="dark-gray">{key}</Badge>
+							{/each}
+						</div>
+						<div class="w-full flex fles-row justify-end">
+							<Button startIcon={{ icon: RefreshCw }} size="xs" color="dark" on:click={syncColumns}>
+								Sync columns definition
+							</Button>
+						</div>
+					</div>
+				</Alert>
+			</div>
+		{:else}
+			<slot />
+		{/if}
+	{:else if columnDefs !== undefined}
+		<div class="m-16">
+			<Alert title="Parsing issues" type="error" size="xs">
+				<div class="flex flex-col items-start gap-2">
+					The columnDefs should be an array of objects, received:
+					<pre class="overflow-auto">
+{JSON.stringify(columnDefs)}
+				</pre>
+					{#if allowColumnDefsActions}
+						<div class="w-full flex fles-row justify-end">
+							<Button
+								startIcon={{ icon: RefreshCw }}
+								size="xs"
+								color="red"
+								on:click={setEmptyColumns}
+							>
+								Fix columns definitions
+							</Button>
+						</div>
+					{/if}
+				</div>
+			</Alert>
+		</div>
+	{:else}
+		<div class="m-16">
+			<Alert title="Parsing issues" type="error" size="xs">
+				<div class="flex flex-col items-start gap-2">
+					The columnDefs are undefined.
+					{#if allowColumnDefsActions}
+						<div class="w-full flex fles-row justify-end">
+							<Button
+								startIcon={{ icon: RefreshCw }}
+								size="xs"
+								color="red"
+								on:click={setEmptyColumns}
+							>
+								Fix columns definitions
+							</Button>
+						</div>
+					{/if}
+				</div>
+			</Alert>
+		</div>
+	{/if}
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        columnDefs?: any[] | undefined;
+        result?: Array<any> | undefined;
+        allowColumnDefsActions?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SyncColumnDefsProps = typeof __propDef.props;
+export type SyncColumnDefsEvents = typeof __propDef.events;
+export type SyncColumnDefsSlots = typeof __propDef.slots;
+export default class SyncColumnDefs extends SvelteComponent<SyncColumnDefsProps, SyncColumnDefsEvents, SyncColumnDefsSlots> {
+}
+export {};