@smartnet360/svelte-components 0.0.112 → 0.0.114

package/dist/core/CellTable/CellTable.svelte

@@ -20,6 +20,13 @@
 		cellDataSorter
 	} from './column-config';
 
+	// Type for Tabulator group component (not exported from tabulator-tables)
+	interface TabulatorGroup {
+		getKey(): string | number | boolean;
+		getRows(): RowComponent[];
+		scrollTo(): Promise<void>;
+	}
+
 	interface Props extends CellTableProps {
 		/** Row selection change event */
 		onselectionchange?: (event: RowSelectionEvent) => void;
@@ -335,6 +342,34 @@
 			.map(col => col.getField())
 			.filter((field): field is string => !!field);
 	}
+
+	/** Get all group keys (when grouping is active) */
+	export function getGroups(): { key: string; count: number }[] {
+		if (!table || groupBy === 'none') return [];
+		try {
+			const groups = table.getGroups() as TabulatorGroup[];
+			return groups.map(g => ({
+				key: String(g.getKey()),
+				count: g.getRows().length
+			}));
+		} catch {
+			return [];
+		}
+	}
+
+	/** Scroll to a specific group by key */
+	export function scrollToGroup(key: string): void {
+		if (!table || groupBy === 'none') return;
+		try {
+			const groups = table.getGroups() as TabulatorGroup[];
+			const group = groups.find(g => String(g.getKey()) === key);
+			if (group) {
+				group.scrollTo();
+			}
+		} catch (e) {
+			console.warn('Failed to scroll to group:', e);
+		}
+	}
 </script>
 
 <div class="cell-table-container">

package/dist/core/CellTable/CellTable.svelte.d.ts

@@ -28,6 +28,11 @@ declare const CellTable: import("svelte").Component<Props, {
     showColumn: (field: string) => void;
     hideColumn: (field: string) => void;
     getVisibleColumns: () => string[];
+    getGroups: () => {
+        key: string;
+        count: number;
+    }[];
+    scrollToGroup: (key: string) => void;
 }, "">;
 type CellTable = ReturnType<typeof CellTable>;
 export default CellTable;

package/dist/core/CellTable/CellTableDemo.svelte

@@ -10,6 +10,33 @@
 	let groupBy: CellTableGroupField = $state('none');
 	let columnPreset: ColumnPreset = $state('default');
 	let searchTerm = $state('');
+	
+	// Loading states
+	let isCreating = $state(false);
+	let isReloading = $state(false);
+	let isLoading = $derived(isCreating || isReloading);
+	
+	// Check if 5G-3500 already exists for the searched site
+	let has5G3500 = $derived.by(() => {
+		const siteId = searchTerm.trim();
+		if (!siteId) return false;
+		return demoCells.some(cell => 
+			cell.siteId.toLowerCase() === siteId.toLowerCase() && 
+			cell.fband === '5G-3500'
+		);
+	});
+	
+	// Create button disabled state
+	let createDisabled = $derived(!searchTerm.trim() || isLoading || has5G3500);
+	
+	// Tooltip for create button
+	let createTooltip = $derived.by(() => {
+		if (!searchTerm.trim()) return 'Enter a site ID first';
+		if (has5G3500) return '5G-3500 already exists for this site';
+		if (isCreating) return 'Creating...';
+		if (isReloading) return 'Reloading...';
+		return 'Create 5G-3500 cell for this site';
+	});
 
 	function handleSelectionChange(event: RowSelectionEvent) {
 		console.log('Selection changed:', event.ids);
@@ -40,6 +67,64 @@
 			handleSearch();
 		}
 	}
