@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,527 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { dev } from '$app/environment';
+	import Action from '../../Action.svelte';
+	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 DateModal from '../../Touch/DateModal.svelte';
+	import { ColourSet, Colour } from '../../../scss/colours.js';
+	import { InputVariant } from '../../../Types/Internal/InputVariant.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { getContext, untrack, onMount } from 'svelte';
+	import { cubicOut } from 'svelte/easing';
+	import { fade } from 'svelte/transition';
+	import {
+		searchableTypes,
+		numberDateFilterTypes,
+		stringFilterTypes
+	} from '../Misc/FilterInput.svelte';
+	import { quickFilterContextIdentifier } from '../Table.svelte';
+	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 { SelectOption } from '../../../Types/Internal/SelectOption.js';
+	import type { Column } from '../Types/Columns/Column.js';
+	import { AccessorDef } from '../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+	import { AbstractDisplayDef } from '../Types/Columns/AbstractDisplayDef.svelte.js';
+	import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
+	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
+
+	export interface QuickSearchCellProps<T extends object> {
+		column: Column<T>;
+		customFilters?: CustomRemoteFilters | undefined;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const { column, customFilters }: QuickSearchCellProps<T> = $props();
+
+	const def = $derived(column.columnDef);
+	const customFilter = $derived(customFilters?.get(def.id));
+
+	const isSelect = $derived(
+		def instanceof SelectDef || customFilter?.type === CustomFilterType.Select
+	);
+
+	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 isNumeric = $derived(
+		('type' in def && def.type === 'Number') || customFilter?.type === CustomFilterType.Number
+	);
+	const options = $derived(
+		isSelect
+			? ((def as SelectDef<T>)?.getAllOptions?.() ??
+					(def as SelectDef<T>).getOptions?.() ??
+					customFilter?.options ??
+					[])
+			: []
+	);
+	const isDate = $derived(def instanceof DateInputDef);
+
+	let inputRef: HTMLInputElement | undefined = $state();
+
+	const selectSymbol = Symbol();
+
+	const openedSelect = getContext<{ value: symbol | null } | null | undefined>(
+		quickFilterContextIdentifier
+	);
+
+	const isSelectOpen = $derived(openedSelect?.value === selectSymbol);
+
+	let value: string | number | null | undefined = $state(null);
+	let valueMin: number | null = $state(null);
+	let valueMax: number | null = $state(null);
+
+	// HACK crappy bodge to get typescript to understand that this won't be always null
+	let selectedOption: SelectOption<string | number> | null = $state(
+		null as unknown as SelectOption<string | number>
+	);
+
+	let selectedOptions: Array<SelectOption<string | number>> = $state([]);
+
+	const inputId = $derived(`${tableContext.tableName}-cell-quicksearch-${column.id}`);
+
+	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)!;
+	});
+
+	function getFilteringStateValue(): unknown {
+		const gotValue = tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value;
+		console.log(gotValue);
+		return gotValue;
+	}
+
+	$effect(() => {
+		if (isSelect) {
+			if (!tableContext.paginationRepo?.filtering) {
+				return;
+			}
+
+			untrack(async () => {
+				const gotValue = getFilteringStateValue() as unknown as
+					| Array<string | number | SelectOption<string | number>>
+					| undefined;
+				const x = (await options).filter((it) => gotValue?.includes(it.value));
+				selectedOptions = x;
+			});
+		} 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;
+			}
+		}
+	});
+
+	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;
+					value = valueMin?.toString();
+				} else if (valueMin == undefined) {
+					valueMin = valueMax;
+					value = valueMax.toString();
+				} else {
+					value = valueMin?.toString();
+				}
+			} else {
+				const gotValue = filterOption.value;
+				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
+					value = gotValue;
+				}
+			}
+		}
+	});
+
+	function closeOnCtrlF(e: KeyboardEvent) {
+		if (e.key.toLocaleUpperCase() === 'F' && e.ctrlKey) {
+			return;
+		}
+		e.stopPropagation();
+	}
+
+	let showFromDateModal = $state(false);
+	let showToDateModal = $state(false);
+</script>
+
+<td class="input-cell">
+	{#if isSearchable}
+		<div class="input-wrapper-parent">
+			{#if isDate}
+				{@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
+							size={Size.FillHeight}
+							onclick={() => {
+								showFromDateModal = true;
+							}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
+						>
+
+						<Button
+							size={Size.FillHeight}
+							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 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}
+			{:else if isNumeric}
+				{#if selectedNumberFilterType.value === NumberDateFilterMode.Between}
+					<div class="input-wrapper left">
+						<NumberInput
+							data-type="quicksearch"
+							id={inputId}
+							bind:value={valueMin}
+							variant={InputVariant.Table}
+							placeholder="Min&hellip;"
+							oninput={() => {
+								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+							}}
+							onkeydown={closeOnCtrlF}
+						/>
+					</div>
+					<div class="input-wrapper right">
+						<NumberInput
+							data-type="quicksearch"
+							id={inputId}
+							bind:value={valueMax}
+							placeholder="Max&hellip;"
+							variant={InputVariant.Table}
+							oninput={() => {
+								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+							}}
+							onkeydown={closeOnCtrlF}
+						/>
+					</div>
+				{:else if typeof value != 'number'}
+					<div class="input-wrapper right">
+						<TextInput
+							data-type="quicksearch"
+							id={inputId}
+							bind:value
+							placeholder="Filter&hellip;"
+							variant={InputVariant.Table}
+							oninput={() => {
+								tableContext.paginationRepo?.filterBy(def.id, [value]);
+							}}
+							onkeydown={closeOnCtrlF}
+						/>
+					</div>
+				{:else if dev}
+					expected string, got number (340)
+				{/if}
+			{:else if typeof value != 'number'}
+				<div class="input-wrapper right">
+					<TextInput
+						data-type="quicksearch"
+						id={inputId}
+						oninput={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+						variant={InputVariant.Table}
+						bind:value
+						bind:inputRef
+						placeholder="Filter&hellip;"
+					/>
+				</div>
+			{:else if dev}
+				expected string, got number (357)
+			{/if}
+
+			<!-- TODO button for date, checkbox or select for checkbox -->
+		</div>
+
+		{#if !isSelect && !isDate}
+			<div class="stick-right">
+				<Action
+					data-type="quicksearch"
+					size={Size.FillHeight}
+					colourSet={ColourSet.Auxiliary}
+					icon={{
+						name: 'filter-2',
+						size: Size.MediumLarge,
+						colour: Colour['$ui-blue-5']
+					}}
+					onclick={() => {
+						if (!openedSelect) {
+							return;
+						}
+						if (openedSelect.value === selectSymbol) {
+							openedSelect.value = null;
+						} else {
+							openedSelect.value = selectSymbol;
+						}
+					}}
+				/>
+			</div>
+		{/if}
+	{:else if dev}
+		<!-- Not Searchable -->
+	{/if}
+
+	{#if isSelectOpen}
+		<div class="floating" transition:fade={{ easing: cubicOut, duration: 100 }}>
+			<div class="select-wrapper">
+				{#if isNumeric}
+					<SingleSelect
+						options={numberDateFilterTypes}
+						labelProp="label"
+						valueProp="value"
+						name="Filter Type"
+						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();
+						}}
+					/>
+				{:else}
+					<SingleSelect
+						options={stringFilterTypes}
+						labelProp="label"
+						valueProp="value"
+						name="Filter Type"
+						valueAsObject
+						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();
+						}}
+					/>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</td>
+
+<style>td {
+  transition: line-height 0.2s ease, height 0.2s ease;
+  --input-border: none;
+  --input-height: var(--height);
+  white-space: nowrap;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  position: relative;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border: solid 1px #cbd4da;
+  border-left: none;
+}
+
+td.input-cell {
+  padding: unset;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+.spaced-around {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  padding-left: 4px;
+  padding-right: 4px;
+  gap: 4px;
+}
+
+td {
+  background-color: #f4f7f9;
+  height: var(--height);
+  overflow: visible;
+  padding-left: 0;
+  padding-right: 0;
+}
+td div.stick-right {
+  position: absolute;
+  right: 0.5rem;
+  height: 100%;
+  bottom: 50%;
+  top: 0;
+  display: flex;
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+}
+
+div.floating {
+  position: absolute;
+  width: 18rem;
+  right: -14.5rem;
+  top: calc(100% + 0.75rem);
+  z-index: 99999;
+  border: solid 2px #cbd4da;
+  border-radius: 4px;
+  box-shadow: 0px 0px 5px 0px #dae0e5;
+}
+div.floating::after {
+  position: absolute;
+  content: "";
+  padding: 0.7rem;
+  z-index: 5;
+  top: -0.75rem;
+  border-radius: 4px;
+  left: 1rem;
+  transform: rotate(45deg);
+  background-color: #ffffff;
+  border: solid 2px #cbd4da;
+}
+div.floating div.select-wrapper {
+  position: relative;
+  z-index: 99999;
+  padding: 1rem;
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  border-radius: 4px;
+}
+
+div.input-wrapper-parent {
+  height: 100%;
+  width: 100%;
+  --input-height: 100%;
+  --input-min-width: 180px;
+  --sv-min-height: 0px;
+  --sv-border: none;
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.25rem;
+  flex-grow: 1;
+  --input-border: none;
+}
+div.input-wrapper-parent div.input-wrapper {
+  position: relative;
+}
+div.input-wrapper-parent div.input-wrapper.left {
+  flex-grow: 2;
+}
+div.input-wrapper-parent div.input-wrapper.right {
+  min-width: 100px;
+  flex-grow: 2;
+  --input-padding-right: 2.6rem;
+}</style>

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

@@ -0,0 +1,30 @@
+import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
+import type { Column } from '../Types/Columns/Column.js';
+export interface QuickSearchCellProps<T extends object> {
+    column: Column<T>;
+    customFilters?: CustomRemoteFilters | undefined;
+}
+declare function $$render<T extends object>(): {
+    props: QuickSearchCellProps<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 QuickSearchCell: $$IsomorphicComponent;
+type QuickSearchCell<T extends object> = InstanceType<typeof QuickSearchCell<T>>;
+export default QuickSearchCell;

package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte

@@ -0,0 +1,67 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface ColumnHighlightProps {
+		rowIndex: number;
+		highlighted: boolean;
+		toggleHighlightedRow: () => void;
+	}
+</script>
+
+<script lang="ts">
+	import Action from '../../../Action.svelte';
+	import { Colour } from '../../../../scss/colours.js';
+	import { Size } from '../../../../Types/Internal/Size.js';
+
+	const { rowIndex, highlighted, toggleHighlightedRow }: ColumnHighlightProps = $props();
+
+	const backgroundColour = $derived(highlighted ? Colour['$brand-primary'] : Colour['$ui-white']);
+</script>
+
+<td id="tagger-row-{rowIndex}">
+	<div class="wrapper">
+		<Action
+			{backgroundColour}
+			hoverBackgroundColour={Colour['$brand-dark']}
+			size={Size.FillWidth}
+			icon={{
+				name: 'nothing'
+			}}
+			onclick={() => toggleHighlightedRow()}
+		/>
+	</div></td
+>
+
+<style>td {
+  transition: line-height 0.2s ease, height 0.2s ease;
+  --input-border: none;
+  --input-height: var(--height);
+  white-space: nowrap;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  position: relative;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border: solid 1px #cbd4da;
+  border-left: none;
+}
+
+td {
+  position: relative;
+  padding: 0;
+}
+
+div.wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.wrapper {
+  overflow: hidden;
+}</style>

package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte.d.ts

@@ -0,0 +1,8 @@
+export interface ColumnHighlightProps {
+    rowIndex: number;
+    highlighted: boolean;
+    toggleHighlightedRow: () => void;
+}
+declare const ColumnHighlight: import("svelte").Component<ColumnHighlightProps, {}, "">;
+type ColumnHighlight = ReturnType<typeof ColumnHighlight>;
+export default ColumnHighlight;

package/dist/Components/Table/Body/Rows/ColumnList.svelte

@@ -0,0 +1,67 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface ColumnListProps {
+		searchValue: string;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	import { getContext } from 'svelte';
+	import { ColumnType } from '../../Types/Columns/ColumnType.js';
+	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import ColumnListRow from './ColumnListRow.svelte';
+	import type { ColumnDef } from '../../Types/Columns/Definitions/ColumnDef.svelte.js';
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const { searchValue }: ColumnListProps = $props();
+
+	const visibleColumns: ColumnDef<T>[] = $derived.by(() => {
+		const lowercasedSearchValue = searchValue.toLocaleLowerCase();
+		return tableContext.columnDefs.filter(
+			(it) =>
+				it.columnType !== ColumnType.FilterOnly &&
+				(it.id.toLowerCase().includes(lowercasedSearchValue) ||
+					(typeof it.header === 'string' &&
+						it.header.toLowerCase().includes(lowercasedSearchValue)))
+		);
+	});
+
+	function onDrop(e: DragEvent) {
+		if (!tableContext.dragTarget) {
+			return;
+		}
+
+		const dropTarget = (e.target as HTMLElement)?.closest('li');
+
+		if (dropTarget) {
+			tableContext.reorderColumn(dropTarget);
+		}
+	}
+</script>
+
+<ul class="column-list" ondrop={onDrop}>
+	<!-- key={"top-anchor"} -->
+	<!-- HACK this is used as an anchor for dragging rows to the top -->
+	<ColumnListRow columnDef={null} />
+
+	<!-- TODO try to find a key for these -->
+	{#each visibleColumns as columnDef (columnDef)}
+		<ColumnListRow {columnDef} />
+	{/each}
+</ul>
+
+<style>ul {
+  list-style: none;
+  background-color: #ffffff;
+}
+
+.column-list {
+  padding-top: unset !important;
+  flex-grow: 2;
+  font-weight: 500;
+  padding: 0.5rem;
+  margin: 0;
+  overflow: auto;
+}</style>