@smartnet360/svelte-components 0.0.105 → 0.0.107

package/dist/core/CellTable/CellTablePanel.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import CellTable from './CellTable.svelte';
 	import CellTableToolbar from './CellTableToolbar.svelte';
+	import { getColumnMetadata, getPresetVisibleFields } from './column-config';
 	import type {
 		CellData,
 		CellTableGroupField,
@@ -39,6 +40,12 @@
 		headerFilters?: boolean;
 		/** Panel title */
 		title?: string;
+		/** Show details sidebar */
+		showDetailsSidebar?: boolean;
+		/** Sidebar width in pixels */
+		sidebarWidth?: number;
+		/** Bindable reference to table methods */
+		tableRef?: { redraw: () => void } | null;
 		/** Row selection change event */
 		onselectionchange?: (event: RowSelectionEvent) => void;
 		/** Row click event */
@@ -49,6 +56,8 @@
 		headerActions?: Snippet;
 		/** Custom footer slot */
 		footer?: Snippet<[{ selectedRows: CellData[]; selectedCount: number }]>;
+		/** Custom details sidebar content */
+		detailsContent?: Snippet<[{ cell: CellData | null; closeSidebar: () => void }]>;
 	}
 
 	let {
@@ -64,17 +73,44 @@
 		statusColors,
 		headerFilters = true,
 		title = 'Cell Data',
+		showDetailsSidebar = false,
+		sidebarWidth = 320,
+		tableRef = $bindable(null),
 		onselectionchange,
 		onrowclick,
 		onrowdblclick,
 		headerActions,
-		footer
+		footer,
+		detailsContent
 	}: Props = $props();
 
 	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(true);
+
+	// Column visibility management
+	const columnMeta = getColumnMetadata();
+	let visibleColumns = $state<string[]>(getPresetVisibleFields(columnPreset));
+
+	// Update visible columns when preset changes
+	$effect(() => {
+		visibleColumns = getPresetVisibleFields(columnPreset);
+	});
+
+	// Expose table methods via tableRef - only set once
+	$effect(() => {
+		if (cellTable && !tableRefSet) {
+			tableRefSet = true;
+			tableRef = {
+				redraw: () => cellTable?.redraw()
+			};
+		}
+	});
 
 	function handleSelectionChange(event: RowSelectionEvent) {
 		selectedCount = event.rows.length;
@@ -82,6 +118,15 @@
 		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;
 	}
@@ -106,6 +151,54 @@
 		cellTable?.clearFilters();
 	}
 