+
+	// ============================================
+	// PLACEHOLDER FUNCTIONS - Replace with your API calls
+	// ============================================
+	
+	/**
+	 * Create a new 5G-3500 cell for the given site
+	 * TODO: Replace with your actual API call
+	 */
+	async function createCellForSite(siteId: string): Promise<void> {
+		// Simulate API call - replace with your implementation
+		console.log(`Creating 5G-3500 cell for site: ${siteId}`);
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		console.log(`Cell created for site: ${siteId}`);
+	}
+	
+	/**
+	 * Reload site data after creation
+	 * TODO: Replace with your actual API call
+	 */
+	async function reloadSiteData(siteId: string): Promise<typeof demoCells> {
+		// Simulate API call - replace with your implementation
+		console.log(`Reloading data for site: ${siteId}`);
+		await new Promise(resolve => setTimeout(resolve, 500));
+		// For demo, just return filtered data
+		const allCells = generateCellsFromPreset(datasetSize);
+		return allCells.filter(cell => 
+			cell.siteId.toLowerCase().includes(siteId.toLowerCase())
+		);
+	}
+	
+	// ============================================
+	
+	/**
+	 * Handle create cell button click
+	 */
+	async function handleCreateCell() {
+		const siteId = searchTerm.trim();
+		if (!siteId || isLoading || has5G3500) return;
+		
+		try {
+			// Step 1: Create the cell
+			isCreating = true;
+			await createCellForSite(siteId);
+			isCreating = false;
+			
+			// Step 2: Reload the data
+			isReloading = true;
+			demoCells = await reloadSiteData(siteId);
+			isReloading = false;
+			
+			console.log('Cell created and data reloaded successfully');
+		} catch (error) {
+			console.error('Error creating cell:', error);
+			isCreating = false;
+			isReloading = false;
+		}
+	}
 </script>
 
 <div class="cell-table-page vh-100 d-flex flex-column">
@@ -75,26 +160,53 @@
 			headerFilters={true}
 			showDetailsSidebar={true}
 			sidebarWidth={320}
