@bexis2/bexis2-core-ui 0.3.12 → 0.3.13

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

@@ -18,49 +18,85 @@
 	const goToNextPage = () => ($pageIndex += 1);
 	const goToPreviousPage = () => ($pageIndex -= 1);
 
+	// Handles the input change event
+	const handleChange = (e) => {
+		const value = e.target.value;
+
+		if (value > $pageCount) {
+			$pageIndex = $pageCount - 1;
+		} else if (value < 1) {
+			$pageIndex = 0;
+		} else {
+			$pageIndex = value - 1;
+		}
+	};
+
 	$: goToFirstPageDisabled = !$pageIndex;
 	$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
 	$: goToNextPageDisabled = !$hasNextPage;
 	$: goToPreviousPageDisabled = !$hasPreviousPage;
 </script>
 
-<div class="flex justify-center gap-1">
-	<button
-		class="btn btn-sm variant-filled-primary"
-		on:click|preventDefault={goToFirstPage}
-		disabled={goToFirstPageDisabled}
-		id="{id}-first"
-	>
-		<Fa icon={faAnglesLeft} /></button
-	>
-	<button
-		class="btn btn-sm variant-filled-primary"
-		id="{id}-previous"
-		on:click|preventDefault={goToPreviousPage}
-		disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
-	>
-
-	<select
-		name="pageSize"
-		id="{id}-pageSize"
-		class="select variant-filled-primary w-min font-bold"
-		bind:value={$pageSize}
-	>
-		{#each pageSizes as size}
-			<option value={size}>{size}</option>
-		{/each}
-	</select>
-
-	<button
-		class="btn btn-sm variant-filled-primary"
-		id="{id}-next"
-		on:click|preventDefault={goToNextPage}
-		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
-	>
-	<button
-		class="btn btn-sm variant-filled-primary"
-		id="{id}-last"
-		on:click|preventDefault={goToLastPage}
-		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
-	>
+<div class="flex justify-between w-full items-stretch gap-10">
+	<div class="flex justify-start">
+		<select
+			name="pageSize"
+			id="{id}-pageSize"
+			class="select variant-filled-primary w-min font-bold"
+			bind:value={$pageSize}
+		>
+			{#each pageSizes as size}
+				<option value={size}>{size}</option>
+			{/each}
+		</select>
+	</div>
+	<div class="flex justify-center gap-1">
+		<button
+			class="btn btn-sm variant-filled-primary"
+			on:click|preventDefault={goToFirstPage}
+			disabled={goToFirstPageDisabled}
+			id="{id}-first"
+		>
+			<Fa icon={faAnglesLeft} /></button
+		>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-previous"
+			on:click|preventDefault={goToPreviousPage}
+			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
+		>
+		<input
+			type="number"
+			class="input border border-primary-500 rounded flex w-24"
+			value={$pageIndex + 1}
+			max={$pageCount}
+			min={1}
+			on:change={handleChange}
+		/>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-next"
+			on:click|preventDefault={goToNextPage}
+			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+		>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-last"
+			on:click|preventDefault={goToLastPage}
+			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+		>
+	</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}
+		</span>
+	</div>
 </div>

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

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import {
+		faAnglesRight,
+		faAngleRight,
+		faAnglesLeft,
+		faAngleLeft
+	} from '@fortawesome/free-solid-svg-icons';
+
+	export let id; // Unique table ID
+	export let pageIndex;
+	export let pageSize;
+	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
+
+	// Flags for disabling buttons
+	let goToFirstPageDisabled = true;
+	let goToLastPageDisabled = true;
+	let goToNextPageDisabled = true;
+	let goToPreviousPageDisabled = true;
+
+	// Handles the input change event
+	const handleChange = (e) => {
+		const value = e.target.value;
+
+		if (value > pageCount) {
+			$pageIndex = pageCount - 1;
+		} else if (value < 1) {
+			$pageIndex = 0;
+		} else {
+			$pageIndex = value - 1;
+		}
+
+		updateTable();
+	};
+
+	// Main navigation function
+	const goTo = (dst: string) => {
+		switch (dst) {
+			case 'first':
+				$pageIndex = 0;
+				break;
+			case 'last':
+				$pageIndex = pageCount - 1;
+				break;
+			case 'next':
+				$pageIndex += 1;
+				break;
+			case 'previous':
+				$pageIndex -= 1;
+				break;
+			default:
+				break;
+		}
+
+		// Fetch data for new parameters
+		updateTable();
+	};
+
+	$: 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
+
+	updateTable();
+</script>
+
+<div class="flex justify-between w-full items-stretch gap-10">
+	<div class="flex justify-start">
+		<select
+			name="pageSize"
+			id="{id}-pageSize"
+			class="select variant-filled-primary w-min font-bold"
+			bind:value={$pageSize}
+		>
+			{#each pageSizes as size}
+				<option value={size}>{size}</option>
+			{/each}
+		</select>
+	</div>
+	<div class="flex justify-center gap-1">
+		<button
+			class="btn btn-sm variant-filled-primary"
+			on:click|preventDefault={() => goTo('first')}
+			disabled={goToFirstPageDisabled}
+			id="{id}-first"
+		>
+			<Fa icon={faAnglesLeft} /></button
+		>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-previous"
+			on:click|preventDefault={() => goTo('previous')}
+			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
+		>
+		<input
+			type="number"
+			class="input border border-primary-500 rounded flex w-24"
+			value={$pageIndex + 1}
+			max={pageCount}
+			min={1}
+			on:change={handleChange}
+		/>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-next"
+			on:click|preventDefault={() => goTo('next')}
+			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+		>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-last"
+			on:click|preventDefault={() => goTo('last')}
+			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+		>
+	</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}
+		</span>
+	</div>
+</div>

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

@@ -1,19 +1,21 @@
 import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
 import type { TableFilterFn } from 'svelte-headless-table/lib/plugins/addTableFilter';
 
+import { FilterOptionsEnum } from '$models/Enums';
+
 const textFilter = (filterOption, filterValue, value) => {
 	switch (filterOption) {
-		case 'isequal':
+		case FilterOptionsEnum.e:
 			return value.toLowerCase() === filterValue.toLowerCase();
-		case 'isnotequal':
+		case FilterOptionsEnum.ne:
 			return value.toLowerCase() !== filterValue.toLowerCase();
-		case 'starts':
+		case FilterOptionsEnum.sw:
 			return value.toLowerCase().startsWith(filterValue.toLowerCase());
-		case 'ends':
+		case FilterOptionsEnum.ew:
 			return value.toLowerCase().endsWith(filterValue.toLowerCase());
-		case 'contains':
+		case FilterOptionsEnum.c:
 			return value.toLowerCase().includes(filterValue.toLowerCase());
-		case 'notcontains':
+		case FilterOptionsEnum.nc:
 			return !value.toLowerCase().includes(filterValue.toLowerCase());
 		default:
 			return false;
@@ -22,17 +24,17 @@ const textFilter = (filterOption, filterValue, value) => {
 
 const numberFilter = (filterOption, filterValue, value) => {
 	switch (filterOption) {
-		case 'isequal':
+		case FilterOptionsEnum.e:
 			return value === filterValue;
-		case 'isnotequal':
+		case FilterOptionsEnum.ne:
 			return value !== filterValue;
-		case 'isgreater':
+		case FilterOptionsEnum.gt:
 			return value > filterValue;
-		case 'isless':
+		case FilterOptionsEnum.lt:
 			return value < filterValue;
-		case 'isgreaterorequal':
+		case FilterOptionsEnum.gte:
 			return value >= filterValue;
-		case 'islessorequal':
+		case FilterOptionsEnum.lte:
 			return value <= filterValue;
 		default:
 			return false;
@@ -43,93 +45,47 @@ const dateFilter = (filterOption, filterValue, value) => {
 	const filter = new Date(filterValue);
 
 	switch (filterOption) {
-		case 'ison':
-			return value === filter;
-		case 'isstartingfrom':
-			return value >= filter;
-		case 'isafter':
-			return value > filter;
-		case 'isuntil':
-			return value <= filter;
-		case 'isbefore':
-			return value < filter;
-		case 'isnoton':
-			return value !== filter;
+		case FilterOptionsEnum.o:
+			return value.getTime() === filter.getTime();
+		case FilterOptionsEnum.sf:
+			return value.getTime() >= filter.getTime();
+		case FilterOptionsEnum.a:
+			return value.getTime() > filter.getTime();
+		case FilterOptionsEnum.u:
+			return value.getTime() <= filter.getTime();
+		case FilterOptionsEnum.b:
+			return value.getTime() < filter.getTime();
+		case FilterOptionsEnum.no:
+			return value.getTime() !== filter.getTime();
 		default:
 			return false;
 	}
 };
 
-const numericFilter: ColumnFilterFn = ({ filterValue, value }) => {
-	const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
-	if (firstFilterValue == null && secondFilterValue == null) {
-		return true;
-	} else if (
-		(firstFilterOption == null || firstFilterValue == null) &&
-		secondFilterOption != null &&
-		secondFilterValue != null
-	) {
-		return numberFilter(secondFilterOption, secondFilterValue, value);
-	} else if (
-		(secondFilterOption == null || secondFilterValue == null) &&
-		firstFilterOption != null &&
-		firstFilterValue != null
-	) {
-		return numberFilter(firstFilterOption, firstFilterValue, value);
-	}
-	return (
-		numberFilter(firstFilterOption, firstFilterValue, value) &&
-		numberFilter(secondFilterOption, secondFilterValue, value)
-	);
-};
+const applyFilter = (filterValue, value, filterFn) => {
+	let result: boolean = true;
 
-const stringFilter: ColumnFilterFn = ({ filterValue, value }) => {
-	const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
-	if (!firstFilterValue?.length && !secondFilterValue?.length) {
-		return true;
-	} else if (
-		(!firstFilterOption || !firstFilterValue) &&
-		secondFilterOption &&
-		secondFilterValue?.length
-	) {
-		return textFilter(secondFilterOption, secondFilterValue, value);
-	} else if (
-		(!secondFilterOption || !secondFilterValue?.length) &&
-		firstFilterOption &&
-		firstFilterValue?.length
-	) {
-		return textFilter(firstFilterOption, firstFilterValue, value);
-	}
-	return (
-		textFilter(firstFilterOption, firstFilterValue, value) &&
-		textFilter(secondFilterOption, secondFilterValue, value)
-	);
-};
+	const filters = Object.keys(filterValue).map((key) => ({
+		option: key,
+		value: filterValue[key]
+	}));
 
-const dateTypeFilter: ColumnFilterFn = ({ filterValue, value }) => {
-	const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
-	if (!firstFilterValue && !secondFilterValue) {
-		return true;
-	} else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
-		return dateFilter(secondFilterOption, secondFilterValue, value);
-	} else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
-		return dateFilter(firstFilterOption, firstFilterValue, value);
-	}
+	filters.forEach((filter) => {
+		result = result && (filter.value ? filterFn(filter.option, filter.value, value) : true);
+	});
 
-	return (
-		dateFilter(firstFilterOption, firstFilterValue, value) &&
-		dateFilter(secondFilterOption, secondFilterValue, value)
-	);
+	return result;
 };
 
 export const columnFilter: ColumnFilterFn = ({ filterValue, value }) => {
-	if (typeof value === 'string') {
-		return stringFilter({ filterValue, value });
+	if (typeof value === 'object' && value instanceof Date) {
+		return applyFilter(filterValue, value, dateFilter);
 	} else if (typeof value === 'number') {
-		return numericFilter({ filterValue, value });
-	} else if (typeof value === 'object' && value instanceof Date) {
-		return dateTypeFilter({ filterValue, value });
+		return applyFilter(filterValue, value, numberFilter);
+	} else if (typeof value === 'string') {
+		return applyFilter(filterValue, value, textFilter);
 	}
+
 	return false;
 };
 

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

@@ -0,0 +1,141 @@
+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, missingValues: { [key: string | number]: string }) => {
+	return key in missingValues ? missingValues[key] : key.toString();
+};
+
+export const convertServerColumns = (columns: ServerColumn[]) => {
+	const columnsConfig: Columns = {};
+
+	columns.forEach((col) => {
+		let instructions = {};
+
+		// if (col.instructions?.displayPattern) {
+		// 	instructions = {
+		// 		toStringFn: (date: Date) =>
+		// 			date.toLocaleString('en-US', col.instructions?.displayPattern || {}),
+		// 		toSortableValueFn: (date: Date) => date.getTime(),
+		// 		toFilterableValueFn: (date: Date) => date
+		// 	};
+		// }
+
+		if (col.instructions?.missingValues) {
+			instructions = {
+				...instructions,
+				toStringFn: (key) => missingValuesFn(key, col.instructions?.missingValues || {})
+			};
+		}
+
+		columnsConfig[col.column] = {
+			exclude: col.exclude,
+			instructions
+		};
+	});
+
+	return columnsConfig;
+};

package/src/lib/components/file/FileUploader.svelte

@@ -6,7 +6,7 @@
 		fileUploaderType
 	} from '../../models/Models.js';
 
-	import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
+	import Dropzone from 'svelte-file-dropzone';
 	import Fa from 'svelte-fa/src/fa.svelte';
 
 	import Spinner from '../page/Spinner.svelte';
@@ -169,7 +169,7 @@
 	{#if model}
 		<!--if model exist  -->
 		<div>
-			<DropZone
+			<Dropzone
 				on:drop={handleFilesSelect}
 				accept={model.accept}
 				multiple={model.multiple}
@@ -187,7 +187,7 @@
 						{/each}
 					{/if}
 				</p>
-			</DropZone>
+			</Dropzone>
 			{#if isUploading}
 					<ProgressBar  value={undefined}/>
 			{/if}

package/src/lib/models/Enums.ts

@@ -38,3 +38,25 @@ export enum notificationType {
 	error,
 	surface
 }
+
+// Server-side table fitler types
+export enum FilterOptionsEnum {
+	'e' = 'e', // Equal to
+	'ne' = 'ne', // Not equal to
+	'gt' = 'gt', // Greater than
+	'lt' = 'lt', // Less than
+	'gte' = 'gte', // Greater than or equal to
+	'lte' = 'lte', // Less than or equal to
+
+	'c' = 'c', // Contains
+	'nc' = 'nc', // Does not contain
+	'sw' = 'sw', // Starts with
+	'ew' = 'ew', // Ends with,
+
+	'o' = 'o', // On (date)
+	'sf' = 'sf', // Starting from (date)
+	'a' = 'a', // After (date)
+	'u' = 'u', // Until (date)
+	'b' = 'b', // Before (date)
+	'no' = 'no' // Not on (date)
+}