@smartnet360/svelte-components 0.0.135 → 0.0.137

package/dist/core/CellTable/CellTableDemo.svelte

@@ -1,336 +0,0 @@
-<script lang="ts">
-	import CellTablePanel from './CellTablePanel.svelte';
-	import type { CellTableGroupField, ColumnPreset, RowSelectionEvent, CellData } from './types';
-	import { generateCellsFromPreset, getGeneratorInfo, type GeneratorPreset } from '../../shared/demo';
-
-	let datasetSize: GeneratorPreset = $state('small');
-	let demoCells = $state(generateCellsFromPreset('small'));
-	let dataInfo = $derived(getGeneratorInfo(demoCells));
-	
-	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);
-	}
-	
-	// Context menu action handlers
-	function handleViewCell(cell: CellData) {
-		console.log('View cell:', cell.id, cell.cellName);
-		alert(`Viewing cell: ${cell.cellName}`);
-	}
-	
-	function handleEditCell(cell: CellData) {
-		console.log('Edit cell:', cell.id, cell.cellName);
-		alert(`Edit cell: ${cell.cellName}`);
-	}
-	
-	function handleDeleteCell(cell: CellData) {
-		console.log('Delete cell:', cell.id, cell.cellName);
-		if (confirm(`Delete cell ${cell.cellName}?`)) {
-			demoCells = demoCells.filter(c => c.id !== cell.id);
-		}
-	}
-	
-	function handleShowOnMap(cell: CellData) {
-		console.log('Show on map:', cell.latitude, cell.longitude);
-		alert(`Show on map: ${cell.cellName}\nLat: ${cell.latitude}\nLon: ${cell.longitude}`);
-	}
-	
-	/**
-	 * Compare two selected cells' antenna configurations
-	 */
-	function handleCompareTwoCells(cell1: CellData, cell2: CellData) {
-		const params = new URLSearchParams();
-		
-		// Use antenna from both cells
-		if (cell1.antenna) params.set('ant1', cell1.antenna);
-		if (cell2.antenna) params.set('ant2', cell2.antenna);
-		
-		// Use electrical tilt values (parse first value if comma-separated)
-		const etilt1 = cell1.electricalTilt ? parseInt(cell1.electricalTilt.split(',')[0], 10) : 0;
-		const etilt2 = cell2.electricalTilt ? parseInt(cell2.electricalTilt.split(',')[0], 10) : 0;
-		params.set('etilt1', String(etilt1 || 0));
-		params.set('etilt2', String(etilt2 || 0));
-		
-		// Add cell name + status as labels
-		params.set('label1', `${cell1.cellName} (${cell1.status})`);
-		params.set('label2', `${cell2.cellName} (${cell2.status})`);
-		
-		const url = `/apps/antenna-compare?${params.toString()}`;
-		window.open(url, '_blank');
-	}
-	
-	function regenerateData() {
-		demoCells = generateCellsFromPreset(datasetSize);
-	}
-
-	function handleSearch() {
-		const term = searchTerm.trim().toLowerCase();
-		if (!term) {
-			// Reset to full dataset
-			demoCells = generateCellsFromPreset(datasetSize);
-			return;
-		}
-		// Filter by siteId (case-insensitive, partial match)
-		const allCells = generateCellsFromPreset(datasetSize);
-		demoCells = allCells.filter(cell => 
-			cell.siteId.toLowerCase().includes(term) ||
-			cell.cellName.toLowerCase().includes(term)
-		);
-		console.log(`Search "${term}": found ${demoCells.length} cells`);
-	}
-
-	function handleSearchKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			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">
-	<!-- Simple header for demo controls only -->
-	<div class="demo-controls bg-light border-bottom px-3 py-2 d-flex align-items-center gap-3 flex-wrap">
-		<div class="input-group input-group-sm" style="width: auto;">
-			<span class="input-group-text">Dataset</span>
-			<select class="form-select" bind:value={datasetSize} onchange={regenerateData}>
-				<option value="small">Small (~300)</option>
-				<option value="medium">Medium (~3K)</option>
-				<option value="large">Large (~15K)</option>
-				<option value="xlarge">XLarge (~60K)</option>
-			</select>
-		</div>
-		<span class="badge bg-info">
-			{dataInfo.totalCells.toLocaleString()} cells | {dataInfo.totalSites} sites
-		</span>
-		<span class="badge bg-secondary d-none d-md-inline">
-			{Object.entries(dataInfo.techBreakdown).map(([k, v]) => `${k}: ${v}`).join(' | ')}
-		</span>
-	</div>
-
-	<!-- CellTablePanel with integrated sidebar -->
-	<div class="flex-grow-1 overflow-hidden">
-		<CellTablePanel
-			cells={demoCells}
-			bind:groupBy
-			bind:columnPreset
-			selectable={true}
-			multiSelect={true}
-			showToolbar={true}
-			showExport={true}
-			headerFilters={true}
-			showDetailsSidebar={true}
-			sidebarWidth={320}
-			showScrollSpy={true}
-			title="Cell Data"
-			onselectionchange={handleSelectionChange}
-		>
-			{#snippet headerSearch()}
-				<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-sm"
-						class:btn-outline-success={!has5G3500}
-						class:btn-success={has5G3500}
-						type="button"
-						onclick={handleCreateCell}
-						title={createTooltip}
-						aria-label="Create 5G-3500 cell"
-						disabled={createDisabled}
-					>
-						{#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}
-
-			{#snippet footer({ selectedRows, selectedCount })}
-				<div class="d-flex align-items-center justify-content-between">
-					<span class="text-muted small">
-						{#if selectedCount > 0}
-							{selectedCount} cell(s) selected
-						{:else}
-							Click a row to view details
-						{/if}
-					</span>
-					<div class="btn-group">
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-success"
-							disabled={selectedCount !== 2}
-							title={selectedCount === 2 ? 'Compare Atoll antennas of selected cells' : 'Select exactly 2 cells to compare'}
-							onclick={() => handleCompareTwoCells(selectedRows[0], selectedRows[1])}
-						>
-							<i class="bi bi-broadcast-pin"></i>
-							<span class="d-none d-sm-inline ms-1">Compare Antennas</span>
-						</button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-primary"
-							disabled={selectedCount === 0}
-							onclick={() => console.log('Process:', selectedRows.map(r => r.id))}
-						>
-							<i class="bi bi-gear"></i>
-							<span class="d-none d-sm-inline ms-1">Process</span>
-						</button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-secondary"
-							disabled={selectedCount === 0}
-							onclick={() => console.log('Export:', selectedRows.map(r => r.id))}
-						>
-							<i class="bi bi-download"></i>
-							<span class="d-none d-sm-inline ms-1">Export</span>
-						</button>
-					</div>
-				</div>
-			{/snippet}
-
-			{#snippet contextMenu({ row, closeMenu })}
-				<div class="dropdown-menu show shadow-lg" style="min-width: 180px;">
-					<h6 class="dropdown-header text-truncate" style="max-width: 200px;">
-						<i class="bi bi-broadcast me-1"></i>{row.cellName}
-					</h6>
-					<div class="dropdown-divider"></div>
-					<button class="dropdown-item" onclick={() => { handleViewCell(row); closeMenu(); }}>
-						<i class="bi bi-eye me-2 text-primary"></i>View Details
-					</button>
-					<button class="dropdown-item" onclick={() => { handleEditCell(row); closeMenu(); }}>
-						<i class="bi bi-pencil me-2 text-warning"></i>Edit Cell
-					</button>
-					<button class="dropdown-item" onclick={() => { handleShowOnMap(row); closeMenu(); }}>
-						<i class="bi bi-geo-alt me-2 text-info"></i>Show on Map
-					</button>
-					<div class="dropdown-divider"></div>
-					<button class="dropdown-item text-danger" onclick={() => { handleDeleteCell(row); closeMenu(); }}>
-						<i class="bi bi-trash me-2"></i>Delete Cell
-					</button>
-				</div>
-			{/snippet}
-		</CellTablePanel>
-	</div>
-</div>
-
-<style>
-	.cell-table-page {
-		background: var(--bs-body-bg, #f8f9fa);
-	}
-
-	.demo-controls {
-		flex-shrink: 0;
-	}
-</style>

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

@@ -1,3 +0,0 @@
-declare const CellTableDemo: import("svelte").Component<Record<string, never>, {}, "">;
-type CellTableDemo = ReturnType<typeof CellTableDemo>;
-export default CellTableDemo;