@lavalogic/scoria 0.5.4 → 0.5.6

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -91,7 +91,7 @@
 	let valueMax: number | null = $state(null);
 
 	let selectedOptions: Array<SelectOption<unknown>> = $state([]);
-	let lastQueryOptions: Array<SelectOption<unknown>> = $state([]);
+	let lastQueryOptions: Array<SelectOption<string | number>> = $state([]);
 
 	const inputId = $derived(`${tableContext.tableName}-cell-quicksearch-${column.id}`);
 
@@ -115,7 +115,14 @@
 			return;
 		}
 		void filteringStateValue;
+		if (def.debug) {
+			console.log('filtering state value:', $state.snapshot(filteringStateValue));
+		}
 		if (hasQuery) {
+			if (def.debug) {
+				console.log('has query');
+			}
+
 			untrack(async () => {
 				const gotValue = filteringStateValue as unknown as
 					| Array<string | number | SelectOption<unknown>>
@@ -125,6 +132,9 @@
 					//  as unknown as string | number | undefined;
 
 					if (gotValue != undefined) {
+						if (def.debug) {
+							console.log(`query values:`, tableContext.dataRepo.__queryValues);
+						}
 						const key =
 							customFilter?.id ??
 							customFilter?.label ??
@@ -132,7 +142,16 @@
 							customFilter?.queryKey ??
 							def.id;
 						const x = key == null ? null : tableContext.dataRepo.__queryValues.get(key);
+
+						if (def.debug) {
+							console.log('value:', $state.snapshot(x));
+						}
 						value = (x ?? null) as SelectOption<unknown> | null;
+					} else if (def.debug) {
+						console.log(
+							'filtering state value was undefined',
+							$state.snapshot(tableContext.paginationRepo?.filtering)
+						);
 					}
 				} catch (e) {
 					console.warn(e);
@@ -140,6 +159,10 @@
 				}
 			});
 		} else if (isSelect) {
+			if (def.debug) {
+				console.log('is select (not query)');
+			}
+
 			if (!tableContext.paginationRepo?.filtering) {
 				return;
 			}
@@ -149,18 +172,34 @@
 				| undefined;
 
 			untrack(async () => {
-				const x = (await options).filter((it) => {
-					if (it.value == undefined) {
-						return true;
+				try {
+					const opts = await options;
+					if (def.debug) {
+						console.log('possible options:', $state.snapshot(opts));
 					}
+					const x = opts.filter((it) => {
+						if (it.value == undefined) {
+							return true;
+						}
 
-					if (typeof it.value == 'string' || typeof it.value == 'number') {
-						return (gotValue as unknown as Array<string | number> | undefined)?.includes(it.value);
-					}
+						if (typeof it.value == 'string' || typeof it.value == 'number') {
+							return (gotValue as unknown as Array<string | number> | undefined)?.includes(
+								it.value
+							);
+						}
+
+						return false;
+					});
 
-					return false;
-				});
-				selectedOptions = x;
+					if (def.debug) {
+						console.log('selected options:', x);
+					}
+					selectedOptions = x;
+				} catch (e) {
+					if (dev || def.debug) {
+						console.log(e);
+					}
+				}
 			});
 		} else if (isNumeric) {
 			if (
@@ -230,6 +269,21 @@
 
 	let showFromDateModal = $state(false);
 	let showToDateModal = $state(false);
+
+	function generateOnChangeObject(label: string) {
+		return (newValue: SelectOption<string | number> | null) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
+			tableContext.dataRepo.__queryValues.set(label, newValue);
+			value = newValue;
+		};
+	}
+	function generateOnChangePrimitive(label: string) {
+		return (newValue: SelectOption<string | number> | null) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue ?? null);
+			tableContext.dataRepo.__queryValues.set(label, newValue);
+			value = newValue as string | number | null;
+		};
+	}
 </script>
 
 <td class="input-cell {inputId}">
