@bexis2/bexis2-core-ui 0.4.23 → 0.4.24

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

@@ -10,6 +10,7 @@
 	export let id; // Unique table ID
 	export let pageIndex;
 	export let pageSize;
+	export let pageIndexStringType;
 	export let pageSizes; // Available page sizes
 	export let serverItemCount; // Total number of items expected from the server. `serverSide` must be true on table config.
 	export let updateTable; // Function to update table
@@ -20,6 +21,9 @@
 	let goToNextPageDisabled = true;
 	let goToPreviousPageDisabled = true;
 
+	// Index information string
+	let indexInformation = '';
+
 	// Handles the input change event
 	const handleChange = (e) => {
 		const value = e.target.value;
@@ -58,12 +62,23 @@
 		updateTable();
 	};
 
+	const getIndexInfomationString = () => {
+		if (pageIndexStringType === 'pages') {
+			return pageCount > 0 ? `Page ${$pageIndex + 1} of ${pageCount}` : 'No pages';
+		} else {
+			return `Showing ${$pageIndex * $pageSize + 1} - ${($pageIndex + 1) * $pageSize} of ${
+				pageCount * $pageSize
+			} items`;
+		}
+	};
+
 	$: pageCount = Math.ceil($serverItemCount / $pageSize);
 	$: goToFirstPageDisabled = !$pageIndex;
 	$: goToLastPageDisabled = $pageIndex == pageCount - 1;
 	$: goToNextPageDisabled = $pageIndex == pageCount - 1;
 	$: goToPreviousPageDisabled = !$pageIndex;
 	$: $pageSize && updateTable(); // Update query when page size changes
+	$: pageCount, $pageIndex, $pageSize, (indexInformation = getIndexInfomationString());
 
 	updateTable();
 </script>
@@ -127,15 +142,7 @@
 	</div>
 	<div class="flex justify-end items-center">
 		<span class="text-sm text-gray-500">
-			{#if pageCount > 0}
-				{#if pageCount == 1}
-					1 page
-				{:else}
-					{pageCount} pages
-				{/if}
-			{:else}
-				No pages
-			{/if}
+			{indexInformation}
 		</span>
 	</div>
 </div>

package/src/lib/components/Table/{shared.ts → utils.ts}

@@ -1,7 +1,10 @@
 import dateFormat from 'dateformat';
+import { SvelteComponent } from 'svelte';
+import type { Writable } from 'svelte/store';
 
+import { Send, Receive } from '$models/Models';
 import type { FilterOptionsEnum } from '$models/Enums';
-import type { Columns, Filter, ServerColumn } from '$models/Models';
+import type { Columns, Filter, ServerColumn, ServerConfig } from '$models/Models';
 
 // Function to determine minWidth for a column to simplify the logic in the HTML
 export const minWidth = (id: string, columns: Columns | undefined) => {
@@ -158,6 +161,76 @@ export const missingValuesFn = (
 	return foundKey ? missingValues[foundKey] : key;
 };
 
+// Function to update the server-side table data
+export const updateTable = async (
+	pageSize: number,
+	pageIndex: number,
+	server: ServerConfig | undefined,
+	filters: {
+		[key: string]: { [key in FilterOptionsEnum]?: number | string | Date }
+	},
+	data: Writable<any[]>,
+	serverItems: Writable<number> | undefined,
+	columns: Columns | undefined,
+	dispatch: any
+) => {
+	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 as Error).message}`);
+	}
+
+	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.set(tmpArr);
+	}
+
+	serverItems?.set(response.count);
+
+	return response;
+};
+
 export const convertServerColumns = (
 	serverColumns: ServerColumn[],
 	columns: Columns | undefined
@@ -215,3 +288,86 @@ export const convertServerColumns = (
 
 	return columnsConfig;
 };
+
+// Calculates the maximum height of the cells in each row
+export const getMaxCellHeightInRow = (
+	tableRef: HTMLTableElement,
+	resizable: 'columns' | 'rows' | 'none' | 'both',
+	optionsComponent: typeof SvelteComponent | undefined,
+	rowHeights: Writable<{ [key: number]: { max: number; min: number } }>,
+	tableId: string,
+	rowHeight: number | null
+) => {
+	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: HTMLTableElement,
+	colWidths: Writable<number[]>,
+	headerRowsLength: number,
+	resizable: 'columns' | 'rows' | 'none' | 'both'
+) => {
+	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: { [key: number]: { max: number; min: number } },
+	id: string | number,
+	index: number
+) => {
+	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/src/lib/models/Models.ts

@@ -117,6 +117,7 @@ export interface TableConfig<T> {
 	id: string;
 	data: Writable<T[]>;
 	resizable?: 'none' | 'rows' | 'columns' | 'both'; // none by default
+	showColumnsMenu?: boolean; // false by default
 	toggle?: boolean; // false by default
 	search?: boolean; // true by default
 	fitToScreen?: boolean; // true by default
@@ -126,6 +127,7 @@ export interface TableConfig<T> {
 	exportable?: boolean; // false by default
 	pageSizes?: number[]; // [5, 10, 20, 50, 100] by default
 	defaultPageSize?: number; // 10 by default
+	pageIndexStringType?: 'items' | 'pages'; // pages by default
 	optionsComponent?: typeof SvelteComponent;
 
 	server?: ServerConfig;

package/dist/components/Table/shared.d.ts

@@ -1,15 +0,0 @@
-import type { FilterOptionsEnum } from '../../models/Enums';
-import type { Columns, Filter, ServerColumn } from '../../models/Models';
-export declare const minWidth: (id: string, columns: Columns | undefined) => number;
-export declare const fixedWidth: (id: string, columns: Columns | undefined) => number;
-export declare const cellStyle: (id: string, columns: Columns | undefined) => string;
-export declare const normalizeFilters: (filters: {
-    [key: string]: { [key in FilterOptionsEnum]?: number | string | Date; };
-}) => Filter[];
-export declare const exportAsCsv: (tableId: string, exportedData: string) => void;
-export declare const jsonToCsv: (data: string) => string;
-export declare const resetResize: (headerRows: any, pageRows: any, tableId: string, columns: Columns | undefined, resizable: "none" | "rows" | "columns" | "both") => void;
-export declare const missingValuesFn: (key: number | string, missingValues: {
-    [key: string | number]: string;
-}) => string | number;
-export declare const convertServerColumns: (serverColumns: ServerColumn[], columns: Columns | undefined) => Columns;