@bexis2/bexis2-core-ui 0.4.22 → 0.4.24

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

@@ -0,0 +1,34 @@
+import { SvelteComponent } from 'svelte';
+import type { Writable } from 'svelte/store';
+import { Receive } from '../../models/Models';
+import type { FilterOptionsEnum } from '../../models/Enums';
+import type { Columns, Filter, ServerColumn, ServerConfig } 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 updateTable: (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) => Promise<Receive>;
+export declare const convertServerColumns: (serverColumns: ServerColumn[], columns: Columns | undefined) => Columns;
+export declare 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) => void;
+export declare const getMinCellWidthInColumn: (tableRef: HTMLTableElement, colWidths: Writable<number[]>, headerRowsLength: number, resizable: "columns" | "rows" | "none" | "both") => void;
+export declare const getResizeStyles: (rowHeights: {
+    [key: number]: {
+        max: number;
+        min: number;
+    };
+}, id: string | number, index: number) => string;

package/dist/components/Table/{shared.js → utils.js}

@@ -1,4 +1,6 @@
 import dateFormat from 'dateformat';
+import { SvelteComponent } from 'svelte';
+import { Send, Receive } from '../../models/Models';
 // Function to determine minWidth for a column to simplify the logic in the HTML
 export const minWidth = (id, columns) => {
     if (columns && id in columns) {
@@ -52,6 +54,31 @@ export const exportAsCsv = (tableId, exportedData) => {
     anchor.click();
     document.body.removeChild(anchor);
 };
+export const jsonToCsv = (data) => {
+    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) => {
+        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, pageRows, tableId, columns, resizable) => {
     // Run only if resizable is not none
@@ -100,6 +127,54 @@ export const missingValuesFn = (key, missingValues) => {
                 : undefined;
     return foundKey ? missingValues[foundKey] : key;
 };
+// Function to update the server-side table data
+export const updateTable = async (pageSize, pageIndex, server, filters, data, serverItems, columns, dispatch) => {
+    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.message}`);
+    }
+    if (!fetchData.ok) {
+        throw new Error('Failed to fetch data');
+    }
+    const response = 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 = [];
+        response.data.forEach((row, index) => {
+            const tmp = {};
+            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, columns) => {
     const columnsConfig = {};
     serverColumns.forEach((col) => {
@@ -152,3 +227,62 @@ export const convertServerColumns = (serverColumns, columns) => {
     });
     return columnsConfig;
 };
+// Calculates the maximum height of the cells in each row
+export const getMaxCellHeightInRow = (tableRef, resizable, optionsComponent, rowHeights, tableId, rowHeight) => {
+    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, colWidths, headerRowsLength, resizable) => {
+    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, id, index) => {
+    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/dist/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/dist/models/Models.d.ts

@@ -90,6 +90,7 @@ export interface TableConfig<T> {
     id: string;
     data: Writable<T[]>;
     resizable?: 'none' | 'rows' | 'columns' | 'both';
+    showColumnsMenu?: boolean;
     toggle?: boolean;
     search?: boolean;
     fitToScreen?: boolean;
@@ -99,6 +100,7 @@ export interface TableConfig<T> {
     exportable?: boolean;
     pageSizes?: number[];
     defaultPageSize?: number;
+    pageIndexStringType?: 'items' | 'pages';
     optionsComponent?: typeof SvelteComponent;
     server?: ServerConfig;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.22",
+  "version": "0.4.24",
   "private": false,
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/Facets/Facets.svelte

@@ -191,10 +191,14 @@
 			hyphenOpacity="opacity-0"
 			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
+			regionSymbol="shrink-0"
 		>
-			<p class="font-semibold whitespace-nowrap">
-				{group.displayName}{group.count !== undefined ? ` (${group.count})` : ''}
-			</p>
+			<div class="grid grid-flow-col gap-2">
+				<p class="font-semibold whitespace-nowrap truncate" title={group.displayName}>
+					{group.displayName}
+				</p>
+				<span>{group.count !== undefined ? ` (${group.count})` : ''}</span>
+			</div>
 
 			<svelte:fragment slot="children">
 				<!-- If more than 5 choices, show the remaining in the Modal -->
@@ -210,9 +214,9 @@
 							selection
 							multiple
 						>
-							<div class="flex gap-2">
-								<p class="w-max grow truncate">
-									<span title={item.displayName}>{item.displayName}</span>
+							<div class="grid grid-flow-col gap-2">
+								<p class="truncate">
+									<span class="" title={item.displayName}>{item.displayName}</span>
 								</p>
 								<span>({item.count})</span>
 							</div>
@@ -237,9 +241,9 @@
 							selection
 							multiple
 						>
-							<div class="flex gap-2">
-								<p class="w-max grow truncate">
-									<span title={item.displayName}>{item.displayName}</span>
+							<div class="grid grid-flow-col gap-2">
+								<p class="truncate">
+									<span class="" title={item.displayName}>{item.displayName}</span>
 								</p>
 								<span>({item.count})</span>
 							</div>

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Fa from 'svelte-fa';
+	import { faEye } from '@fortawesome/free-solid-svg-icons';
 	import { popup } from '@skeletonlabs/skeleton';
 	import type { PopupSettings } from '@skeletonlabs/skeleton';
 
@@ -8,29 +10,55 @@
 	const popupCombobox: PopupSettings = {
 		event: 'click',
 		target: `${tableId}-columns-menu`,
-		placement: 'bottom'
+		placement: 'bottom',
+		closeQuery: ''
+	};
+
+	const selectAll = () => {
+		columns = columns.map((column) => ({ ...column, visible: true }));
+	};
+
+	const deselectAll = () => {
+		columns = columns.map((column) => ({ ...column, visible: false }));
+		columns[0].visible = true;
 	};
 </script>
 
 <button
 	type="button"
-	title="Hide or show columns"
-	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	class="btn btn-sm variant-filled-primary rounded-full order-last gap-2"
 	aria-label="Open menu to hide/show columns"
-	use:popup={popupCombobox}>Columns</button
+	use:popup={popupCombobox}><Fa icon={faEye} /> Columns</button
 >
-
 <div
-	class="bg-white dark:bg-surface-500 p-4 rounded-md shadow-md z-10"
+	class="bg-white dark:bg-surface-500 p-4 px-5 rounded-md shadow-md z-10 border border-primary-500"
 	data-popup="{tableId}-columns-menu"
 >
+	<div class="flex items-center gap-4 pb-5 grow justify-between">
+		<button
+			on:click|preventDefault={selectAll}
+			type="button"
+			class="btn p-0 text-sm grow underline text-primary-600"
+		>
+			Select All
+		</button>
+		<div class="border border-r border-neutral-200 h-6" />
+		<button
+			on:click|preventDefault={deselectAll}
+			type="button"
+			class="btn p-0 text-sm grow underline text-neutral-500"
+		>
+			Deselect All
+		</button>
+	</div>
 	{#each columns as column}
 		<div class="flex gap-3 items-center">
 			<label for={column.id} class="cursor-pointer" title={column.label}></label>
 			<input
 				aria-label={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
 				type="checkbox"
-				id = {column.id}
+				class="checkbox"
+				id={column.id}
 				bind:checked={column.visible}
 				title={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
 				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
@@ -39,5 +67,5 @@
 		</div>
 	{/each}
 
-	<div class="arrow bg-white dark:bg-surface-500" />
+	<div class="arrow bg-white dark:bg-surface-500 border-l border-t border-primary-500" />
 </div>