@@ -289,7 +343,7 @@
 				{/if}
 			{:else if isSelect}
 				{#if hasQuery}
-					{#if typeof value == 'object'}
+					{#if customFilter!.valueAsObject == false}
 						{@const label =
 							customFilter?.id ??
 							customFilter?.label ??
@@ -299,22 +353,36 @@
 						<!-- TODO: multiselect -->
 
 						<QuerySelect
-							valueAsObject
+							valueAsObject={false}
 							clearable
 							name={customFilter?.objectName ?? 'Item'}
 							valueProp="value"
 							labelProp="label"
-							{value}
+							value={value as string | number | null}
 							query={customFilter!.query!}
 							bind:options={lastQueryOptions}
-							onchange={(newValue) => {
-								tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
-								tableContext.dataRepo.__queryValues.set(label, newValue);
-								value = newValue as SelectOption<T> | null;
-							}}
+							onchange={generateOnChangePrimitive(label)}
 						/>
 					{:else}
-						{@debug value}
+						{@const label =
+							customFilter?.id ??
+							customFilter?.label ??
+							customFilter?.objectName ??
+							customFilter?.queryKey ??
+							def.id}
+						<!-- TODO: multiselect -->
+
+						<QuerySelect
+							valueAsObject={true}
+							clearable
+							name={customFilter?.objectName ?? 'Item'}
+							valueProp="value"
+							labelProp="label"
+							value={value as null}
+							query={customFilter!.query!}
+							bind:options={lastQueryOptions}
+							onchange={generateOnChangeObject(label)}
+						/>
 					{/if}
 				{:else}
 					{#await options then options}

package/dist/Components/Table/Misc/FilterInput.svelte

@@ -6,7 +6,6 @@
 	import NumberInput from '../../NumberInput.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
 	import TextInput from '../../TextInput.svelte';
-	import { generateShortUUID } from '../../../Helpers/Helpers.svelte.js';
 	import { getContext, onMount, untrack } from 'svelte';
 	import { ColumnType } from '../Types/Columns/ColumnType.js';
 	import { AccessorType } from '../Types/Columns/Definitions/Accessors/AccessorType.js';
@@ -84,18 +83,16 @@
 
 	const { def, customFilters }: FilterInputProps<T> = $props();
 
-	const _uuid = generateShortUUID();
-
 	const customFilter = $derived(customFilters?.get(def.id));
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
 	const isValueAsObject = $derived(!(customFilter?.valueAsObject == false));
 
-	let value: SelectOption<unknown> | string | number | null | undefined = $state(null);
+	let value: SelectOption<unknown> | unknown | null | undefined = $state(null);
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
 	let selectedOptions: Array<SelectOption<unknown>> = $state([]);
-	let lastQueryOptions: Array<SelectOption<unknown>> = $state([]);
+	let lastQueryOptions: Array<SelectOption<string | number>> = $state([]);
 
 	const isNumeric = $derived(
 		def instanceof NumberInputDef || customFilter?.type === CustomFilterType.Number
@@ -146,10 +143,10 @@
 		if (isRemoteSelect && !tableContext.paginationRepo?.filtering) {
 			return;
 		}
+		void filteringStateValue;
 		if (def.debug) {
 			console.log('filtering state value:', $state.snapshot(filteringStateValue));
 		}
-		void filteringStateValue;
 
 		if (hasQuery) {
 			if (def.debug) {
@@ -161,19 +158,21 @@
 					//  as unknown as string | number | undefined;
 
 					if (filteringStateValue != undefined) {
-						console.log(`query values:`, tableContext.dataRepo.__queryValues);
+						if (def.debug) {
+							console.log(`query values:`, tableContext.dataRepo.__queryValues);
+						}
 						const x = tableContext.dataRepo.__queryValues.get(
-							customFilter?.id ?? customFilter?.label ??
+							customFilter?.id ??
+								customFilter?.label ??
 								customFilter?.objectName ??
 								customFilter?.queryKey ??
-								def.id ??
-								_uuid
+								def.id
 						);
 
 						if (def.debug) {
 							console.log('value:', $state.snapshot(x));
 						}
-						value = (x ?? null) as SelectOption<unknown> | null;
+						value = (x ?? null) as SelectOption<string | number> | null;
 					} else if (def.debug) {
 						console.log(
 							'filtering state value was undefined',
@@ -208,7 +207,9 @@
 					}
 					selectedOptions = x;
 				} catch (e) {
-					console.warn(e);
+					if (dev || def.debug) {
+						console.log(e);
+					}
 				}
 			});
 		} else if (isNumeric) {
@@ -295,6 +296,23 @@
 
 	let showFromDateModal = $state(false);
 	let showToDateModal = $state(false);
+
+	function generateOnChangeObject(label: string) {
+		return (newValue: SelectOption<string | number> | null) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
+			tableContext.dataRepo.__queryValues.set(label, newValue);
+			// FIXME <T> is lost when autoformatting. why?
+			value = newValue;
+		};
+	}
+	function generateOnChangePrimitive(label: string) {
+		return (newValue: SelectOption<string | number> | null) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue ?? null);
+			tableContext.dataRepo.__queryValues.set(label, newValue);
+			// FIXME <T> is lost when autoformatting. why?
+			value = newValue as string | number | null;
+		};
+	}
 </script>
 
 {#if isSearchable}
@@ -355,7 +373,8 @@
 			<div class="maxwidth">
 				{#await optionsPromise then options}
 					<MultiSelect
-						label={customFilter?.id ?? customFilter?.label ??
+						label={customFilter?.id ??
+							customFilter?.label ??
 							customFilter?.objectName ??
 							customFilter?.queryKey ??
 							def.id}
@@ -382,34 +401,53 @@
 			<div class="contents">
 				{#await options then options}
 					{#if hasQuery}
-						{#if typeof value == 'object'}
-							{@const label = customFilter?.id ??
-								customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey ?? def.id}
+						{#if customFilter!.valueAsObject == false}
+							{@const label =
+								customFilter?.id ??
+								customFilter?.label ??
+								customFilter?.objectName ??
+								customFilter?.queryKey ??
+								def.id}
 							<!-- TODO: multiselect -->
 
 							<QuerySelect
-								valueAsObject={customFilter!.valueAsObject ?? true}
+								valueAsObject={false}
 								{label}
 								clearable
 								name={customFilter?.objectName ?? 'Item'}
 								valueProp="value"
 								labelProp="label"
-								{value}
+								value={value as string | number | null}
 								query={customFilter!.query!}
 								bind:options={lastQueryOptions}
-								onchange={(newValue) => {
-									tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
-									tableContext.dataRepo.__queryValues.set(label ?? _uuid, newValue);
-									// FIXME <T> is lost when autoformatting. why?
-									value = newValue as SelectOption<T> | null;
-								}}
+								onchange={generateOnChangePrimitive(label)}
 							/>
 						{:else}
-							{@debug value}
+							{@const label =
+								customFilter?.id ??
+								customFilter?.label ??
+								customFilter?.objectName ??
+								customFilter?.queryKey ??
+								def.id}
+							<!-- TODO: multiselect -->
+
+							<QuerySelect
+								valueAsObject={true}
+								{label}
+								clearable
+								name={customFilter?.objectName ?? 'Item'}
+								valueProp="value"
+								labelProp="label"
+								value={value as null}
+								query={customFilter!.query!}
+								bind:options={lastQueryOptions}
+								onchange={generateOnChangeObject(label)}
+							/>
 						{/if}
 					{:else}
 						<MultiSelect
-							label={customFilter?.id ?? customFilter?.label ??
+							label={customFilter?.id ??
+								customFilter?.label ??
 								customFilter?.objectName ??
 								customFilter?.queryKey ??
 								def.id}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "publishConfig": {
     "access": "restricted"
   },