@bexis2/bexis2-core-ui 0.4.0 → 0.4.1

package/README.md

@@ -1,4 +1,17 @@
 # bexis-core-ui
+## 0.4.1
+- table
+  - Server-side searching
+  - Case-insensitive filtering of missing values
+  - Date formatting for display patterns
+  - Handle missing values regardless of the data type
+
+## 0.4.0
+-  update dependency libaries
+   -  svelte
+   -  sveltekit
+   -  vite
+
 ## 0.3.13
 ## 0.3.12
 - table

package/dist/components/Table/TableContent.svelte

@@ -14,6 +14,7 @@ import {
 import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 import { SlideToggle, storePopup } from "@skeletonlabs/skeleton";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+import Spinner from "../page/Spinner.svelte";
 import TableFilter from "./TableFilter.svelte";
 import TableFilterServer from "./TableFilterServer.svelte";
 import TablePagination from "./TablePagination.svelte";
@@ -68,6 +69,7 @@ let {
   // Version ID to send with the request
 } = config;
 let searchValue = "";
+let isFetching = false;
 const filters = writable({});
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
@@ -167,7 +169,9 @@ const tableColumns = [
                 tableId,
                 values,
                 toFilterableValueFn,
-                filters
+                filters,
+                toStringFn,
+                pageIndex
               });
             }
           } : void 0,
@@ -205,7 +209,8 @@ const tableColumns = [
                 id,
                 tableId,
                 values,
-                filters
+                filters,
+                pageIndex
               });
             }
           }
@@ -244,14 +249,25 @@ const updateTable = async () => {
   sendModel.version = versionId;
   sendModel.id = entityId;
   sendModel.filter = normalizeFilters($filters);
-  const fetchData = await fetch(URL, {
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`
-    },
-    method: "POST",
-    body: JSON.stringify(sendModel)
-  });
+  let fetchData;
+  try {
+    isFetching = true;
+    fetchData = await fetch(URL, {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`
+      },
+      method: "POST",
+      body: JSON.stringify(sendModel)
+    });
+  } catch (error) {
+    throw new Error(`Network error: ${error.message}`);
+  } finally {
+    isFetching = false;
+  }
+  if (!fetchData.ok) {
+    throw new Error("Failed to fetch data");
+  }
   const response = await fetchData.json();
   if (response.columns !== void 0) {
     columns = convertServerColumns(response.columns);
@@ -282,7 +298,13 @@ $:
 		<!-- Enable the search filter if table is not empty -->
 		{#if $data.length > 0}
 			{#if !serverSide}
-				<div class="flex gap-2">
+				<form
+					class="flex gap-2"
+					on:submit|preventDefault={() => {
+						sendModel.q = searchValue;
+						$filterValue = searchValue;
+					}}
+				>
 					<div class="relative w-full flex items-center">
 						<input
 							class="input p-2 border border-primary-500"
@@ -295,18 +317,20 @@ $:
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
 								searchValue = '';
+								sendModel.q = '';
 								$filterValue = '';
 							}}><Fa icon={faXmark} /></button
 						>
 					</div>
 					<button
-						type="button"
+						type="submit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
 							$filterValue = searchValue;
+							sendModel.q = searchValue;
 						}}>Search</button
 					>
-				</div>
+				</form>
 			{/if}
 			<div class="flex justify-between items-center py-2 w-full">
 				<div>
@@ -407,6 +431,8 @@ $:
 								</tr>
 							</Subscribe>
 						{/each}
+					{:else if isFetching}
+						<div class="p-10"><Spinner /></div>
 					{:else}
 						<!-- Table is empty -->
 						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>

package/dist/components/Table/TableFilter.svelte

@@ -6,9 +6,24 @@ export let values;
 export let id;
 export let tableId;
 export let toFilterableValueFn = void 0;
+export let toStringFn = void 0;
 export let filterValue;
 export let filters;
+export let pageIndex;
 let active = false;
