@smartnet360/svelte-components 0.0.111 → 0.0.113

package/dist/core/CellTable/CellTable.svelte

@@ -190,21 +190,18 @@
 	}
 
 	// Track previous values to avoid unnecessary updates
-	let prevCellsLength = 0;
-	let prevCellsFirstId: string | null = null;
+	let prevCellsRef: unknown[] | null = null;
 	let prevGroupBy: string | null = null;
 	let prevColumnPreset: string | null = null;
 
-	// Update table data when cells actually change (not just reference)
+	// Update table data when cells change (reference comparison)
 	$effect(() => {
-		const currentLength = sortedCells?.length ?? 0;
-		const currentFirstId = sortedCells?.[0]?.id ?? null;
+		// Track the cells array reference to detect any change
+		const currentRef = sortedCells;
 		
-		// Only update if length or first item changed (rough equality check)
-		if (isInitialized && table && 
-			(currentLength !== prevCellsLength || currentFirstId !== prevCellsFirstId)) {
-			prevCellsLength = currentLength;
-			prevCellsFirstId = currentFirstId;
+		// Update if reference changed (new array assignment)
+		if (isInitialized && table && currentRef !== prevCellsRef) {
+			prevCellsRef = currentRef;
 			table.replaceData(sortedCells);
 			ondatachange?.({
 				type: 'load',

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">
@@ -79,22 +164,48 @@
 			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/package.json

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