@bexis2/bexis2-core-ui 0.4.22 → 0.4.24

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	import { afterUpdate, createEventDispatcher, onDestroy } from 'svelte';
 	import { readable, writable } from 'svelte/store';
 
 	import Fa from 'svelte-fa';
-	import { faXmark } from '@fortawesome/free-solid-svg-icons';
+	import { faCompress, faDownload, faXmark } from '@fortawesome/free-solid-svg-icons';
 	import { createTable, Subscribe, Render, createRender } from 'svelte-headless-table';
 	import {
 		addSortBy,
@@ -26,16 +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,
-		fixedWidth,
-		normalizeFilters,
-		resetResize,
-		convertServerColumns
-	} 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';
 
@@ -46,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
@@ -54,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
@@ -61,8 +56,10 @@
 
 	let searchValue = '';
 	let isFetching = false;
+	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 };
@@ -75,7 +72,12 @@
 	const dispatch = createEventDispatcher();
 	const actionDispatcher = (obj) => dispatch('action', obj);
 
-	const serverItems = serverSide ? writable<Number>(0) : undefined;
+	// Stores to hold the width and height information for resizing
+	const rowHeights = writable<{ [key: number]: { max: number; min: number } }>({});
+	const colWidths = writable<number[]>([]);
+
+	// Server-side variables
+	const serverItems = serverSide ? writable<number>(0) : undefined;
 	const serverItemCount = serverSide
 		? readable<Number>(0, (set) => {
 				serverItems!.subscribe((val) => set(val));
@@ -100,7 +102,7 @@
 			serverItemCount
 		} as PaginationConfig),
 		expand: addExpandedRows(),
-		export: addDataExport({ format: 'csv' })
+		export: addDataExport({ format: 'json' })
 	});
 
 	// A variable to hold all the keys
@@ -198,7 +200,7 @@
 													id,
 													tableId,
 													values,
-													updateTable,
+													updateTable: updateTableWithParams,
 													pageIndex,
 													toFilterableValueFn,
 													filters,
@@ -232,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
@@ -246,7 +248,7 @@
 											id,
 											tableId,
 											values,
-											updateTable,
+											updateTable: updateTableWithParams,
 											pageIndex,
 											filters
 									  })
@@ -290,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;
@@ -301,82 +303,110 @@
 	// Column visibility configuration
 	const { hiddenColumnIds } = pluginStates.hideColumns;
 
-	const updateTable = async () => {
+	const sortServer = (order: 'asc' | 'desc' | undefined, id: string) => {
 		if (!sendModel) throw new Error('Server-side configuration is missing');
+		// Set parameter for sorting
+		if (order === undefined) {
+			sendModel.order = [];
+		} else {
+			sendModel.order = [{ column: id, direction: order }];
+		}
+
+		// Reset pagination
+		$pageIndex = 0;
 
-		sendModel.limit = $pageSize;
-		sendModel.offset = $pageSize * $pageIndex;
-		sendModel.version = versionId || -1;
-		sendModel.id = entityId || -1;
-		sendModel.filter = normalizeFilters($filters);
+		updateTableWithParams();
+	};
 
-		let fetchData;
+	// 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;
 
-		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;
-		}
+		return result;
+	};
 
-		if (!fetchData.ok) {
-			throw new Error('Failed to fetch data');
+	// 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();
 		}
+	};
 
-		const response: Receive = await fetchData.json();
+	// Resize observer for rows
+	const resizeRowsObserver = new ResizeObserver(() => {
+		utils.getMaxCellHeightInRow(
+			tableRef,
+			resizable,
+			optionsComponent,
+			rowHeights,
+			tableId,
+			rowHeight
+		);
+	});
 
-		// Format server columns to the client columns
-		if (response.columns !== undefined) {
-			columns = convertServerColumns(response.columns, columns);
+	// Resize observers for columns
+	const resizeColumnsObserver = new ResizeObserver(() => {
+		utils.getMinCellWidthInColumn(tableRef, colWidths, $headerRows[0].cells.length, resizable);
+	});
 
-			const clientCols = response.columns.reduce((acc, col) => {
-				acc[col.key] = col.column;
-				return acc;
-			}, {});
+	// Adds observers on the first cells of each row to resize rows
+	const observeFirstCells = () => {
+		if (!tableRef) return;
 
-			const tmpArr: any[] = [];
+		tableRef.querySelectorAll('tbody tr td:first-child').forEach((cell) => {
+			resizeRowsObserver.observe(cell);
+		});
 
-			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;
-		}
+		return resizeRowsObserver;
+	};
 