+let type = "string";
+let isDate = false;
+let dropdowns = [];
+$values.forEach((item) => {
+  if (item) {
+    type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+    if (type === "object") {
+      if (item instanceof Date) {
+        isDate = true;
+      }
+    }
+  }
+});
 const options = {
   number: [
     {
@@ -89,28 +104,37 @@ const options = {
     }
   ]
 };
-let dropdowns = [];
 const popupId = `${tableId}-${id}`;
 const popupFeatured = {
   event: "click",
   target: popupId,
   placement: "bottom-start"
 };
-let type = "string";
-let isDate = false;
-$values.forEach((item) => {
-  if (item) {
-    type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
-    if (type === "object") {
-      if (item instanceof Date) {
-        isDate = true;
-      }
-    }
-  }
-});
+const stringValues = (
+  // type === 'number' ?
+  $values.map((item) => toStringFn ? toStringFn(item) : item)
+);
+const missingValues = (
+  // type === 'number' ?
+  stringValues.reduce((acc, item, index) => {
+    acc[typeof item === "string" ? item.toLowerCase() : item] = $values[index];
+    return acc;
+  }, {})
+);
+const getMissingValue = (value) => {
+  return Object.keys(missingValues).includes(value.toLowerCase()) ? missingValues[value.toLowerCase()] : value;
+};
 const optionChangeHandler = (e, index) => {
   delete $filters[id][dropdowns[index].option];
-  $filters[id] = { ...$filters[id], [e.target.value]: dropdowns[index].value };
+  $filters[id] = {
+    ...$filters[id],
+    [e.target.value]: (
+      // type === 'number'
+      // ?
+      getMissingValue(dropdowns[index].value)
+    )
+    // : dropdowns[index].value
+  };
   $filters = $filters;
   dropdowns[index] = {
     ...dropdowns[index],
@@ -120,11 +144,18 @@ const optionChangeHandler = (e, index) => {
 const valueChangeHandler = (e, index) => {
   dropdowns[index] = {
     ...dropdowns[index],
-    value: type === "number" ? +e.target.value : type === "date" ? new Date(e.target.value) : e.target.value
+    value: type === "date" ? new Date(e.target.value) : e.target.value
   };
   $filters = {
     ...$filters,
-    [id]: { ...$filters[id], [dropdowns[index].option]: dropdowns[index].value }
+    [id]: {
+      ...$filters[id],
+      [dropdowns[index].option]: (
+        // type === 'number' ?
+        getMissingValue(e.target.value)
+      )
+      //  : dropdowns[index].value
+    }
   };
 };
 const addFilter = (option, value) => {
@@ -178,6 +209,7 @@ $:
 					addFilter(options[type][0].value, undefined);
 					$filterValue = $filters[id];
 					active = false;
+					$pageIndex = 0;
 				}}>Clear Filters</button
 			>
 
@@ -212,14 +244,7 @@ $:
 							{/if}
 						</div>
 
-						{#if type === 'number'}
-							<input
-								type="number"
-								class="input p-1 border border-primary-500"
-								on:input={(e) => valueChangeHandler(e, index)}
-								bind:value={dropdown.value}
-							/>
-						{:else if type === 'string'}
+						{#if type === 'number' || type === 'string'}
 							<input
 								type="text"
 								class="input p-1 border border-primary-500"
@@ -258,6 +283,7 @@ $:
 				class="btn variant-filled-primary btn-sm"
 				type="button"
 				on:click|preventDefault={() => {
+					$pageIndex = 0;
 					$filterValue = $filters[id];
 					active = true;
 				}}>Apply</button

package/dist/components/Table/TableFilter.svelte.d.ts

@@ -5,8 +5,10 @@ declare const __propDef: {
         id: any;
         tableId: any;
         toFilterableValueFn?: ((value: any) => any) | undefined;
+        toStringFn?: ((value: any) => string) | undefined;
         filterValue: any;
         filters: any;
+        pageIndex: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Table/shared.js

@@ -1,3 +1,4 @@
+import dateFormat from 'dateformat';
 // Function to determine minWidth for a column to simplify the logic in the HTML
 export const minWidth = (id, columns) => {
     if (columns && id in columns) {
@@ -94,14 +95,13 @@ export const convertServerColumns = (columns) => {
     const columnsConfig = {};
     columns.forEach((col) => {
         let instructions = {};
-        // if (col.instructions?.displayPattern) {
-        // 	instructions = {
-        // 		toStringFn: (date: Date) =>
-        // 			date.toLocaleString('en-US', col.instructions?.displayPattern || {}),
-        // 		toSortableValueFn: (date: Date) => date.getTime(),
-        // 		toFilterableValueFn: (date: Date) => date
-        // 	};
-        // }
+        if (col.instructions?.displayPattern) {
+            instructions = {
+                toStringFn: (date) => dateFormat(date, col.instructions?.displayPattern || ''),
+                toSortableValueFn: (date) => date.getTime(),
+                toFilterableValueFn: (date) => date
+            };
+        }
         if (col.instructions?.missingValues) {
             instructions = {
                 ...instructions,

package/dist/models/Models.d.ts

@@ -152,6 +152,7 @@ export declare class Send {
     id: number;
     limit: number;
     offset: number;
+    q: string;
     version?: number;
     filter: Filter[];
     order: OrderBy[];

package/dist/models/Models.js

@@ -2,6 +2,7 @@ export class Send {
     id;
     limit;
     offset;
+    q;
     version;
     filter;
     order;
@@ -10,6 +11,7 @@ export class Send {
         this.limit = 10;
         this.offset = 0;
         this.version = 0;
+        this.q = '';
         this.filter = [];
         this.order = [];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -73,6 +73,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "axios": "^1.6.7",
     "codemirror": "^6.0.1",
+    "dateformat": "^5.0.3",
     "delay": "^6.0.0",
     "dotenv": "^16.4.5",
     "eslint4b-prebuilt": "^6.7.2",

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

@@ -19,6 +19,7 @@
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
+	import Spinner from '../page/Spinner.svelte';
 	import TableFilter from './TableFilter.svelte';
 	import TableFilterServer from './TableFilterServer.svelte';
 	import TablePagination from './TablePagination.svelte';
@@ -61,6 +62,7 @@
 	} = config;
 
 	let searchValue = '';
+	let isFetching = false;
 
 	const filters = writable<{
 		[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
@@ -194,7 +196,9 @@
 														tableId,
 														values,
 														toFilterableValueFn,
-														filters
+														filters,
+														toStringFn,
+														pageIndex
 												  });
 										}
 								  }
@@ -237,7 +241,8 @@
 												id,
 												tableId,
 												values,
-												filters
+												filters,
+												pageIndex
 										  });
 								}
 							}
@@ -280,7 +285,6 @@
 	// Page configuration
 	const { pageIndex, pageSize } = pluginStates.page;
 
-	// TODO: Add loading animation for server-side fetch requests
 	const updateTable = async () => {
 		sendModel.limit = $pageSize;
 		sendModel.offset = $pageSize * $pageIndex;
@@ -288,14 +292,27 @@
 		sendModel.id = entityId;
 		sendModel.filter = normalizeFilters($filters);
 
-		const fetchData = await fetch(URL, {
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${token}`
-			},
-			method: 'POST',
-			body: JSON.stringify(sendModel)
-		});
+		let fetchData;
+
+		try {
+			isFetching = true;
+			fetchData = await fetch(URL, {
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${token}`
+				},
+				method: 'POST',
+				body: JSON.stringify(sendModel)
+			});
+		} catch (error) {
+			throw new Error(`Network error: ${(error as Error).message}`);
+		} finally {
+			isFetching = false;
+		}
+
+		if (!fetchData.ok) {
+			throw new Error('Failed to fetch data');
+		}
 
 		const response: Receive = await fetchData.json();
 
@@ -335,7 +352,13 @@
 		<!-- Enable the search filter if table is not empty -->
 		{#if $data.length > 0}
 			{#if !serverSide}
-				<div class="flex gap-2">
+				<form
+					class="flex gap-2"
+					on:submit|preventDefault={() => {
+						sendModel.q = searchValue;
+						$filterValue = searchValue;
+					}}
+				>
 					<div class="relative w-full flex items-center">
 						<input
 							class="input p-2 border border-primary-500"
@@ -348,18 +371,20 @@
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
 								searchValue = '';
+								sendModel.q = '';
 								$filterValue = '';
 							}}><Fa icon={faXmark} /></button
 						>
 					</div>
 					<button
-						type="button"
+						type="submit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
 							$filterValue = searchValue;
+							sendModel.q = searchValue;
 						}}>Search</button
 					>
-				</div>
+				</form>
 			{/if}
 			<div class="flex justify-between items-center py-2 w-full">
 				<div>
@@ -460,6 +485,8 @@
 								</tr>
 							</Subscribe>
 						{/each}
+					{:else if isFetching}
+						<div class="p-10"><Spinner /></div>
 					{:else}
 						<!-- Table is empty -->
 						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>

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

@@ -10,13 +10,33 @@
 	export let id;
 	export let tableId;
 	export let toFilterableValueFn: undefined | ((value: any) => any) = undefined;
+	export let toStringFn: undefined | ((value: any) => string) = undefined;
 	export let filterValue;
 	export let filters;
+	export let pageIndex;
 
 	// If the filter is applied and the displayed values are filtered
 	let active = false;
+	let type: string = 'string';
+	let isDate = false; // Options for different types of values
+	let dropdowns: {
+		option: FilterOptionsEnum;
+		value: string | number | Date | undefined;
+	}[] = [];
+
+	// Check the type of the column
+	$values.forEach((item) => {
+		if (item) {
+			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+
+			if (type === 'object') {
+				if (item instanceof Date) {
+					isDate = true;
+				}
+			}
+		}
+	});
 
-	// Options for different types of values
 	const options = {
 		number: [
 			{
@@ -98,11 +118,6 @@
 		]
 	};
 
-	let dropdowns: {
-		option: FilterOptionsEnum;
-		value: string | number | Date | undefined;
-	}[] = [];
-
 	// Unique ID for the column filter popup
 	const popupId = `${tableId}-${id}`;
 	// Popup config
@@ -112,24 +127,39 @@
 		placement: 'bottom-start'
 	};
 
-	let type: string = 'string';
-	let isDate = false;
-	// Check the type of the column
-	$values.forEach((item) => {
-		if (item) {
-			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+	// Converted string values and missingValues mapping
+	const stringValues =
+		// type === 'number' ?
+		$values.map((item) => (toStringFn ? toStringFn(item) : item));
+	// : [];
 
-			if (type === 'object') {
-				if (item instanceof Date) {
-					isDate = true;
-				}
-			}
-		}
-	});
+	const missingValues =
+		// type === 'number' ?
+		stringValues.reduce((acc, item, index) => {
+			acc[typeof item === 'string' ? item.toLowerCase() : item] = $values[index];
+			return acc;
+		}, {});
+	// : {};
+
+	const getMissingValue = (value: string) => {
+		// if (type === 'number' ||) {
+		return Object.keys(missingValues).includes(value.toLowerCase())
+			? missingValues[value.toLowerCase()]
+			: value;
+		// }
+		// return value;
+	};
 
 	const optionChangeHandler = (e, index) => {
 		delete $filters[id][dropdowns[index].option];
-		$filters[id] = { ...$filters[id], [e.target.value]: dropdowns[index].value };
+		$filters[id] = {
+			...$filters[id],
+			[e.target.value]:
+				// type === 'number'
+				// ?
+				getMissingValue(dropdowns[index].value as string)
+			// : dropdowns[index].value
+		};
 		$filters = $filters;
 
 		dropdowns[index] = {
@@ -141,17 +171,18 @@
 	const valueChangeHandler = (e, index) => {
 		dropdowns[index] = {
 			...dropdowns[index],
-			value:
-				type === 'number'
-					? +e.target.value
-					: type === 'date'
-					? new Date(e.target.value)
-					: e.target.value
+			value: type === 'date' ? new Date(e.target.value) : e.target.value
 		};
 
 		$filters = {
 			...$filters,
-			[id]: { ...$filters[id], [dropdowns[index].option]: dropdowns[index].value }
+			[id]: {
+				...$filters[id],
+				[dropdowns[index].option]:
+					// type === 'number' ?
+					getMissingValue(e.target.value)
+				//  : dropdowns[index].value
+			}
 		};
 	};
 
@@ -212,6 +243,7 @@
 					addFilter(options[type][0].value, undefined);
 					$filterValue = $filters[id];
 					active = false;
+					$pageIndex = 0;
 				}}>Clear Filters</button
 			>
 
@@ -246,14 +278,7 @@
 							{/if}
 						</div>
 
-						{#if type === 'number'}
-							<input
-								type="number"
-								class="input p-1 border border-primary-500"
-								on:input={(e) => valueChangeHandler(e, index)}
-								bind:value={dropdown.value}
-							/>
-						{:else if type === 'string'}
+						{#if type === 'number' || type === 'string'}
 							<input
 								type="text"
 								class="input p-1 border border-primary-500"
@@ -292,6 +317,7 @@
 				class="btn variant-filled-primary btn-sm"
 				type="button"
 				on:click|preventDefault={() => {
+					$pageIndex = 0;
 					$filterValue = $filters[id];
 					active = true;
 				}}>Apply</button

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

@@ -1,3 +1,5 @@
+import dateFormat from 'dateformat';
+
 import type { FilterOptionsEnum } from '$models/Enums';
 import type { Columns, Filter, ServerColumn } from '$models/Models';
 
@@ -115,14 +117,13 @@ export const convertServerColumns = (columns: ServerColumn[]) => {
 	columns.forEach((col) => {
 		let instructions = {};
 
-		// if (col.instructions?.displayPattern) {
-		// 	instructions = {
-		// 		toStringFn: (date: Date) =>
-		// 			date.toLocaleString('en-US', col.instructions?.displayPattern || {}),
-		// 		toSortableValueFn: (date: Date) => date.getTime(),
-		// 		toFilterableValueFn: (date: Date) => date
-		// 	};
-		// }
+		if (col.instructions?.displayPattern) {
+			instructions = {
+				toStringFn: (date: Date) => dateFormat(date, col.instructions?.displayPattern || ''),
+				toSortableValueFn: (date: Date) => date.getTime(),
+				toFilterableValueFn: (date: Date) => date
+			};
+		}
 
 		if (col.instructions?.missingValues) {
 			instructions = {

package/src/lib/models/Models.ts

@@ -190,6 +190,7 @@ export class Send {
 	id: number;
 	limit: number;
 	offset: number;
+	q: string;
 	version?: number;
 	filter: Filter[];
 	order: OrderBy[];
@@ -199,6 +200,7 @@ export class Send {
 		this.limit = 10;
 		this.offset = 0;
 		this.version = 0;
+		this.q = '';
 		this.filter = [];
 		this.order = [];
 	}