@bexis2/bexis2-core-ui 0.4.8 → 0.4.10

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

@@ -11,7 +11,8 @@
 		addExpandedRows,
 		addColumnFilters,
 		addTableFilter,
-		addDataExport
+		addDataExport,
+		addHiddenColumns
 	} from 'svelte-headless-table/plugins';
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import { SlideToggle, storePopup } from '@skeletonlabs/skeleton';
@@ -24,6 +25,7 @@
 	import TableFilterServer from './TableFilterServer.svelte';
 	import TablePagination from './TablePagination.svelte';
 	import TablePaginationServer from './TablePaginationServer.svelte';
+	import ColumnsMenu from './ColumnsMenu.svelte';
 	import { columnFilter, searchFilter } from './filter';
 	import {
 		cellStyle,
@@ -51,19 +53,16 @@
 		defaultPageSize = 10, // Default page size - number of rows to display per page
 		toggle = false, // Whether to display the fitToScreen toggle
 		search = true, // Whether to display the search input
-		pageSizes = [5, 10, 15, 20], // Page sizes to display in the pagination component
+		pageSizes = [5, 10, 20, 50, 100], // Page sizes to display in the pagination component
 		fitToScreen = true, // Whether to fit the table to the screen,
 		exportable = false, // Whether to display the export button and enable export functionality
-		serverSide = false, // Whether the table is client or server-side
-		URL = '', // URL to fetch data from
-		token = '', // Bearer token to authenticate the request
-		sendModel = new Send(), // Model to send requests
-		entityId = 0, // Entity ID to send with the request
-		versionId = 0 // Version ID to send with the request,
+		server
 	} = config;
 
 	let searchValue = '';
 	let isFetching = false;
+	const serverSide = server !== undefined;
+	const { baseUrl, sendModel, entityId, versionId } = server ?? {};
 
 	const filters = writable<{
 		[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
@@ -90,6 +89,7 @@
 			fn: searchFilter,
 			serverSide
 		}),
