@lavalogic/scoria 0.40.33 → 0.40.34

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

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive, FilterValueType"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive, FilterValueType"
 >import { dev } from "$app/environment";
 import Button from "../../Button.svelte";
 import MultiSelect from "../../MultiSelect.svelte";
@@ -264,326 +264,326 @@ function generateOnChangePrimitive(_label) {
 		value = newValue ?? null;
 	};
 }
-</script>
-
-{#if isSearchable}
-	<!-- TODO remove this check once datePicker is supported -->
-	{#if def instanceof DateInputDef || def instanceof CheckboxDef}
-		<label for={inputId}>{displayLabel}</label>
-	{/if}
-	<div class="row">
-		{#if def instanceof DateInputDef}
-			{@const dateValues =
-				tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value ?? []}
-			{#if isDateTuple(dateValues)}
-				{@const [fromDate, toDate] = dateValues}
-				<div class="spaced-around">
-					<Button
-						onclick={() => {
-							showFromDateModal = true;
-						}}>{i18n['scoria.label.filter_date_from']({
-								date: fromDate?.toLocaleDateString() ?? i18n['scoria.label.any_date'](),
-							})}</Button
-					>
-
-					<Button
-						onclick={() => {
-							showToDateModal = true;
-						}}>{i18n['scoria.label.filter_date_to']({
-								date: toDate?.toLocaleDateString() ?? i18n['scoria.label.any_date'](),
-							})}</Button
-					>
-				</div>
-
-				{#if showFromDateModal}
-					<DateModal
-						header={i18n['scoria.label.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={i18n['scoria.label.edit_date_to']()}
-						value={toDate}
-						cancelEditing={() => {
-							showToDateModal = false;
-						}}
-						confirm={(e) => {
-							tableContext.paginationRepo?.filterBy(def.id, [fromDate, e]);
-							showToDateModal = false;
-						}}
-					/>
-				{/if}
-			{/if}
-		{:else if def instanceof SelectDef && !isRemoteSelect}
-			<div class="maxwidth">
-				{#await optionsPromise then options}
-					{@const selectedPrimitives = selectedOptions
-						.map((it) => it.value)
-						.filter((v): v is string | number => typeof v === 'string' || typeof v === 'number')}
-					<MultiSelect
-						label={customFilter?.id ??
-							customFilter?.label ??
-							customFilter?.objectName ??
-							customFilter?.queryKey ??
-							def.id}
-						labelProp="label"
-						valueProp="value"
-						name={customFilter?.objectName ?? 'Item'}
-						{options}
-						valueAsObject={false}
-						onchange={(e: Array<unknown>) => {
-							// Phase 7.6: `valueAsObject={false}` returns
-							// primitives directly.
-							tableContext.paginationRepo?.filterBy(def.id, e);
-						}}
-						selectedValues={selectedPrimitives}
-						collapseSelection
-					/>
-				{:catch e}
-					<span>{i18n['scoria.text.error_retrieving_options']({ message: e.message })}</span>
-					<Button
-						onclick={() => {
-							retryOptionsPromise();
-						}}>{i18n['scoria.action.retry_load']()}</Button
-					>
-				{/await}
-			</div>
-		{:else if customFilter && isRemoteSelect}
-			<div class="contents">
-				{#await options then resolvedOptions}
-					{@const options = resolvedOptions as Array<SelectOption<unknown>>}
-					{#if hasQuery(customFilter)}
-						{#if customFilter.valueAsObject !== true}
-							{@const label = displayLabel}
-
-							<!-- TODO: multiselect -->
-
-							<QuerySelect
-								valueAsObject={false}
-								{label}
-								clearable
-								name={customFilter.objectName ?? 'Item'}
-								valueProp={'value' as never}
-								labelProp={'label' as never}
-								value={value as never}
-								query={customFilter.query}
-								bind:options={lastQueryOptions as never}
-								onchange={generateOnChangePrimitive(label)}
-							/>
-						{:else}
-							{@const label = displayLabel}
-
-							<!-- 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}
-						{@const selectedPrimitives = selectedOptions
-							.map((it) => it.value)
-							.filter(
-								(v): v is string | number => typeof v === 'string' || typeof v === 'number'
-							)}
-						<!--
-							With `valueAsObject={false}`, MultiSelect compares
-							its `selectedValues` against options by primitive
-							value, so we map `selectedOptions` to their
-							primitive `.value` rather than passing the
-							SelectOption objects directly.
-						-->
-						<MultiSelect
-							label={displayLabel}
-							labelProp="label"
-							valueProp="value"
-							name={customFilter.objectName ?? 'Item'}
-							{options}
-							valueAsObject={false}
-							onchange={(e: Array<unknown>) => {
-								// Phase 7.6: `valueAsObject={false}` returns
-								// primitives directly.
-								tableContext.paginationRepo?.filterBy(def.id, e);
-							}}
-							selectedValues={selectedPrimitives}
-							collapseSelection
-						/>
-					{/if}
-				{/await}
-			</div>
-		{:else if def instanceof CheckboxDef}
-			<div class="inner-row">
-				<label>
-					<input
-						value={false}
-						type="radio"
-						bind:group={value}
-						onchange={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-					/>
-					{i18n['scoria.action.no']()}
-				</label>
-				<label>
-					<input
-						value={undefined}
-						type="radio"
-						bind:group={value}
-						onchange={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-					/>
-					{i18n['scoria.label.any']()}
-				</label>
-				<label>
-					<input
-						value={true}
-						type="radio"
-						bind:group={value}
-						onchange={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-					/>
-					{i18n['scoria.action.yes']()}
-				</label>
-			</div>
-		{:else if isNumeric}
-			{@const label = typeof def.header === 'string' ? def.header : undefined}
-			<div class="left">
-				<SingleSelect
-					{label}
-					name="Filter Type"
-					placeholder={i18n['scoria.label.select_filter_type']()}
-					options={numberDateTypes}
-					labelProp="label"
-					valueProp="value"
-					valueAsObject
-					value={selectedNumberFilterType}
-					onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
-						const oldFilterType = selectedNumberFilterType;
-
-						const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
-						tableContext.paginationRepo?.setFilterMode(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: KeyboardEvent) => {
-						e.stopPropagation();
-					}}
-				/>
-			</div>
-			<div class="right">
-				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
-					<NumberInput
-						id={inputId}
-						bind:value={valueMin}
-						oninput={() => {
-							debouncedFilterBy(def.id, [valueMin, valueMax]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-					<span>{i18n['scoria.label.between_and']()}</span>
-					<NumberInput
-						id={inputId}
-						bind:value={valueMax}
-						oninput={() => {
-							debouncedFilterBy(def.id, [valueMin, valueMax]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else if value == null || typeof value == 'string'}
-					<TextInput
-						id={inputId}
-						bind:value
-						oninput={() => {
-							debouncedFilterBy(def.id, [value]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else if dev}
-					error: {value?.toString()}
-					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-					{@debug value}
-				{/if}
-			</div>
-		{:else}
-			{@const label = typeof def.header === 'string' ? def.header : undefined}
-			<div class="left">
-				<SingleSelect
-					name="Filter Type"
-					placeholder={i18n['scoria.label.select_filter_type']()}
-					valueAsObject
-					{label}
-					options={stringTypes}
-					labelProp="label"
-					valueProp="value"
-					value={selectedStringFilterType}
-					onchange={(newValue: SelectOption<StringFilterMode> | null) => {
-						const filterType = newValue?.value ?? StringFilterMode.Contains;
-						tableContext.paginationRepo?.setFilterMode(def.id, filterType);
-					}}
-					onkeydown={(e: KeyboardEvent) => {
-						e.stopPropagation();
-					}}
-				/>
-			</div>
-			<div class="right">
-				{#if value == null || typeof value == 'string'}
-					<TextInput
-						id={inputId}
-						bind:value
-						oninput={() => {
-							debouncedFilterBy(def.id, value);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else if dev}
-					error: {value?.toString()}
-					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-					{@debug value}
-				{/if}
-			</div>
-		{/if}
-	</div>
-{/if}
-
+</script>
+
+{#if isSearchable}
+	<!-- TODO remove this check once datePicker is supported -->
+	{#if def instanceof DateInputDef || def instanceof CheckboxDef}
+		<label for={inputId}>{displayLabel}</label>
+	{/if}
+	<div class="row">
+		{#if def instanceof DateInputDef}
+			{@const dateValues =
+				tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value ?? []}
+			{#if isDateTuple(dateValues)}
+				{@const [fromDate, toDate] = dateValues}
+				<div class="spaced-around">
+					<Button
+						onclick={() => {
+							showFromDateModal = true;
+						}}>{i18n['scoria.label.filter_date_from']({
+								date: fromDate?.toLocaleDateString() ?? i18n['scoria.label.any_date'](),
+							})}</Button
+					>
+
+					<Button
+						onclick={() => {
+							showToDateModal = true;
+						}}>{i18n['scoria.label.filter_date_to']({
+								date: toDate?.toLocaleDateString() ?? i18n['scoria.label.any_date'](),
+							})}</Button
+					>
+				</div>
+
+				{#if showFromDateModal}
+					<DateModal
+						header={i18n['scoria.label.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={i18n['scoria.label.edit_date_to']()}
+						value={toDate}
+						cancelEditing={() => {
+							showToDateModal = false;
+						}}
+						confirm={(e) => {
+							tableContext.paginationRepo?.filterBy(def.id, [fromDate, e]);
+							showToDateModal = false;
+						}}
+					/>
+				{/if}
+			{/if}
+		{:else if def instanceof SelectDef && !isRemoteSelect}
+			<div class="maxwidth">
+				{#await optionsPromise then options}
+					{@const selectedPrimitives = selectedOptions
+						.map((it) => it.value)
+						.filter((v): v is string | number => typeof v === 'string' || typeof v === 'number')}
+					<MultiSelect
+						label={customFilter?.id ??
+							customFilter?.label ??
+							customFilter?.objectName ??
+							customFilter?.queryKey ??
+							def.id}
+						labelProp="label"
+						valueProp="value"
+						name={customFilter?.objectName ?? 'Item'}
+						{options}
+						valueAsObject={false}
+						onchange={(e: Array<unknown>) => {
+							// Phase 7.6: `valueAsObject={false}` returns
+							// primitives directly.
+							tableContext.paginationRepo?.filterBy(def.id, e);
+						}}
+						selectedValues={selectedPrimitives}
+						collapseSelection
+					/>
+				{:catch e}
+					<span>{i18n['scoria.text.error_retrieving_options']({ message: e.message })}</span>
+					<Button
+						onclick={() => {
+							retryOptionsPromise();
+						}}>{i18n['scoria.action.retry_load']()}</Button
+					>
+				{/await}
+			</div>
+		{:else if customFilter && isRemoteSelect}
+			<div class="contents">
+				{#await options then resolvedOptions}
+					{@const options = resolvedOptions as Array<SelectOption<unknown>>}
+					{#if hasQuery(customFilter)}
+						{#if customFilter.valueAsObject !== true}
+							{@const label = displayLabel}
+
+							<!-- TODO: multiselect -->
+
+							<QuerySelect
+								valueAsObject={false}
+								{label}
+								clearable
+								name={customFilter.objectName ?? 'Item'}
+								valueProp={'value' as never}
+								labelProp={'label' as never}
+								value={value as never}
+								query={customFilter.query}
+								bind:options={lastQueryOptions as never}
+								onchange={generateOnChangePrimitive(label)}
+							/>
+						{:else}
+							{@const label = displayLabel}
+
+							<!-- 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}
+						{@const selectedPrimitives = selectedOptions
+							.map((it) => it.value)
+							.filter(
+								(v): v is string | number => typeof v === 'string' || typeof v === 'number'
+							)}
+						<!--
+							With `valueAsObject={false}`, MultiSelect compares
+							its `selectedValues` against options by primitive
+							value, so we map `selectedOptions` to their
+							primitive `.value` rather than passing the
+							SelectOption objects directly.
+						-->
+						<MultiSelect
+							label={displayLabel}
+							labelProp="label"
+							valueProp="value"
+							name={customFilter.objectName ?? 'Item'}
+							{options}
+							valueAsObject={false}
+							onchange={(e: Array<unknown>) => {
+								// Phase 7.6: `valueAsObject={false}` returns
+								// primitives directly.
+								tableContext.paginationRepo?.filterBy(def.id, e);
+							}}
+							selectedValues={selectedPrimitives}
+							collapseSelection
+						/>
+					{/if}
+				{/await}
+			</div>
+		{:else if def instanceof CheckboxDef}
+			<div class="inner-row">
+				<label>
+					<input
+						value={false}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					{i18n['scoria.action.no']()}
+				</label>
+				<label>
+					<input
+						value={undefined}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					{i18n['scoria.label.any']()}
+				</label>
+				<label>
+					<input
+						value={true}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					{i18n['scoria.action.yes']()}
+				</label>
+			</div>
+		{:else if isNumeric}
+			{@const label = typeof def.header === 'string' ? def.header : undefined}
+			<div class="left">
+				<SingleSelect
+					{label}
+					name="Filter Type"
+					placeholder={i18n['scoria.label.select_filter_type']()}
+					options={numberDateTypes}
+					labelProp="label"
+					valueProp="value"
+					valueAsObject
+					value={selectedNumberFilterType}
+					onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
+						const oldFilterType = selectedNumberFilterType;
+
+						const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
+						tableContext.paginationRepo?.setFilterMode(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: KeyboardEvent) => {
+						e.stopPropagation();
+					}}
+				/>
+			</div>
+			<div class="right">
+				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
+					<NumberInput
+						id={inputId}
+						bind:value={valueMin}
+						oninput={() => {
+							debouncedFilterBy(def.id, [valueMin, valueMax]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+					<span>{i18n['scoria.label.between_and']()}</span>
+					<NumberInput
+						id={inputId}
+						bind:value={valueMax}
+						oninput={() => {
+							debouncedFilterBy(def.id, [valueMin, valueMax]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if value == null || typeof value == 'string'}
+					<TextInput
+						id={inputId}
+						bind:value
+						oninput={() => {
+							debouncedFilterBy(def.id, [value]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if dev}
+					error: {value?.toString()}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug value}
+				{/if}
+			</div>
+		{:else}
+			{@const label = typeof def.header === 'string' ? def.header : undefined}
+			<div class="left">
+				<SingleSelect
+					name="Filter Type"
+					placeholder={i18n['scoria.label.select_filter_type']()}
+					valueAsObject
+					{label}
+					options={stringTypes}
+					labelProp="label"
+					valueProp="value"
+					value={selectedStringFilterType}
+					onchange={(newValue: SelectOption<StringFilterMode> | null) => {
+						const filterType = newValue?.value ?? StringFilterMode.Contains;
+						tableContext.paginationRepo?.setFilterMode(def.id, filterType);
+					}}
+					onkeydown={(e: KeyboardEvent) => {
+						e.stopPropagation();
+					}}
+				/>
+			</div>
+			<div class="right">
+				{#if value == null || typeof value == 'string'}
+					<TextInput
+						id={inputId}
+						bind:value
+						oninput={() => {
+							debouncedFilterBy(def.id, value);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if dev}
+					error: {value?.toString()}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug value}
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}
+
 <style>.contents {
   display: contents;
   --input-width: 100%;
@@ -654,4 +654,4 @@ function generateOnChangePrimitive(_label) {
 .inner-row label input {
   cursor: pointer;
   width: 2rem;
-}</style>
+}</style>