Merge pull request #84 from BEXIS2/table

Server-side searching and enhancements

Author: DavidBlaa

package-lock.json

@@ -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.json

@@ -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,22 +285,34 @@
 	// 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;
 		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 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>

src/lib/components/Table/TableContent.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

src/lib/components/Table/TableFilter.svelte

@@ -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 = {

src/lib/components/Table/shared.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 = [];
 	}