@bexis2/bexis2-core-ui 0.4.22 → 0.4.24

package/src/lib/components/Table/utils.ts

@@ -0,0 +1,373 @@
+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, 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) => {
+	if (columns && id in columns) {
+		return columns[id].minWidth ?? 0;
+	}
+	return 0;
+};
+// Function to determine fixedWidth for a column to simplify the logic in the HTML
+export const fixedWidth = (id: string, columns: Columns | undefined) => {
+	if (columns && id in columns) {
+		return columns[id].fixedWidth ?? 0;
+	}
+	return 0;
+};
+// Function to create custom styles for the columns to simplify the logic in the HTML
+export const cellStyle = (id: string, columns: Columns | undefined) => {
+	const minW = minWidth(id, columns);
+	const fixedW = fixedWidth(id, columns);
+	const styles: string[] = [];
+
+	// If minWidth is provided, add to styles
+	minW && styles.push(`min-width: ${minW}px`);
+	// If fixedWidth is provided, add to styles
+	fixedW && styles.push(`width: ${fixedW}px`);
+	// Create and return styles separated by ';'
+	return styles.join(';');
+};
+// Function to normalize the filters for back-end
+export const normalizeFilters = (filters: {
+	[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
+}) => {
+	let filter: Filter[] = [];
+
+	// Add filters to the request
+	Object.keys(filters).forEach((key) => {
+		Object.keys(filters[key])
+			.filter((k) => filters[key][k] !== undefined)
+			.forEach((k) => {
+				filter.push({
+					column: key,
+					filterBy: k as FilterOptionsEnum,
+					value: filters[key][k]
+				});
+			});
+	});
+
+	return filter;
+};
+
+export const exportAsCsv = (tableId: string, exportedData: string) => {
+	// Creating a hidden anchor element to download the CSV file
+	const anchor = document.createElement('a');
+	anchor.style.display = 'none';
+	anchor.href = `data:text/csv;charset=utf-8,${encodeURIComponent(exportedData)}`;
+	anchor.download = `${tableId}.csv`;
+	document.body.appendChild(anchor);
+	anchor.click();
+	document.body.removeChild(anchor);
+};
+
+export const jsonToCsv = (data: string): string => {
+	const json = JSON.parse(data);
+
+	if (json.length === 0) return '';
+
+	// Extract headers (keys)
+	const headers = Object.keys(json[0]);
+
+	// Escape and format a single cell
+	const escapeCsvCell = (value: any): string => {
+		if (value === null || value === undefined) return '';
+		let cell = String(value);
+		// Escape quotes by doubling them, and wrap the value in quotes if it contains special characters
+		if (/[",\n]/.test(cell)) {
+			cell = `"${cell.replace(/"/g, '""')}"`;
+		}
+		return cell;
+	};
+
+	// Create CSV rows
+	const rows = [
+		headers.join(','), // Header row
+		...json.map((row) =>
+			headers.map(header => escapeCsvCell(row[header])).join(',')
+		) // Data rows
+	];
+
+	// Join rows with newlines
+	return rows.join('\n');
+}
+
+// Resetting the resized columns and/or rows
+export const resetResize = (
+	headerRows: any,
+	pageRows: any,
+	tableId: string,
+	columns: Columns | undefined,
+	resizable: 'none' | 'rows' | 'columns' | 'both'
+) => {
+	// Run only if resizable is not none
+	if (resizable === 'columns' || resizable === 'both') {
+		headerRows.forEach((row) => {
+			row.cells.forEach((cell) => {
+				const minW = minWidth(cell.id, columns);
+				const fixedW = fixedWidth(cell.id, columns);
+				// If a fixedWidth is provided for a column, then reset the width to that value
+				fixedW &&
+					document
+						.getElementById(`th-${tableId}-${cell.id}`)
+						?.style.setProperty('width', `${fixedW}px`);
+				// If a minWidth is provided for a column, then reset the width to that value
+				minW &&
+					document
+						.getElementById(`th-${tableId}-${cell.id}`)
+						?.style.setProperty('width', `${minW}px`);
+				// If neither minWidth nor fixedWidth provided for a column, then reset the width to auto
+				!minW &&
+					!fixedW &&
+					document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty('width', 'auto');
+			});
+		});
+	}
+
+	if (resizable === 'rows' || resizable === 'both') {
+		pageRows.forEach((row) => {
+			row.cells.forEach((cell) => {
+				// Reset all row heights to auto
+				document
+					.getElementById(`${tableId}-${cell.id}-${row.id}`)
+					?.style.setProperty('height', 'auto');
+			});
+		});
+	}
+};
+
+export const missingValuesFn = (
+	key: number | string,
+	missingValues: { [key: string | number]: string }
+) => {
+	const foundKey =
+		typeof key === 'number' && key.toString().includes('e')
+			? Object.keys(missingValues).find((item) => {
+				return (item as string).toLowerCase() === key.toString().toLowerCase();
+			})
+			: typeof key === 'string' && parseInt(key).toString().length !== key.length && new Date(key)
+				? Object.keys(missingValues).find(
+					(item) => new Date(item).getTime() === new Date(key).getTime()
+				)
+				: key in missingValues
+					? key
+					: undefined;
+
+	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
+) => {
+	const columnsConfig: Columns = {};
+
+	serverColumns.forEach((col) => {
+		let instructions = {};
+
+		if (col.instructions?.displayPattern) {
+			let dp = col.instructions.displayPattern;
+
+			// Swap 'm' and 'M' to match the backend date format
+			for (let i = 0; i < col.instructions.displayPattern.length; i++) {
+				if (col.instructions.displayPattern[i] === 'm') {
+					dp = `${dp.slice(0, i)}M${dp.slice(i + 1)}`;
+				} else if (col.instructions.displayPattern[i] === 'M') {
+					dp = `${dp.slice(0, i)}m${dp.slice(i + 1)}`;
+				}
+			}
+
+			instructions = {
+				toStringFn: (date: string) => {
+					if (col.instructions?.missingValues) {
+						const missingValue = missingValuesFn(date, col.instructions?.missingValues || {});
+						if (missingValue === date) {
+							return dateFormat(new Date(date), dp);
+						}
+						return missingValue;
+					} else {
+						return dateFormat(new Date(date), dp);
+					}
+				},
+				toSortableValueFn: (date: string) => new Date(date).getTime(),
+				toFilterableValueFn: (date: string) => new Date(date)
+			};
+		} else if (col.instructions?.missingValues) {
+			instructions = {
+				...instructions,
+				toStringFn: (key) => missingValuesFn(key, col.instructions?.missingValues || {})
+			};
+		}
+
+		if (columns && col.column in columns) {
+			columnsConfig[col.column] = {
+				...columns[col.column],
+				instructions
+			};
+		} else {
+			columnsConfig[col.column] = {
+				instructions
+			};
+		}
+	});
+
+	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/components/form/MultiSelect.svelte

@@ -71,7 +71,7 @@
 		}
 
 		if (!complexSource && !complexTarget && isLoaded && !isMulti) {
-			console.log('🚀 ~ updateTarget ~ selection:', selection);
+			//console.log('🚀 ~ updateTarget ~ selection:', selection);
 			if (selection) {
 				target = selection.value;
 			}

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,14 +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 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;

package/src/lib/components/Table/shared.ts

@@ -1,186 +0,0 @@
-import dateFormat from 'dateformat';
-
-import type { FilterOptionsEnum } from '$models/Enums';
-import type { Columns, Filter, ServerColumn } 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) => {
-	if (columns && id in columns) {
-		return columns[id].minWidth ?? 0;
-	}
-	return 0;
-};
-// Function to determine fixedWidth for a column to simplify the logic in the HTML
-export const fixedWidth = (id: string, columns: Columns | undefined) => {
-	if (columns && id in columns) {
-		return columns[id].fixedWidth ?? 0;
-	}
-	return 0;
-};
-// Function to create custom styles for the columns to simplify the logic in the HTML
-export const cellStyle = (id: string, columns: Columns | undefined) => {
-	const minW = minWidth(id, columns);
-	const fixedW = fixedWidth(id, columns);
-	const styles: string[] = [];
-
-	// If minWidth is provided, add to styles
-	minW && styles.push(`min-width: ${minW}px`);
-	// If fixedWidth is provided, add to styles
-	fixedW && styles.push(`width: ${fixedW}px`);
-	// Create and return styles separated by ';'
-	return styles.join(';');
-};
-// Function to normalize the filters for back-end
-export const normalizeFilters = (filters: {
-	[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
-}) => {
-	let filter: Filter[] = [];
-
-	// Add filters to the request
-	Object.keys(filters).forEach((key) => {
-		Object.keys(filters[key])
-			.filter((k) => filters[key][k] !== undefined)
-			.forEach((k) => {
-				filter.push({
-					column: key,
-					filterBy: k as FilterOptionsEnum,
-					value: filters[key][k]
-				});
-			});
-	});
-
-	return filter;
-};
-
-export const exportAsCsv = (tableId: string, exportedData: string) => {
-	// Creating a hidden anchor element to download the CSV file
-	const anchor = document.createElement('a');
-	anchor.style.display = 'none';
-	anchor.href = `data:text/csv;charset=utf-8,${encodeURIComponent(exportedData)}`;
-	anchor.download = `${tableId}.csv`;
-	document.body.appendChild(anchor);
-	anchor.click();
-	document.body.removeChild(anchor);
-};
-
-// Resetting the resized columns and/or rows
-export const resetResize = (
-	headerRows: any,
-	pageRows: any,
-	tableId: string,
-	columns: Columns | undefined,
-	resizable: 'none' | 'rows' | 'columns' | 'both'
-) => {
-	// Run only if resizable is not none
-	if (resizable === 'columns' || resizable === 'both') {
-		headerRows.forEach((row) => {
-			row.cells.forEach((cell) => {
-				const minW = minWidth(cell.id, columns);
-				const fixedW = fixedWidth(cell.id, columns);
-				// If a fixedWidth is provided for a column, then reset the width to that value
-				fixedW &&
-					document
-						.getElementById(`th-${tableId}-${cell.id}`)
-						?.style.setProperty('width', `${fixedW}px`);
-				// If a minWidth is provided for a column, then reset the width to that value
-				minW &&
-					document
-						.getElementById(`th-${tableId}-${cell.id}`)
-						?.style.setProperty('width', `${minW}px`);
-				// If neither minWidth nor fixedWidth provided for a column, then reset the width to auto
-				!minW &&
-					!fixedW &&
-					document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty('width', 'auto');
-			});
-		});
-	}
-
-	if (resizable === 'rows' || resizable === 'both') {
-		pageRows.forEach((row) => {
-			row.cells.forEach((cell) => {
-				// Reset all row heights to auto
-				document
-					.getElementById(`${tableId}-${cell.id}-${row.id}`)
-					?.style.setProperty('height', 'auto');
-			});
-		});
-	}
-};
-
-export const missingValuesFn = (
-	key: number | string,
-	missingValues: { [key: string | number]: string }
-) => {
-	const foundKey =
-		typeof key === 'number' && key.toString().includes('e')
-			? Object.keys(missingValues).find((item) => {
-					return (item as string).toLowerCase() === key.toString().toLowerCase();
-			  })
-			: typeof key === 'string' && parseInt(key).toString().length !== key.length && new Date(key)
-			? Object.keys(missingValues).find(
-					(item) => new Date(item).getTime() === new Date(key).getTime()
-			  )
-			: key in missingValues
-			? key
-			: undefined;
-
-	return foundKey ? missingValues[foundKey] : key;
-};
-
-export const convertServerColumns = (
-	serverColumns: ServerColumn[],
-	columns: Columns | undefined
-) => {
-	const columnsConfig: Columns = {};
-
-	serverColumns.forEach((col) => {
-		let instructions = {};
-
-		if (col.instructions?.displayPattern) {
-			let dp = col.instructions.displayPattern;
-
-			// Swap 'm' and 'M' to match the backend date format
-			for (let i = 0; i < col.instructions.displayPattern.length; i++) {
-				if (col.instructions.displayPattern[i] === 'm') {
-					dp = `${dp.slice(0, i)}M${dp.slice(i + 1)}`;
-				} else if (col.instructions.displayPattern[i] === 'M') {
-					dp = `${dp.slice(0, i)}m${dp.slice(i + 1)}`;
-				}
-			}
-
-			instructions = {
-				toStringFn: (date: string) => {
-					if (col.instructions?.missingValues) {
-						const missingValue = missingValuesFn(date, col.instructions?.missingValues || {});
-						if (missingValue === date) {
-							return dateFormat(new Date(date), dp);
-						}
-						return missingValue;
-					} else {
-						return dateFormat(new Date(date), dp);
-					}
-				},
-				toSortableValueFn: (date: string) => new Date(date).getTime(),
-				toFilterableValueFn: (date: string) => new Date(date)
-			};
-		} else if (col.instructions?.missingValues) {
-			instructions = {
-				...instructions,
-				toStringFn: (key) => missingValuesFn(key, col.instructions?.missingValues || {})
-			};
-		}
-
-		if (columns && col.column in columns) {
-			columnsConfig[col.column] = {
-				...columns[col.column],
-				instructions
-			};
-		} else {
-			columnsConfig[col.column] = {
-				instructions
-			};
-		}
-	});
-
-	return columnsConfig;
-};