@lavalogic/scoria 0.38.10 → 0.38.12

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

@@ -1,113 +1,113 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import Checkbox from '../../Checkbox.svelte';
-	import DesktopModal from '../../DesktopModal.svelte';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
-
-	let { onclose }: ToolboxPanelModalProps = $props();
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
-		tableContext.setIsCompact(e.currentTarget.checked);
-	};
-
-	const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
-		tableContext.setSingleClickEditing(e.currentTarget.checked);
-	};
-
-	const onAlternateRowColoursChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setAlternateRowColours(e.currentTarget.checked);
-	};
-
-	const onChangeColourOnHoverChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setChangeColourOnHover(e.currentTarget.checked);
-	};
-
-	const onCopyWithHeadersChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setCopyWithHeaders(e.currentTarget.checked);
-	};
-
-	const onCommaSeparatedCopyChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
-	};
-</script>
-
-<DesktopModal
-	headerLabel="Table Settings"
-	onclose={() => onclose?.()}
-	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
->
-	<div class="flex">
-		<div class="column-panel">
-			<Checkbox
-				label="Compact"
-				size={Size.MediumSmall}
-				id={`is-compact-${tableContext.tableName}-modal`}
-				value={tableContext.isCompact}
-				onchange={onCompactChange}
-			/>
-			<Checkbox
-				label="Single Click Editing"
-				size={Size.MediumSmall}
-				id={`single-click-editing-${tableContext.tableName}-modal`}
-				value={tableContext.singleClickEditing}
-				onchange={onSingleClickChange}
-			/>
-			<Checkbox
-				label="Alternate Row Colours"
-				size={Size.MediumSmall}
-				id={`alternate-row-colours-${tableContext.tableName}-modal`}
-				value={tableContext.alternateRowColours}
-				onchange={onAlternateRowColoursChange}
-			/>
-			<Checkbox
-				label="Change Colour on Hover"
-				size={Size.MediumSmall}
-				id={`change-colour-on-hover-${tableContext.tableName}-modal`}
-				value={tableContext.changeColourOnHover}
-				onchange={onChangeColourOnHoverChange}
-			/>
-			{#if tableContext.allowCopy}
-				<Checkbox
-					label="Include Headers When Copying"
-					size={Size.MediumSmall}
-					id={`copy-with-headers-${tableContext.tableName}-modal`}
-					value={tableContext.copyWithHeaders}
-					onchange={onCopyWithHeadersChange}
-				/>
-				<Checkbox
-					label="Copy as Comma Separated Values"
-					size={Size.MediumSmall}
-					id={`comma-separated-copy-${tableContext.tableName}-modal`}
-					value={tableContext.commaSeparatedCopy}
-					onchange={onCommaSeparatedCopyChange}
-				/>
-			{/if}
-		</div>
-	</div>
-</DesktopModal>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Checkbox from '../../Checkbox.svelte';
+	import DesktopModal from '../../DesktopModal.svelte';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
+
+	let { onclose }: ToolboxPanelModalProps = $props();
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setIsCompact(e.currentTarget.checked);
+	};
+
+	const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setSingleClickEditing(e.currentTarget.checked);
+	};
+
+	const onAlternateRowColoursChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setAlternateRowColours(e.currentTarget.checked);
+	};
+
+	const onChangeColourOnHoverChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setChangeColourOnHover(e.currentTarget.checked);
+	};
+
+	const onCopyWithHeadersChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCopyWithHeaders(e.currentTarget.checked);
+	};
+
+	const onCommaSeparatedCopyChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
+	};
+</script>
+
+<DesktopModal
+	headerLabel="Table Settings"
+	onclose={() => onclose?.()}
+	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+>
+	<div class="flex">
+		<div class="column-panel">
+			<Checkbox
+				label="Compact"
+				size={Size.MediumSmall}
+				id={`is-compact-${tableContext.tableName}-modal`}
+				value={tableContext.isCompact}
+				onchange={onCompactChange}
+			/>
+			<Checkbox
+				label="Single Click Editing"
+				size={Size.MediumSmall}
+				id={`single-click-editing-${tableContext.tableName}-modal`}
+				value={tableContext.singleClickEditing}
+				onchange={onSingleClickChange}
+			/>
+			<Checkbox
+				label="Alternate Row Colours"
+				size={Size.MediumSmall}
+				id={`alternate-row-colours-${tableContext.tableName}-modal`}
+				value={tableContext.alternateRowColours}
+				onchange={onAlternateRowColoursChange}
+			/>
+			<Checkbox
+				label="Change Colour on Hover"
+				size={Size.MediumSmall}
+				id={`change-colour-on-hover-${tableContext.tableName}-modal`}
+				value={tableContext.changeColourOnHover}
+				onchange={onChangeColourOnHoverChange}
+			/>
+			{#if tableContext.allowCopy}
+				<Checkbox
+					label="Include Headers When Copying"
+					size={Size.MediumSmall}
+					id={`copy-with-headers-${tableContext.tableName}-modal`}
+					value={tableContext.copyWithHeaders}
+					onchange={onCopyWithHeadersChange}
+				/>
+				<Checkbox
+					label="Copy as Comma Separated Values"
+					size={Size.MediumSmall}
+					id={`comma-separated-copy-${tableContext.tableName}-modal`}
+					value={tableContext.commaSeparatedCopy}
+					onchange={onCommaSeparatedCopyChange}
+				/>
+			{/if}
+		</div>
+	</div>
+</DesktopModal>
+
 <style>.flex {
   display: flex;
   flex-flow: column nowrap;
   height: 100%;
   width: 100%;
   flex: 1;
-}</style>
+}</style>

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

