@smartnet360/svelte-components 0.0.133 → 0.0.135

package/dist/core/CellTableV2/CellTablePanel.svelte

@@ -0,0 +1,685 @@
+<script lang="ts">
+	/**
+	 * CellTablePanel V2 - Composable-based Cell Table Panel
+	 * 
+	 * Uses composables for reusable logic:
+	 * - usePersistence: localStorage read/write
+	 * - useColumnVisibility: column preset and visibility management
+	 * - useScrollSpy: group navigation
+	 */
+	import type { Snippet } from 'svelte';
+	import type { ColumnDefinition } from 'tabulator-tables';
+	import CellTable from './CellTable.svelte';
+	import CellTableToolbar from './CellTableToolbar.svelte';
+	import { getColumnMetadata, getPresetVisibleFields, DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS } from './column-config';
+	import type { ColumnMetadataOptions } from './column-config';
+	import type {
+		CellData,
+		CellTableGroupField,
+		ColumnPreset,
+		RowSelectionEvent,
+		RowClickEvent,
+		RowDblClickEvent,
+		RowContextMenuEvent,
+		DataChangeEvent,
+		TechColorMap,
+		StatusColorMap,
+		GroupOption
+	} from './types';
+	import { usePersistence } from './composables/usePersistence.svelte';
+	import { useColumnVisibility } from './composables/useColumnVisibility.svelte';
+	import { useScrollSpy } from './composables/useScrollSpy.svelte';
+
+	interface Props {
+		/** Cell data array to display */
+		cells: CellData[];
+		/** Initial grouping field */
+		groupBy?: CellTableGroupField;
+		/** Custom grouping options (overrides default tech/fband/status options) */
+		groupOptions?: GroupOption[];
+		/** Initial column preset */
+		columnPreset?: ColumnPreset;
+		/** Custom column definitions (overrides columnPreset when provided) */
+		customColumns?: ColumnDefinition[];
+		/** Column metadata filter options */
+		columnMetadataOptions?: ColumnMetadataOptions;
+		/** Enable row selection */
+		selectable?: boolean;
+		/** Enable multi-row selection */
+		multiSelect?: boolean;
+		/** Panel height (CSS value) */
+		height?: string;
+		/** Show toolbar */
+		showToolbar?: boolean;
+		/** Show column presets dropdown and column picker (set false for simple tables) */
+		showColumnPresets?: boolean;
+		/** Show export buttons */
+		showExport?: boolean;
+		/** Show JSON export button (requires showExport=true) */
+		showJsonExport?: boolean;
+		/** Technology color mapping */
+		techColors?: TechColorMap;
+		/** Status color mapping */
+		statusColors?: StatusColorMap;
+		/** Enable header filters */
+		headerFilters?: boolean;
+		/** Panel title */
+		title?: string;
+		/** Show details sidebar */
+		showDetailsSidebar?: boolean;
+		/** Sidebar width in pixels */
+		sidebarWidth?: number;
+		/** Persist settings to localStorage */
+		persistSettings?: boolean;
+		/** Storage key prefix for persisted settings */
+		storageKey?: string;
+		/** Enable Tabulator persistence for column widths, order, visibility */
+		persistLayout?: boolean;
+		/** Show scrollspy navigation bar for quick group navigation */
+		showScrollSpy?: boolean;
+		/** Bindable reference to table methods */
+		tableRef?: { redraw: () => void } | null;
+		/** Row selection change event */
+		onselectionchange?: (event: RowSelectionEvent) => void;
+		/** Row click event */
+		onrowclick?: (event: RowClickEvent) => void;
+		/** Row double-click event */
+		onrowdblclick?: (event: RowDblClickEvent) => void;
+		/** Custom header search slot (appears next to title) */
+		headerSearch?: Snippet;
+		/** Custom header actions slot */
+		headerActions?: Snippet;
+		/** Custom footer slot */
+		footer?: Snippet<[{ selectedRows: CellData[]; selectedCount: number }]>;
+		/** Custom details sidebar content */
+		detailsContent?: Snippet<[{ cell: CellData | null; closeSidebar: () => void }]>;
+		/** Custom context menu content (right-click on row) */
+		contextMenu?: Snippet<[{ row: CellData; closeMenu: () => void }]>;
+	}
+
+	let {
+		cells = [],
+		groupBy = $bindable('none'),
+		groupOptions,
+		columnPreset: initialPreset = 'default',
+		customColumns,
+		columnMetadataOptions,
+		selectable = true,
+		multiSelect = true,
+		height = '100%',
+		showToolbar = true,
+		showColumnPresets = true,
+		showExport = true,
+		showJsonExport = false,
+		techColors,
+		statusColors,
+		headerFilters = true,
+		title = 'Cell Data',
+		showDetailsSidebar = false,
+		sidebarWidth = 320,
+		persistSettings = true,
+		storageKey = 'cell-table-v2',
+		persistLayout = true,
+		showScrollSpy = false,
+		tableRef = $bindable(null),
+		onselectionchange,
+		onrowclick,
+		onrowdblclick,
+		headerSearch,
+		headerActions,
+		footer,
+		detailsContent,
+		contextMenu
+	}: Props = $props();
+
+	// ========== Composables ==========
+	
+	// Persistence utilities
+	const persistence = usePersistence({ storageKey, enabled: persistSettings });
+	
+	// Column visibility management
+	const columnVis = useColumnVisibility({
+		storageKey,
+		columnMeta: getColumnMetadata(columnMetadataOptions),
+		initialPreset,
+		persistSettings
+	});
+	
+	// ScrollSpy navigation
+	const scrollSpy = useScrollSpy({
+		storageKey,
+		initialEnabled: showScrollSpy,
+		persistSettings
+	});
+
+	// ========== Local State ==========
+	
+	let cellTable: CellTable;
+	let selectedCount = $state(0);
+	let selectedRows = $state<CellData[]>([]);
+	let filteredCount = $state(cells.length);
+	let sidebarOpen = $state(false);
+	let clickedCell: CellData | null = $state(null);
+	let tableRefSet = false;
+	let filtersVisible = $state(persistence.load('filtersVisible', true));
+	
+	// Context menu state
+	let contextMenuVisible = $state(false);
+	let contextMenuRow: CellData | null = $state(null);
+	let contextMenuPosition = $state({ x: 0, y: 0 });
+
+	// Load initial groupBy from persistence
+	const savedGroupBy = persistence.loadString('groupBy', groupBy);
+	if (savedGroupBy && savedGroupBy !== groupBy) {
+		groupBy = savedGroupBy as CellTableGroupField;
+	}
+
+	// ========== Effects ==========
+	
+	// Track preset changes to apply column visibility
+	let prevPreset: ColumnPreset | null = columnVis.columnPreset;
+	
+	$effect(() => {
+		if (columnVis.columnPreset !== prevPreset) {
+			prevPreset = columnVis.columnPreset;
+			columnVis.applyToTable(cellTable);
+		}
+	});
+
+	// Expose table methods via tableRef - only set once
+	$effect(() => {
+		if (cellTable && !tableRefSet) {
+			tableRefSet = true;
+			tableRef = {
+				redraw: () => cellTable?.redraw()
+			};
+			// Apply persisted column visibility after table is ready
+			setTimeout(() => columnVis.applyToTable(cellTable), 100);
+			// Apply persisted filter visibility after table is ready
+			if (!filtersVisible) {
+				setTimeout(() => cellTable?.toggleHeaderFilters(false), 100);
+			}
+		}
+	});
+
+	// ========== Event Handlers ==========
+
+	function handleSelectionChange(event: RowSelectionEvent) {
+		selectedCount = event.rows.length;
+		selectedRows = event.rows;
+		onselectionchange?.(event);
+	}
+
+	function handleRowClick(event: RowClickEvent) {
+		if (showDetailsSidebar) {
+			clickedCell = event.row;
+			sidebarOpen = true;
+			setTimeout(() => cellTable?.redraw(), 320);
+		}
+		onrowclick?.(event);
+	}
+
+	function handleDataChange(event: DataChangeEvent) {
+		filteredCount = event.filteredCount;
+		// Update scrollspy groups when data changes
+		if (scrollSpy.enabled && groupBy !== 'none') {
+			setTimeout(() => scrollSpy.updateGroups(cellTable), 50);
+		}
+	}
+
+	function handleRowContextMenu(event: RowContextMenuEvent) {
+		if (contextMenu) {
+			contextMenuRow = event.row;
+			contextMenuPosition = { x: event.event.clientX, y: event.event.clientY };
+			contextMenuVisible = true;
+		}
+	}
+
+	function closeContextMenu() {
+		contextMenuVisible = false;
+		contextMenuRow = null;
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		if (!target.closest('.context-menu-container')) {
+			closeContextMenu();
+		}
+	}
+
+	function handleScrollToGroup(key: string) {
+		scrollSpy.scrollToGroup(cellTable, key);
+	}
+
+	function handleToggleScrollSpy() {
+		scrollSpy.toggle();
+		if (scrollSpy.enabled && groupBy !== 'none') {
+			setTimeout(() => scrollSpy.updateGroups(cellTable), 100);
+		}
+	}
+
+	function handleGroupChange(group: CellTableGroupField) {
+		groupBy = group;
+		persistence.saveString('groupBy', group);
+		// Update scrollspy groups after grouping changes
+		if (scrollSpy.enabled) {
+			setTimeout(() => scrollSpy.updateGroups(cellTable), 100);
+		}
+	}
+
+	function handlePresetChange(preset: ColumnPreset) {
+		columnVis.setPreset(preset);
+	}
+
+	function handleExportCSV() {
+		cellTable?.downloadCSV(`cells-${new Date().toISOString().slice(0, 10)}.csv`);
+	}
+
+	function handleExportJSON() {
+		cellTable?.downloadJSON(`cells-${new Date().toISOString().slice(0, 10)}.json`);
+	}
+
+	function handleClearFilters() {
+		cellTable?.clearFilters();
+	}
+
+	function handleCollapseAll() {
+		cellTable?.collapseAll();
+	}
+
+	function handleExpandAll() {
+		cellTable?.expandAll();
+	}
+
+	function handleToggleFilters() {
+		filtersVisible = !filtersVisible;
+		cellTable?.toggleHeaderFilters(filtersVisible);
+		persistence.save('filtersVisible', filtersVisible);
+	}
+
+	function handleColumnVisibilityChange(field: string, visible: boolean) {
+		columnVis.toggleColumn(field, visible);
+		if (visible) {
+			cellTable?.showColumn(field);
+		} else {
+			cellTable?.hideColumn(field);
+		}
+	}
+
+	function handleResetColumns() {
+		columnVis.resetToDefaults();
+		columnVis.applyToTable(cellTable);
+	}
+
+	function toggleSidebar() {
+		sidebarOpen = !sidebarOpen;
+		setTimeout(() => cellTable?.redraw(), 320);
+	}
+
+	function closeSidebar() {
+		sidebarOpen = false;
+		setTimeout(() => cellTable?.redraw(), 320);
+	}
+
+	// ========== Public API ==========
+	
+	export function getSelectedRows(): CellData[] {
+		return cellTable?.getSelectedRows() ?? [];
+	}
+
+	export function clearSelection(): void {
+		cellTable?.clearSelection();
+	}
+
+	export function scrollToRow(id: string): void {
+		cellTable?.scrollToRow(id);
+	}
+
+	export function redraw(): void {
+		cellTable?.redraw();
+	}
+
+	export function openSidebar(): void {
+		sidebarOpen = true;
+		setTimeout(() => cellTable?.redraw(), 320);
+	}
+</script>
+
+<div class="cell-table-panel d-flex flex-column" style:height>
+	<!-- Header -->
+	<div class="panel-header d-flex align-items-center justify-content-between px-3 py-2 bg-body-secondary border-bottom">
+		<div class="d-flex align-items-center gap-3">
+			<h6 class="mb-0 d-flex align-items-center gap-2">
+				<i class="bi bi-table text-primary"></i>
+				{title}
+			</h6>
+			{#if headerSearch}
+				{@render headerSearch()}
+			{/if}
+		</div>
+		<div class="d-flex align-items-center gap-2">
+			{#if headerActions}
+				<div class="header-actions">
+					{@render headerActions()}
+				</div>
+			{/if}
+			{#if showDetailsSidebar}
+				<button 
+					class="btn btn-sm"
+					class:btn-outline-secondary={!sidebarOpen}
+					class:btn-secondary={sidebarOpen}
+					onclick={toggleSidebar}
+					title={sidebarOpen ? 'Hide details' : 'Show details'}
+					aria-label={sidebarOpen ? 'Hide details' : 'Show details'}
+				>
+					<i class="bi" class:bi-layout-sidebar-reverse={!sidebarOpen} class:bi-x-lg={sidebarOpen}></i>
+				</button>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Toolbar -->
+	{#if showToolbar}
+		<CellTableToolbar
+			{groupBy}
+			{groupOptions}
+			columnPreset={columnVis.columnPreset}
+			totalCount={cells.length}
+			{filteredCount}
+			{selectedCount}
+			{showExport}
+			{showJsonExport}
+			showPresets={showColumnPresets}
+			ongroupchange={handleGroupChange}
+			onpresetchange={handlePresetChange}
+			onexportcsv={handleExportCSV}
+			onexportjson={handleExportJSON}
+			onclearfilters={handleClearFilters}
+			oncollapseall={handleCollapseAll}
+			onexpandall={handleExpandAll}
+			{filtersVisible}
+			ontogglefilters={handleToggleFilters}
+			columnMeta={columnVis.columnMeta}
+			visibleColumns={columnVis.visibleColumns}
+			oncolumnvisibilitychange={handleColumnVisibilityChange}
+			onresetcolumns={handleResetColumns}
+			scrollSpyEnabled={scrollSpy.enabled}
+			showScrollSpyToggle={showScrollSpy}
+			ontogglescrollspy={handleToggleScrollSpy}
+		/>
+	{/if}
+
+	<!-- ScrollSpy Navigation Bar -->
+	{#if scrollSpy.enabled && groupBy !== 'none' && scrollSpy.groups.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 scrollSpy.groups 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 -->
+		<div class="table-wrapper flex-grow-1 overflow-hidden">
+			<CellTable
+				bind:this={cellTable}
+				{cells}
+				{groupBy}
+				columnPreset={columnVis.columnPreset}
+				{customColumns}
+				{selectable}
+				{multiSelect}
+				height="100%"
+				{techColors}
+				{statusColors}
+				{headerFilters}
+				{persistLayout}
+				storageKey="{storageKey}-tabulator"
+				onselectionchange={handleSelectionChange}
+				ondatachange={handleDataChange}
+				onrowclick={handleRowClick}
+				onrowcontextmenu={handleRowContextMenu}
+				{onrowdblclick}
+			/>
+		</div>
+
+		<!-- Details Sidebar -->
+		{#if showDetailsSidebar}
+			<aside 
+				class="details-sidebar border-start bg-white overflow-auto"
+				class:open={sidebarOpen}
+				style:--sidebar-width="{sidebarWidth}px"
+			>
+				<div class="sidebar-content" style:width="{sidebarWidth}px">
+					<div class="d-flex align-items-center justify-content-between p-3 border-bottom bg-light sticky-top">
+						<h6 class="mb-0">
+							<i class="bi bi-info-circle text-primary"></i> Details
+						</h6>
+						<button 
+							class="btn btn-sm btn-outline-secondary" 
+							onclick={closeSidebar}
+							title="Close"
+							aria-label="Close sidebar"
+						>
+							<i class="bi bi-x-lg"></i>
+						</button>
+					</div>
+					
+					<div class="p-3">
+						{#if detailsContent}
+							{@render detailsContent({ cell: clickedCell, closeSidebar })}
+						{:else if clickedCell}
+							<!-- Default details view -->
+							<dl class="row mb-0 small">
+								<dt class="col-5 text-muted">ID</dt>
+								<dd class="col-7"><code class="text-primary">{clickedCell.id}</code></dd>
+
+								<dt class="col-5 text-muted">Cell Name</dt>
+								<dd class="col-7 fw-medium">{clickedCell.cellName}</dd>
+
+								<dt class="col-5 text-muted">Site</dt>
+								<dd class="col-7">{clickedCell.siteId}</dd>
+
+								<dt class="col-5 text-muted">Technology</dt>
+								<dd class="col-7">
+									<span class="badge" style="background-color: {techColors?.[clickedCell.tech] ?? DEFAULT_TECH_COLORS[clickedCell.tech] ?? '#6c757d'}; color: white;">{clickedCell.tech}</span>
+								</dd>
+
+								<dt class="col-5 text-muted">Band</dt>
+								<dd class="col-7">
+									<span class="badge" style="background-color: {FBAND_COLORS[clickedCell.fband] ?? '#6c757d'}; color: white;">{clickedCell.fband}</span>
+								</dd>
+
+								<dt class="col-5 text-muted">Frequency</dt>
+								<dd class="col-7">{clickedCell.frq} MHz</dd>
+
+								<dt class="col-5 text-muted">Status</dt>
+								<dd class="col-7">
+									<span class="badge" style="background-color: {statusColors?.[clickedCell.status] ?? DEFAULT_STATUS_COLORS[clickedCell.status] ?? '#6c757d'}; color: white;">{clickedCell.status.replace(/_/g, ' ')}</span>
+								</dd>
+
+								<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Physical</dt>
+								
+								<dt class="col-5 text-muted">Azimuth</dt>
+								<dd class="col-7">{clickedCell.azimuth}°</dd>
+
+								<dt class="col-5 text-muted">Height</dt>
+								<dd class="col-7">{clickedCell.height}m</dd>
+
+								<dt class="col-5 text-muted">Beamwidth</dt>
+								<dd class="col-7">{clickedCell.beamwidth}°</dd>
+
+								<dt class="col-5 text-muted">E-Tilt</dt>
+								<dd class="col-7">{clickedCell.electricalTilt}°</dd>
+
+								<dt class="col-5 text-muted">Antenna</dt>
+								<dd class="col-7 text-truncate" title={clickedCell.antenna}>
+									{clickedCell.antenna}
+								</dd>
+
+								<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Location</dt>
+								
+								<dt class="col-5 text-muted">Latitude</dt>
+								<dd class="col-7">{clickedCell.latitude.toFixed(6)}</dd>
+
+								<dt class="col-5 text-muted">Longitude</dt>
+								<dd class="col-7">{clickedCell.longitude.toFixed(6)}</dd>
+
+								<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Planning</dt>
+
+								<dt class="col-5 text-muted">Planner</dt>
+								<dd class="col-7">{clickedCell.planner}</dd>
+
+								<dt class="col-5 text-muted">On Air</dt>
+								<dd class="col-7">{clickedCell.onAirDate}</dd>
+
+								{#if clickedCell.comment}
+									<dt class="col-5 text-muted">Comment</dt>
+									<dd class="col-7 fst-italic">{clickedCell.comment}</dd>
+								{/if}
+							</dl>
+						{:else}
+							<div class="text-center text-muted py-5">
+								<i class="bi bi-hand-index fs-1 opacity-50"></i>
+								<p class="mt-2 mb-0">Click a row to see details</p>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</aside>
+		{/if}
+	</div>
+
+	<!-- Footer -->
+	{#if footer}
+		<div class="panel-footer border-top p-2 bg-body-tertiary">
+			{@render footer({ selectedRows, selectedCount })}
+		</div>
+	{/if}
+
+	<!-- Context Menu (portal-like, fixed position) -->
+	{#if contextMenuVisible && contextMenuRow && contextMenu}
+		<div 
+			class="context-menu-container"
+			style="position: fixed; left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px; z-index: 1050;"
+		>
+			{@render contextMenu({ row: contextMenuRow, closeMenu: closeContextMenu })}
+		</div>
+	{/if}
+</div>
+
+<!-- Click outside handler -->
+<svelte:window onclick={contextMenuVisible ? handleClickOutside : undefined} />
+
+<style>
+	.cell-table-panel {
+		background-color: var(--bs-body-bg, #fff);
+		border: 1px solid var(--bs-border-color, #dee2e6);
+		border-radius: var(--bs-border-radius, 0.375rem);
+		overflow: hidden;
+	}
+
+	.panel-header {
+		min-height: 48px;
+	}
+
+	.panel-header h6 {
+		font-weight: 600;
+		color: var(--bs-body-color, #212529);
+	}
+
+	.content-area {
+		min-height: 0;
+	}
+
+	.table-wrapper {
+		min-height: 0;
+		transition: all 0.3s ease;
+	}
+
+	.details-sidebar {
+		width: 0;
+		min-width: 0;
+		opacity: 0;
+		transition: width 0.3s ease, opacity 0.3s ease, min-width 0.3s ease;
+	}
+
+	.details-sidebar.open {
+		width: var(--sidebar-width, 320px);
+		min-width: var(--sidebar-width, 320px);
+		opacity: 1;
+	}
+
+	.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);
+	}
+
+	/* Context menu styling */
+	.context-menu-container {
+		animation: contextMenuFadeIn 0.1s ease-out;
+	}
+
+	@keyframes contextMenuFadeIn {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+</style>