@lavalogic/scoria 0.37.56 → 0.38.1

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

@@ -0,0 +1,626 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Button from '../../Button.svelte';
+	import DesktopModal from '../../DesktopModal.svelte';
+	import HorizontalTabGroup from '../../HorizontalTabGroup.svelte';
+	import Icon from '../../Icon.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import VerticalTabGroup from '../../VerticalTabGroup.svelte';
+	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import type { TabOption } from '../../../Types/Internal/TabOption.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import type { DatatableView } from '../Types/Persistence/DatatableView.js';
+	import type { DatatableViewKind } from '../Types/Persistence/DatatableViewKind.js';
+	import type { TableConfigurationModalProps } from './TableConfigurationModalProps.js';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const { onclose }: TableConfigurationModalProps = $props();
+
+	// ── Left-nav section + right-pane tab selection ──────────────────────
+	// `section` picks the kind (layout vs filter); `tab` picks which of the
+	// three horizontal panes is visible for that section. Both are plain
+	// `$state` since they are pure local UI selection. They drive the
+	// `selected` prop of the two scoria tab groups below.
+	let section = $state<DatatableViewKind>('layout');
+	type ConfigTab = 'mine' | 'shared' | 'save';
+	let tab = $state<ConfigTab>('mine');
+
+	// Name field for the "Save a new ..." tab.
+	let newViewName = $state('');
+
+	// Public-views discovery state for the "Subscribe to Additional" flow.
+	// `null` = not yet loaded; an array = the last successful fetch.
+	let publicViews = $state<ReadonlyArray<DatatableView> | null>(null);
+	let loadingPublicViews = $state(false);
+
+	// User-visible error banner. Every adapter call is wrapped so a
+	// rejection lands here instead of throwing into the UI. scoria cannot
+	// assume a host-provided toast context exists, so the modal surfaces
+	// errors inline in its own body.
+	let errorMessage = $state<string | null>(null);
+
+	// Whether remote saved views are available at all. A table created
+	// without `datatableUuid` / `remoteLayouts` opts out of remote views;
+	// the modal then renders a graceful "unavailable" empty state and
+	// makes zero adapter calls.
+	const remoteAvailable = $derived(
+		tableContext.datatableUuid !== undefined && tableContext.remoteLayouts !== undefined
+	);
+
+	// The opaque current-user id, used to scope "mine" vs "shared" and to
+	// drive subscribe / unsubscribe. `undefined` when the host supplied
+	// `() => undefined` - sharing controls then degrade gracefully.
+	const currentUserId = $derived(tableContext.getUserId());
+
+	// All saved views of the active section, split by ownership. A view the
+	// current user owns is "mine"; anything else they can see is "shared"
+	// (a subscription). When no user id is available every view falls into
+	// "mine" so the user can still manage what they have.
+	const sectionViews = $derived(tableContext._viewState.savedViews(section));
+	const myViews = $derived(
+		sectionViews.filter((view) => currentUserId === undefined || view.ownerUserId === currentUserId)
+	);
+	const sharedViews = $derived(
+		sectionViews.filter((view) => currentUserId !== undefined && view.ownerUserId !== currentUserId)
+	);
+
+	// Human labels for the active section, so the three tabs and headings
+	// read "My Layouts" / "My Filters" etc. without branching everywhere.
+	const sectionNoun = $derived(section === 'filter' ? 'Filter' : 'Layout');
+	const sectionNounPlural = $derived(section === 'filter' ? 'Filters' : 'Layouts');
+
+	/**
+	 * Run an adapter-backed action, clearing any prior error first and
+	 * routing a rejection to the inline error banner. Keeps every async
+	 * branch below a one-liner and guarantees no rejection escapes to the
+	 * UI (the modal never throws).
+	 */
+	async function guard(action: () => Promise<void>, failureMessage: string): Promise<void> {
+		errorMessage = null;
+		try {
+			await action();
+		} catch {
+			errorMessage = failureMessage;
+		}
+	}
+
+	/** Apply a saved view to the live table. Pure local call - no await. */
+	function applyView(view: DatatableView): void {
+		errorMessage = null;
+		tableContext.applyDatatableView(view);
+	}
+
+	/** Delete a view the current user owns, then refresh the lists. */
+	function deleteView(view: DatatableView): void {
+		const adapter = tableContext.remoteLayouts;
+		if (!adapter) {
+			return;
+		}
+		void guard(async () => {
+			await adapter.deleteView(view.id);
+			await tableContext.refreshSavedViews();
+		}, `Could not delete "${view.name}". Please try again.`);
+	}
+
+	/** Save the live state of the active section as a brand-new view. */
+	function saveNewView(): void {
+		const trimmed = newViewName.trim();
+		if (!trimmed) {
+			return;
+		}
+		void guard(async () => {
+			await tableContext.saveCurrentAsNewView(trimmed, section);
+			newViewName = '';
+		}, `Could not save the new ${sectionNoun.toLowerCase()}. Please try again.`);
+	}
+
+	/** Remove the current user as a subscriber of a shared view. */
+	function unsubscribe(view: DatatableView): void {
+		const adapter = tableContext.remoteLayouts;
+		if (!adapter || currentUserId === undefined) {
+			return;
+		}
+		void guard(async () => {
+			await adapter.removeSubscriber(view.id, currentUserId);
+			await tableContext.refreshSavedViews();
+		}, `Could not unsubscribe from "${view.name}". Please try again.`);
+	}
+
+	/** Remove a named subscriber from a view the current user owns. */
+	function removeSubscriber(view: DatatableView, userId: string): void {
+		const adapter = tableContext.remoteLayouts;
+		if (!adapter) {
+			return;
+		}
+		void guard(async () => {
+			await adapter.removeSubscriber(view.id, userId);
+			await tableContext.refreshSavedViews();
+		}, 'Could not remove the subscriber. Please try again.');
+	}
+
+	/** Fetch the public views the user could subscribe to. */
+	function loadPublicViews(): void {
+		const adapter = tableContext.remoteLayouts;
+		const datatableUuid = tableContext.datatableUuid;
+		if (!adapter || datatableUuid === undefined) {
+			return;
+		}
+		loadingPublicViews = true;
+		void guard(async () => {
+			const all = await adapter.listPublicViews(datatableUuid);
+			publicViews = all.filter((view) => view.kind === section);
+		}, 'Could not load views available to subscribe to. Please try again.').finally(() => {
+			loadingPublicViews = false;
+		});
+	}
+
+	/** Subscribe the current user to a public view, then refresh. */
+	function subscribe(view: DatatableView): void {
+		const adapter = tableContext.remoteLayouts;
+		if (!adapter || currentUserId === undefined) {
+			return;
+		}
+		void guard(async () => {
+			await adapter.addSubscriber(view.id, currentUserId);
+			await tableContext.refreshSavedViews();
+			loadPublicViews();
+		}, `Could not subscribe to "${view.name}". Please try again.`);
+	}
+
+	/** Switch the active left-nav section, resetting the tab + scratch UI. */
+	function selectSection(next: DatatableViewKind): void {
+		section = next;
+		tab = 'mine';
+		newViewName = '';
+		publicViews = null;
+		errorMessage = null;
+	}
+
+	/** Switch the active right-pane tab, resetting tab-local scratch UI. */
+	function selectTab(next: ConfigTab): void {
+		tab = next;
+		errorMessage = null;
+		if (next !== 'save') {
+			newViewName = '';
+		}
+		if (next !== 'shared') {
+			publicViews = null;
+		}
+	}
+
+	// ── scoria tab-group wiring ──────────────────────────────────────────
+	// The left-hand vertical nav is a `HorizontalTabGroup` (tabs strip on
+	// the left, content on the right); the top horizontal tabs are a
+	// `VerticalTabGroup` (tabs strip on top, content below). Same two
+	// scoria primitives the flowms order-allocation modal uses, so the
+	// look is consistent across the app.
+
+	/** The three top tabs for the active section. Rebuilt when the section
+	 *  flips so the labels track "My Layouts" / "My Filters" etc. */
+	const innerTabs: Array<TabOption<{ tab: ConfigTab }>> = $derived([
+		{
+			label: `My ${sectionNounPlural}`,
+			content: tabBody,
+			args: { tab: 'mine' },
+			onclick: () => {
+				selectTab('mine');
+			},
+		},
+		{
+			// DESIGN-REVIEW: the mockups were internally inconsistent
+			// ("Subscribed to Filters" on one, "Shared Filters" on
+			// another). Resolved to "Shared" consistently for both the
+			// layout and filter sections.
+			label: `Shared ${sectionNounPlural}`,
+			content: tabBody,
+			args: { tab: 'shared' },
+			onclick: () => {
+				selectTab('shared');
+			},
+		},
+		{
+			label: `Save a new ${sectionNoun}`,
+			content: tabBody,
+			args: { tab: 'save' },
+			onclick: () => {
+				selectTab('save');
+			},
+		},
+	]);
+
+	const selectedInnerTab = $derived(innerTabs.find((t) => t.args.tab === tab) ?? innerTabs[0]);
+
+	/** The two left-nav sections. Each renders the inner `VerticalTabGroup`
+	 *  via the shared `sectionPane` snippet. */
+	const sectionTabs: Array<TabOption<{ kind: DatatableViewKind }>> = [
+		{
+			label: 'Table Layouts',
+			content: sectionPane,
+			args: { kind: 'layout' },
+			onclick: () => {
+				selectSection('layout');
+			},
+		},
+		{
+			label: 'Table Filters',
+			content: sectionPane,
+			args: { kind: 'filter' },
+			onclick: () => {
+				selectSection('filter');
+			},
+		},
+	];
+
+	const selectedSectionTab = $derived(
+		sectionTabs.find((t) => t.args.kind === section) ?? sectionTabs[0]
+	);
+</script>
+
+<!-- Left-nav section pane: the top horizontal tabs for the active kind. -->
+{#snippet sectionPane(_args: { kind: DatatableViewKind })}
+	<div class="pane">
+		<VerticalTabGroup
+			tabs={innerTabs}
+			selected={selectedInnerTab}
+			nohistory
+		/>
+	</div>
+{/snippet}
+
+<!-- Body of a single top tab (My / Shared / Save). -->
+{#snippet tabBody(args: { tab: ConfigTab })}
+	<div class="tab-body">
+		{#if errorMessage}
+			<div
+				class="error-banner"
+				role="alert"
+			>
+				<Icon
+					name="circle-exclamation"
+					size={Size.Small}
+				/>
+				<span>{errorMessage}</span>
+			</div>
+		{/if}
+
+		{#if args.tab === 'mine'}
+			{#if myViews.length === 0}
+				<p class="muted">
+					You have not saved any {sectionNounPlural.toLowerCase()} yet. Use the "Save a new {sectionNoun}"
+					tab to create one.
+				</p>
+			{:else}
+				<ul class="card-list">
+					{#each myViews as view (view.id)}
+						<li class="view-card">
+							<div class="view-card-head">
+								<span class="view-name">{view.name}</span>
+								<div class="view-actions">
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										onclick={() => {
+											applyView(view);
+										}}>Apply</Button
+									>
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										iconLeft={{ name: 'external-link', size: Size.Small }}
+										onclick={() => {
+											selectTab('shared');
+										}}>Share</Button
+									>
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										iconLeft={{ name: 'circle-cross', size: Size.Small }}
+										onclick={() => {
+											deleteView(view);
+										}}>Delete</Button
+									>
+								</div>
+							</div>
+							{#if view.subscribers && view.subscribers.length > 0}
+								<ul class="subscriber-list">
+									{#each view.subscribers as subscriber (subscriber.userId)}
+										<li class="subscriber">
+											<Icon
+												name="user-3"
+												size={Size.Small}
+											/>
+											<span>{subscriber.displayName ?? subscriber.userId}</span>
+											<Button
+												variant={Variant.Secondary}
+												size={Size.Tiny}
+												nowrap
+												onclick={() => {
+													removeSubscriber(view, subscriber.userId);
+												}}>Remove</Button
+											>
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		{:else if args.tab === 'shared'}
+			<div class="shared-head">
+				<Button
+					variant={Variant.Secondary}
+					size={Size.MediumSmall}
+					nowrap
+					disabled={loadingPublicViews}
+					iconLeft={{ name: 'circle-plus', size: Size.Small }}
+					onclick={loadPublicViews}>Subscribe to Additional...</Button
+				>
+			</div>
+
+			{#if publicViews !== null}
+				{#if publicViews.length === 0}
+					<p class="muted">
+						There are no further {sectionNounPlural.toLowerCase()} available to subscribe to.
+					</p>
+				{:else}
+					<ul class="card-list">
+						{#each publicViews as view (view.id)}
+							<li class="view-card">
+								<div class="view-card-head">
+									<span class="view-name">{view.name}</span>
+									<div class="view-actions">
+										<Button
+											variant={Variant.Secondary}
+											size={Size.MediumSmall}
+											nowrap
+											disabled={currentUserId === undefined}
+											onclick={() => {
+												subscribe(view);
+											}}>Subscribe</Button
+										>
+									</div>
+								</div>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			{/if}
+
+			{#if sharedViews.length === 0}
+				<p class="muted">
+					No {sectionNounPlural.toLowerCase()} are currently shared with you.
+				</p>
+			{:else}
+				<ul class="card-list">
+					{#each sharedViews as view (view.id)}
+						<li class="view-card">
+							<div class="view-card-head">
+								<span class="view-name">{view.name}</span>
+								<div class="view-actions">
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										onclick={() => {
+											applyView(view);
+										}}>Apply</Button
+									>
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										disabled={currentUserId === undefined}
+										onclick={() => {
+											unsubscribe(view);
+										}}>Unsubscribe</Button
+									>
+								</div>
+							</div>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		{:else}
+			<div class="save-tab">
+				<p class="muted">
+					Save the table's current {sectionNoun.toLowerCase()} as a reusable named
+					{sectionNoun.toLowerCase()}.
+				</p>
+				<TextInput
+					placeholder={`${sectionNoun} name`}
+					bind:value={newViewName}
+					onkeydown={(e: KeyboardEvent) => {
+						if (e.key === 'Enter') {
+							e.preventDefault();
+							saveNewView();
+						}
+					}}
+				/>
+				<Button
+					type="submit"
+					variant={Variant.Primary}
+					size={Size.MediumSmall}
+					nowrap
+					disabled={!newViewName.trim()}
+					onclick={saveNewView}>Save Current</Button
+				>
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+<DesktopModal
+	headerLabel="Table Configuration"
+	headerSubtitle={tableContext.datatableUuid
+		? `Table Identifier: ${tableContext.datatableUuid}`
+		: undefined}
+	onclose={() => onclose?.()}
+	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+	width={cssLength('50vw')}
+	minWidth={cssLength('40rem')}
+>
+	{#if !remoteAvailable}
+		<div class="empty-state">
+			<Icon
+				name="circle-information"
+				size={Size.Large}
+			/>
+			<p>Saved layouts and filters are unavailable for this table.</p>
+		</div>
+	{:else}
+		<div class="config">
+			<HorizontalTabGroup
+				tabs={sectionTabs}
+				selected={selectedSectionTab}
+				grow
+			/>
+		</div>
+	{/if}
+</DesktopModal>
+
+<style>.empty-state {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 3rem 1rem;
+  text-align: center;
+  color: #3a4952;
+}
+
+/* Fixed-frame wrapper. The modal is a fixed 50vw (see the `width`
+   prop on `DesktopModal`); this `.config` lets the tab group fill
+   that frame and the tab body scroll inside it, so switching nav
+   section or top tab never reflows the dialog. */
+.config {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
+/* The right-hand content pane that each left-nav section renders:
+   holds the top horizontal tabs and their scrolling body. */
+.pane {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+}
+
+.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;
+}
+
+/* The body of a single top tab. Scrolls within the fixed modal
+   frame rather than growing the dialog. */
+.tab-body {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  padding: 1rem;
+  min-height: 0;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.muted {
+  color: #647d8e;
+}
+
+.card-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.5rem;
+}
+
+.view-card {
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  padding: 0.6rem 0.75rem;
+  background-color: #ffffff;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.5rem;
+}
+
+.view-card-head {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.view-name {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.view-actions {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+
+.subscriber-list {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.25rem;
+  border-top: solid 1px #dae0e5;
+}
+
+.subscriber {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.shared-head {
+  display: flex;
+  flex-flow: row nowrap;
+  margin-bottom: 0.5rem;
+}
+
+.save-tab {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  max-width: 24rem;
+}</style>

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

@@ -0,0 +1,26 @@
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+import type { TableConfigurationModalProps } from './TableConfigurationModalProps.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
+    props: TableConfigurationModalProps;
+    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 TableConfigurationModal: $$IsomorphicComponent;
+type TableConfigurationModal<T extends object, IdType extends Primitive> = InstanceType<typeof TableConfigurationModal<T, IdType>>;
+export default TableConfigurationModal;

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

@@ -0,0 +1,13 @@
+/**
+ * Props for `TableConfigurationModal` - the FPM 403 "Table Configuration"
+ * modal that manages saved datatable layouts and filters (the new view
+ * system that supersedes the old named-preset box).
+ *
+ * The modal is driven entirely by the `TableContext` it reads from
+ * Svelte context; it has no data props of its own. It only needs a way
+ * to tell its host the panel should close.
+ */
+export interface TableConfigurationModalProps {
+    /** Called when the modal requests close (footer button / backdrop). */
+    onclose?: () => void;
+}

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

@@ -15,6 +15,7 @@
 	import { ExpandedPanel } from '../Types/ExpandedPanel.js';
 	import ColumnPanelModal from './ColumnPanelModal.svelte';
 	import FilterPanelModal from './FilterPanelModal.svelte';
+	import TableConfigurationModal from './TableConfigurationModal.svelte';
 	import ToolboxPanelModal from './ToolboxPanelModal.svelte';
 
 	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
@@ -24,6 +25,7 @@
 		[ExpandedPanel.Column]: ColumnPanelModal,
 		[ExpandedPanel.Filter]: FilterPanelModal,
 		[ExpandedPanel.Toolbox]: ToolboxPanelModal,
+		[ExpandedPanel.Configuration]: TableConfigurationModal,
 	} as const;
 
 	let expandedPanel = $state<ExpandedPanel | null>(null);
@@ -89,6 +91,19 @@
 			name: 'category',
 		}}>My Tool Box</Button
 	>
+	<Button
+		size={Size.Small}
+		side={Side.Bottom}
+		toggled={expandedPanel === ExpandedPanel.Configuration}
+		onclick={() => {
+			expandedPanel =
+				expandedPanel === ExpandedPanel.Configuration ? null : ExpandedPanel.Configuration;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'setting-cog',
+		}}>Table Configuration</Button
+	>
 	{#if tableContext.dataRepo.addEmptyRow}
 		<Button
 			size={Size.Small}