+	function handleCollapseAll() {
+		cellTable?.collapseAll();
+	}
+
+	function handleExpandAll() {
+		cellTable?.expandAll();
+	}
+
+	function handleToggleFilters() {
+		filtersVisible = !filtersVisible;
+		cellTable?.toggleHeaderFilters(filtersVisible);
+	}
+
+	function handleColumnVisibilityChange(field: string, visible: boolean) {
+		if (visible) {
+			if (!visibleColumns.includes(field)) {
+				visibleColumns = [...visibleColumns, field];
+			}
+			cellTable?.showColumn(field);
+		} else {
+			visibleColumns = visibleColumns.filter(f => f !== field);
+			cellTable?.hideColumn(field);
+		}
+	}
+
+	function handleResetColumns() {
+		const defaultFields = getPresetVisibleFields(columnPreset);
+		visibleColumns = defaultFields;
+		// Show/hide columns to match preset
+		columnMeta.forEach(col => {
+			if (defaultFields.includes(col.field)) {
+				cellTable?.showColumn(col.field);
+			} else {
+				cellTable?.hideColumn(col.field);
+			}
+		});
+	}
+
+	function toggleSidebar() {
+		sidebarOpen = !sidebarOpen;
+		setTimeout(() => cellTable?.redraw(), 320);
+	}
+
+	function closeSidebar() {
+		sidebarOpen = false;
+		setTimeout(() => cellTable?.redraw(), 320);
+	}
+
 	// Expose table methods
 	export function getSelectedRows(): CellData[] {
 		return cellTable?.getSelectedRows() ?? [];
@@ -122,6 +215,11 @@
 	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>
@@ -131,11 +229,24 @@
 			<i class="bi bi-table text-primary"></i>
 			{title}
 		</h6>
-		{#if headerActions}
-			<div class="header-actions">
-				{@render headerActions()}
-			</div>
-		{/if}
+		<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'}
+				>
+					<i class="bi" class:bi-layout-sidebar-reverse={!sidebarOpen} class:bi-x-lg={sidebarOpen}></i>
+				</button>
+			{/if}
+		</div>
 	</div>
 
 	<!-- Toolbar -->
@@ -152,27 +263,167 @@
 			onexportcsv={handleExportCSV}
 			onexportjson={handleExportJSON}
 			onclearfilters={handleClearFilters}
+			oncollapseall={handleCollapseAll}
+			onexpandall={handleExpandAll}
+			{filtersVisible}
+			ontogglefilters={handleToggleFilters}
+			{columnMeta}
+			{visibleColumns}
+			oncolumnvisibilitychange={handleColumnVisibilityChange}
+			onresetcolumns={handleResetColumns}
 		/>
 	{/if}
 
-	<!-- Table -->
-	<div class="table-wrapper flex-grow-1">
-		<CellTable
-			bind:this={cellTable}
-			{cells}
-			{groupBy}
-			{columnPreset}
-			{selectable}
-			{multiSelect}
-			height="100%"
-			{techColors}
-			{statusColors}
-			{headerFilters}
-			onselectionchange={handleSelectionChange}
-			ondatachange={handleDataChange}
-			{onrowclick}
-			{onrowdblclick}
-		/>
+	<!-- 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}
+				{selectable}
+				{multiSelect}
+				height="100%"
+				{techColors}
+				{statusColors}
+				{headerFilters}
+				onselectionchange={handleSelectionChange}
+				ondatachange={handleDataChange}
+				onrowclick={handleRowClick}
+				{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"
+						>
+							<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 bg-secondary">{clickedCell.tech}</span>
+								</dd>
+
+								<dt class="col-5 text-muted">Band</dt>
+								<dd class="col-7">
+									<span class="badge bg-info">{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 bg-success">{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}
+
+								<!-- Dynamic Other Properties -->
+								{#if clickedCell.other && Object.keys(clickedCell.other).length > 0}
+									<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Other</dt>
+									
+									{#each Object.entries(clickedCell.other) as [key, value]}
+										<dt class="col-5 text-muted text-capitalize">{key.replace(/_/g, ' ')}</dt>
+										<dd class="col-7">
+											{#if value === null || value === undefined}
+												<span class="text-muted fst-italic">—</span>
+											{:else if typeof value === 'boolean'}
+												<span class="badge" class:bg-success={value} class:bg-secondary={!value}>
+													{value ? 'Yes' : 'No'}
+												</span>
+											{:else if typeof value === 'number'}
+												<code>{value}</code>
+											{:else if typeof value === 'object'}
+												<code class="small text-break">{JSON.stringify(value)}</code>
+											{:else}
+												{String(value)}
+											{/if}
+										</dd>
+									{/each}
+								{/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 -->
@@ -200,9 +451,26 @@
 		color: var(--bs-body-color, #212529);
 	}
 
+	.content-area {
+		min-height: 0;
+	}
+
 	.table-wrapper {
 		min-height: 0;
-		overflow: hidden;
+		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 {

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

@@ -25,6 +25,14 @@ interface Props {
     headerFilters?: boolean;
     /** Panel title */
     title?: string;
+    /** Show details sidebar */
+    showDetailsSidebar?: boolean;
+    /** Sidebar width in pixels */
+    sidebarWidth?: number;
+    /** Bindable reference to table methods */
+    tableRef?: {
+        redraw: () => void;
+    } | null;
     /** Row selection change event */
     onselectionchange?: (event: RowSelectionEvent) => void;
     /** Row click event */
@@ -38,12 +46,18 @@ interface Props {
         selectedRows: CellData[];
         selectedCount: number;
     }]>;
+    /** Custom details sidebar content */
+    detailsContent?: Snippet<[{
+        cell: CellData | null;
+        closeSidebar: () => void;
+    }]>;
 }
 declare const CellTablePanel: import("svelte").Component<Props, {
     getSelectedRows: () => CellData[];
     clearSelection: () => void;
     scrollToRow: (id: string) => void;
     redraw: () => void;
-}, "groupBy" | "columnPreset">;
+    openSidebar: () => void;
+}, "groupBy" | "columnPreset" | "tableRef">;
 type CellTablePanel = ReturnType<typeof CellTablePanel>;
 export default CellTablePanel;

package/dist/core/CellTable/CellTableToolbar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { CellTableGroupField, ColumnPreset } from './types';
+	import type { ColumnMeta } from './column-config';
+	import ColumnPicker from './ColumnPicker.svelte';
 
 	interface Props {
 		/** Current grouping field */
@@ -28,6 +30,22 @@
 		onexportjson?: () => void;
 		/** Clear filters event */
 		onclearfilters?: () => void;
+		/** Collapse all groups event */
+		oncollapseall?: () => void;
+		/** Expand all groups event */
+		onexpandall?: () => void;
+		/** Whether header filters are visible */
+		filtersVisible?: boolean;
+		/** Toggle filters event */
+		ontogglefilters?: () => void;
+		/** All available columns metadata */
+		columnMeta?: ColumnMeta[];
+		/** Currently visible column fields */
+		visibleColumns?: string[];
+		/** Column visibility change event */
+		oncolumnvisibilitychange?: (field: string, visible: boolean) => void;
+		/** Reset columns to preset default */
+		onresetcolumns?: () => void;
 	}
 
 	let {
@@ -43,7 +61,15 @@
 		onpresetchange,
 		onexportcsv,
 		onexportjson,
-		onclearfilters
+		onclearfilters,
+		oncollapseall,
+		onexpandall,
+		filtersVisible = true,
+		ontogglefilters,
+		columnMeta = [],
+		visibleColumns = [],
+		oncolumnvisibilitychange,
+		onresetcolumns
 	}: Props = $props();
 
 	const groupOptions: { value: CellTableGroupField; label: string }[] = [
@@ -107,6 +133,28 @@
 					<option value={option.value}>{option.label}</option>
 				{/each}
 			</select>
+			{#if groupBy !== 'none'}
+				<div class="btn-group ms-2">
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-secondary"
+						onclick={oncollapseall}
+						title="Collapse all groups"
+						aria-label="Collapse all groups"
+					>
+						<i class="bi bi-chevron-contract"></i>
+					</button>
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-secondary"
+						onclick={onexpandall}
+						title="Expand all groups"
+						aria-label="Expand all groups"
+					>
+						<i class="bi bi-chevron-expand"></i>
+					</button>
+				</div>
+			{/if}
 		</div>
 	{/if}
 
@@ -127,6 +175,15 @@
 					<option value={option.value}>{option.label}</option>
 				{/each}
 			</select>
+			{#if columnMeta.length > 0}
+				<ColumnPicker
+					columns={columnMeta}
+					{visibleColumns}
+					presetName={presetOptions.find(p => p.value === columnPreset)?.label ?? 'Default'}
+					onchange={oncolumnvisibilitychange}
+					onreset={onresetcolumns}
+				/>
+			{/if}
 		</div>
 	{/if}
 
@@ -134,6 +191,19 @@
 
 	<!-- Actions -->
 	<div class="toolbar-actions d-flex align-items-center gap-2">
+		{#if ontogglefilters}
+			<button
+				type="button"
+				class="btn btn-sm"
+				class:btn-outline-secondary={!filtersVisible}
+				class:btn-secondary={filtersVisible}
+				onclick={ontogglefilters}
+				title={filtersVisible ? 'Hide filters' : 'Show filters'}
+				aria-label={filtersVisible ? 'Hide filters' : 'Show filters'}
+			>
+				<i class="bi bi-funnel"></i>
+			</button>
+		{/if}
 		{#if onclearfilters}
 			<button
 				type="button"

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

@@ -1,4 +1,5 @@
 import type { CellTableGroupField, ColumnPreset } from './types';
+import type { ColumnMeta } from './column-config';
 interface Props {
     /** Current grouping field */
     groupBy?: CellTableGroupField;
@@ -26,6 +27,22 @@ interface Props {
     onexportjson?: () => void;
     /** Clear filters event */
     onclearfilters?: () => void;
+    /** Collapse all groups event */
+    oncollapseall?: () => void;
+    /** Expand all groups event */
+    onexpandall?: () => void;
+    /** Whether header filters are visible */
+    filtersVisible?: boolean;
+    /** Toggle filters event */
+    ontogglefilters?: () => void;
+    /** All available columns metadata */
+    columnMeta?: ColumnMeta[];
+    /** Currently visible column fields */
+    visibleColumns?: string[];
+    /** Column visibility change event */
+    oncolumnvisibilitychange?: (field: string, visible: boolean) => void;
+    /** Reset columns to preset default */
+    onresetcolumns?: () => void;
 }
 declare const CellTableToolbar: import("svelte").Component<Props, {}, "">;
 type CellTableToolbar = ReturnType<typeof CellTableToolbar>;