@bexis2/bexis2-core-ui 0.4.81 → 0.4.82

package/README.md

@@ -1,4 +1,8 @@
 # bexis-core-ui
+## 0.4.82
+- Table
+  - ServerSide communication, reduce calls
+
 ## 0.4.81
 - Multiselect
   - check if groupItem is set or not, if true add groupby to output

package/dist/components/Table/TableContent.svelte

@@ -1,4 +1,4 @@
-<script>import { afterUpdate, createEventDispatcher, onDestroy } from "svelte";
+<script>import { afterUpdate, createEventDispatcher, onDestroy, onMount } from "svelte";
 import { readable, writable } from "svelte/store";
 import Fa from "svelte-fa";
 import { faCompress, faDownload, faXmark } from "@fortawesome/free-solid-svg-icons";
@@ -167,7 +167,8 @@ const tableColumns = [
                 pageIndex,
                 toFilterableValueFn,
                 filters,
-                toStringFn
+                toStringFn,
+                data
               }) : createRender(colFilterComponent ?? TableFilter, {
                 filterValue: filterValue2,
                 id,
@@ -208,7 +209,8 @@ const tableColumns = [
                 values,
                 updateTable: updateTableWithParams,
                 pageIndex,
-                filters
+                filters,
+                data
               }) : createRender(TableFilter, {
                 filterValue: filterValue2,
                 id,
@@ -249,6 +251,7 @@ const { filterValue } = pluginStates.tableFilter;
 const { exportedData } = pluginStates.export;
 const { pageIndex, pageSize } = pluginStates.page;
 const { hiddenColumnIds } = pluginStates.hideColumns;
+let prevSort = void 0;
 const sortServer = (order, id) => {
   if (!sendModel) throw new Error("Server-side configuration is missing");
   if (order === void 0) {
@@ -256,10 +259,22 @@ const sortServer = (order, id) => {
   } else {
     sendModel.order = [{ column: id, direction: order }];
   }
-  $pageIndex = 0;
-  updateTableWithParams();
+  if (JSON.stringify(sendModel.order) !== JSON.stringify(prevSort) && prevSort !== void 0) {
+    $pageIndex = 0;
+    $data = [];
+    updateTableWithParams();
+  }
+  if (order === void 0) {
+    prevSort = [];
+  } else {
+    prevSort = sendModel.order;
+  }
 };
 const updateTableWithParams = async () => {
+  if ($data.length > 0 && serverSide) {
+    console.log("Table is not empty");
+    return;
+  }
   isFetching = true;
   const result = await utils.updateTable(
     $pageSize,
@@ -327,7 +342,11 @@ onDestroy(() => {
   resizeRowsObserver.disconnect();
 });
 $: sortKeys = pluginStates.sort.sortKeys;
-$: serverSide && updateTableWithParams();
+onMount(() => {
+  if (serverSide) {
+    updateTableWithParams();
+  }
+});
 $: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => col.id);
 </script>
@@ -503,13 +522,15 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 																class:cursor-pointer={!props.sort.disabled}
 																on:click={props.sort.toggle}
 																on:keydown={props.sort.toggle}
-																title={props.sort.disabled ? undefined : (props.sort.order === 'asc'
-																	? `Sort by ${cell.label} column in descending order`
-																	: props.sort.order === 'desc'
-																	? `Remove sorting by ${cell.label} column`
-																	: `Sort by ${cell.label} column in ascending order`)}
+																title={props.sort.disabled
+																	? undefined
+																	: props.sort.order === 'asc'
+																		? `Sort by ${cell.label} column in descending order`
+																		: props.sort.order === 'desc'
+																			? `Remove sorting by ${cell.label} column`
+																			: `Sort by ${cell.label} column in ascending order`}
 															>
-																{cell.render().replaceAll("%%%", '.')}
+																{cell.render().replaceAll('%%%', '.')}
 															</span>
 															<div class="w-2">
 																{#if props.sort.order === 'asc'}
@@ -564,7 +585,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 																		utils.minWidth(cell.id, columns)
 																			? utils.minWidth(cell.id, columns)
 																			: $colWidths[index]
-																  }px;`
+																	}px;`
 																: ''}
 														>
 															<Render of={cell.render()} />
@@ -607,6 +628,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 				itemCount={$serverItemCount}
 				updateTable={updateTableWithParams}
 				id={tableId}
+				{data}
 			/>
 		{:else}
 			<TablePagination

package/dist/components/Table/TableFilterServer.svelte

@@ -10,6 +10,7 @@ export let filters;
 export let updateTable;
 export let pageIndex;
 export let toStringFn = void 0;
+export let data;
 let active = false;
 let type = "string";
 let isDate = false;
@@ -165,12 +166,14 @@ const clearFilters = () => {
   dropdowns = [];
   $filters[id] = {};
   $pageIndex = 0;
+  $data = [];
   updateTable().then(() => {
     active = false;
   });
 };
 const applyFilters = () => {
   $pageIndex = 0;
+  $data = [];
   updateTable().then(() => {
     active = true;
   });

package/dist/components/Table/TableFilterServer.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         updateTable: any;
         pageIndex: any;
         toStringFn?: undefined | ((value: any) => string);
+        data: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Table/TablePaginationServer.svelte

@@ -6,6 +6,7 @@ export let pageConfig;
 export let pageSizes;
 export let id;
 export let updateTable;
+export let data;
 let indexInformation = "";
 const { pageIndex, pageCount, pageSize } = pageConfig;
 let pageSizeDropdownValue = $pageSize;
@@ -21,6 +22,10 @@ const getIndexInfomationString = () => {
     itemCount
   )} of ${Math.min($pageCount * $pageSize, itemCount)}`;
 };
+function updateTableServer() {
+  $data = [];
+  updateTable();
+}
 $: paginationSettings = {
   size: itemCount,
   limit: $pageSize,
@@ -29,7 +34,6 @@ $: paginationSettings = {
 };
 $: $pageSize = pageSizeDropdownValue;
 $: $pageCount, $pageIndex, $pageSize, itemCount, indexInformation = getIndexInfomationString();
-updateTable();
 </script>
 
 <div class="grid grid-cols-3 w-full items-stretch gap-10">
@@ -49,7 +53,7 @@ updateTable();
 					<ListBoxItem
 						bind:group={pageSizeDropdownValue}
 						name="medium" value={size}
-						on:click={() => { $pageSize = size; updateTable(); }}
+						on:click={() => { $pageSize = size;  updateTableServer(); }}
 						>{size}</ListBoxItem
 					>
 				{/each}
@@ -59,7 +63,7 @@ updateTable();
 	</div>
 	<div class="flex justify-center">
 		<Paginator
-			on:page={(page) => {$pageIndex = page.detail; updateTable(); }}
+			on:page={(page) => {$pageIndex = page.detail; updateTableServer(); }}
 			settings={paginationSettings}
 			select="hidden"
 			active="!variant-filled-secondary !text-on-secondary-token"

package/dist/components/Table/TablePaginationServer.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         pageSizes: any;
         id: any;
         updateTable: any;
+        data: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.81",
+  "version": "0.4.82",
   "private": false,
   "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
   "keywords": [

package/src/lib/components/Table/TableContent.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { afterUpdate, createEventDispatcher, onDestroy } from 'svelte';
+	import { afterUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte';
 	import { readable, writable } from 'svelte/store';
 
 	import Fa from 'svelte-fa';
@@ -80,7 +80,7 @@
 	const serverItemCount = serverSide
 		? readable<Number>(0, (set) => {
 				serverItems!.subscribe((val) => set(val));
-		  })
+			})
 		: undefined;
 
 	// Initializing the table
@@ -170,8 +170,8 @@
 						return renderComponent
 							? createRender(renderComponent, { value, row, column, dispatchFn: actionDispatcher })
 							: toStringFn
-							? toStringFn(value)
-							: value;
+								? toStringFn(value)
+								: value;
 					},
 					plugins: {
 						// Sorting config
@@ -203,8 +203,9 @@
 													pageIndex,
 													toFilterableValueFn,
 													filters,
-													toStringFn
-											  })
+													toStringFn,
+													data
+												})
 											: createRender(colFilterComponent ?? TableFilter, {
 													filterValue,
 													id,
@@ -214,9 +215,9 @@
 													filters,
 													toStringFn,
 													pageIndex
-											  });
+												});
 									}
-							  }
+								}
 							: undefined,
 						tableFilter: {
 							// Search filter config
@@ -249,8 +250,9 @@
 											values,
 											updateTable: updateTableWithParams,
 											pageIndex,
-											filters
-									  })
+											filters,
+											data
+										})
 									: createRender(TableFilter, {
 											filterValue,
 											id,
@@ -258,7 +260,7 @@
 											values,
 											filters,
 											pageIndex
-									  });
+										});
 							}
 						}
 					}
@@ -302,8 +304,9 @@
 	// Column visibility configuration
 	const { hiddenColumnIds } = pluginStates.hideColumns;
 
+	let prevSort: { column: string; direction: 'asc' | 'desc' }[] | undefined = undefined;
 	const sortServer = (order: 'asc' | 'desc' | undefined, id: string) => {
-
+		// console.log('Sorting server with', { order, id, sendModel, prevSort });
 		if (!sendModel) throw new Error('Server-side configuration is missing');
 		// Set parameter for sorting
 		if (order === undefined) {
@@ -312,14 +315,37 @@
 			sendModel.order = [{ column: id, direction: order }];
 		}
 
-		// Reset pagination
-		$pageIndex = 0;
-
-		updateTableWithParams();
+		if (JSON.stringify(sendModel.order) !== JSON.stringify(prevSort) && prevSort !== undefined) {
+			// Reset pagination
+			$pageIndex = 0;
+			// console.log('Sorting server with', { order, id, sendModel, prevSort });
+			$data = [];
+			updateTableWithParams();
+		}
+		if (order === undefined) {
+			prevSort = [];
+		} else {
+			prevSort = sendModel.order;
+		}
 	};
 
 	// Function to update the table with the provided parameters for easily passing to other components
 	const updateTableWithParams = async () => {
+		// console.trace('Checking who called updateTableWithParams:');
+		// console.log('Updating table with params', {
+		// 	pageSize: $pageSize,
+		// 	pageIndex: $pageIndex,
+		// 	filters: $filters,
+		// 	sendModel
+		// });
+
+		if ($data.length > 0 && serverSide) {
+			console.log('Table is not empty');
+			//	$data = [];
+			return;
+		}
+
+		// throw new Error("Stack trace inspection");
 		isFetching = true;
 		const result = await utils.updateTable(
 			$pageSize,
@@ -407,7 +433,11 @@
 	});
 
 	$: sortKeys = pluginStates.sort.sortKeys;
-	$: serverSide && updateTableWithParams();
+	onMount(() => {
+		if (serverSide) {
+			updateTableWithParams();
+		}
+	});
 	$: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 	$: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => col.id);
 </script>
@@ -583,13 +613,15 @@
 																class:cursor-pointer={!props.sort.disabled}
 																on:click={props.sort.toggle}
 																on:keydown={props.sort.toggle}
-																title={props.sort.disabled ? undefined : (props.sort.order === 'asc'
-																	? `Sort by ${cell.label} column in descending order`
-																	: props.sort.order === 'desc'
-																	? `Remove sorting by ${cell.label} column`
-																	: `Sort by ${cell.label} column in ascending order`)}
+																title={props.sort.disabled
+																	? undefined
+																	: props.sort.order === 'asc'
+																		? `Sort by ${cell.label} column in descending order`
+																		: props.sort.order === 'desc'
+																			? `Remove sorting by ${cell.label} column`
+																			: `Sort by ${cell.label} column in ascending order`}
 															>
-																{cell.render().replaceAll("%%%", '.')}
+																{cell.render().replaceAll('%%%', '.')}
 															</span>
 															<div class="w-2">
 																{#if props.sort.order === 'asc'}
@@ -644,7 +676,7 @@
 																		utils.minWidth(cell.id, columns)
 																			? utils.minWidth(cell.id, columns)
 																			: $colWidths[index]
-																  }px;`
+																	}px;`
 																: ''}
 														>
 															<Render of={cell.render()} />
@@ -687,6 +719,7 @@
 				itemCount={$serverItemCount}
 				updateTable={updateTableWithParams}
 				id={tableId}
+				{data}
 			/>
 		{:else}
 			<TablePagination

package/src/lib/components/Table/TableFilterServer.svelte

@@ -14,6 +14,7 @@
 	export let updateTable;
 	export let pageIndex;
 	export let toStringFn: undefined | ((value: any) => string) = undefined;
+	export let data;
 
 	// If the filter is applied and the displayed values are filtered
 	let active = false;
@@ -200,6 +201,7 @@
 		$filters[id] = {};
 
 		$pageIndex = 0;
+		$data = [];
 		updateTable().then(() => {
 			active = false;
 		});
@@ -207,6 +209,7 @@
 
 	const applyFilters = () => {
 		$pageIndex = 0;
+		$data = [];
 		updateTable().then(() => {
 			active = true;
 		});

package/src/lib/components/Table/TablePaginationServer.svelte

@@ -9,6 +9,7 @@
 	export let pageSizes;
 	export let id;
 	export let updateTable; // Function to update table
+	export let data;
 
 	let indexInformation = '';
 
@@ -32,6 +33,11 @@
 			  )} of ${Math.min($pageCount * $pageSize, itemCount)}`;
 	};
 
+	function updateTableServer() {
+		$data = [];
+		updateTable();
+	}
+
 	$: paginationSettings = {
 		size: itemCount,
 		limit: $pageSize,
@@ -41,7 +47,7 @@
 	$: $pageSize = pageSizeDropdownValue;
 	$: $pageCount, $pageIndex, $pageSize, itemCount, (indexInformation = getIndexInfomationString());
 
-	updateTable();
+	// updateTable();
 
 </script>
 
@@ -62,7 +68,7 @@
 					<ListBoxItem
 						bind:group={pageSizeDropdownValue}
 						name="medium" value={size}
-						on:click={() => { $pageSize = size; updateTable(); }}
+						on:click={() => { $pageSize = size;  updateTableServer(); }}
 						>{size}</ListBoxItem
 					>
 				{/each}
@@ -72,7 +78,7 @@
 	</div>
 	<div class="flex justify-center">
 		<Paginator
-			on:page={(page) => {$pageIndex = page.detail; updateTable(); }}
+			on:page={(page) => {$pageIndex = page.detail; updateTableServer(); }}
 			settings={paginationSettings}
 			select="hidden"
 			active="!variant-filled-secondary !text-on-secondary-token"

package/dist/__package_types_tmp__/TableView.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  TableViewProps */
-/** @typedef {typeof __propDef.events}  TableViewEvents */
-/** @typedef {typeof __propDef.slots}  TableViewSlots */
-export default class TableView extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TableViewProps = typeof __propDef.props;
-export type TableViewEvents = typeof __propDef.events;
-export type TableViewSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/__package_types_tmp__/components/CodeEditor/CodeEditor.svelte.d.ts

@@ -1,32 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        id: string;
-        title?: string;
-        initialValue?: string;
-        value?: string;
-        language?: string;
-        dark?: boolean;
-        toggle?: boolean;
-        actions?: boolean;
-        isValid?: boolean;
-        styles?: any;
-    };
-    events: {
-        cancel: CustomEvent<any>;
-        save: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            id: string;
-        };
-    };
-};
-export type CodeEditorProps = typeof __propDef.props;
-export type CodeEditorEvents = typeof __propDef.events;
-export type CodeEditorSlots = typeof __propDef.slots;
-export default class CodeEditor extends SvelteComponent<CodeEditorProps, CodeEditorEvents, CodeEditorSlots> {
-}
-export {};