-		$serverItems = response.count;
+	// Adds observers on the header columns to resize columns
+	const observeHeaderColumns = () => {
+		if (!tableRef) return;
 
-		return response;
+		tableRef.querySelectorAll('thead tr th').forEach((cell) => {
+			resizeColumnsObserver.observe(cell);
+		});
 	};
 
-	const sortServer = (order: 'asc' | 'desc' | undefined, id: string) => {
-		if (!sendModel) throw new Error('Server-side configuration is missing');
-		// Set parameter for sorting
-		if (order === undefined) {
-			sendModel.order = [];
-		} else {
-			sendModel.order = [{ column: id, direction: order }];
+	afterUpdate(() => {
+		// If not resizable, return
+		if (resizable !== 'rows' && resizable !== 'both') {
+			return;
 		}
+		// Making sure tableRef is up to date and contains the new rows
+		// If it contains even one element, it means it contains them all
+		const e = tableRef?.querySelector(`#${tableId}-row-${$pageRows[0].id}`);
+		if (e) {
+			getDimensions();
+		}
+	});
 
-		// Reset pagination
-		$pageIndex = 0;
-
-		updateTable();
-	};
+	onDestroy(() => {
+		resizeColumnsObserver.disconnect();
+		resizeRowsObserver.disconnect();
+	});
 
 	$: 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>
@@ -445,7 +475,8 @@
 			{/if}
 
 			<div
-				class="flex justify-between items-center w-full {search && 'py-2'} {!search &&
+				class="flex justify-between overflow-x-auto items-center w-full {search &&
+					'py-2'} {!search &&
 					(shownColumns.length > 0 || toggle || resizable !== 'none' || exportable) &&
 					'pb-2'}"
 			>
@@ -472,25 +503,26 @@
 					{#if resizable !== 'none'}
 						<button
 							type="button"
-							title="Reset column and row sizing"
-							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							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)}
-							>Reset sizing</button
+								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"
-							title="Export table data as CSV"
-							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							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, $exportedData)}
-							>Export as CSV</button
+							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>
@@ -498,6 +530,7 @@
 
 			<div class="overflow-auto" style="height: {height}px">
 				<table
+					bind:this={tableRef}
 					{...$tableAttrs}
 					class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
 					id="{tableId}-table"
@@ -514,14 +547,29 @@
 								let:rowProps
 							>
 								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-800">
-									{#each headerRow.cells as cell (cell.id)}
+									{#each headerRow.cells as cell, index (cell.id)}
 										<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-											<th scope="col" class="!p-2" {...attrs} style={cellStyle(cell.id, columns)}>
+											<th
+												scope="col"
+												class="!p-2"
+												{...attrs}
+												style={`
+													width: ${cell.isData() ? 'auto' : '0'};
+													${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: ${
+															utils.minWidth(cell.id, columns)
+																? utils.minWidth(cell.id, columns)
+																: $colWidths[index]
+														}px;
+													`}
 												>
 													<div class="flex justify-between items-center">
 														<div class="flex gap-1 whitespace-pre-wrap">
@@ -572,20 +620,34 @@
 								<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
 									{#each row.cells as cell, index (cell?.id)}
 										<Subscribe attrs={cell.attrs()} let:attrs>
-											<td {...attrs} class="!p-2">
+											<td {...attrs} class="">
 												<div
-													class=" overflow-auto h-max {index === 0 &&
+													class=" h-full {index === 0 &&
 													(resizable === 'rows' || resizable === 'both')
-														? 'resize-y'
-														: ''}"
+														? 'resize-y overflow-auto'
+														: 'block'}"
 													id="{tableId}-{cell.id}-{row.id}"
+													style={utils.getResizeStyles($rowHeights, row.id, index)}
 												>
 													<!-- Adding config for initial rowHeight, if provided -->
 													<div
-														class="flex items-center overflow-auto"
-														style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
+														class="flex items-start overflow-auto"
+														style={`
+															max-height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].max}px` : 'auto'};
+														`}
 													>
-														<div class="grow h-full"><Render of={cell.render()} /></div>
+														<div
+															class="grow overflow-auto"
+															style={cell.isData()
+																? `width: ${
+																		utils.minWidth(cell.id, columns)
+																			? utils.minWidth(cell.id, columns)
+																			: $colWidths[index]
+																  }px;`
+																: 'max-width: min-content;'}
+														>
+															<Render of={cell.render()} />
+														</div>
 													</div>
 												</div>
 											</td>
@@ -622,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>

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>