@lavalogic/scoria 0.5.2 → 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}`);
 
@@ -125,7 +125,12 @@
 					//  as unknown as string | number | undefined;
 
 					if (gotValue != undefined) {
-						const key = customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey;
+						const key =
+							customFilter?.id ??
+							customFilter?.label ??
+							customFilter?.objectName ??
+							customFilter?.queryKey ??
+							def.id;
 						const x = key == null ? null : tableContext.dataRepo.__queryValues.get(key);
 						value = (x ?? null) as SelectOption<unknown> | null;
 					}
@@ -225,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}">
@@ -284,28 +304,48 @@
 				{/if}
 			{:else if isSelect}
 				{#if hasQuery}
-					{#if typeof value == 'object'}
+					{#if customFilter!.valueAsObject == false}
 						{@const label =
-							customFilter!.label ?? customFilter?.objectName ?? customFilter!.queryKey!}
+							customFilter?.id ??
+							customFilter?.label ??
+							customFilter?.objectName ??
+							customFilter?.queryKey ??
+							def.id}
 						<!-- 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,13 +161,17 @@
 					if (filteringStateValue != undefined) {
 						console.log(`query values:`, tableContext.dataRepo.__queryValues);
 						const x = tableContext.dataRepo.__queryValues.get(
-							customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey ?? _uuid
+							customFilter?.id ??
+								customFilter?.label ??
+								customFilter?.objectName ??
+								customFilter?.queryKey ??
+								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',
@@ -291,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}
@@ -351,7 +370,11 @@
 			<div class="maxwidth">
 				{#await optionsPromise then options}
 					<MultiSelect
-						label={customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey}
+						label={customFilter?.id ??
+							customFilter?.label ??
+							customFilter?.objectName ??
+							customFilter?.queryKey ??
+							def.id}
 						labelProp="label"
 						valueProp="value"
 						name={customFilter?.objectName ?? 'Item'}
@@ -375,34 +398,56 @@
 			<div class="contents">
 				{#await options then options}
 					{#if hasQuery}
-						{#if typeof value == 'object'}
+						{#if customFilter!.valueAsObject == false}
 							{@const label =
-								customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey}
+								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?.label ?? customFilter?.objectName ?? customFilter?.queryKey}
+							label={customFilter?.id ??
+								customFilter?.label ??
+								customFilter?.objectName ??
+								customFilter?.queryKey ??
+								def.id}
 							labelProp="label"
 							valueProp="value"
 							name={customFilter?.objectName ?? 'Item'}

package/dist/Components/Table/Types/Filtering/CustomFilter.d.ts

@@ -3,6 +3,7 @@ import type { CustomFilterType } from './CustomFilterType.js';
 export interface CustomFilter {
     queryKey: string;
     type: CustomFilterType;
+    id: string;
     valueAsObject?: boolean;
     options?: Array<SelectOption<string | number>> | Promise<Array<SelectOption<string | number>>>;
     multiSelect?: boolean;

package/package.json

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