@smartnet360/svelte-components 0.0.142 → 0.0.144

package/dist/map-v3/features/custom/components/ServerSetBrowser.svelte

@@ -0,0 +1,398 @@
+<script lang="ts">
+	/**
+	 * Server Set Browser
+	 * 
+	 * Modal component for browsing, loading, and deleting shared custom sets from the server.
+	 * Shows a list of available sets with load/delete actions.
+	 * Prompts user for overwrite/skip when loading a set with conflicting name.
+	 */
+	import type { CustomSetsApiClient } from '../db/custom-sets-api';
+	import type { CustomSetListItem } from '../db/types';
+	import type { CustomCellSet } from '../types';
+	import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+
+	interface Props {
+		/** API client for server operations */
+		apiClient: CustomSetsApiClient;
+		/** Local sets store for importing */
+		setsStore: CustomCellSetsStore;
+		/** Whether the modal is visible */
+		show: boolean;
+		/** Called when modal should close */
+		onclose: () => void;
+	}
+
+	let { 
+		apiClient, 
+		setsStore,
+		show,
+		onclose
+	}: Props = $props();
+
+	// State
+	let loading = $state(true);
+	let serverSets = $state<CustomSetListItem[]>([]);
+	let error = $state('');
+	let searchQuery = $state('');
+	
+	// Loading/action state
+	let loadingSetId = $state<string | null>(null);
+	let deletingSetId = $state<string | null>(null);
+	
+	// Conflict resolution modal
+	let conflictSet = $state<CustomSetListItem | null>(null);
+	let conflictLocalSet = $state<CustomCellSet | null>(null);
+	let loadedSetData = $state<CustomCellSet | null>(null);
+
+	// Filtered sets based on search
+	let filteredSets = $derived.by(() => {
+		if (!searchQuery.trim()) return serverSets;
+		const query = searchQuery.toLowerCase();
+		return serverSets.filter(s => 
+			s.name.toLowerCase().includes(query) ||
+			s.created_by.toLowerCase().includes(query)
+		);
+	});
+
+	// Load sets when modal opens
+	$effect(() => {
+		if (show) {
+			loadServerSets();
+		}
+	});
+
+	async function loadServerSets() {
+		loading = true;
+		error = '';
+		
+		const result = await apiClient.listSets();
+		
+		if (result.success && result.data) {
+			serverSets = result.data;
+		} else {
+			error = result.error || 'Failed to load sets from server';
+			serverSets = [];
+		}
+		
+		loading = false;
+	}
+
+	async function handleLoad(set: CustomSetListItem) {
+		loadingSetId = set.id;
+		error = '';
+		
+		// Fetch full set data
+		const result = await apiClient.getSet(set.id);
+		
+		if (!result.success || !result.data) {
+			error = result.error || 'Failed to load set';
+			loadingSetId = null;
+			return;
+		}
+		
+		// Check for name conflict with local sets
+		const existingLocal = setsStore.sets.find(s => s.name === result.data!.name);
+		
+		if (existingLocal) {
+			// Show conflict resolution modal
+			conflictSet = set;
+			conflictLocalSet = existingLocal;
+			loadedSetData = result.data;
+			loadingSetId = null;
+			return;
+		}
+		
+		// No conflict - import directly
+		importSetToStore(result.data);
+		loadingSetId = null;
+	}
+
+	function handleConflictOverwrite() {
+		if (!loadedSetData || !conflictLocalSet) return;
+		
+		// Remove existing local set
+		setsStore.removeSet(conflictLocalSet.id);
+		
+		// Import the new one
+		importSetToStore(loadedSetData);
+		
+		// Clear conflict state
+		conflictSet = null;
+		conflictLocalSet = null;
+		loadedSetData = null;
+	}
+
+	function handleConflictSkip() {
+		// Just clear the conflict state
+		conflictSet = null;
+		conflictLocalSet = null;
+		loadedSetData = null;
+	}
+
+	function importSetToStore(set: CustomCellSet) {
+		// Create import result format from set
+		const importResult = {
+			cells: set.cells,
+			unmatchedTxIds: set.unmatchedTxIds,
+			groups: set.groups,
+			extraColumns: set.extraColumns,
+			totalRows: set.cells.length,
+			cellCount: set.cells.filter(c => c.geometry === 'cell').length,
+			pointCount: set.cells.filter(c => c.geometry === 'point').length
+		};
+		
+		// Create the set in local store
+		const newSet = setsStore.createSet(set.name, importResult);
+		
+		// Apply styling from loaded set
+		setsStore.updateSetSettings(newSet.id, {
+			baseSize: set.baseSize,
+			pointSize: set.pointSize,
+			opacity: set.opacity,
+			defaultColor: set.defaultColor
+		});
+		
+		// Apply group colors
+		for (const [group, color] of Object.entries(set.groupColors)) {
+			setsStore.setGroupColor(newSet.id, group, color);
+		}
+	}
+
+	async function handleDelete(set: CustomSetListItem) {
+		if (!confirm(`Delete "${set.name}" from server? This cannot be undone.`)) {
+			return;
+		}
+		
+		deletingSetId = set.id;
+		error = '';
+		
+		const result = await apiClient.deleteSet(set.id);
+		
+		if (result.success) {
+			// Remove from local list
+			serverSets = serverSets.filter(s => s.id !== set.id);
+		} else {
+			error = result.error || 'Failed to delete set';
+		}
+		
+		deletingSetId = null;
+	}
+
+	function formatDate(dateStr: string): string {
+		try {
+			const date = new Date(dateStr);
+			return date.toLocaleDateString(undefined, {
+				year: 'numeric',
+				month: 'short',
+				day: 'numeric'
+			});
+		} catch {
+			return dateStr;
+		}
+	}
+
+	function getItemSummary(set: CustomSetListItem): string {
+		const parts: string[] = [];
+		if (set.cellCount && set.cellCount > 0) {
+			parts.push(`${set.cellCount} cells`);
+		}
+		if (set.pointCount && set.pointCount > 0) {
+			parts.push(`${set.pointCount} points`);
+		}
+		return parts.join(', ') || 'No items';
+	}
+</script>
+
+{#if show}
+	<div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+		<div class="modal-dialog modal-dialog-centered modal-lg">
+			<div class="modal-content">
+				<div class="modal-header py-2">
+					<h6 class="modal-title">
+						<i class="bi bi-cloud-download me-2"></i>
+						Load from Server
+					</h6>
+					<button type="button" class="btn-close" onclick={onclose} aria-label="Close"></button>
+				</div>
+				
+				<div class="modal-body p-0">
+					<!-- Search bar -->
+					<div class="p-2 border-bottom">
+						<div class="input-group input-group-sm">
+							<span class="input-group-text">
+								<i class="bi bi-search"></i>
+							</span>
+							<input 
+								type="text" 
+								class="form-control" 
+								placeholder="Search sets..."
+								bind:value={searchQuery}
+							/>
+							{#if searchQuery}
+								<button 
+									class="btn btn-outline-secondary" 
+									type="button"
+									onclick={() => searchQuery = ''}
+									aria-label="Clear search"
+								>
+									<i class="bi bi-x"></i>
+								</button>
+							{/if}
+							<button 
+								class="btn btn-outline-secondary" 
+								type="button"
+								onclick={loadServerSets}
+								disabled={loading}
+								title="Refresh"
+								aria-label="Refresh list"
+							>
+								<i class="bi bi-arrow-clockwise" class:spin={loading}></i>
+							</button>
+						</div>
+					</div>
+
+					<!-- Error message -->
+					{#if error}
+						<div class="alert alert-danger m-2 py-2 small">
+							<i class="bi bi-exclamation-triangle me-1"></i>
+							{error}
+						</div>
+					{/if}
+
+					<!-- Loading state -->
+					{#if loading}
+						<div class="text-center p-4">
+							<div class="spinner-border spinner-border-sm text-primary" role="status">
+								<span class="visually-hidden">Loading...</span>
+							</div>
+							<p class="text-muted small mt-2 mb-0">Loading sets from server...</p>
+						</div>
+					{:else if filteredSets.length === 0}
+						<div class="text-center p-4">
+							<i class="bi bi-inbox fs-1 text-muted"></i>
+							<p class="text-muted small mt-2 mb-0">
+								{searchQuery ? 'No sets match your search' : 'No shared sets available'}
+							</p>
+						</div>
+					{:else}
+						<!-- Sets list -->
+						<div class="sets-list" style="max-height: 400px; overflow-y: auto;">
+							{#each filteredSets as set (set.id)}
+								<div class="set-row d-flex align-items-center px-3 py-2 border-bottom">
+									<div class="flex-grow-1" style="min-width: 0;">
+										<div class="fw-medium text-truncate">{set.name}</div>
+										<div class="small text-muted">
+											{getItemSummary(set)}
+											{#if set.groups && set.groups.length > 0}
+												<span class="mx-1">·</span>
+												{set.groups.length} groups
+											{/if}
+										</div>
+										<div class="small text-muted">
+											<i class="bi bi-person me-1"></i>{set.created_by}
+											<span class="mx-1">·</span>
+											<i class="bi bi-calendar me-1"></i>{formatDate(set.updated_at)}
+										</div>
+									</div>
+									<div class="d-flex gap-1 ms-2">
+										<button 
+											class="btn btn-sm btn-outline-primary"
+											onclick={() => handleLoad(set)}
+											disabled={loadingSetId === set.id}
+											title="Load this set"
+											aria-label="Load this set"
+										>
+											{#if loadingSetId === set.id}
+												<span class="spinner-border spinner-border-sm" role="status"></span>
+											{:else}
+												<i class="bi bi-download"></i>
+											{/if}
+										</button>
+										<button 
+											class="btn btn-sm btn-outline-danger"
+											onclick={() => handleDelete(set)}
+											disabled={deletingSetId === set.id}
+											title="Delete from server"
+											aria-label="Delete from server"
+										>
+											{#if deletingSetId === set.id}
+												<span class="spinner-border spinner-border-sm" role="status"></span>
+											{:else}
+												<i class="bi bi-trash"></i>
+											{/if}
+										</button>
+									</div>
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<div class="modal-footer py-2">
+					<small class="text-muted me-auto">
+						{filteredSets.length} set{filteredSets.length !== 1 ? 's' : ''} available
+					</small>
+					<button type="button" class="btn btn-secondary btn-sm" onclick={onclose}>
+						Close
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Conflict Resolution Modal -->
+{#if conflictSet && conflictLocalSet}
+	<div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.6); z-index: 2001;">
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content">
+				<div class="modal-header py-2 bg-warning-subtle">
+					<h6 class="modal-title">
+						<i class="bi bi-exclamation-triangle me-2"></i>
+						Name Conflict
+					</h6>
+				</div>
+				<div class="modal-body">
+					<p>
+						A set named <strong>"{conflictSet.name}"</strong> already exists locally.
+					</p>
+					<p class="text-muted small mb-0">
+						What would you like to do?
+					</p>
+				</div>
+				<div class="modal-footer py-2">
+					<button type="button" class="btn btn-secondary btn-sm" onclick={handleConflictSkip}>
+						Skip
+					</button>
+					<button type="button" class="btn btn-warning btn-sm" onclick={handleConflictOverwrite}>
+						<i class="bi bi-arrow-repeat me-1"></i>
+						Overwrite Local
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.modal {
+		z-index: 2000;
+	}
+
+	.set-row {
+		transition: background-color 0.15s ease;
+	}
+
+	.set-row:hover {
+		background-color: rgba(0, 0, 0, 0.02);
+	}
+
+	.spin {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from { transform: rotate(0deg); }
+		to { transform: rotate(360deg); }
+	}
+</style>

package/dist/map-v3/features/custom/components/ServerSetBrowser.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+     * Server Set Browser
+     *
+     * Modal component for browsing, loading, and deleting shared custom sets from the server.
+     * Shows a list of available sets with load/delete actions.
+     * Prompts user for overwrite/skip when loading a set with conflicting name.
+     */
+import type { CustomSetsApiClient } from '../db/custom-sets-api';
+import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+interface Props {
+    /** API client for server operations */
+    apiClient: CustomSetsApiClient;
+    /** Local sets store for importing */
+    setsStore: CustomCellSetsStore;
+    /** Whether the modal is visible */
+    show: boolean;
+    /** Called when modal should close */
+    onclose: () => void;
+}
+declare const ServerSetBrowser: import("svelte").Component<Props, {}, "">;
+type ServerSetBrowser = ReturnType<typeof ServerSetBrowser>;
+export default ServerSetBrowser;

package/dist/map-v3/features/custom/components/index.d.ts

@@ -3,3 +3,4 @@
  */
 export { default as CustomCellFilterControl } from './CustomCellFilterControl.svelte';
 export { default as CustomCellSetManager } from './CustomCellSetManager.svelte';
+export { default as ServerSetBrowser } from './ServerSetBrowser.svelte';

package/dist/map-v3/features/custom/components/index.js

@@ -3,3 +3,4 @@
  */
 export { default as CustomCellFilterControl } from './CustomCellFilterControl.svelte';
 export { default as CustomCellSetManager } from './CustomCellSetManager.svelte';
+export { default as ServerSetBrowser } from './ServerSetBrowser.svelte';

package/dist/map-v3/features/custom/db/custom-sets-api.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Custom Feature - API Client
+ *
+ * Client-side service for interacting with custom cell sets API.
+ * Designed to work with any backend that implements the expected endpoints.
+ *
+ * Usage in consuming app:
+ * ```typescript
+ * const api = new CustomSetsApiClient('/api/custom-sets');
+ * const sets = await api.listSets();
+ * ```
+ */
+import type { CustomSetListItem, ApiResponse } from './types';
+import type { CustomCellSet } from '../types';
+/**
+ * API client for custom cell sets
+ * Provides CRUD operations against a REST API endpoint
+ */
+export declare class CustomSetsApiClient {
+    private baseUrl;
+    private headers;
+    /**
+     * Create a new API client
+     * @param baseUrl Base URL for the API (e.g., '/api/custom-sets')
+     * @param headers Optional additional headers (e.g., auth tokens)
+     */
+    constructor(baseUrl: string, headers?: Record<string, string>);
+    /**
+     * Update headers (e.g., after auth token refresh)
+     */
+    setHeaders(headers: Record<string, string>): void;
+    /**
+     * List all available sets (lightweight, no cell data)
+     */
+    listSets(): Promise<ApiResponse<CustomSetListItem[]>>;
+    /**
+     * Get a single set by ID (full data including cells)
+     */
+    getSet(id: string): Promise<ApiResponse<CustomCellSet>>;
+    /**
+     * Save a set to the server (create or update)
+     * @param set The CustomCellSet to save
+     * @param id Optional ID for update (omit for create)
+     */
+    saveSet(set: CustomCellSet, id?: string): Promise<ApiResponse<{
+        id: string;
+    }>>;
+    /**
+     * Delete a set from the server
+     */
+    deleteSet(id: string): Promise<ApiResponse<void>>;
+    /**
+     * Check if a set with the given name exists
+     */
+    checkNameExists(name: string): Promise<ApiResponse<{
+        exists: boolean;
+        id?: string;
+    }>>;
+}
+/**
+ * Factory function to create API client
+ * @param baseUrl API endpoint base URL
+ * @param headers Optional headers (e.g., auth tokens)
+ */
+export declare function createCustomSetsApi(baseUrl: string, headers?: Record<string, string>): CustomSetsApiClient;