@bexis2/bexis2-core-ui 0.4.95 → 0.4.97

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

@@ -11,6 +11,21 @@
 	export let updateTable; // Function to update table
 	export let data;
 
+	const toCount = (value) => {
+		if (typeof value === 'number') return Number.isNaN(value) ? 0 : value;
+		const parsed = Number(String(value ?? '').replace(/[^0-9.-]/g, ''));
+		return Number.isNaN(parsed) ? 0 : parsed;
+	};
+
+	const getEffectiveCount = () => {
+		const count = toCount(itemCount);
+		if (count > 0) return count;
+		// Fallback for edge cases where server count has not propagated yet.
+		return Array.isArray($data) ? $data.length : 0;
+	};
+
+	let effectiveCount = 0;
+
 	let indexInformation = '';
 
 	const { pageIndex, pageCount, pageSize } = pageConfig;
@@ -25,12 +40,13 @@
 	};
 
 	const getIndexInfomationString = () => {
-		return itemCount === 0
+		const count = effectiveCount;
+		return count === 0
 			? 'No items'
 			: `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
 					($pageIndex + 1) * $pageSize,
-					itemCount
-			  )} of ${Math.min($pageCount * $pageSize, itemCount)}`;
+					count
+				)} of ${count}`;
 	};
 
 	function updateTableServer() {
@@ -38,17 +54,21 @@
 		updateTable();
 	}
 
+	$: effectiveCount = getEffectiveCount();
 	$: paginationSettings = {
-		size: itemCount,
+		size: effectiveCount,
 		limit: $pageSize,
 		page: $pageIndex,
 		amounts: pageSizes
 	};
 	$: $pageSize = pageSizeDropdownValue;
-	$: $pageCount, $pageIndex, $pageSize, itemCount, (indexInformation = getIndexInfomationString());
+	$: ($pageCount,
+		$pageIndex,
+		$pageSize,
+		itemCount,
+		(indexInformation = getIndexInfomationString()));
 
 	// updateTable();
-
 </script>
 
 <div class="grid grid-cols-3 w-full items-stretch gap-10">
@@ -67,9 +87,12 @@
 				{#each pageSizes as size}
 					<ListBoxItem
 						bind:group={pageSizeDropdownValue}
-						name="medium" value={size}
-						on:click={() => { $pageSize = size;  updateTableServer(); }}
-						>{size}</ListBoxItem
+						name="medium"
+						value={size}
+						on:click={() => {
+							$pageSize = size;
+							updateTableServer();
+						}}>{size}</ListBoxItem
 					>
 				{/each}
 			</ListBox>
@@ -78,7 +101,10 @@
 	</div>
 	<div class="flex justify-center">
 		<Paginator
-			on:page={(page) => {$pageIndex = page.detail; updateTableServer(); }}
+			on:page={(page) => {
+				$pageIndex = page.detail;
+				updateTableServer();
+			}}
 			settings={paginationSettings}
 			select="hidden"
 			active="!variant-filled-secondary !text-on-secondary-token"

package/src/lib/components/Table/clientDB.js

@@ -0,0 +1,236 @@
+// Simple client-side DB wrapper using IndexedDB directly (no worker)
+const DB_PREFIX = 'table-db-';
+
+function openDB(name) {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_PREFIX + name, 1);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains('rows')) {
+        db.createObjectStore('rows', { keyPath: '__id', autoIncrement: true });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+function clearStore(db) {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction('rows', 'readwrite');
+    const store = tx.objectStore('rows');
+    const req = store.clear();
+    req.onsuccess = () => resolve(undefined);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+function bulkInsert(db, rows) {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction('rows', 'readwrite');
+    const store = tx.objectStore('rows');
+    for (let i = 0; i < rows.length; i++) {
+      store.add({ __r: rows[i] });
+    }
+    tx.oncomplete = () => resolve(undefined);
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+function matches(rowObj, q, filters) {
+  const row = rowObj.__r || rowObj;
+
+  if (q && q.length > 0) {
+    const ql = String(q).toLowerCase();
+    let found = false;
+    for (const k in row) {
+      const v = row[k];
+      if (v == null) continue;
+      if (typeof v === 'string' && v.toLowerCase().includes(ql)) {
+        found = true;
+        break;
+      }
+      if (typeof v === 'number' && String(v).includes(ql)) {
+        found = true;
+        break;
+      }
+    }
+    if (!found) return false;
+  }
+
+  const normalizeKey = (k) => String(k || '').replaceAll('%%%', '.');
+  const getValue = (column) => {
+    const dot = normalizeKey(column);
+    return row[dot] ?? row[column] ?? row[dot.replaceAll('.', '%%%')];
+  };
+
+  const asComparableNumber = (v) => {
+    if (typeof v === 'number') return v;
+    if (typeof v === 'bigint') return Number(v);
+    const n = Number(v);
+    return Number.isNaN(n) ? null : n;
+  };
+
+  const asTime = (v) => {
+    if (v instanceof Date) return v.getTime();
+    const d = new Date(v);
+    const t = d.getTime();
+    return Number.isNaN(t) ? null : t;
+  };
+
+  if (filters && filters.length > 0) {
+    for (const f of filters) {
+      const op = f.filterBy;
+      const val = f.value;
+      const actual = getValue(f.column);
+      if (val == null) continue;
+
+      const aStr = String(actual ?? '').toLowerCase();
+      const vStr = String(val ?? '').toLowerCase();
+      const aNum = asComparableNumber(actual);
+      const vNum = asComparableNumber(val);
+      const aDate = asTime(actual);
+      const vDate = asTime(val);
+
+      if (op === 'c' && !aStr.includes(vStr)) return false;
+      if (op === 'nc' && aStr.includes(vStr)) return false;
+      if (op === 'sw' && !aStr.startsWith(vStr)) return false;
+      if (op === 'ew' && !aStr.endsWith(vStr)) return false;
+
+      if (op === 'e' && actual != val) return false;
+      if (op === 'ne' && actual == val) return false;
+
+      if (op === 'gt') {
+        if (aNum == null || vNum == null || !(aNum > vNum)) return false;
+      }
+      if (op === 'lt') {
+        if (aNum == null || vNum == null || !(aNum < vNum)) return false;
+      }
+      if (op === 'gte') {
+        if (aNum == null || vNum == null || !(aNum >= vNum)) return false;
+      }
+      if (op === 'lte') {
+        if (aNum == null || vNum == null || !(aNum <= vNum)) return false;
+      }
+
+      if (op === 'o') {
+        if (aDate == null || vDate == null || aDate !== vDate) return false;
+      }
+      if (op === 'sf' || op === 'a') {
+        if (aDate == null || vDate == null || !(aDate > vDate || aDate === vDate)) return false;
+      }
+      if (op === 'u' || op === 'b') {
+        if (aDate == null || vDate == null || !(aDate < vDate || aDate === vDate)) return false;
+      }
+      if (op === 'no') {
+        if (aDate == null || vDate == null || aDate === vDate) return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+export default class ClientDB {
+  constructor(tableId) {
+    this.tableId = tableId;
+    this.db = null;
+  }
+
+  async init(rows) {
+    this.db = this.db || (await openDB(this.tableId));
+    await clearStore(this.db);
+
+    const CHUNK = 1000;
+    for (let i = 0; i < rows.length; i += CHUNK) {
+      const chunk = rows.slice(i, i + CHUNK);
+      await bulkInsert(this.db, chunk);
+      // Yield to keep the UI responsive while importing
+      await new Promise((r) => setTimeout(r, 0));
+    }
+
+    return { tableId: this.tableId, count: rows.length };
+  }
+
+  async query({ q = '', filters = [], order = [], offset = 0, limit = 100 } = {}) {
+    this.db = this.db || (await openDB(this.tableId));
+
+    const tx = this.db.transaction('rows', 'readonly');
+    const store = tx.objectStore('rows');
+    const req = store.openCursor();
+
+    const matched = [];
+
+    await new Promise((resolve, reject) => {
+      req.onsuccess = (evt) => {
+        const cursor = evt.target.result;
+        if (!cursor) {
+          resolve(undefined);
+          return;
+        }
+
+        const rec = cursor.value;
+        if (matches(rec, q, filters)) {
+          matched.push(rec.__r || rec);
+        }
+
+        cursor.continue();
+      };
+      req.onerror = () => reject(req.error);
+    });
+
+    const getValue = (row, column) => {
+      const dot = String(column || '').replaceAll('%%%', '.');
+      return row[dot] ?? row[column] ?? row[dot.replaceAll('.', '%%%')];
+    };
+
+    if (order && order.length > 0) {
+      const { column, direction } = order[0];
+      const dir = direction === 'desc' ? -1 : 1;
+      matched.sort((a, b) => {
+        const av = getValue(a, column);
+        const bv = getValue(b, column);
+
+        if (av == null && bv == null) return 0;
+        if (av == null) return -1 * dir;
+        if (bv == null) return 1 * dir;
+
+        if (typeof av === 'number' && typeof bv === 'number') {
+          return (av - bv) * dir;
+        }
+
+        if (typeof av === 'bigint' || typeof bv === 'bigint') {
+          const ai = BigInt(av);
+          const bi = BigInt(bv);
+          if (ai === bi) return 0;
+          return ai > bi ? dir : -dir;
+        }
+
+        const ad = new Date(av).getTime();
+        const bd = new Date(bv).getTime();
+        if (!Number.isNaN(ad) && !Number.isNaN(bd)) {
+          return (ad - bd) * dir;
+        }
+
+        return String(av).localeCompare(String(bv)) * dir;
+      });
+    }
+
+    const total = matched.length;
+    const rows = matched.slice(offset, offset + limit);
+
+    return { tableId: this.tableId, rows, total };
+  }
+
+  async clear() {
+    this.db = this.db || (await openDB(this.tableId));
+    await clearStore(this.db);
+  }
+
+  destroy() {
+    if (this.db) {
+      this.db.close();
+      this.db = null;
+    }
+  }
+}

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

@@ -4,29 +4,29 @@ import type { TableFilterFn } from 'svelte-headless-table/lib/plugins/addTableFi
 import { FilterOptionsEnum } from '$models/Enums';
 
 const textFilter = (filterOption, filterValue, value) => {
-    // check if filterValue is a object or string
-    let filterStr = String(filterValue);
-    if (typeof filterValue === 'object' && filterValue !== null) {
-        filterStr = filterValue.text;
-    }
-    const valueStr = String(value);
+	// check if filterValue is a object or string
+	let filterStr = String(filterValue);
+	if (typeof filterValue === 'object' && filterValue !== null) {
+		filterStr = filterValue.text;
+	}
+	const valueStr = String(value);
 
-    switch (filterOption) {
-        case FilterOptionsEnum.e:
-            return valueStr.toLowerCase() === filterStr.toLowerCase();
-        case FilterOptionsEnum.ne:
-            return valueStr.toLowerCase() !== filterStr.toLowerCase();
-        case FilterOptionsEnum.sw:
-            return valueStr.toLowerCase().startsWith(filterStr.toLowerCase());
-        case FilterOptionsEnum.ew:
-            return valueStr.toLowerCase().endsWith(filterStr.toLowerCase());
-        case FilterOptionsEnum.c:
-            return valueStr.toLowerCase().includes(filterStr.toLowerCase());
-        case FilterOptionsEnum.nc:
-            return !valueStr.toLowerCase().includes(filterStr.toLowerCase());
-        default:
-            return false;
-    }
+	switch (filterOption) {
+		case FilterOptionsEnum.e:
+			return valueStr.toLowerCase() === filterStr.toLowerCase();
+		case FilterOptionsEnum.ne:
+			return valueStr.toLowerCase() !== filterStr.toLowerCase();
+		case FilterOptionsEnum.sw:
+			return valueStr.toLowerCase().startsWith(filterStr.toLowerCase());
+		case FilterOptionsEnum.ew:
+			return valueStr.toLowerCase().endsWith(filterStr.toLowerCase());
+		case FilterOptionsEnum.c:
+			return valueStr.toLowerCase().includes(filterStr.toLowerCase());
+		case FilterOptionsEnum.nc:
+			return !valueStr.toLowerCase().includes(filterStr.toLowerCase());
+		default:
+			return false;
+	}
 };
 
 const numberFilter = (filterOption, filterValue, value) => {
@@ -78,19 +78,39 @@ const applyFilter = (filterValue, value, filterFn) => {
 	}));
 
 	filters.forEach((filter) => {
-		result = result && (filter.value ? filterFn(filter.option, filter.value, value) : true);
+		result =
+			result &&
+			(filter.value !== undefined && filter.value !== '' && filter.value !== null
+				? filterFn(filter.option, filter.value, value)
+				: true);
 	});
 
 	return result;
 };
 
+const booleanFilter = (filterOption, filterValue, value) => {
+	const filterBool = typeof filterValue === 'string' ? filterValue === 'true' : !!filterValue;
+	const valBool = !!value;
+
+	switch (filterOption) {
+		case FilterOptionsEnum.e:
+			return valBool === filterBool;
+		case FilterOptionsEnum.ne:
+			return valBool !== filterBool;
+		default:
+			return false;
+	}
+};
+
 export const columnFilter: ColumnFilterFn = ({ filterValue, value }) => {
 	if (typeof value === 'object' && value instanceof Date) {
 		return applyFilter(filterValue, value, dateFilter);
-	} else if (typeof value === 'number') {
+	} else if (typeof value === 'number' || typeof value === 'bigint') {
 		return applyFilter(filterValue, value, numberFilter);
 	} else if (typeof value === 'string') {
 		return applyFilter(filterValue, value, textFilter);
+	} else if (typeof value === 'boolean') {
+		return applyFilter(filterValue, value, booleanFilter);
 	}
 
 	return false;

package/src/lib/components/Table/tableWorker.js

@@ -0,0 +1,179 @@
+// @ts-nocheck
+// Lightweight web worker that stores rows in IndexedDB and answers simple queries
+const DB_PREFIX = 'table-db-';
+
+function openDB(name) {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_PREFIX + name, 1);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains('rows')) {
+        db.createObjectStore('rows', { keyPath: '__id', autoIncrement: true });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+async function clearStore(db) {
+  return new Promise((res, rej) => {
+    const tx = db.transaction('rows', 'readwrite');
+    const store = tx.objectStore('rows');
+    const r = store.clear();
+    r.onsuccess = () => res(undefined);
+    r.onerror = () => rej(r.error);
+  });
+}
+
+async function bulkInsert(db, rows) {
+  return new Promise((res, rej) => {
+    const tx = db.transaction('rows', 'readwrite');
+    const store = tx.objectStore('rows');
+    for (let i = 0; i < rows.length; i++) {
+      // wrap row to avoid clashes with internal __id
+      const toPut = { __r: rows[i] };
+      store.add(toPut);
+    }
+    tx.oncomplete = () => res(undefined);
+    tx.onerror = () => rej(tx.error);
+  });
+}
+
+function matches(rowObj, q, filters) {
+  const row = rowObj.__r || rowObj;
+  // full text query
+  if (q && q.length > 0) {
+    const ql = String(q).toLowerCase();
+    let found = false;
+    for (const k in row) {
+      const v = row[k];
+      if (v == null) continue;
+      if (typeof v === 'string' && v.toLowerCase().includes(ql)) {
+        found = true;
+        break;
+      }
+      if (typeof v === 'number' && String(v).includes(ql)) {
+        found = true;
+        break;
+      }
+    }
+    if (!found) return false;
+  }
+
+  // simple equality filters: filters is array of {column, filterBy, value}
+  if (filters && filters.length > 0) {
+    for (const f of filters) {
+      const col = (f.column || '').replaceAll('%%%', '.');
+      const val = f.value;
+      const actual = row[col] ?? row[f.column] ?? row[col.replaceAll('.', '%%%')];
+      if (val == null) continue;
+      if (typeof actual === 'string') {
+        if (!String(actual).toLowerCase().includes(String(val).toLowerCase())) return false;
+      } else if (typeof actual === 'number') {
+        if (Number(val) !== actual) return false;
+      } else {
+        if (actual !== val) return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+// handle messages
+let dbs = {};
+let initCounts = {};
+self.addEventListener('message', async (e) => {
+  const { type, payload } = e.data;
+  try {
+    if (type === 'init-start') {
+      const { tableId } = payload;
+      const db = await openDB(tableId);
+      await clearStore(db);
+      dbs[tableId] = db;
+      initCounts[tableId] = 0;
+      postMessage({ type: 'init-ack', payload: { tableId } });
+      return;
+    }
+
+    if (type === 'init-chunk') {
+      const { tableId, rows } = payload;
+      const db = dbs[tableId] || (await openDB(tableId));
+      await bulkInsert(db, rows);
+      initCounts[tableId] = (initCounts[tableId] || 0) + rows.length;
+      postMessage({ type: 'init-progress', payload: { tableId, inserted: initCounts[tableId] } });
+      return;
+    }
+
+    if (type === 'init-done') {
+      const { tableId } = payload;
+      const total = initCounts[tableId] || 0;
+      postMessage({ type: 'inited', payload: { tableId, count: total } });
+      delete initCounts[tableId];
+      return;
+    }
+
+    if (type === 'init') {
+      const { tableId, rows } = payload;
+      const db = await openDB(tableId);
+      await clearStore(db);
+      // insert in chunks to avoid blocking
+      const CHUNK = 1000;
+      for (let i = 0; i < rows.length; i += CHUNK) {
+        const chunk = rows.slice(i, i + CHUNK);
+        await bulkInsert(db, chunk);
+      }
+      dbs[tableId] = db;
+      postMessage({ type: 'inited', payload: { tableId, count: rows.length } });
+    }
+
+    if (type === 'query') {
+      const { tableId, q, filters = [], offset = 0, limit = 100 } = payload;
+      const db = dbs[tableId] || (await openDB(tableId));
+      dbs[tableId] = db;
+
+      const tx = db.transaction('rows', 'readonly');
+      const store = tx.objectStore('rows');
+      const req = store.openCursor();
+
+      const results = [];
+      let total = 0;
+      let skipped = 0;
+
+      await new Promise((res, rej) => {
+        req.onsuccess = (evt) => {
+          const cursor = evt.target.result;
+          if (!cursor) {
+            res();
+            return;
+          }
+          const rec = cursor.value;
+          if (matches(rec, q, filters)) {
+            total++;
+            if (skipped < offset) {
+              skipped++;
+            } else if (results.length < limit) {
+              results.push(rec.__r || rec);
+            }
+          }
+          cursor.continue();
+        };
+        req.onerror = () => rej(req.error);
+      });
+
+      postMessage({ type: 'result', payload: { tableId, rows: results, total } });
+    }
+
+    if (type === 'clear') {
+      const { tableId } = payload;
+      const db = dbs[tableId] || (await openDB(tableId));
+      await clearStore(db);
+      postMessage({ type: 'cleared', payload: { tableId } });
+    }
+  } catch (err) {
+    postMessage({ type: 'error', payload: { message: err?.message ?? String(err) } });
+  }
+});
+
+export {};