@lavalogic/scoria 0.37.56 → 0.38.0

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

@@ -0,0 +1,644 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Button from '../../Button.svelte';
+	import DesktopModal from '../../DesktopModal.svelte';
+	import Icon from '../../Icon.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import { Size } from '../../../Types/Internal/Size.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.
+	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;
+		}
+	}
+</script>
+
+<DesktopModal
+	headerLabel="Table Configuration"
+	headerSubtitle={tableContext.datatableUuid
+		? `Table Identifier: ${tableContext.datatableUuid}`
+		: undefined}
+	onclose={() => onclose?.()}
+	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+>
+	{#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">
+			<!-- Left vertical nav: pick the kind being configured. -->
+			<nav class="side-nav">
+				<button
+					type="button"
+					class="nav-item"
+					class:active={section === 'layout'}
+					onclick={() => {
+						selectSection('layout');
+					}}
+				>
+					Table Layouts
+				</button>
+				<button
+					type="button"
+					class="nav-item"
+					class:active={section === 'filter'}
+					onclick={() => {
+						selectSection('filter');
+					}}
+				>
+					Table Filters
+				</button>
+			</nav>
+
+			<div class="pane">
+				<!-- Three horizontal tabs for the selected section. -->
+				<div
+					class="tabs"
+					role="tablist"
+				>
+					<button
+						type="button"
+						role="tab"
+						aria-selected={tab === 'mine'}
+						class="tab"
+						class:active={tab === 'mine'}
+						onclick={() => {
+							selectTab('mine');
+						}}
+					>
+						My {sectionNounPlural}
+					</button>
+					<button
+						type="button"
+						role="tab"
+						aria-selected={tab === 'shared'}
+						class="tab"
+						class:active={tab === 'shared'}
+						onclick={() => {
+							selectTab('shared');
+						}}
+					>
+						<!-- 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. -->
+						Shared {sectionNounPlural}
+					</button>
+					<button
+						type="button"
+						role="tab"
+						aria-selected={tab === 'save'}
+						class="tab"
+						class:active={tab === 'save'}
+						onclick={() => {
+							selectTab('save');
+						}}
+					>
+						Save a new {sectionNoun}
+					</button>
+				</div>
+
+				{#if errorMessage}
+					<div
+						class="error-banner"
+						role="alert"
+					>
+						<Icon
+							name="circle-exclamation"
+							size={Size.Small}
+						/>
+						<span>{errorMessage}</span>
+					</div>
+				{/if}
+
+				<div class="tab-body">
+					{#if 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 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>
+			</div>
+		</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;
+}
+
+.config {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 1rem;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
+.side-nav {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.25rem;
+  flex-shrink: 0;
+  border-right: solid 2px #cbd4da;
+  padding-right: 1rem;
+}
+.side-nav .nav-item {
+  text-align: left;
+  white-space: nowrap;
+  padding: 0.6rem 0.9rem;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  background-color: #ffffff;
+  color: #3a4952;
+  font-weight: 600;
+  cursor: pointer;
+}
+.side-nav .nav-item:hover {
+  background-color: #e9ecf1;
+}
+.side-nav .nav-item.active {
+  background-color: #cbd4da;
+  color: #455661;
+}
+
+.pane {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.tabs {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.25rem;
+  border-bottom: solid 2px #cbd4da;
+}
+.tabs .tab {
+  padding: 0.5rem 0.9rem;
+  border: none;
+  border-bottom: solid 3px transparent;
+  background-color: transparent;
+  color: #3a4952;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.tabs .tab:hover {
+  color: #259fc7;
+}
+.tabs .tab.active {
+  border-bottom-color: #259fc7;
+  color: #259fc7;
+}
+
+.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;
+}
+
+.tab-body {
+  flex: 1;
+  min-height: 0;
+  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;
+}