@lavalogic/scoria 0.5.4 → 0.5.5

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}`);
 
@@ -230,6 +230,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 +304,7 @@
 				{/if}
 			{:else if isSelect}
 				{#if hasQuery}
-					{#if typeof value == 'object'}
+					{#if customFilter!.valueAsObject == false}
 						{@const label =
 							customFilter?.id ??
 							customFilter?.label ??
@@ -299,22 +314,38 @@
 						<!-- TODO: multiselect -->
 
 						<QuerySelect
-							valueAsObject
+							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, 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}
+							{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}
 					{#await options then options}

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

@@ -84,18 +84,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
@@ -163,17 +161,17 @@
 					if (filteringStateValue != undefined) {
 						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',
@@ -295,6 +293,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 +370,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 +398,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.5",
   "publishConfig": {
     "access": "restricted"
   },