+		hideColumns: addHiddenColumns(),
 		sort: addSortBy({
 			disableMultiSort: true,
 			serverSide
@@ -121,137 +121,149 @@
 	// Creating an array of all the keys
 	const accessors: AccessorType[] = Object.keys(allCols) as AccessorType[];
 
+	// Filtering out the excluded columns
+	const unexcludedColumns = accessors.filter((accessor) => {
+		// Filtering only unexcluded columns
+		const key = accessor as string;
+		if (columns !== undefined && key in columns && columns[key].exclude === true) {
+			return false;
+		}
+		return true;
+	});
+
+	// To control the visibility of columns in menu
+	let shownColumns = unexcludedColumns.map((c) => {
+		const key = c as string;
+		const label = key.charAt(0).toUpperCase() + key.slice(1);
+		return {
+			id: c as string,
+			label: columns && columns[key] && columns[key].header ? columns[key].header : label,
+			visible: true
+		};
+	});
+
 	// Configuring every table column with the provided options
 	const tableColumns = [
-		...accessors
-			.filter((accessor) => {
-				// Filtering only unexcluded columns
-				const key = accessor as string;
-				if (columns !== undefined && key in columns && columns[key].exclude === true) {
-					return false;
-				}
-				return true;
-			})
-			.map((accessor) => {
-				const key = accessor as string;
-				// Applying configuration options for configured columns
-				if (columns !== undefined && key in columns) {
-					const {
-						header, // Custom header to display
-						colFilterFn, // Custom column filter function
-						colFilterComponent, // Custom column filter component
-						instructions, // Custom instructions for the column cells (sorting, filtering, searching, rendering)
-						disableFiltering = false, // Whether to disable filtering for the column
-						disableSorting = false // Whether to disable sorting for the column
-					} = columns[key];
-
-					const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } =
-						instructions ?? {};
-
-					return table.column({
-						// If header is not provided, use the key as the header
-						header: header ?? key,
-						accessor: accessor,
-						// Render the cell with the provided component, or use the toStringFn if provided, or just use the value
-						cell: ({ value, row }) => {
-							return renderComponent
-								? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher })
-								: toStringFn
-								? toStringFn(value)
-								: value;
+		...unexcludedColumns.map((accessor) => {
+			const key = accessor as string;
+			// Applying configuration options for configured columns
+			if (columns !== undefined && key in columns) {
+				const {
+					header, // Custom header to display
+					colFilterFn, // Custom column filter function
+					colFilterComponent, // Custom column filter component
+					instructions, // Custom instructions for the column cells (sorting, filtering, searching, rendering)
+					disableFiltering = false, // Whether to disable filtering for the column
+					disableSorting = false // Whether to disable sorting for the column
+				} = columns[key];
+
+				const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } =
+					instructions ?? {};
+
+				return table.column({
+					// If header is not provided, use the key as the header
+					header: header ?? key,
+					accessor: accessor,
+					// Render the cell with the provided component, or use the toStringFn if provided, or just use the value
+					cell: ({ value, row }) => {
+						return renderComponent
+							? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher })
+							: toStringFn
+							? toStringFn(value)
+							: value;
+					},
+					plugins: {
+						// Sorting config
+						sort: {
+							disable: disableSorting,
+							getSortValue: (row) => {
+								// If provided, use the custom sorting function toSortableValueFn(), or just use the value
+								return toSortableValueFn ? toSortableValueFn(row) : row;
+							}
 						},
-						plugins: {
-							// Sorting config
-							sort: {
-								disable: disableSorting,
-								getSortValue: (row) => {
-									// If provided, use the custom sorting function toSortableValueFn(), or just use the value
-									return toSortableValueFn ? toSortableValueFn(row) : row;
-								}
-							},
-							colFilter: !disableFiltering
-								? {
-										fn: ({ filterValue, value }) => {
-											// If provided, use the custom filtering function toFilterableValueFn(), or just use the value
-											const val = toFilterableValueFn ? toFilterableValueFn(value) : value;
-											// If provided, use the custom filtering function colFilterFn(), or just use the default columnFilter()
-											return colFilterFn
-												? colFilterFn({ filterValue, value: val })
-												: columnFilter({ filterValue, value: val });
-										},
-										render: ({ filterValue, values, id }) => {
-											filterValue.set($filters[key]);
-											return serverSide
-												? createRender(TableFilterServer, {
-														id,
-														tableId,
-														values,
-														updateTable,
-														pageIndex,
-														toFilterableValueFn,
-														filters,
-														toStringFn
-												  })
-												: createRender(colFilterComponent ?? TableFilter, {
-														filterValue,
-														id,
-														tableId,
-														values,
-														toFilterableValueFn,
-														filters,
-														toStringFn,
-														pageIndex
-												  });
-										}
-								  }
-								: undefined,
-							tableFilter: {
-								// Search filter config
-								getFilterValue: (row) => {
-									// If provided, use the custom toString function toStringFn(), or just use the value
-									return toStringFn ? toStringFn(row) : row;
-								}
+						colFilter: !disableFiltering
+							? {
+									fn: ({ filterValue, value }) => {
+										// If provided, use the custom filtering function toFilterableValueFn(), or just use the value
+										const val = toFilterableValueFn ? toFilterableValueFn(value) : value;
+										// If provided, use the custom filtering function colFilterFn(), or just use the default columnFilter()
+										return colFilterFn
+											? colFilterFn({ filterValue, value: val })
+											: columnFilter({ filterValue, value: val });
+									},
+									render: ({ filterValue, values, id }) => {
+										filterValue.set($filters[key]);
+										return serverSide
+											? createRender(TableFilterServer, {
+													id,
+													tableId,
+													values,
+													updateTable,
+													pageIndex,
+													toFilterableValueFn,
+													filters,
+													toStringFn
+											  })
+											: createRender(colFilterComponent ?? TableFilter, {
+													filterValue,
+													id,
+													tableId,
+													values,
+													toFilterableValueFn,
+													filters,
+													toStringFn,
+													pageIndex
+											  });
+									}
+							  }
+							: undefined,
+						tableFilter: {
+							// Search filter config
+							getFilterValue: (row) => {
+								// If provided, use the custom toString function toStringFn(), or just use the value
+								return toStringFn ? toStringFn(row) : row;
 							}
 						}
-					});
-				} else {
-					return table.column({
-						header: key,
-						accessor: accessor,
-						cell: ({ value }) => {
-							// If null or undefined, return an empty string
-							return value ? value : '';
-						},
-						plugins: {
-							// Sorting enabled by default
-							sort: {},
-							// Filtering enabled by default
-							colFilter: {
-								fn: columnFilter,
-								render: ({ filterValue, values, id }) => {
-									return serverSide
-										? createRender(TableFilterServer, {
-												id,
-												tableId,
-												values,
-												updateTable,
-												pageIndex,
-												filters
-										  })
-										: createRender(TableFilter, {
-												filterValue,
-												id,
-												tableId,
-												values,
-												filters,
-												pageIndex
-										  });
-								}
+					}
+				});
+			} else {
+				return table.column({
+					header: key,
+					accessor: accessor,
+					cell: ({ value }) => {
+						// If null or undefined, return an empty string
+						return value ? value : '';
+					},
+					plugins: {
+						// Sorting enabled by default
+						sort: {},
+						// Filtering enabled by default
+						colFilter: {
+							fn: columnFilter,
+							render: ({ filterValue, values, id }) => {
+								return serverSide
+									? createRender(TableFilterServer, {
+											id,
+											tableId,
+											values,
+											updateTable,
+											pageIndex,
+											filters
+									  })
+									: createRender(TableFilter, {
+											filterValue,
+											id,
+											tableId,
+											values,
+											filters,
+											pageIndex
+									  });
 							}
 						}
-					});
-				}
-			})
+					}
+				});
+			}
+		})
 	];
 
 	// If optionsComponent is provided, add a column for it at the end
@@ -286,22 +298,25 @@
 	const { exportedData } = pluginStates.export;
 	// Page configuration
 	const { pageIndex, pageSize } = pluginStates.page;
+	// 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;
-		sendModel.id = entityId;
+		sendModel.version = versionId || -1;
+		sendModel.id = entityId || -1;
 		sendModel.filter = normalizeFilters($filters);
 
 		let fetchData;
 
 		try {
 			isFetching = true;
-			fetchData = await fetch(URL, {
+			fetchData = await fetch(baseUrl || '', {
 				headers: {
-					'Content-Type': 'application/json',
-					Authorization: `Bearer ${token}`
+					'Content-Type': 'application/json'
 				},
 				method: 'POST',
 				body: JSON.stringify(sendModel)
@@ -346,6 +361,7 @@
 	};
 
 	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 = [];
@@ -362,16 +378,19 @@
 	$: sortKeys = pluginStates.sort.sortKeys;
 	$: serverSide && updateTable();
 	$: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
+	$: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => col.id);
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
 		<div class="table-container">
 			<!-- Enable the search filter if table is not empty -->
-			{#if !serverSide && search}
+			{#if search}
 				<form
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
+						if (!sendModel) throw new Error('Server-side configuration is missing');
+
 						sendModel.q = searchValue;
 						$filterValue = searchValue;
 					}}
@@ -388,6 +407,8 @@
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
+								if (!sendModel) throw new Error('Server-side configuration is missing');
+
 								searchValue = '';
 								sendModel.q = '';
 								$filterValue = '';
@@ -399,6 +420,8 @@
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
+							if (!sendModel) throw new Error('Server-side configuration is missing');
+
 							$filterValue = searchValue;
 							sendModel.q = searchValue;
 						}}>Search</button
@@ -439,6 +462,9 @@
 							>Export as CSV</button
 						>
 					{/if}
+					{#if shownColumns.length > 0}
+						<ColumnsMenu bind:columns={shownColumns} {tableId} />
+					{/if}
 				</div>
 			</div>
 
@@ -491,9 +517,7 @@
 														<!-- Adding column filter config -->
 														{#if cell.isData()}
 															{#if props.colFilter?.render}
-																<div class="">
-																	<Render of={props.colFilter.render} />
-																</div>
+																<Render of={props.colFilter.render} />
 															{/if}
 														{/if}
 													</div>
@@ -564,3 +588,5 @@
 		{/if}
 	{/if}
 </div>
+
+<div id="{tableId}-popups" />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import Fa from 'svelte-fa';
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { onMount } from 'svelte';
 	import { faFilter, faPlus, faXmark } from '@fortawesome/free-solid-svg-icons';
 	import { popup } from '@skeletonlabs/skeleton';
 	import type { PopupSettings } from '@skeletonlabs/skeleton';
@@ -22,6 +23,7 @@
 	let dropdowns: {
 		option: FilterOptionsEnum;
 		value: string | number | Date | undefined;
+		formValue: string | number | undefined;
 	}[] = [];
 
 	// Check the type of the column
@@ -173,7 +175,8 @@
 	const valueChangeHandler = (e, index) => {
 		dropdowns[index] = {
 			...dropdowns[index],
-			value: type === 'date' ? new Date(e.target.value) : e.target.value
+			value: type === 'date' ? new Date(e.target.value) : e.target.value,
+			formValue: e.target.value
 		};
 
 		$filters = {
@@ -195,7 +198,8 @@
 			...dropdowns,
 			{
 				option: option,
-				value: undefined
+				value: undefined,
+				formValue: undefined
 			}
 		];
 	};
@@ -221,9 +225,15 @@
 
 	// Start by adding the default filter
 	$: addFilter(options[type][0].value, undefined);
+
+	onMount(() => {
+		const element = document.getElementById(popupId);
+		element?.parentElement?.removeChild(element);
+		element && document.getElementById(`${tableId}-popups`)?.appendChild(element);
+	});
 </script>
 
-<form class="">
+<div id="parent-{popupId}">
 	<button
 		class:variant-filled-primary={active}
 		class="btn w-max p-2"
@@ -234,7 +244,7 @@
 		<Fa icon={faFilter} size="12" />
 	</button>
 
-	<div data-popup={`${popupId}`} id={popupId} class="z-50">
+	<div data-popup={popupId} id={popupId} class="">
 		<div class="card p-3 grid gap-2 shadow-lg w-max bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"
@@ -292,7 +302,7 @@
 								type="date"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
-								bind:value={dropdown.value}
+								bind:value={dropdown.formValue}
 							/>
 						{/if}
 					</div>
@@ -326,4 +336,4 @@
 			>
 		</div>
 	</div>
-</form>
+</div>

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

@@ -22,6 +22,7 @@
 	let dropdowns: {
 		option: FilterOptionsEnum;
 		value: string | number | Date | undefined;
+		formValue: string | number | undefined;
 	}[] = [];
 
 	// Check the type of the column
@@ -111,7 +112,7 @@
 			{
 				value: FilterOptionsEnum.b,
 				label: 'Is before'
-			},
+			}
 			// TODO: 'Not on' filter should be fixed on the server side
 			// {
 			// 	value: FilterOptionsEnum.no,
@@ -159,7 +160,8 @@
 	const valueChangeHandler = (e, index) => {
 		dropdowns[index] = {
 			...dropdowns[index],
-			value: type === 'date' ? new Date(e.target.value) : e.target.value
+			value: type === 'date' ? new Date(e.target.value) : e.target.value,
+			formValue: e.target.value
 		};
 
 		$filters = {
@@ -181,7 +183,8 @@
 			...dropdowns,
 			{
 				option: option,
-				value: undefined
+				value: undefined,
+				formValue: undefined
 			}
 		];
 	};

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

@@ -4,8 +4,10 @@
 		faAnglesRight,
 		faAngleRight,
 		faAnglesLeft,
-		faAngleLeft
+		faAngleLeft,
+		faChevronDown
 	} from '@fortawesome/free-solid-svg-icons';
+	import { ListBox, ListBoxItem, popup, type PopupSettings } from '@skeletonlabs/skeleton';
 
 	export let pageConfig;
 	export let pageSizes;
@@ -31,24 +33,50 @@
 		}
 	};
 
+	let pageSizeDropdownValue: string = $pageSize;
+
+	const pageSizePopup: PopupSettings = {
+		event: 'click',
+		target: `#${id}-pageSizeDropdown`,
+		placement: 'bottom',
+		closeQuery: '.listbox-item'
+	};
+
 	$: goToFirstPageDisabled = !$pageIndex;
 	$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
 	$: goToNextPageDisabled = !$hasNextPage;
 	$: goToPreviousPageDisabled = !$hasPreviousPage;
+	$: $pageSize = pageSizeDropdownValue;
 </script>
 
-<div class="flex justify-between w-full items-stretch gap-10">
+<div class="flex justify-between w-full items-stretch gap-10 z-50">
 	<div class="flex justify-start">
-		<select
+		<!-- <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>
+				<option value={size} class="">{size}</option>
 			{/each}
-		</select>
+		</select> -->
+
+		<button class="btn variant-filled-primary w-20 justify-between" use:popup={pageSizePopup}>
+			<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
+			<Fa icon={faChevronDown} size="xs" />
+		</button>
+
+		<div class="card w-20 shadow-xl py-2" data-popup={`#${id}-pageSizeDropdown`}>
+			<ListBox rounded="rounded-none">
+				{#each pageSizes as size}
+					<ListBoxItem bind:group={pageSizeDropdownValue} name="medium" value={size}
+						>{size}</ListBoxItem
+					>
+				{/each}
+			</ListBox>
+			<div class="arrow bg-surface-100-800-token" />
+		</div>
 	</div>
 	<div class="flex justify-center gap-1">
 		<button

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

@@ -77,7 +77,7 @@
 			bind:value={$pageSize}
 		>
 			{#each pageSizes as size}
-				<option value={size}>{size}</option>
+				<option value={size} class="!bg-primary-700">{size}</option>
 			{/each}
 		</select>
 	</div>

package/src/lib/models/Models.ts

@@ -104,6 +104,14 @@ export interface Columns {
 	[key: string]: Column;
 }
 
+// Server config type for the table 
+export type ServerConfig = {
+	baseUrl?: string; // Base URL for server-side table
+	sendModel: Send; // Send model for server-side table
+	entityId?: number; // Entity ID for server-side table
+	versionId?: number; // Version ID for server-side table
+};
+
 // Table config type
 export interface TableConfig<T> {
 	id: string;
@@ -120,12 +128,7 @@ export interface TableConfig<T> {
 	defaultPageSize?: number; // 10 by default
 	optionsComponent?: typeof SvelteComponent;
 
-	serverSide?: boolean; // false by default
-	URL?: string; // Base URL for server-side table
-	token?: string; // Authorization token for server-side table
-	sendModel?: Send; // Send model for server-side table
-	entityId?: number; // Entity ID for server-side table
-	versionId?: number; // Version ID for server-side table
+	server?: ServerConfig;
 }
 
 // lists
@@ -188,6 +191,15 @@ export type Filter = {
 	value: string | number | Date | boolean;
 };
 
+export type FacetOption = {
+	value: string;
+	count?: number;
+};
+
+export type FacetGroup = {
+	[key: string]: FacetOption[];
+};
+
 export class Send {
 	id: number;
 	limit: number;
@@ -222,7 +234,6 @@ export class Receive {
 	}
 }
 
-
 export class errorType {
 	statusText: string;
 	status: number;