@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,635 @@
+<svelte:options runes />
+
+<script module lang="ts">
+	import { dev } from '$app/environment';
+	import Button from '../../Button.svelte';
+	import MultiSelect from '../../MultiSelect.svelte';
+	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';
+	import { DisplayType } from '../Types/Columns/DisplayType.js';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import { CustomFilterType } from '../Types/Filtering/CustomFilterType.js';
+	import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
+	import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
+	import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
+	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
+	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
+	import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
+	import { CheckboxDef } from '../Types/Columns/Definitions/Accessors/CheckboxDef.js';
+	import DateModal from '../../Touch/DateModal.svelte';
+	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
+	import QuerySelect from '../../QuerySelect.svelte';
+	import { AccessorDef } from '../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+	import { AbstractDisplayDef } from '../Types/Columns/AbstractDisplayDef.svelte.js';
+
+	export const stringFilterTypes = [
+		{ value: StringFilterMode.Equals, label: 'Equals' },
+		{ value: StringFilterMode.NotEquals, label: 'Does not equal' },
+		{ value: StringFilterMode.Contains, label: 'Contains' },
+		{ value: StringFilterMode.NotContains, label: 'Does not contain' },
+		{ value: StringFilterMode.StartsWith, label: 'Starts With' },
+		{ value: StringFilterMode.NotStartsWith, label: 'Does not start with' },
+		{ value: StringFilterMode.EndsWith, label: 'Ends With' },
+		{ value: StringFilterMode.NotEndsWith, label: 'Does not end with' },
+		{ value: StringFilterMode.In, label: 'In' },
+		{ value: StringFilterMode.NotIn, label: 'Not in' },
+		{ value: StringFilterMode.Empty, label: 'Empty' },
+		{ value: StringFilterMode.null, label: 'Is null' }
+	];
+
+	export const numberDateFilterTypes = [
+		{ value: NumberDateFilterMode.Equals, label: 'Equals' },
+		{ value: NumberDateFilterMode.NotEquals, label: 'Does not equal' },
+		{ value: NumberDateFilterMode.LessThan, label: 'Less Than' },
+		{ value: NumberDateFilterMode.LessThanOrEqual, label: 'Less than or equal to' },
+		{ value: NumberDateFilterMode.GreaterThan, label: 'Greater than' },
+		{ value: NumberDateFilterMode.GreaterThanOrEqual, label: 'Greater than or equal to' },
+		{ value: NumberDateFilterMode.Between, label: 'Between' },
+		{ value: NumberDateFilterMode.In, label: 'In' },
+		{ value: NumberDateFilterMode.NotIn, label: 'Not in' },
+		{ value: NumberDateFilterMode.null, label: 'Is null' }
+	];
+
+	export const searchableColumnTypes = new Set<ColumnType | undefined>([
+		ColumnType.Accessor,
+		// ColumnType.Display,
+		ColumnType.FilterOnly
+		//ColumnType.Custom,
+	]);
+	export const searchableTypes = new Set<AccessorType | DisplayType | undefined>([
+		AccessorType.Text,
+		AccessorType.Number,
+		AccessorType.Date,
+		// AccessorType.Checkbox,
+		DisplayType.Normal,
+		DisplayType.Bubbles,
+		DisplayType.Progress,
+		DisplayType.Icon
+	]);
+
+	export interface FilterInputProps<T extends object> {
+		def: ColumnDef<T>;
+		customFilters?: CustomRemoteFilters | undefined;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	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<string | number> | string | number | null | undefined = $state(null);
+	let valueMin: number | null = $state(null);
+	let valueMax: number | null = $state(null);
+
+	let selectedOptions: Array<SelectOption<string | number>> = $state([]);
+	let lastQueryOptions: Array<SelectOption<unknown>> = $state([]);
+
+	const isNumeric = $derived(
+		def instanceof NumberInputDef || customFilter?.type === CustomFilterType.Number
+	);
+
+	const hasFilterFn = $derived(!!def.filterFn && typeof def.filterFn === 'function');
+
+	const hasAcceptableColumnType = $derived(
+		(def instanceof AccessorDef && searchableTypes.has(def.accessorType)) ||
+			(def instanceof AbstractDisplayDef && searchableTypes.has(def.displayType))
+	);
+
+	const isSearchable = $derived(
+		hasFilterFn || hasAcceptableColumnType || (customFilters?.has(def.id) ?? false)
+	);
+
+	const hasQuery = $derived(isRemoteSelect && customFilter?.query);
+
+	const isSelect = $derived(
+		def instanceof SelectDef || customFilter?.type === CustomFilterType.Select
+	);
+
+	const options = $derived(
+		isSelect
+			? ((def as SelectDef<T>)?.getAllOptions?.() ??
+					(def as SelectDef<T>).getOptions?.() ??
+					customFilter?.options ??
+					[])
+			: []
+	);
+
+	let optionsPromise:
+		| Array<SelectOption<string | number>>
+		| Promise<Array<SelectOption<string | number>>> = $state(
+		[] as Array<SelectOption<string | number>> | Promise<Array<SelectOption<string | number>>>
+	);
+
+	onMount(() => {
+		retryOptionsPromise();
+	});
+
+	function retryOptionsPromise() {
+		optionsPromise = def instanceof SelectDef ? (def.getAllOptions?.() ?? def.getOptions()) : [];
+	}
+
+	// function isNumber(def: ColumnDef<T>): def is INumberInputColumnAccessorDef<T> {
+	// 	return 'type' in def && def.type === 'Number';
+	// }
+
+	function getFilteringStateValue(): unknown {
+		return tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value;
+	}
+
+	$effect(() => {
+		if (isRemoteSelect) {
+			if (!tableContext.paginationRepo?.filtering) {
+				return;
+			}
+		}
+		if (hasQuery) {
+			untrack(async () => {
+				try {
+					const gotValue = getFilteringStateValue() as unknown as string | number | undefined;
+
+					if (gotValue != undefined) {
+						const x = tableContext.__queryValues.get(
+							customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey ?? _uuid
+						);
+						value = (x ?? null) as SelectOption<string | number> | null;
+					}
+				} catch (e) {
+					if (dev) {
+						console.log(e);
+						// eslint-disable-next-line no-debugger
+						debugger;
+					}
+				}
+			});
+		} else if (def instanceof SelectDef) {
+			untrack(async () => {
+				try {
+					const gotValue = getFilteringStateValue() as unknown as
+						| Array<string | number>
+						| undefined;
+					const x = (await options).filter((it) => {
+						return gotValue?.includes(it.value);
+					});
+					selectedOptions = x;
+				} catch (e) {
+					if (dev) {
+						console.log(e);
+						// eslint-disable-next-line no-debugger
+						debugger;
+					}
+				}
+			});
+		} else if (isNumeric) {
+			if (
+				selectedNumberFilterType.value === NumberDateFilterMode.Between &&
+				tableContext.paginationRepo?.filtering
+			) {
+				const gotValue = getFilteringStateValue();
+				if (gotValue != undefined) {
+					const [min, max] = gotValue as [number, number | undefined];
+					value = min;
+					valueMin = min;
+					valueMax = max ?? null;
+				} else {
+					value = valueMin = valueMax = null;
+				}
+			} else if (tableContext.paginationRepo?.filtering) {
+				const gotValue = getFilteringStateValue();
+				if (gotValue != undefined) {
+					const [min] = gotValue as [number, number | undefined];
+					value = min;
+					valueMin = min;
+					valueMax = min;
+				} else {
+					value = valueMin = valueMax = null;
+				}
+			}
+		} else if (tableContext.paginationRepo?.filtering) {
+			const gotValue = getFilteringStateValue();
+			if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
+				value = gotValue;
+			} else if (dev) {
+				console.log(gotValue);
+				// eslint-disable-next-line no-debugger
+				debugger;
+			} else {
+				value = gotValue as string; // HACK attempt to keep production running
+			}
+		}
+	});
+
+	onMount(() => {
+		const filterOption =
+			tableContext.paginationRepo?.filtering &&
+			tableContext.paginationRepo?.filtering.find((it) => it.id === def.id);
+
+		if (filterOption) {
+			if (Array.isArray(filterOption.value)) {
+				[valueMin, valueMax] = filterOption.value;
+				if (valueMax == undefined) {
+					valueMax = valueMin;
+				} else if (valueMin == undefined) {
+					valueMin = valueMax;
+				}
+			} else if (!hasQuery) {
+				const gotValue = filterOption.value;
+				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
+					value = gotValue;
+				} else if (dev) {
+					console.log(gotValue);
+					// eslint-disable-next-line no-debugger
+					debugger;
+				} else {
+					value = gotValue as string; // HACK attempt to keep production running
+				}
+			}
+		}
+
+		// selectedNumberFilterType =
+		// 	(filterMode as NumberDateFilterMode | undefined) ?? NumberDateFilterMode.In;
+		// selectedStringFilterType =
+		// 	(filterMode as StringFilterMode | undefined) ?? StringFilterMode.Contains;
+	});
+
+	const filterMode = $derived(tableContext.paginationRepo?.filterModes?.get(def.id));
+	const selectedNumberFilterType: SelectOption<NumberDateFilterMode> = $derived.by(() => {
+		const value = (filterMode as NumberDateFilterMode | undefined) ?? NumberDateFilterMode.In;
+		return numberDateFilterTypes.find((it) => it.value === value)!;
+	});
+	const selectedStringFilterType: SelectOption<StringFilterMode> = $derived.by(() => {
+		const value = (filterMode as StringFilterMode | undefined) ?? StringFilterMode.Contains;
+		return stringFilterTypes.find((it) => it.value === value)!;
+	});
+
+	// let selectedNumberFilterType: NumberDateFilterMode = $state(NumberDateFilterMode.In);
+	// let selectedStringFilterType: StringFilterMode = $state(StringFilterMode.Contains);
+
+	const inputId: string = $derived(`${tableContext.tableName}-${def.id}-filter-type`);
+
+	let showFromDateModal = $state(false);
+	let showToDateModal = $state(false);
+</script>
+
+{#if isSearchable}
+	<!-- TODO remove this check once datePicker is supported -->
+	{#if def instanceof DateInputDef || def instanceof CheckboxDef}
+		<label for={inputId}>{def.header}</label>
+	{/if}
+	<div class="row">
+		{#if def instanceof DateInputDef}
+			{@const dateValues =
+				tableContext.paginationRepo?.filtering?.find((it) => it.id === def.id)?.value ?? []}
+			{#if Array.isArray(dateValues)}
+				{@const [fromDate, toDate] = dateValues}
+				<div class="spaced-around">
+					<Button
+						onclick={() => {
+							showFromDateModal = true;
+						}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
+					>
+
+					<Button
+						onclick={() => {
+							showToDateModal = true;
+						}}>To {toDate?.toLocaleDateString() ?? 'Any Date'}</Button
+					>
+				</div>
+
+				{#if showFromDateModal}
+					<DateModal
+						header="Edit Date From"
+						value={fromDate}
+						cancelEditing={() => {
+							showFromDateModal = false;
+						}}
+						confirm={(e) => {
+							tableContext.paginationRepo?.filterBy(def.id, [e, toDate]);
+							showFromDateModal = false;
+						}}
+					/>
+				{/if}
+
+				{#if showToDateModal}
+					<DateModal
+						inclusive
+						header="Edit Date To"
+						value={toDate}
+						cancelEditing={() => {
+							showToDateModal = false;
+						}}
+						confirm={(e) => {
+							tableContext.paginationRepo?.filterBy(def.id, [fromDate, e]);
+							showToDateModal = false;
+						}}
+					/>
+				{/if}
+			{:else if dev}
+				DEBUG: INVALID DATE FILTER VALUES
+			{/if}
+		{:else if def instanceof SelectDef && !isRemoteSelect}
+			<div class="maxwidth">
+				{#await optionsPromise then options}
+					<MultiSelect
+						label={customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey}
+						labelProp="label"
+						valueProp="value"
+						name={customFilter?.objectName ?? 'Item'}
+						{options}
+						valueAsObject={isValueAsObject as true}
+						onchange={(e) => {
+							tableContext.paginationRepo?.filterBy(
+								def.id,
+								e.map((it) => it.value)
+							);
+						}}
+						selectedValues={selectedOptions}
+						collapseSelection
+					/>
+				{:catch e}
+					<span>Error retrieving options: {e.message}</span>
+					<Button onclick={() => retryOptionsPromise()}>Retry</Button>
+				{/await}
+			</div>
+		{:else if isRemoteSelect}
+			<div class="contents">
+				{#await options then options}
+					{#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 ?? _uuid, newValue);
+								}}
+							/>
+						{:else if dev}
+							expected select option or null, got {typeof value}
+						{/if}
+					{:else}
+						<MultiSelect
+							label={customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey}
+							labelProp="label"
+							valueProp="value"
+							name={customFilter?.objectName ?? 'Item'}
+							{options}
+							valueAsObject={isValueAsObject as true}
+							onchange={(e) => {
+								tableContext.paginationRepo?.filterBy(
+									def.id,
+									e.map((it) => it.value)
+								);
+							}}
+							selectedValues={selectedOptions}
+							collapseSelection
+						/>
+					{/if}
+				{/await}
+			</div>
+		{:else if def instanceof CheckboxDef}
+			<div class="inner-row">
+				<label>
+					<input
+						value={null}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					Any
+				</label>
+				<label>
+					<input
+						value={true}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					Yes
+				</label>
+				<label>
+					<input
+						value={false}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					No
+				</label>
+			</div>
+		{:else if isNumeric}
+			<div class="left">
+				<SingleSelect
+					label={def.header?.toString() ?? def.id}
+					virtual
+					name="Filter Type"
+					options={numberDateFilterTypes}
+					labelProp="label"
+					valueProp="value"
+					valueAsObject
+					value={selectedNumberFilterType}
+					onchange={(newValue) => {
+						const oldFilterType = selectedNumberFilterType;
+
+						const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
+						tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
+						tableContext.paginationRepo?.filterModes?.set(def.id, newFilterType);
+
+						if (selectedNumberFilterType.value !== oldFilterType.value) {
+							if (oldFilterType.value === NumberDateFilterMode.Between) {
+								valueMax = null;
+								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
+							}
+
+							if (newFilterType === NumberDateFilterMode.In) {
+								tableContext.paginationRepo?.filterBy(def.id, [value]);
+							}
+
+							// TODO what about the other modes?
+						}
+					}}
+					onkeydown={(e) => {
+						e.stopPropagation();
+					}}
+				/>
+			</div>
+			<div class="right">
+				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
+					<NumberInput
+						id={inputId}
+						bind:value={valueMin}
+						oninput={() => {
+							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+						}}
+						onkeydown={(e) => {
+							e.stopPropagation();
+						}}
+					/>
+					<span>and</span>
+					<NumberInput
+						id={inputId}
+						bind:value={valueMax}
+						oninput={() => {
+							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+						}}
+						onkeydown={(e) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if value == null || typeof value == 'string'}
+					<TextInput
+						id={inputId}
+						bind:value
+						oninput={() => {
+							tableContext.paginationRepo?.filterBy(def.id, [value]);
+						}}
+						onkeydown={(e) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if dev}
+					expected string, got {typeof value}
+				{/if}
+			</div>
+		{:else}
+			<div class="left">
+				<SingleSelect
+					name="Filter Type"
+					valueAsObject
+					virtual
+					label={def.header?.toString() ?? def.id}
+					options={stringFilterTypes}
+					labelProp="label"
+					valueProp="value"
+					value={selectedStringFilterType}
+					onchange={(newValue) => {
+						const filterType = newValue?.value ?? StringFilterMode.Contains;
+						tableContext.paginationRepo?.setFilterMode(def.id, filterType);
+						tableContext.paginationRepo?.filterModes?.set(def.id, filterType);
+					}}
+					onkeydown={(e) => {
+						e.stopPropagation();
+					}}
+				/>
+			</div>
+			<div class="right">
+				{#if value == null || typeof value == 'string'}
+					<TextInput
+						id={inputId}
+						bind:value
+						oninput={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+						onkeydown={(e) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if dev}
+					expected string, got {typeof value}
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>.contents {
+  display: contents;
+  --input-width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  --input-height: 2.5rem;
+}
+.row .maxwidth {
+  flex-grow: 1;
+}
+.row .spaced-around {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: stretch;
+  height: 3rem;
+}
+.row .left {
+  width: 60%;
+}
+.row .right {
+  width: 40%;
+}
+.row .left,
+.row .right {
+  display: flex;
+  justify-content: stretch;
+  align-items: stretch;
+  height: 3rem;
+  gap: 4px;
+}
+.row .left :global(input),
+.row .right :global(input) {
+  height: 100%;
+}
+.row .left :global(.select-wrapper),
+.row .right :global(.select-wrapper) {
+  width: 100%;
+}
+.row .right span {
+  align-self: center;
+}
+
+.inner-row {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+}
+.inner-row label {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+.inner-row label input {
+  cursor: pointer;
+  width: 2rem;
+}</style>

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

@@ -0,0 +1,45 @@
+import { ColumnType } from '../Types/Columns/ColumnType.js';
+import { AccessorType } from '../Types/Columns/Definitions/Accessors/AccessorType.js';
+import { DisplayType } from '../Types/Columns/DisplayType.js';
+import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
+import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
+import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
+import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
+export declare const stringFilterTypes: {
+    value: StringFilterMode;
+    label: string;
+}[];
+export declare const numberDateFilterTypes: {
+    value: NumberDateFilterMode;
+    label: string;
+}[];
+export declare const searchableColumnTypes: Set<ColumnType | undefined>;
+export declare const searchableTypes: Set<AccessorType | DisplayType | undefined>;
+export interface FilterInputProps<T extends object> {
+    def: ColumnDef<T>;
+    customFilters?: CustomRemoteFilters | undefined;
+}
+declare function $$render<T extends object>(): {
+    props: FilterInputProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FilterInput: $$IsomorphicComponent;
+type FilterInput<T extends object> = InstanceType<typeof FilterInput<T>>;
+export default FilterInput;