@bexis2/bexis2-core-ui 0.4.96 → 0.4.97

package/dist/components/Table/TableContent.svelte

@@ -1,5 +1,5 @@
 <script>import { afterUpdate, createEventDispatcher, onDestroy, onMount } from "svelte";
-import { readable, writable } from "svelte/store";
+import { writable } from "svelte/store";
 import Fa from "svelte-fa";
 import { faCompress, faDownload, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { createTable, Subscribe, Render, createRender } from "svelte-headless-table";
@@ -21,6 +21,7 @@ import TableFilterServer from "./TableFilterServer.svelte";
 import TablePagination from "./TablePagination.svelte";
 import TablePaginationServer from "./TablePaginationServer.svelte";
 import ColumnsMenu from "./ColumnsMenu.svelte";
+import ClientDB from "./clientDB.js";
 import * as utils from "./utils";
 import { columnFilter, searchFilter } from "./filter";
 import { Send } from "../../models/Models";
@@ -56,20 +57,27 @@ let {
   // Whether to display the export button and enable export functionality
   server
 } = config;
+const clientDb = config.clientDb ?? false;
+const clientDbSeedData = config.clientDbSeedData ?? [];
+const initialServerCount = Number(config.__initialServerCount ?? 0);
 let searchValue = "";
 let isFetching = false;
 let tableRef;
-const serverSide = server !== void 0;
+let serverItemCountValue = Number.isFinite(initialServerCount) ? initialServerCount : 0;
+const serverSide = server !== void 0 || clientDb;
+let _clientDbInstance = null;
+let clientDbEnabled = clientDb;
+let clientDbReady = false;
+let clientDbInitSource = [];
+let clientDbSeedSize = 0;
 const { sendModel = new Send() } = server ?? {};
 const filters = writable({});
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
 const rowHeights = writable({});
 const colWidths = writable([]);
-const serverItems = serverSide ? writable(0) : void 0;
-const serverItemCount = serverSide ? readable(0, (set) => {
-  serverItems.subscribe((val) => set(val));
-}) : void 0;
+const serverItems = serverSide ? writable(Number.isFinite(initialServerCount) ? initialServerCount : 0) : void 0;
+const serverItemCount = serverItems;
 const table = createTable(data, {
   colFilter: addColumnFilters(),
   tableFilter: addTableFilter({
@@ -90,13 +98,22 @@ const table = createTable(data, {
   export: addDataExport({ format: "json" })
 });
 const allCols = {};
-$data.forEach((item) => {
-  Object.keys(item).forEach((key) => {
-    if (!allCols[key]) {
-      allCols[key] = {};
+if (columns && Object.keys(columns).length > 0) {
+  Object.keys(columns).forEach((key) => {
+    if (optionsComponent !== void 0 && key === "optionsColumn") {
+      return;
     }
+    allCols[key] = {};
   });
-});
+} else {
+  $data.forEach((item) => {
+    Object.keys(item).forEach((key) => {
+      if (!allCols[key]) {
+        allCols[key] = {};
+      }
+    });
+  });
+}
 Object.keys(allCols).forEach((key) => {
   $filters = { ...$filters, [key]: {} };
 });
@@ -226,10 +243,21 @@ const tableColumns = [
     }
   })
 ];
+const getUniqueOptionsColumnId = () => {
+  const used = new Set(unexcludedColumns.map((col) => String(col)));
+  let id = "optionsColumn";
+  let i = 1;
+  while (used.has(id)) {
+    id = `optionsColumn_${i}`;
+    i += 1;
+  }
+  return id;
+};
 if (optionsComponent !== void 0) {
+  const optionsColumnId = getUniqueOptionsColumnId();
   tableColumns.push(
     table.display({
-      id: "optionsColumn",
+      id: optionsColumnId,
       header: "",
       plugins: {
         export: {
@@ -251,7 +279,7 @@ const { filterValue } = pluginStates.tableFilter;
 const { exportedData } = pluginStates.export;
 const { pageIndex, pageSize } = pluginStates.page;
 const { hiddenColumnIds } = pluginStates.hideColumns;
-let prevSort = void 0;
+let prevSort = [];
 const sortServer = (order, id) => {
   if (!sendModel) throw new Error("Server-side configuration is missing");
   if (order === void 0) {
@@ -259,19 +287,137 @@ const sortServer = (order, id) => {
   } else {
     sendModel.order = [{ column: id, direction: order }];
   }
-  if (JSON.stringify(sendModel.order) !== JSON.stringify(prevSort) && prevSort !== void 0) {
+  if (JSON.stringify(sendModel.order) !== JSON.stringify(prevSort)) {
     $pageIndex = 0;
     $data = [];
     updateTableWithParams();
   }
-  if (order === void 0) {
-    prevSort = [];
-  } else {
-    prevSort = sendModel.order;
-  }
+  prevSort = sendModel.order ? [...sendModel.order] : [];
 };
 const updateTableWithParams = async () => {
-  if ($data.length > 0 && serverSide) {
+  if (clientDbEnabled) {
+    isFetching = true;
+    const filtersNormalized = utils.normalizeFilters($filters);
+    const q = sendModel?.q || "";
+    const offset2 = $pageSize * $pageIndex;
+    const limit = $pageSize;
+    if (!_clientDbInstance) {
+      _clientDbInstance = new ClientDB(tableId);
+    }
+    if (!clientDbReady) {
+      const source = clientDbInitSource.length > 0 ? clientDbInitSource : $data;
+      const getValue = (row, column) => {
+        const dot = String(column || "").replaceAll("%%%", ".");
+        return row[dot] ?? row[column] ?? row[dot.replaceAll(".", "%%%")];
+      };
+      const localMatches = (row) => {
+        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 (String(v).toLowerCase().includes(ql)) {
+              found = true;
+              break;
+            }
+          }
+          if (!found) return false;
+        }
+        for (const f of filtersNormalized) {
+          const actual = getValue(row, f.column);
+          const val = f.value;
+          if (val == null) continue;
+          const aStr = String(actual ?? "").toLowerCase();
+          const vStr = String(val ?? "").toLowerCase();
+          const aNum = Number(actual);
+          const vNum = Number(val);
+          const aDate = new Date(actual).getTime();
+          const vDate = new Date(val).getTime();
+          switch (f.filterBy) {
+            case "c":
+              if (!aStr.includes(vStr)) return false;
+              break;
+            case "nc":
+              if (aStr.includes(vStr)) return false;
+              break;
+            case "sw":
+              if (!aStr.startsWith(vStr)) return false;
+              break;
+            case "ew":
+              if (!aStr.endsWith(vStr)) return false;
+              break;
+            case "e":
+              if (actual != val) return false;
+              break;
+            case "ne":
+              if (actual == val) return false;
+              break;
+            case "gt":
+              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum > vNum)) return false;
+              break;
+            case "lt":
+              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum < vNum)) return false;
+              break;
+            case "gte":
+              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum >= vNum)) return false;
+              break;
+            case "lte":
+              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum <= vNum)) return false;
+              break;
+            case "o":
+              if (Number.isNaN(aDate) || Number.isNaN(vDate) || aDate !== vDate) return false;
+              break;
+            case "sf":
+            case "a":
+              if (Number.isNaN(aDate) || Number.isNaN(vDate) || !(aDate >= vDate)) return false;
+              break;
+            case "u":
+            case "b":
+              if (Number.isNaN(aDate) || Number.isNaN(vDate) || !(aDate <= vDate)) return false;
+              break;
+            case "no":
+              if (Number.isNaN(aDate) || Number.isNaN(vDate) || aDate === vDate) return false;
+              break;
+          }
+        }
+        return true;
+      };
+      const filtered = source.filter(localMatches);
+      const order = sendModel?.order || [];
+      if (order.length > 0) {
+        const { column, direction } = order[0];
+        const dir = direction === "desc" ? -1 : 1;
+        filtered.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;
+          return String(av).localeCompare(String(bv)) * dir;
+        });
+      }
+      const localRows = filtered.slice(offset2, offset2 + limit);
+      serverItems?.set(filtered.length);
+      data.set(localRows);
+      isFetching = false;
+      return { rows: localRows, total: filtered.length };
+    }
+    const res = await _clientDbInstance.query({
+      q,
+      filters: filtersNormalized,
+      order: sendModel?.order || [],
+      offset: offset2,
+      limit
+    });
+    const payload = res.payload ? res.payload : res;
+    serverItems?.set(payload.total ?? payload.totalCount ?? 0);
+    data.set(payload.rows ?? []);
+    isFetching = false;
+    return payload;
+  }
+  if ($data.length > 0 && serverSide && Number($serverItemCount) > 0) {
     console.log("Table is not empty");
     return;
   }
@@ -332,6 +478,9 @@ afterUpdate(() => {
   if (resizable !== "rows" && resizable !== "both") {
     return;
   }
+  if (!$pageRows || $pageRows.length === 0) {
+    return;
+  }
   const e = tableRef?.querySelector(`#${tableId}-row-${$pageRows[0].id}`);
   if (e) {
     getDimensions();
@@ -340,10 +489,45 @@ afterUpdate(() => {
 onDestroy(() => {
   resizeColumnsObserver.disconnect();
   resizeRowsObserver.disconnect();
+  if (_clientDbInstance) {
+    try {
+      _clientDbInstance.destroy();
+    } catch (e) {
+    }
+  }
 });
 $: sortKeys = pluginStates.sort.sortKeys;
-onMount(() => {
-  if (serverSide) {
+$: serverItemCountValue = clientDbEnabled ? Number($serverItemCount) > 0 ? Math.max(
+  Number($serverItemCount),
+  initialServerCount,
+  clientDbSeedSize,
+  clientDbInitSource.length,
+  $data.length
+) : Math.max(initialServerCount, clientDbSeedSize, clientDbInitSource.length, $data.length) : Number($serverItemCount);
+onMount(async () => {
+  if (clientDbEnabled) {
+    const seed = Array.isArray(clientDbSeedData) ? clientDbSeedData : [];
+    const hasSeed = seed.length > 0;
+    clientDbSeedSize = seed.length;
+    if (hasSeed || $data && $data.length > 0) {
+      clientDbInitSource = hasSeed ? [...seed] : [...$data];
+      const firstPage = clientDbInitSource.slice(0, $pageSize);
+      serverItems?.set(clientDbInitSource.length);
+      data.set(firstPage);
+      _clientDbInstance = new ClientDB(tableId);
+      _clientDbInstance.init(clientDbInitSource).then(async () => {
+        const result = await updateTableWithParams();
+        clientDbReady = true;
+        clientDbInitSource = [];
+        return result;
+      }).catch(() => {
+        clientDbReady = false;
+      });
+    } else if (!_clientDbInstance) {
+      _clientDbInstance = new ClientDB(tableId);
+    }
+  }
+  if (server !== void 0) {
     updateTableWithParams();
   }
 });
@@ -358,14 +542,19 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 			{#if search}
 				<form
 					class="flex gap-2"
-					on:submit|preventDefault={() => {
+					on:submit|preventDefault={async () => {
 						if (serverSide && !sendModel) {
 							throw new Error('Server-side configuration is missing');
 						} else {
 							sendModel.q = searchValue;
 						}
 
+						$pageIndex = 0;
 						$filterValue = searchValue;
+						if (serverSide) {
+							$data = [];
+							await updateTableWithParams();
+						}
 					}}
 				>
 					<div class="relative w-full flex items-center">
@@ -383,15 +572,20 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							aria-label="Clear search"
-							on:click|preventDefault={() => {
+							on:click|preventDefault={async () => {
 								if (serverSide && !sendModel) {
 									throw new Error('Server-side configuration is missing');
 								} else {
 									sendModel.q = '';
 								}
 
+								$pageIndex = 0;
 								searchValue = '';
 								$filterValue = '';
+								if (serverSide) {
+									$data = [];
+									await updateTableWithParams();
+								}
 							}}><Fa icon={faXmark} /></button
 						>
 					</div>
@@ -401,14 +595,19 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						aria-label="Search"
-						on:click|preventDefault={() => {
+						on:click|preventDefault={async () => {
 							if (serverSide && !sendModel) {
 								throw new Error('Server-side configuration is missing');
 							} else {
 								sendModel.q = searchValue;
 							}
 
+							$pageIndex = 0;
 							$filterValue = searchValue;
+							if (serverSide) {
+								$data = [];
+								await updateTableWithParams();
+							}
 						}}>Search</button
 					>
 				</form>
@@ -530,7 +729,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 																			? `Remove sorting by ${cell.label} column`
 																			: `Sort by ${cell.label} column in ascending order`}
 															>
-																{cell.render().replaceAll('%%%', '.')}
+																{String(cell.render()).replaceAll('%%%', '.')}
 															</span>
 															<div class="w-2">
 																{#if props.sort.order === 'asc'}
@@ -625,7 +824,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 			<TablePaginationServer
 				pageConfig={pluginStates.page}
 				{pageSizes}
-				itemCount={$serverItemCount}
+				itemCount={serverItemCountValue}
 				updateTable={updateTableWithParams}
 				id={tableId}
 				{data}

package/dist/components/Table/TablePaginationServer.svelte

@@ -7,6 +7,17 @@ export let pageSizes;
 export let id;
 export let updateTable;
 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;
+  return Array.isArray($data) ? $data.length : 0;
+};
+let effectiveCount = 0;
 let indexInformation = "";
 const { pageIndex, pageCount, pageSize } = pageConfig;
 let pageSizeDropdownValue = $pageSize;
@@ -17,17 +28,19 @@ const pageSizePopup = {
   closeQuery: ".listbox-item"
 };
 const getIndexInfomationString = () => {
-  return itemCount === 0 ? "No items" : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
+  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() {
   $data = [];
   updateTable();
 }
+$: effectiveCount = getEffectiveCount();
 $: paginationSettings = {
-  size: itemCount,
+  size: effectiveCount,
   limit: $pageSize,
   page: $pageIndex,
   amounts: pageSizes
@@ -52,9 +65,12 @@ $: $pageCount, $pageIndex, $pageSize, itemCount, indexInformation = getIndexInfo
 				{#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>
@@ -63,7 +79,10 @@ $: $pageCount, $pageIndex, $pageSize, itemCount, indexInformation = getIndexInfo
 	</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/dist/components/Table/clientDB.d.ts

@@ -0,0 +1,22 @@
+export default class ClientDB {
+    constructor(tableId: any);
+    tableId: any;
+    db: any;
+    init(rows: any): Promise<{
+        tableId: any;
+        count: any;
+    }>;
+    query({ q, filters, order, offset, limit }?: {
+        q?: string | undefined;
+        filters?: never[] | undefined;
+        order?: never[] | undefined;
+        offset?: number | undefined;
+        limit?: number | undefined;
+    }): Promise<{
+        tableId: any;
+        rows: any[];
+        total: number;
+    }>;
+    clear(): Promise<void>;
+    destroy(): void;
+}