@@ -0,0 +1,225 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import DesktopModal from '../../DesktopModal.svelte';
+	import Icon from '../../Icon.svelte';
+	import InfoAlert from '../../InfoAlert.svelte';
+	import SingleSelect from '../../SingleSelect.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
+	import { ColourSet } from '../../../scss/colours.js';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { getContext, onMount } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import type { DatatableViewVisibility } from '../Types/Persistence/DatatableView.js';
+	import type { UpdateViewOptionsModalProps } from './UpdateViewOptionsModalProps.js';
+
+	const { view, onclose, onsaved }: UpdateViewOptionsModalProps = $props();
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	// Local form state. Seeded from the view's current values inside
+	// `onMount` so the modal opens populated with what's already saved
+	// without triggering Svelte's `state_referenced_locally` lint
+	// against the prop read; Save diffs against the view's current
+	// values to skip a no-op PATCH.
+	let name: string = $state('');
+	let visibility: DatatableViewVisibility = $state('private');
+
+	onMount(() => {
+		name = view.name;
+		visibility = view.visibility ?? 'private';
+	});
+
+	// User-visible error banner. Adapter rejections are routed here so
+	// the modal never throws into the host UI.
+	let errorMessage = $state<string | null>(null);
+
+	// `true` while the PATCH is in flight, disables the footer buttons.
+	let saving = $state(false);
+
+	const visibilityOptions: Array<SelectOption<DatatableViewVisibility>> = [
+		{
+			label: 'Private — only owner and explicit subscribers',
+			value: 'private',
+		},
+		{
+			label: 'Public — anyone with access to this table can subscribe',
+			value: 'public',
+		},
+	];
+
+	const selectedVisibility: SelectOption<DatatableViewVisibility> = $derived(
+		visibilityOptions.find((o) => o.value === visibility) ?? visibilityOptions[0]
+	);
+
+	// Whether anything in the form differs from the initial values.
+	// Drives the Save button's disabled state so a no-op Save never
+	// hits the network (also enforced inside `updateViewOptions`).
+	const dirty = $derived(
+		name.trim() !== view.name || visibility !== (view.visibility ?? 'private')
+	);
+
+	/** Whether the name is valid for submission (non-empty, trimmed). */
+	const isValidName = $derived(name.trim().length > 0);
+
+	async function save(): Promise<void> {
+		if (!dirty) {
+			onclose();
+			return;
+		}
+		if (!isValidName) {
+			errorMessage = `Name cannot be empty.`;
+			return;
+		}
+
+		errorMessage = null;
+		saving = true;
+		try {
+			await tableContext.updateViewOptions(view, {
+				name: name.trim(),
+				visibility,
+			});
+			if (onsaved) {
+				await onsaved();
+			}
+			onclose();
+		} catch (e: unknown) {
+			console.error('[UpdateViewOptionsModal] save failed:', e);
+			errorMessage =
+				e instanceof Error
+					? `Could not update options. (${e.message})`
+					: 'Could not update options.';
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+<DesktopModal
+	headerLabel={`Update Options - "${view.name}"`}
+	headerSubtitle={`Rename and change sharing for this ${view.kind === 'filter' ? 'filter' : 'layout'}.`}
+	onclose={() => {
+		if (!saving) {
+			onclose();
+		}
+	}}
+	width={cssLength('40vw')}
+	minWidth={cssLength('32rem')}
+	buttons={[
+		{
+			label: 'Cancel',
+			callback: () => {
+				if (!saving) {
+					onclose();
+				}
+			},
+			disabled: saving,
+		},
+		{
+			label: saving ? 'Saving…' : 'Save',
+			callback: () => {
+				void save();
+			},
+			colourSet: ColourSet.Primary,
+			disabled: saving || !dirty || !isValidName,
+		},
+	]}
+>
+	<div class="options-body">
+		{#if errorMessage}
+			<div
+				class="error-banner"
+				role="alert"
+			>
+				<Icon
+					name="circle-exclamation"
+					size={Size.Small}
+				/>
+				<span>{errorMessage}</span>
+			</div>
+		{/if}
+
+		<InfoAlert>
+			Changes apply to every user who has access to this {view.kind === 'filter'
+				? 'filter'
+				: 'layout'}. Making it public allows any user with access to the table to subscribe.
+		</InfoAlert>
+
+		<div class="field">
+			<label
+				class="field-label"
+				for="update-view-name">Name</label
+			>
+			<TextInput
+				id="update-view-name"
+				bind:value={name}
+				placeholder={`${view.kind === 'filter' ? 'Filter' : 'Layout'} name`}
+				required
+				invalid={!isValidName}
+			/>
+		</div>
+
+		<div class="field">
+			<label
+				class="field-label"
+				for="update-view-visibility">Visibility</label
+			>
+			<SingleSelect
+				inputId="update-view-visibility"
+				name="Visibility"
+				options={visibilityOptions}
+				labelProp="label"
+				valueProp="value"
+				value={selectedVisibility}
+				valueAsObject
+				searchable={false}
+				onchange={(option: SelectOption<DatatableViewVisibility> | null) => {
+					if (option) {
+						visibility = option.value;
+					}
+				}}
+			/>
+		</div>
+	</div>
+</DesktopModal>
+
+<style>.options-body {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  padding: 1rem;
+  min-height: 25vh;
+  max-height: 60vh;
+  overflow-y: auto;
+  background-color: #ffffff;
+}
+
+.error-banner {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: solid 1px #aa1414;
+  border-radius: 4px;
+  background-color: #f9e9e9;
+  color: #aa1414;
+}
+
+.field {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.25rem;
+}
+
+.field-label {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #3a4952;
+}</style>

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

@@ -0,0 +1,26 @@
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+import type { UpdateViewOptionsModalProps } from './UpdateViewOptionsModalProps.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
+    props: UpdateViewOptionsModalProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const UpdateViewOptionsModal: $$IsomorphicComponent;
+type UpdateViewOptionsModal<T extends object, IdType extends Primitive> = InstanceType<typeof UpdateViewOptionsModal<T, IdType>>;
+export default UpdateViewOptionsModal;

package/dist/Components/Table/Misc/UpdateViewOptionsModalProps.d.ts

@@ -0,0 +1,21 @@
+import type { DatatableView } from '../Types/Persistence/DatatableView.js';
+/**
+ * Props for `UpdateViewOptionsModal` - the FPM 403 round-6 dialog
+ * opened from a saved view card's "Update Options" button. The modal
+ * lets the user rename the view and toggle its sharing visibility
+ * (`'private'` / `'public'`); Save patches both fields in one call
+ * through `TableContext.updateViewOptions`.
+ */
+export interface UpdateViewOptionsModalProps {
+    /** The saved view being edited. Its current `name` / `visibility`
+     *  pre-populate the form; `id` + `kind` are forwarded to the
+     *  update call. */
+    view: DatatableView;
+    /** Called when the modal should close - both on Cancel and after
+     *  a successful Save. */
+    onclose: () => void;
+    /** Called after a successful Save, before `onclose`. The host
+     *  wires this to a saved-views refresh so the My-* card label
+     *  reflects the new name. Optional - omit to skip the refresh. */
+    onsaved?: () => void | Promise<void>;
+}

package/dist/Components/Table/Misc/UpdateViewOptionsModalProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts

@@ -13,7 +13,7 @@ import type { VisibilityState } from '../Columns/VisibilityState.js';
 import type { CellCoordinates } from '../Coordinates/CellCoordinates.js';
 import type { VisualColumnIndex } from '../Coordinates/ColumnIndices.js';
 import type { RemoteTableLayoutAdapter } from '../Persistence/RemoteTableLayoutAdapter.js';
-import type { DatatableView } from '../Persistence/DatatableView.js';
+import type { DatatableView, DatatableViewVisibility } from '../Persistence/DatatableView.js';
 import type { DatatableViewKind } from '../Persistence/DatatableViewKind.js';
 import type { IDataRepository } from '../DataRepository/IDataRepository.js';
 import { SortingState } from './SortingState.svelte.js';
@@ -943,6 +943,54 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
      * disabled. An adapter rejection is routed to `devCatch`.
      */
     readonly saveActiveView: (kind: DatatableViewKind) => Promise<void>;
+    /**
+     * Save the live state of the table INTO an arbitrary saved view,
+     * overwriting that view's stored body. Unlike `saveActiveView` -
+     * which only works when the target IS the kind's active view -
+     * this accepts any saved view: a "Save Layout" / "Save Filter"
+     * button on a card can overwrite the saved view with the user's
+     * current tweaks regardless of what the active view is.
+     *
+     * Flow:
+     *
+     * 1. capture the live layout / filter (chosen by `view.kind`);
+     * 2. `await remoteLayouts.updateView({ id, body })`;
+     * 3. swap the matching entry in that kind's saved-views list with
+     *    the authoritative server return;
+     * 4. if the just-saved view IS the kind's currently active view,
+     *    repoint that kind's baseline at the new body and clear the
+     *    dirty flag - the dropdown immediately reads "<name>" instead
+     *    of "<name> (unsaved)".
+     *
+     * No-op (dev-logged) when remote saved views are disabled. Adapter
+     * rejections are re-thrown so the caller can surface them in the
+     * Table Configuration modal's inline error banner.
+     */
+    readonly saveLiveStateIntoView: (view: DatatableView) => Promise<void>;
+    /**
+     * Update a saved view's options - currently its `name` and
+     * `visibility`. The view's body is left untouched (use
+     * `saveLiveStateIntoView` or `saveActiveView` for that). Driven by
+     * the "Update Options" modal on each My-* card.
+     *
+     * Flow:
+     *
+     * 1. `await remoteLayouts.updateView({ id, name?, visibility? })`;
+     * 2. swap the matching entry in that kind's saved-views list with
+     *    the authoritative server return so the new name / visibility
+     *    are reflected in every reactive surface;
+     * 3. if the renamed view IS the kind's currently active view, push
+     *    the new name onto the active-view ref so the quick-switch
+     *    dropdown and "active view" label update immediately.
+     *
+     * No-op (dev-logged) when remote saved views are disabled. Adapter
+     * rejections are re-thrown so the caller can surface them in the
+     * modal.
+     */
+    readonly updateViewOptions: (view: DatatableView, options: {
+        name?: string;
+        visibility?: DatatableViewVisibility;
+    }) => Promise<void>;
     /**
      * Fetch the saved views for this datatable through the injected
      * `remoteLayouts` adapter and publish them into `_viewState`, split by