@bexis2/bexis2-core-ui 0.4.96 → 0.4.98

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,7 +78,11 @@ const applyFilter = (filterValue, value, filterFn) => {
 	}));
 
 	filters.forEach((filter) => {
-		result = result && (filter.value !== undefined && filter.value !== '' && filter.value !== null ? 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;

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 {};