@lavalogic/scoria 0.0.32 → 0.0.33

package/dist/Components/Base/Pagination.svelte

@@ -200,9 +200,6 @@
   line-height: 1;
   bottom: 0;
 }
-.spread_row.limited {
-  overflow: hidden;
-}
 .spread_row .scrollable {
   display: flex;
   flex-flow: row nowrap;

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

@@ -34,6 +34,7 @@
 	import { AccessorDef } from '../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
 	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
 	import { dev } from '$app/environment';
+	import { QuerySelect } from '../../../index.js';
 
 	export interface QuickSearchCellProps<T extends object> {
 		column: Column<T>;
@@ -77,6 +78,8 @@
 			: []
 	);
 	const isDate = $derived(def instanceof DateInputDef);
+	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
+	const hasQuery = $derived(isRemoteSelect && customFilter?.query);
 
 	let inputRef: HTMLInputElement | undefined = $state();
 
@@ -88,7 +91,7 @@
 
 	const isSelectOpen = $derived(openedSelect?.value === selectSymbol);
 
-	let value: string | number | null | undefined = $state(null);
+	let value: SelectOption<string | number> | string | number | null | undefined = $state(null);
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
@@ -98,6 +101,7 @@
 	);
 
 	let selectedOptions: Array<SelectOption<string | number>> = $state([]);
+	let lastQueryOptions: Array<SelectOption<unknown>> = $state([]);
 
 	const inputId = $derived(`${tableContext.tableName}-cell-quicksearch-${column.id}`);
 
@@ -118,22 +122,38 @@
 	}
 
 	$effect(() => {
-		if (isSelect) {
-			if (!tableContext.paginationRepo?.filtering) {
-				return;
-			}
-
+		if (hasQuery) {
 			untrack(async () => {
 				const gotValue = getFilteringStateValue() as unknown as
 					| Array<string | number | SelectOption<string | number>>
 					| undefined;
-				if (dev) {
-					// eslint-disable-next-line no-debugger
-					debugger;
-					return;
+
+				try {
+					//  as unknown as string | number | undefined;
+
+					if (gotValue != undefined) {
+						const key = customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey;
+						const x = key == null ? null : tableContext.__queryValues.get(key);
+						value = (x ?? null) as SelectOption<string | number> | null;
+					}
+				} catch (e) {
+					console.warn(e);
+					value = null;
 				}
-				//TODO redo the below in a more performant way if possible
-				const x = (await options).filter((it) => gotValue?.includes(it.value));
+			});
+		} else if (isSelect) {
+			if (!tableContext.paginationRepo?.filtering) {
+				return;
+			}
+
+			const gotValue = getFilteringStateValue() as unknown as
+				| Array<string | number | SelectOption<string | number>>
+				| undefined;
+
+			untrack(async () => {
+				const x = (await options).filter((it) => {
+					return (gotValue as unknown as Array<string | number> | undefined)?.includes(it.value);
+				});
 				selectedOptions = x;
 			});
 		} else if (isNumeric) {
@@ -186,7 +206,7 @@
 				} else {
 					value = valueMin?.toString();
 				}
-			} else {
+			} else if (!hasQuery) {
 				const gotValue = filterOption.value;
 				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
 					value = gotValue;
@@ -260,22 +280,49 @@
 					{/if}
 				{/if}
 			{:else if isSelect}
-				{#await options then options}
-					<MultiSelect
-						labelProp="label"
-						valueProp="value"
-						{options}
-						valueAsObject
-						onchange={(e) => {
-							tableContext.paginationRepo?.filterBy(
-								def.id,
-								e.map((it) => it.value)
-							);
-						}}
-						selectedValues={selectedOptions}
-						collapseSelection
-					/>
-				{/await}
+				{#if hasQuery}
+					{#if typeof value == 'object'}
+						{@const label =
+							customFilter!.label ?? customFilter?.objectName ?? customFilter!.queryKey!}
+						<!-- TODO: multiselect -->
+
+						<QuerySelect
+							valueAsObject
+							{label}
+							clearable
+							name={customFilter?.objectName ?? 'Item'}
+							valueProp="value"
+							labelProp="label"
+							selectedValue={value}
+							query={customFilter!.query!}
+							bind:options={lastQueryOptions}
+							onchange={(newValue) => {
+								console.log(newValue);
+								tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
+								tableContext.__queryValues.set(label, newValue);
+							}}
+						/>
+					{:else}
+						{@debug value}
+					{/if}
+				{:else}
+					{#await options then options}
+						<MultiSelect
+							labelProp="label"
+							valueProp="value"
+							{options}
+							valueAsObject
+							onchange={(e) => {
+								tableContext.paginationRepo?.filterBy(
+									def.id,
+									e.map((it) => it.value)
+								);
+							}}
+							selectedValues={selectedOptions}
+							collapseSelection
+						/>
+					{/await}
+				{/if}
 			{:else if isNumeric}
 				{#if selectedNumberFilterType.value === NumberDateFilterMode.Between}
 					<div class="input-wrapper left">
@@ -304,7 +351,7 @@
 							onkeydown={closeOnCtrlF}
 						/>
 					</div>
-				{:else if typeof value != 'number'}
+				{:else if value == null || typeof value == 'string'}
 					<div class="input-wrapper right">
 						<TextInput
 							data-type="quicksearch"
@@ -319,7 +366,7 @@
 						/>
 					</div>
 				{/if}
-			{:else if typeof value != 'number'}
+			{:else if value == null || typeof value == 'string'}
 				<div class="input-wrapper right">
 					<TextInput
 						data-type="quicksearch"

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

@@ -173,14 +173,9 @@
 					value = null;
 				}
 			});
-		} else if (def instanceof SelectDef) {
+		} else if (isSelect) {
 			untrack(async () => {
 				try {
-					if (dev) {
-						// eslint-disable-next-line no-debugger
-						debugger;
-					}
-					// TODO see if we can change the below not to use array.includes
 					const x = (await options).filter((it) => {
 						return (filteringStateValue as unknown as Array<string | number> | undefined)?.includes(
 							it.value

package/package.json

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