@bexis2/bexis2-core-ui 0.4.23 → 0.4.24

package/dist/components/Table/{shared.js → utils.js}

@@ -1,4 +1,6 @@
 import dateFormat from 'dateformat';
+import { SvelteComponent } from 'svelte';
+import { Send, Receive } from '../../models/Models';
 // Function to determine minWidth for a column to simplify the logic in the HTML
 export const minWidth = (id, columns) => {
     if (columns && id in columns) {
@@ -125,6 +127,54 @@ export const missingValuesFn = (key, missingValues) => {
                 : undefined;
     return foundKey ? missingValues[foundKey] : key;
 };
+// Function to update the server-side table data
+export const updateTable = async (pageSize, pageIndex, server, filters, data, serverItems, columns, dispatch) => {
+    const { baseUrl, entityId, versionId, sendModel = new Send() } = server ?? {};
+    if (!sendModel)
+        throw new Error('Server-side configuration is missing');
+    sendModel.limit = pageSize;
+    sendModel.offset = pageSize * pageIndex;
+    sendModel.version = versionId || -1;
+    sendModel.id = entityId || -1;
+    sendModel.filter = normalizeFilters(filters);
+    let fetchData;
+    try {
+        fetchData = await fetch(baseUrl || '', {
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            method: 'POST',
+            body: JSON.stringify(sendModel)
+        });
+    }
+    catch (error) {
+        throw new Error(`Network error: ${error.message}`);
+    }
+    if (!fetchData.ok) {
+        throw new Error('Failed to fetch data');
+    }
+    const response = await fetchData.json();
+    // Format server columns to the client columns
+    if (response.columns !== undefined) {
+        columns = convertServerColumns(response.columns, columns);
+        const clientCols = response.columns.reduce((acc, col) => {
+            acc[col.key] = col.column;
+            return acc;
+        }, {});
+        const tmpArr = [];
+        response.data.forEach((row, index) => {
+            const tmp = {};
+            Object.keys(row).forEach((key) => {
+                tmp[clientCols[key]] = row[key];
+            });
+            tmpArr.push(tmp);
+        });
+        dispatch('fetch', columns);
+        data.set(tmpArr);
+    }
+    serverItems?.set(response.count);
+    return response;
+};
 export const convertServerColumns = (serverColumns, columns) => {
     const columnsConfig = {};
     serverColumns.forEach((col) => {
@@ -177,3 +227,62 @@ export const convertServerColumns = (serverColumns, columns) => {
     });
     return columnsConfig;
 };
+// Calculates the maximum height of the cells in each row
+export const getMaxCellHeightInRow = (tableRef, resizable, optionsComponent, rowHeights, tableId, rowHeight) => {
+    if (!tableRef || resizable === 'columns' || resizable === 'none')
+        return;
+    tableRef.querySelectorAll('tbody tr').forEach((row, index) => {
+        const cells = row.querySelectorAll('td');
+        let maxHeight = optionsComponent ? 56 : 44;
+        let minHeight = optionsComponent ? 56 : 44;
+        cells.forEach((cell) => {
+            const cellHeight = cell.getBoundingClientRect().height;
+            // + 2 pixels for rendering borders correctly
+            if (cellHeight > maxHeight) {
+                maxHeight = cellHeight + 2;
+            }
+            if (cellHeight < minHeight) {
+                minHeight = cellHeight + 2;
+            }
+        });
+        rowHeights.update((rh) => {
+            const id = +row.id.split(`${tableId}-row-`)[1];
+            return {
+                ...rh,
+                [id]: {
+                    max: maxHeight - 24,
+                    min: Math.max(minHeight - 24, rowHeight ?? 20)
+                }
+            };
+        });
+    });
+};
+// Calculates the minimum width of the cells in each column
+export const getMinCellWidthInColumn = (tableRef, colWidths, headerRowsLength, resizable) => {
+    if (!tableRef || resizable === 'rows' || resizable === 'none')
+        return;
+    // Initialize the column widths if they are not already initialized
+    colWidths.update((cw) => {
+        if (cw.length === 0) {
+            return Array.from({ length: headerRowsLength }, () => 100);
+        }
+        return cw;
+    });
+    colWidths.update((cw) => {
+        tableRef?.querySelectorAll('thead tr th span').forEach((cell, index) => {
+            // + 12 pixels for padding and + 32 pixels for filter icon
+            // If the column width is 100, which means it has not been initialized, then calculate the width
+            cw[index] = cw[index] === 100 ? cell.getBoundingClientRect().width + 12 + 32 : cw[index];
+        });
+        return cw;
+    });
+};
+export const getResizeStyles = (rowHeights, id, index) => {
+    return `
+	min-height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
+	max-height: ${index !== 0 && rowHeights && rowHeights[+id]
+        ? `${rowHeights[+id].max}px`
+        : 'auto'};
+	height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
+	`;
+};

package/dist/models/Models.d.ts

@@ -90,6 +90,7 @@ export interface TableConfig<T> {
     id: string;
     data: Writable<T[]>;
     resizable?: 'none' | 'rows' | 'columns' | 'both';
+    showColumnsMenu?: boolean;
     toggle?: boolean;
     search?: boolean;
     fitToScreen?: boolean;
@@ -99,6 +100,7 @@ export interface TableConfig<T> {
     exportable?: boolean;
     pageSizes?: number[];
     defaultPageSize?: number;
+    pageIndexStringType?: 'items' | 'pages';
     optionsComponent?: typeof SvelteComponent;
     server?: ServerConfig;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.23",
+  "version": "0.4.24",
   "private": false,
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/Facets/Facets.svelte

@@ -191,10 +191,14 @@
 			hyphenOpacity="opacity-0"
 			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
+			regionSymbol="shrink-0"
 		>
-			<p class="font-semibold whitespace-nowrap">
-				{group.displayName}{group.count !== undefined ? ` (${group.count})` : ''}
-			</p>
+			<div class="grid grid-flow-col gap-2">
+				<p class="font-semibold whitespace-nowrap truncate" title={group.displayName}>
+					{group.displayName}
+				</p>
+				<span>{group.count !== undefined ? ` (${group.count})` : ''}</span>
+			</div>
 
 			<svelte:fragment slot="children">
 				<!-- If more than 5 choices, show the remaining in the Modal -->
@@ -210,9 +214,9 @@
 							selection
 							multiple
 						>
-							<div class="flex gap-2">
-								<p class="w-max grow truncate">
-									<span title={item.displayName}>{item.displayName}</span>
+							<div class="grid grid-flow-col gap-2">
+								<p class="truncate">
+									<span class="" title={item.displayName}>{item.displayName}</span>
 								</p>
 								<span>({item.count})</span>
 							</div>
@@ -237,9 +241,9 @@
 							selection
 							multiple
 						>
-							<div class="flex gap-2">
-								<p class="w-max grow truncate">
-									<span title={item.displayName}>{item.displayName}</span>
+							<div class="grid grid-flow-col gap-2">
+								<p class="truncate">
+									<span class="" title={item.displayName}>{item.displayName}</span>
 								</p>
 								<span>({item.count})</span>
 							</div>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { afterUpdate, onDestroy, createEventDispatcher } from 'svelte';
+	import { afterUpdate, createEventDispatcher, onDestroy } from 'svelte';
 	import { readable, writable } from 'svelte/store';
 
 	import Fa from 'svelte-fa';
@@ -26,18 +26,9 @@
 	import TablePagination from './TablePagination.svelte';
 	import TablePaginationServer from './TablePaginationServer.svelte';
 	import ColumnsMenu from './ColumnsMenu.svelte';
+	import * as utils from './utils';
 	import { columnFilter, searchFilter } from './filter';
-	import {
-		cellStyle,
-		exportAsCsv,
-		jsonToCsv,
-		fixedWidth,
-		normalizeFilters,
-		resetResize,
-		convertServerColumns,
-		minWidth
-	} from './shared';
-	import { Receive, Send } from '$models/Models';
+	import { Send } from '$models/Models';
 	import type { TableConfig } from '$models/Models';
 	import type { FilterOptionsEnum } from '$models/Enums';
 
@@ -48,6 +39,7 @@
 		id: tableId, // Unique table ID
 		data, // Data store
 		columns, // Column configuration
+		showColumnsMenu = false, // Whether to display the columns menu
 		resizable = 'none', // Resizability config
 		height = null, // Table height
 		rowHeight = null, // Row height
@@ -56,6 +48,7 @@
 		toggle = false, // Whether to display the fitToScreen toggle
 		search = true, // Whether to display the search input
 		pageSizes = [5, 10, 20, 50, 100], // Page sizes to display in the pagination component
+		pageIndexStringType = 'pages', // pages by default
 		fitToScreen = true, // Whether to fit the table to the screen,
 		exportable = false, // Whether to display the export button and enable export functionality
 		server
@@ -66,7 +59,7 @@
 	let tableRef: HTMLTableElement;
 
 	const serverSide = server !== undefined;
-	const { baseUrl, entityId, versionId, sendModel = new Send() } = server ?? {};
+	const { sendModel = new Send() } = server ?? {};
 
 	const filters = writable<{
 		[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
@@ -84,7 +77,7 @@
 	const colWidths = writable<number[]>([]);
 
 	// Server-side variables
-	const serverItems = serverSide ? writable<Number>(0) : undefined;
+	const serverItems = serverSide ? writable<number>(0) : undefined;
 	const serverItemCount = serverSide
 		? readable<Number>(0, (set) => {
 				serverItems!.subscribe((val) => set(val));
@@ -207,7 +200,7 @@
 													id,
 													tableId,
 													values,
-													updateTable,
+													updateTable: updateTableWithParams,
 													pageIndex,
 													toFilterableValueFn,
 													filters,
@@ -241,7 +234,7 @@
 					accessor: accessor,
 					cell: ({ value }) => {
 						// If null or undefined, return an empty string
-						return value ? value : '';
+						return value ?? '';
 					},
 					plugins: {
 						// Sorting enabled by default
@@ -255,7 +248,7 @@
 											id,
 											tableId,
 											values,
-											updateTable,
+											updateTable: updateTableWithParams,
 											pageIndex,
 											filters
 									  })
@@ -299,7 +292,7 @@
 	// Creating the table columns
 	const createdTableColumns = table.createColumns(tableColumns);
 	// Creating the table view model
-	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } =
+	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates, rows } =
 		table.createViewModel(createdTableColumns);
 	// Extracting filterValue to bind it for the search input and search immediately on input
 	const { filterValue } = pluginStates.tableFilter;
@@ -310,65 +303,6 @@
 	// Column visibility configuration
 	const { hiddenColumnIds } = pluginStates.hideColumns;
 
-	const updateTable = async () => {
-		if (!sendModel) throw new Error('Server-side configuration is missing');
-
-		sendModel.limit = $pageSize;
-		sendModel.offset = $pageSize * $pageIndex;
-		sendModel.version = versionId || -1;
-		sendModel.id = entityId || -1;
-		sendModel.filter = normalizeFilters($filters);
-
-		let fetchData;
-
-		try {
-			isFetching = true;
-			fetchData = await fetch(baseUrl || '', {
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				method: 'POST',
-				body: JSON.stringify(sendModel)
-			});
-		} catch (error) {
-			throw new Error(`Network error: ${(error as Error).message}`);
-		} finally {
-			isFetching = false;
-		}
-
-		if (!fetchData.ok) {
-			throw new Error('Failed to fetch data');
-		}
-
-		const response: Receive = await fetchData.json();
-
-		// Format server columns to the client columns
-		if (response.columns !== undefined) {
-			columns = convertServerColumns(response.columns, columns);
-
-			const clientCols = response.columns.reduce((acc, col) => {
-				acc[col.key] = col.column;
-				return acc;
-			}, {});
-
-			const tmpArr: any[] = [];
-
-			response.data.forEach((row, index) => {
-				const tmp: { [key: string]: any } = {};
-				Object.keys(row).forEach((key) => {
-					tmp[clientCols[key]] = row[key];
-				});
-				tmpArr.push(tmp);
-			});
-			dispatch('fetch', columns);
-			$data = tmpArr;
-		}
-
-		$serverItems = response.count;
-
-		return response;
-	};
-
 	const sortServer = (order: 'asc' | 'desc' | undefined, id: string) => {
 		if (!sendModel) throw new Error('Server-side configuration is missing');
 		// Set parameter for sorting
@@ -381,83 +315,70 @@
 		// Reset pagination
 		$pageIndex = 0;
 
-		updateTable();
+		updateTableWithParams();
 	};
 
-	const getMaxCellHeightInRow = () => {
-		if (!tableRef || resizable === 'columns' || resizable === 'none') return;
-
-		tableRef.querySelectorAll('tbody tr').forEach((row, index) => {
-			const cells = row.querySelectorAll('td');
-
-			let maxHeight = optionsComponent ? 56 : 44;
-			let minHeight = optionsComponent ? 56 : 44;
+	// Function to update the table with the provided parameters for easily passing to other components
+	const updateTableWithParams = async () => {
+		isFetching = true;
+		const result = await utils.updateTable(
+			$pageSize,
+			$pageIndex,
+			server,
+			$filters,
+			data,
+			serverItems,
+			columns,
+			dispatch
+		);
+		isFetching = false;
 
-			cells.forEach((cell) => {
-				const cellHeight = cell.getBoundingClientRect().height;
-				// + 2 pixels for rendering borders correctly
-				if (cellHeight > maxHeight) {
-					maxHeight = cellHeight + 2;
-				}
-				if (cellHeight < minHeight) {
-					minHeight = cellHeight + 2;
-				}
-			});
-
-			rowHeights.update((rh) => {
-				const id = +row.id.split(`${tableId}-row-`)[1];
-				return {
-					...rh,
-					[id]: {
-						max: maxHeight - 24,
-						min: Math.max(minHeight - 24, rowHeight ?? 20)
-					}
-				};
-			});
-		});
+		return result;
 	};
 
-	const getMinCellWidthInColumn = () => {
-		if (!tableRef || resizable === 'rows' || resizable === 'none') return;
-
-		// Initialize the colWidths array if it is empty
-		if ($colWidths.length === 0) {
-			$colWidths = Array.from({ length: $headerRows[0].cells.length }, () => 100);
+	// Initializes observers for rows and columns
+	const getDimensions = () => {
+		if (!tableRef) return;
+		if (resizable === 'none') return;
+		else if (resizable === 'columns') {
+			observeHeaderColumns();
+		} else if (resizable === 'rows') {
+			observeFirstCells();
+		} else {
+			observeHeaderColumns();
+			observeFirstCells();
 		}
-
-		colWidths.update((cw) => {
-			tableRef?.querySelectorAll('thead tr th span').forEach((cell, index) => {
-				// + 12 pixels for padding and + 32 pixels for filter icon
-				// If the column width is 100, which means it has not been initialized, then calculate the width
-				cw[index] = cw[index] === 100 ? cell.getBoundingClientRect().width + 12 + 32 : cw[index];
-			});
-			return cw;
-		});
 	};
 
+	// Resize observer for rows
 	const resizeRowsObserver = new ResizeObserver(() => {
-		getMaxCellHeightInRow();
+		utils.getMaxCellHeightInRow(
+			tableRef,
+			resizable,
+			optionsComponent,
+			rowHeights,
+			tableId,
+			rowHeight
+		);
 	});
 
+	// Resize observers for columns
 	const resizeColumnsObserver = new ResizeObserver(() => {
-		getMinCellWidthInColumn();
+		utils.getMinCellWidthInColumn(tableRef, colWidths, $headerRows[0].cells.length, resizable);
 	});
 
+	// Adds observers on the first cells of each row to resize rows
 	const observeFirstCells = () => {
 		if (!tableRef) return;
 
-		$pageRows.forEach((row) => {
-			const cell = tableRef.querySelector(`#${tableId}-row-${row.id}`);
-			if (cell) {
-				resizeRowsObserver.observe(cell);
-			}
-		});
-
 		tableRef.querySelectorAll('tbody tr td:first-child').forEach((cell) => {
 			resizeRowsObserver.observe(cell);
 		});
+
+		return resizeRowsObserver;
 	};
 
+	// Adds observers on the header columns to resize columns
 	const observeHeaderColumns = () => {
 		if (!tableRef) return;
 
@@ -467,6 +388,7 @@
 	};
 
 	afterUpdate(() => {
+		// If not resizable, return
 		if (resizable !== 'rows' && resizable !== 'both') {
 			return;
 		}
@@ -478,27 +400,13 @@
 		}
 	});
 
-	// Remove the resize observer when the component is destroyed for performance reasons
 	onDestroy(() => {
-		resizeRowsObserver.disconnect();
 		resizeColumnsObserver.disconnect();
+		resizeRowsObserver.disconnect();
 	});
 
-	const getDimensions = () => {
-		if (!tableRef) return;
-		if (resizable === 'none') return;
-		else if (resizable === 'columns') {
-			observeHeaderColumns();
-		} else if (resizable === 'rows') {
-			observeFirstCells();
-		} else {
-			observeHeaderColumns();
-			observeFirstCells();
-		}
-	};
-
 	$: sortKeys = pluginStates.sort.sortKeys;
-	$: serverSide && updateTable();
+	$: serverSide && updateTableWithParams();
 	$: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 	$: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => col.id);
 </script>
@@ -598,20 +506,23 @@
 							class="btn btn-sm variant-filled-primary rounded-full order-last flex gap-2 items-center"
 							aria-label="Reset sizing of columns and rows"
 							on:click|preventDefault={() =>
-								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
+								utils.resetResize($headerRows, $pageRows, tableId, columns, resizable)}
 							><Fa icon={faCompress} /> Reset sizing</button
 						>
 					{/if}
+					<!-- Enable export as CSV button if exportable === true -->
 					{#if exportable}
 						<button
 							type="button"
 							class="btn btn-sm variant-filled-primary rounded-full order-last flex items-center gap-2"
 							aria-label="Export table data as CSV"
-							on:click|preventDefault={() => exportAsCsv(tableId, jsonToCsv($exportedData))}
+							on:click|preventDefault={() =>
+								utils.exportAsCsv(tableId, utils.jsonToCsv($exportedData))}
 							><Fa icon={faDownload} /> Export as CSV</button
 						>
 					{/if}
-					{#if shownColumns.length > 0}
+					<!-- Enable show/hide columns menu if showColumnsMenu === true -->
+					{#if showColumnsMenu && shownColumns.length > 0}
 						<ColumnsMenu bind:columns={shownColumns} {tableId} />
 					{/if}
 				</div>
@@ -644,16 +555,20 @@
 												{...attrs}
 												style={`
 													width: ${cell.isData() ? 'auto' : '0'};
-													${cellStyle(cell.id, columns)}
+													${utils.cellStyle(cell.id, columns)}
 												`}
 											>
 												<div
 													class="overflow-auto"
 													class:resize-x={(resizable === 'columns' || resizable === 'both') &&
-														!fixedWidth(cell.id, columns)}
+														!utils.fixedWidth(cell.id, columns)}
 													id="th-{tableId}-{cell.id}"
 													style={`
-														min-width: ${minWidth(cell.id, columns) ? minWidth(cell.id, columns) : $colWidths[index]}px;
+														min-width: ${
+															utils.minWidth(cell.id, columns)
+																? utils.minWidth(cell.id, columns)
+																: $colWidths[index]
+														}px;
 													`}
 												>
 													<div class="flex justify-between items-center">
@@ -712,15 +627,7 @@
 														? 'resize-y overflow-auto'
 														: 'block'}"
 													id="{tableId}-{cell.id}-{row.id}"
-													style={`
-														min-height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].min}px` : 'auto'};
-														max-height: ${
-															index !== 0 && $rowHeights && $rowHeights[+row.id]
-																? `${$rowHeights[+row.id].max}px`
-																: 'auto'
-														};
-														height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].min}px` : 'auto'};
-													`}
+													style={utils.getResizeStyles($rowHeights, row.id, index)}
 												>
 													<!-- Adding config for initial rowHeight, if provided -->
 													<div
@@ -733,8 +640,8 @@
 															class="grow overflow-auto"
 															style={cell.isData()
 																? `width: ${
-																		minWidth(cell.id, columns)
-																			? minWidth(cell.id, columns)
+																		utils.minWidth(cell.id, columns)
+																			? utils.minWidth(cell.id, columns)
 																			: $colWidths[index]
 																  }px;`
 																: 'max-width: min-content;'}
@@ -777,12 +684,19 @@
 				{pageIndex}
 				{pageSize}
 				{serverItemCount}
-				{updateTable}
+				updateTable={updateTableWithParams}
 				{pageSizes}
+				{pageIndexStringType}
 				id={tableId}
 			/>
 		{:else}
-			<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
+			<TablePagination
+				itemCount={$rows.length}
+				pageConfig={pluginStates.page}
+				{pageSizes}
+				id={tableId}
+				{pageIndexStringType}
+			/>
 		{/if}
 	{/if}
 </div>

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

@@ -9,10 +9,14 @@
 	} from '@fortawesome/free-solid-svg-icons';
 	import { ListBox, ListBoxItem, popup, type PopupSettings } from '@skeletonlabs/skeleton';
 
+	export let itemCount;
 	export let pageConfig;
 	export let pageSizes;
+	export let pageIndexStringType;
 	export let id;
 
+	let indexInformation = '';
+
 	const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = pageConfig;
 
 	const goToFirstPage = () => ($pageIndex = 0);
@@ -42,11 +46,23 @@
 		closeQuery: '.listbox-item'
 	};
 
+	const getIndexInfomationString = () => {
+		if (pageIndexStringType === 'pages') {
+			return $pageCount > 0 ? `Page ${$pageIndex + 1} of ${$pageCount}` : 'No pages';
+		} else {
+			return itemCount === 0 ? 'No items' : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
+				($pageIndex + 1) * $pageSize,
+				itemCount
+			)} of ${Math.min($pageCount * $pageSize, itemCount)}`;
+		}
+	};
+
 	$: goToFirstPageDisabled = !$pageIndex;
 	$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
 	$: goToNextPageDisabled = !$hasNextPage;
 	$: goToPreviousPageDisabled = !$hasPreviousPage;
 	$: $pageSize = pageSizeDropdownValue;
+	$: $pageCount, $pageIndex, $pageSize, (indexInformation = getIndexInfomationString());
 </script>
 
 <div class="flex justify-between w-full items-stretch gap-10">
@@ -124,12 +140,6 @@
 		>
 	</div>
 	<div class="flex justify-end items-center">
-		<span class="text-sm text-gray-500">
-			{#if $pageCount > 0}
-				Page {$pageIndex + 1} of {$pageCount}
-			{:else}
-				No pages
-			{/if}
-		</span>
+		<span class="text-sm text-gray-500">{indexInformation}</span>
 	</div>
 </div>