package/dist/__package_types_tmp__/components/Facets/Facets.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Writable } from 'svelte/store';
-import type { FacetGroup } from '$models/Models';
-declare const __propDef: {
-    props: {
-        groupSelection?: boolean;
-        groups: Writable<FacetGroup[]>;
-        showAll?: boolean;
-        open?: boolean;
-        showMore?: (groupName: string) => void;
-    };
-    events: {
-        showMoreOpenChange: CustomEvent<any>;
-        showMoreSelect: CustomEvent<any>;
-        facetSelect: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FacetsProps = typeof __propDef.props;
-export type FacetsEvents = typeof __propDef.events;
-export type FacetsSlots = typeof __propDef.slots;
-export default class Facets extends SvelteComponent<FacetsProps, FacetsEvents, FacetsSlots> {
-    get showMore(): (groupName: string) => void;
-}
-export {};

package/dist/__package_types_tmp__/components/Facets/ShowMore.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { SelectedFacetGroup } from '$models/Models';
-declare const __propDef: {
-    props: {
-        group: SelectedFacetGroup;
-        handleApply: (group: SelectedFacetGroup) => {};
-        handleCancel: (groupName: string) => {};
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ShowMoreProps = typeof __propDef.props;
-export type ShowMoreEvents = typeof __propDef.events;
-export type ShowMoreSlots = typeof __propDef.slots;
-export default class ShowMore extends SvelteComponent<ShowMoreProps, ShowMoreEvents, ShowMoreSlots> {
-}
-export {};

package/dist/__package_types_tmp__/components/File/FileIcon.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  FileIconProps */
-/** @typedef {typeof __propDef.events}  FileIconEvents */
-/** @typedef {typeof __propDef.slots}  FileIconSlots */
-export default class FileIcon extends SvelteComponent<{
-    type?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FileIconProps = typeof __propDef.props;
-export type FileIconEvents = typeof __propDef.events;
-export type FileIconSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        type?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/__package_types_tmp__/components/File/FileInfo.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  FileInfoProps */
-/** @typedef {typeof __propDef.events}  FileInfoEvents */
-/** @typedef {typeof __propDef.slots}  FileInfoSlots */
-export default class FileInfo extends SvelteComponent<{
-    type?: string | undefined;
-    name?: string | undefined;
-    size?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FileInfoProps = typeof __propDef.props;
-export type FileInfoEvents = typeof __propDef.events;
-export type FileInfoSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        type?: string | undefined;
-        name?: string | undefined;
-        size?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/__package_types_tmp__/components/File/FileUploader.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { fileUploaderType } from '../../models/Models.js';
-declare const __propDef: {
-    props: {
-        id?: number;
-        version?: number;
-        start?: string;
-        submit?: string;
-        context?: string;
-        data: fileUploaderType | undefined;
-    };
-    events: {
-        error: CustomEvent<any>;
-        submit: CustomEvent<any>;
-        submited: CustomEvent<any>;
-        success: CustomEvent<any>;
-        submiterror: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FileUploaderProps = typeof __propDef.props;
-export type FileUploaderEvents = typeof __propDef.events;
-export type FileUploaderSlots = typeof __propDef.slots;
-export default class FileUploader extends SvelteComponent<FileUploaderProps, FileUploaderEvents, FileUploaderSlots> {
-}
-export {};

package/dist/__package_types_tmp__/components/ListView.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ListViewProps = typeof __propDef.props;
-export type ListViewEvents = typeof __propDef.events;
-export type ListViewSlots = typeof __propDef.slots;
-export default class ListView extends SvelteComponent<ListViewProps, ListViewEvents, ListViewSlots> {
-}
-export {};

package/dist/__package_types_tmp__/components/Table/ColumnsMenu.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        columns?: {
-            id: string;
-            label: string;
-            visible: boolean;
-        }[];
-        tableId: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ColumnsMenuProps = typeof __propDef.props;
-export type ColumnsMenuEvents = typeof __propDef.events;
-export type ColumnsMenuSlots = typeof __propDef.slots;
-export default class ColumnsMenu extends SvelteComponent<ColumnsMenuProps, ColumnsMenuEvents, ColumnsMenuSlots> {
-}
-export {};