+			showScrollSpy={true}
 			title="Cell Data"
 			onselectionchange={handleSelectionChange}
 		>
 			{#snippet headerSearch()}
-				<div class="input-group input-group-sm" style="width: 180px;">
-					<input 
-						type="text" 
-						class="form-control" 
-						placeholder="Search site or cell..."
-						bind:value={searchTerm}
-						onkeydown={handleSearchKeydown}
-					/>
+				<div class="d-flex align-items-center gap-2">
+					<div class="input-group input-group-sm" style="width: 180px;">
+						<input 
+							type="text" 
+							class="form-control" 
+							placeholder="Search site or cell..."
+							bind:value={searchTerm}
+							onkeydown={handleSearchKeydown}
+							disabled={isLoading}
+						/>
+						<button 
+							class="btn btn-outline-primary" 
+							type="button"
+							onclick={handleSearch}
+							title="Search"
+							aria-label="Search"
+							disabled={isLoading}
+						>
+							{#if isReloading}
+								<span class="spinner-border spinner-border-sm" role="status"></span>
+							{:else}
+								<i class="bi bi-search"></i>
+							{/if}
+						</button>
+					</div>
 					<button 
-						class="btn btn-outline-primary" 
+						class="btn btn-sm"
+						class:btn-outline-success={!has5G3500}
+						class:btn-success={has5G3500}
 						type="button"
-						onclick={handleSearch}
-						title="Search"
-						aria-label="Search"
+						onclick={handleCreateCell}
+						title={createTooltip}
+						aria-label="Create 5G-3500 cell"
+						disabled={createDisabled}
 					>
-						<i class="bi bi-search"></i>
+						{#if isCreating}
+							<span class="spinner-border spinner-border-sm" role="status"></span>
+						{:else if has5G3500}
+							<i class="bi bi-check-lg"></i>
+						{:else}
+							<i class="bi bi-plus-lg"></i>
+						{/if}
 					</button>
 				</div>
 			{/snippet}

package/dist/core/CellTable/CellTablePanel.svelte

@@ -32,6 +32,8 @@
 		showToolbar?: boolean;
 		/** Show export buttons */
 		showExport?: boolean;
+		/** Show JSON export button (requires showExport=true) */
+		showJsonExport?: boolean;
 		/** Technology color mapping */
 		techColors?: TechColorMap;
 		/** Status color mapping */
@@ -48,6 +50,8 @@
 		persistSettings?: boolean;
 		/** Storage key prefix for persisted settings */
 		storageKey?: string;
+		/** Show scrollspy navigation bar for quick group navigation */
+		showScrollSpy?: boolean;
 		/** Bindable reference to table methods */
 		tableRef?: { redraw: () => void } | null;
 		/** Row selection change event */
@@ -75,6 +79,7 @@
 		height = '100%',
 		showToolbar = true,
 		showExport = true,
+		showJsonExport = false,
 		techColors,
 		statusColors,
 		headerFilters = true,
@@ -83,6 +88,7 @@
 		sidebarWidth = 320,
 		persistSettings = true,
 		storageKey = 'cell-table',
+		showScrollSpy = false,
 		tableRef = $bindable(null),
 		onselectionchange,
 		onrowclick,
@@ -97,13 +103,15 @@
 	const STORAGE_KEY_GROUP = `${storageKey}-groupBy`;
 	const STORAGE_KEY_COLUMNS = `${storageKey}-visibleColumns`;
 	const STORAGE_KEY_FILTERS = `${storageKey}-filtersVisible`;
+	const STORAGE_KEY_SCROLLSPY = `${storageKey}-scrollSpyEnabled`;
 
 	// Load persisted settings
 	function loadPersistedSettings() {
-		if (!persistSettings || typeof localStorage === 'undefined') return { columns: null, filtersVisible: true };
+		if (!persistSettings || typeof localStorage === 'undefined') return { columns: null, filtersVisible: true, scrollSpyEnabled: showScrollSpy };
 		
 		let columns: string[] | null = null;
 		let filters = true;
+		let scrollSpy = showScrollSpy;
 		
 		try {
 			const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
@@ -120,10 +128,15 @@
 			if (savedFilters !== null) {
 				filters = savedFilters === 'true';
 			}
+			
+			const savedScrollSpy = localStorage.getItem(STORAGE_KEY_SCROLLSPY);
+			if (savedScrollSpy !== null) {
+				scrollSpy = savedScrollSpy === 'true';
+			}
 		} catch (e) {
 			console.warn('Failed to load CellTable settings:', e);
 		}
-		return { columns, filtersVisible: filters };
+		return { columns, filtersVisible: filters, scrollSpyEnabled: scrollSpy };
 	}
 
 	// Save group setting
@@ -156,6 +169,16 @@
 		}
 	}
 
+	// Save scrollspy state
+	function saveScrollSpyState(enabled: boolean) {
+		if (!persistSettings || typeof localStorage === 'undefined') return;
+		try {
+			localStorage.setItem(STORAGE_KEY_SCROLLSPY, String(enabled));
+		} catch (e) {
+			console.warn('Failed to save scrollspy state:', e);
+		}
+	}
+
 	let cellTable: CellTable;
 	let selectedCount = $state(0);
 	let selectedRows = $state<CellData[]>([]);
@@ -171,6 +194,10 @@
 	const persistedSettings = loadPersistedSettings();
 	let filtersVisible = $state(persistedSettings.filtersVisible);
 	let visibleColumns = $state<string[]>(persistedSettings.columns ?? getPresetVisibleFields(columnPreset));
+	
+	// ScrollSpy state - initialize from persisted settings
+	let scrollSpyGroups = $state<{ key: string; count: number }[]>([]);
+	let scrollSpyEnabled = $state(persistedSettings.scrollSpyEnabled);
 
 	// Update visible columns when preset changes (but not from storage load)
 	$effect(() => {
@@ -208,11 +235,42 @@
 
 	function handleDataChange(event: DataChangeEvent) {
 		filteredCount = event.filteredCount;
+		// Update scrollspy groups when data changes
+		updateScrollSpyGroups();
+	}
+
+	function updateScrollSpyGroups() {
+		if (scrollSpyEnabled && groupBy !== 'none') {
+			// Small delay to ensure table has updated
+			setTimeout(() => {
+				scrollSpyGroups = cellTable?.getGroups() ?? [];
+			}, 50);
+		} else {
+			scrollSpyGroups = [];
+		}
+	}
+
+	function handleScrollToGroup(key: string) {
+		cellTable?.scrollToGroup(key);
+	}
+
+	function handleToggleScrollSpy() {
+		scrollSpyEnabled = !scrollSpyEnabled;
+		saveScrollSpyState(scrollSpyEnabled);
+		if (scrollSpyEnabled && groupBy !== 'none') {
+			updateScrollSpyGroups();
+		} else {
+			scrollSpyGroups = [];
+		}
 	}
 
 	function handleGroupChange(group: CellTableGroupField) {
 		groupBy = group;
 		saveGroupSetting(group);
+		// Update scrollspy groups after grouping changes
+		if (scrollSpyEnabled) {
+			setTimeout(() => updateScrollSpyGroups(), 100);
+		}
 	}
 
 	function handlePresetChange(preset: ColumnPreset) {
@@ -353,6 +411,7 @@
 			{filteredCount}
 			{selectedCount}
 			{showExport}
+			{showJsonExport}
 			ongroupchange={handleGroupChange}
 			onpresetchange={handlePresetChange}
 			onexportcsv={handleExportCSV}
@@ -366,9 +425,40 @@
 			{visibleColumns}
 			oncolumnvisibilitychange={handleColumnVisibilityChange}
 			onresetcolumns={handleResetColumns}
+			{scrollSpyEnabled}
+			showScrollSpyToggle={showScrollSpy}
+			ontogglescrollspy={handleToggleScrollSpy}
 		/>
 	{/if}
 
+	<!-- ScrollSpy Navigation Bar -->
+	{#if scrollSpyEnabled && groupBy !== 'none' && scrollSpyGroups.length > 0}
+		<div class="scrollspy-bar d-flex align-items-center gap-2 px-3 py-2 bg-body-tertiary border-bottom overflow-auto">
+			<span class="text-muted small me-1">
+				<i class="bi bi-signpost-split"></i> Jump to:
+			</span>
+			{#each scrollSpyGroups as group (group.key)}
+				{@const bgColor = groupBy === 'tech' 
+					? (techColors?.[group.key] ?? DEFAULT_TECH_COLORS[group.key] ?? '#6c757d')
+					: groupBy === 'fband'
+						? (FBAND_COLORS[group.key] ?? '#6c757d')
+						: groupBy === 'status'
+							? (statusColors?.[group.key] ?? DEFAULT_STATUS_COLORS[group.key] ?? '#6c757d')
+							: '#6c757d'}
+				<button
+					type="button"
+					class="btn btn-sm scrollspy-badge"
+					style="background-color: {bgColor}; border-color: {bgColor}; color: white;"
+					onclick={() => handleScrollToGroup(group.key)}
+					title="Scroll to {group.key} ({group.count} cells)"
+				>
+					<span class="badge rounded-pill bg-light text-dark me-1">{group.count}</span>
+					{group.key}
+				</button>
+			{/each}
+		</div>
+	{/if}
+
 	<!-- Main content with optional sidebar -->
 	<div class="content-area d-flex flex-grow-1 overflow-hidden">
 		<!-- Table -->
@@ -571,4 +661,37 @@
 	.panel-footer {
 		min-height: 48px;
 	}
+
+	/* ScrollSpy bar styling */
+	.scrollspy-bar {
+		min-height: 40px;
+		flex-wrap: nowrap;
+		scrollbar-width: thin;
+	}
+
+	.scrollspy-bar::-webkit-scrollbar {
+		height: 4px;
+	}
+
+	.scrollspy-bar::-webkit-scrollbar-thumb {
+		background: var(--bs-secondary-color, #6c757d);
+		border-radius: 2px;
+	}
+
+	.scrollspy-badge {
+		white-space: nowrap;
+		font-size: 0.75rem;
+		padding: 0.25rem 0.5rem;
+		transition: transform 0.15s ease, box-shadow 0.15s ease;
+	}
+
+	.scrollspy-badge:hover {
+		transform: translateY(-1px);
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+		filter: brightness(1.1);
+	}
+
+	.scrollspy-badge:active {
+		transform: translateY(0);
+	}
 </style>

package/dist/core/CellTable/CellTablePanel.svelte.d.ts

@@ -17,6 +17,8 @@ interface Props {
     showToolbar?: boolean;
     /** Show export buttons */
     showExport?: boolean;
+    /** Show JSON export button (requires showExport=true) */
+    showJsonExport?: boolean;
     /** Technology color mapping */
     techColors?: TechColorMap;
     /** Status color mapping */
@@ -33,6 +35,8 @@ interface Props {
     persistSettings?: boolean;
     /** Storage key prefix for persisted settings */
     storageKey?: string;
+    /** Show scrollspy navigation bar for quick group navigation */
+    showScrollSpy?: boolean;
     /** Bindable reference to table methods */
     tableRef?: {
         redraw: () => void;

package/dist/core/CellTable/CellTableToolbar.svelte

@@ -16,6 +16,8 @@
 		selectedCount?: number;
 		/** Show export buttons */
 		showExport?: boolean;
+		/** Show JSON export button (requires showExport=true) */
+		showJsonExport?: boolean;
 		/** Show grouping dropdown */
 		showGrouping?: boolean;
 		/** Show preset dropdown */
@@ -46,6 +48,12 @@
 		oncolumnvisibilitychange?: (field: string, visible: boolean) => void;
 		/** Reset columns to preset default */
 		onresetcolumns?: () => void;
+		/** Whether scrollspy is enabled */
+		scrollSpyEnabled?: boolean;
+		/** Show scrollspy toggle button */
+		showScrollSpyToggle?: boolean;
+		/** Toggle scrollspy event */
+		ontogglescrollspy?: () => void;
 	}
 
 	let {
@@ -55,6 +63,7 @@
 		filteredCount = 0,
 		selectedCount = 0,
 		showExport = true,
+		showJsonExport = false,
 		showGrouping = true,
 		showPresets = true,
 		ongroupchange,
@@ -69,7 +78,10 @@
 		columnMeta = [],
 		visibleColumns = [],
 		oncolumnvisibilitychange,
-		onresetcolumns
+		onresetcolumns,
+		scrollSpyEnabled = false,
+		showScrollSpyToggle = false,
+		ontogglescrollspy
 	}: Props = $props();
 
 	const groupOptions: { value: CellTableGroupField; label: string }[] = [
@@ -192,6 +204,19 @@
 
 	<!-- Actions -->
 	<div class="toolbar-actions d-flex align-items-center gap-2">
+		{#if showScrollSpyToggle}
+			<button
+				type="button"
+				class="btn btn-sm"
+				class:btn-outline-secondary={!scrollSpyEnabled}
+				class:btn-secondary={scrollSpyEnabled}
+				onclick={ontogglescrollspy}
+				title={scrollSpyEnabled ? 'Hide quick navigation' : 'Show quick navigation'}
+				aria-label={scrollSpyEnabled ? 'Hide quick navigation' : 'Show quick navigation'}
+			>
+				<i class="bi bi-signpost-split"></i>
+			</button>
+		{/if}
 		{#if ontogglefilters}
 			<button
 				type="button"
@@ -228,15 +253,17 @@
 					<i class="bi bi-filetype-csv"></i>
 					<span class="d-none d-md-inline ms-1">CSV</span>
 				</button>
-				<button
-					type="button"
-					class="btn btn-sm btn-outline-primary"
-					onclick={onexportjson}
-					title="Export to JSON"
-				>
-					<i class="bi bi-filetype-json"></i>
-					<span class="d-none d-md-inline ms-1">JSON</span>
-				</button>
+				{#if showJsonExport}
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-primary"
+						onclick={onexportjson}
+						title="Export to JSON"
+					>
+						<i class="bi bi-filetype-json"></i>
+						<span class="d-none d-md-inline ms-1">JSON</span>
+					</button>
+				{/if}
 			</div>
 		{/if}
 	</div>

package/dist/core/CellTable/CellTableToolbar.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     selectedCount?: number;
     /** Show export buttons */
     showExport?: boolean;
+    /** Show JSON export button (requires showExport=true) */
+    showJsonExport?: boolean;
     /** Show grouping dropdown */
     showGrouping?: boolean;
     /** Show preset dropdown */
@@ -43,6 +45,12 @@ interface Props {
     oncolumnvisibilitychange?: (field: string, visible: boolean) => void;
     /** Reset columns to preset default */
     onresetcolumns?: () => void;
+    /** Whether scrollspy is enabled */
+    scrollSpyEnabled?: boolean;
+    /** Show scrollspy toggle button */
+    showScrollSpyToggle?: boolean;
+    /** Toggle scrollspy event */
+    ontogglescrollspy?: () => void;
 }
 declare const CellTableToolbar: import("svelte").Component<Props, {}, "">;
 type CellTableToolbar = ReturnType<typeof CellTableToolbar>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.112",
+	"version": "0.0.114",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",