@smartnet360/svelte-components 0.0.133 → 0.0.135

package/dist/core/CellHistory/CellHistoryPanel.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+	import CellTablePanel from '../CellTableV2/CellTablePanel.svelte';
+	import type { RowSelectionEvent, CellData } from '../CellTableV2/types';
+	import type { HistoryTableRow, CellHistoryPanelProps } from './types';
+	import type { CellHistoryData } from '../CellTableV2/types';
+	import { transformHistoryData, EXAMPLE_HISTORY_DATA } from './transformers';
+	import { getHistoryColumns } from './column-config';
+
+	let {
+		cellName = $bindable('1001141'),
+		historyData: externalData,
+		storageKey = 'cell-history-table',
+		showToolbar = true,
+		showExport = true,
+		headerFilters = true,
+		title = 'Cell Configuration History',
+		onselectionchange,
+		oncompare,
+	}: CellHistoryPanelProps = $props();
+
+	// Get history-specific columns
+	const historyColumns = getHistoryColumns(headerFilters);
+
+	// Internal state for API data
+	let rawHistoryData = $state<CellHistoryData[]>(EXAMPLE_HISTORY_DATA);
+	
+	// Use external data if provided, otherwise transform internal data
+	let historyData = $derived(externalData ?? transformHistoryData(rawHistoryData));
+
+	function loadHistory() {
+		// TODO: Replace with actual API call
+		console.log(`Loading history for cell: ${cellName}`);
+		rawHistoryData = EXAMPLE_HISTORY_DATA.filter(r => r.CELLNAME === cellName);
+	}
+
+	function handleSelectionChange(event: RowSelectionEvent) {
+		console.log('Selection changed:', event.ids);
+		onselectionchange?.({
+			ids: event.ids,
+			rows: event.rows as unknown as HistoryTableRow[]
+		});
+	}
+
+	/**
+	 * Compare two selected history records - opens antenna compare tool
+	 */
+	function handleCompareTwoRecords(record1: HistoryTableRow, record2: HistoryTableRow) {
+		// Allow external handler to override
+		if (oncompare) {
+			oncompare(record1, record2);
+			return;
+		}
+
+		// Default behavior: open antenna compare page
+		const params = new URLSearchParams();
+
+		// Use antenna from both records
+		if (record1.antenna) params.set('ant1', record1.antenna);
+		if (record2.antenna) params.set('ant2', record2.antenna);
+
+		// Use frequency (same for both records typically)
+		params.set('freq1', String(record1.frequency || 1800));
+		params.set('freq2', String(record2.frequency || 1800));
+
+		// Use electrical tilt values
+		params.set('etilt1', String(record1.electricalTilt || 0));
+		params.set('etilt2', String(record2.electricalTilt || 0));
+
+		// Use mechanical tilt values
+		params.set('mtilt1', String(record1.mechanicalTilt || 0));
+		params.set('mtilt2', String(record2.mechanicalTilt || 0));
+
+		// Add config date as labels
+		params.set('label1', `${record1.cellName} (${record1.configDate})`);
+		params.set('label2', `${record2.cellName} (${record2.configDate})`);
+
+		const url = `/apps/antenna-compare?${params.toString()}`;
+		window.open(url, '_blank');
+	}
+</script>
+
+<div class="cell-history-panel vh-100 d-flex flex-column">
+	<!-- Header -->
+	<div class="history-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">Cell Name</span>
+			<input
+				type="text"
+				class="form-control"
+				bind:value={cellName}
+				style="width: 120px;"
+			/>
+			<button class="btn btn-outline-primary" onclick={loadHistory}>
+				<i class="bi bi-arrow-clockwise"></i> Load History
+			</button>
+		</div>
+		<span class="badge bg-info">
+			{historyData.length} records
+		</span>
+		<span class="text-muted small">
+			Select 2 rows to compare antenna configurations
+		</span>
+	</div>
+
+	<!-- CellTablePanel with custom history columns -->
+	<div class="flex-grow-1 overflow-hidden">
+		<CellTablePanel
+			cells={historyData as unknown as CellData[]}
+			groupBy="none"
+			{storageKey}
+			groupOptions={[
+				{ value: 'none', label: 'No Grouping' },
+				{ value: 'antenna', label: 'Antenna Type' },
+				{ value: 'cellname', label: 'Cell Name' },
+			]}
+			customColumns={historyColumns}
+			showColumnPresets={false}
+			selectable={true}
+			multiSelect={true}
+			{showToolbar}
+			{showExport}
+			{headerFilters}
+			showDetailsSidebar={false}
+			showScrollSpy={false}
+			{title}
+			onselectionchange={handleSelectionChange}
+		>
+			{#snippet footer({ selectedRows, selectedCount })}
+				<div class="d-flex align-items-center justify-content-between">
+					<span class="text-muted small">
+						{#if selectedCount > 0}
+							{selectedCount} record(s) selected
+						{:else}
+							Select rows to compare configurations
+						{/if}
+					</span>
+					<div class="btn-group">
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-success"
+							disabled={selectedCount !== 2}
+							title={selectedCount === 2
+								? 'Compare antenna patterns for selected dates'
+								: 'Select exactly 2 records to compare'}
+							onclick={() =>
+								handleCompareTwoRecords(
+									selectedRows[0] as unknown as HistoryTableRow,
+									selectedRows[1] as unknown as HistoryTableRow
+								)}
+						>
+							<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-secondary"
+							disabled={selectedCount === 0}
+							onclick={() => console.log('Export:', selectedRows.map((r) => r.configDate))}
+						>
+							<i class="bi bi-download"></i>
+							<span class="d-none d-sm-inline ms-1">Export</span>
+						</button>
+					</div>
+				</div>
+			{/snippet}
+		</CellTablePanel>
+	</div>
+</div>
+
+<style>
+	.cell-history-panel {
+		background: var(--bs-body-bg, #f8f9fa);
+	}
+
+	.history-controls {
+		flex-shrink: 0;
+	}
+</style>

package/dist/core/CellHistory/CellHistoryPanel.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CellHistoryPanelProps } from './types';
+declare const CellHistoryPanel: import("svelte").Component<CellHistoryPanelProps, {}, "cellName">;
+type CellHistoryPanel = ReturnType<typeof CellHistoryPanel>;
+export default CellHistoryPanel;

package/dist/core/CellHistory/column-config.d.ts

@@ -0,0 +1,26 @@
+/**
+ * CellHistory - Column Configuration
+ *
+ * History-specific column definitions and formatters
+ */
+import type { ColumnDefinition, CellComponent } from 'tabulator-tables';
+/**
+ * Create a history change formatter for showing current vs previous values
+ * Highlights changes in yellow/amber, unchanged values in muted style
+ *
+ * @param currentField - Field name for current value
+ * @param prevField - Field name for previous value
+ */
+export declare function createHistoryChangeFormatter(currentField: string, prevField: string): (cell: CellComponent) => string;
+/**
+ * Format ISO date string to YYYY-MM-DD format for history display
+ */
+export declare function historyDateFormatter(cell: CellComponent): string;
+/**
+ * Get history-specific column definitions
+ */
+export declare function getHistoryColumns(headerFilters?: boolean): ColumnDefinition[];
+/**
+ * History column fields for visibility tracking
+ */
+export declare const HISTORY_COLUMN_FIELDS: string[];

package/dist/core/CellHistory/column-config.js

@@ -0,0 +1,120 @@
+/**
+ * CellHistory - Column Configuration
+ *
+ * History-specific column definitions and formatters
+ */
+/**
+ * Create a history change formatter for showing current vs previous values
+ * Highlights changes in yellow/amber, unchanged values in muted style
+ *
+ * @param currentField - Field name for current value
+ * @param prevField - Field name for previous value
+ */
+export function createHistoryChangeFormatter(currentField, prevField) {
+    return (cell) => {
+        const row = cell.getRow().getData();
+        const currentVal = row[currentField];
+        const prevVal = row[prevField];
+        const currentStr = currentVal !== null && currentVal !== undefined ? String(currentVal) : '-';
+        const prevStr = prevVal !== null && prevVal !== undefined ? String(prevVal) : '-';
+        const hasChanged = currentVal !== prevVal;
+        if (hasChanged) {
+            // Value changed - highlight with amber/warning color
+            return `<span class="badge bg-warning text-dark" style="font-size: 0.75rem; font-weight: 500;" title="Changed from: ${prevStr}">${currentStr}</span>`;
+        }
+        else {
+            // No change - muted style
+            return `<span class="text-muted">${currentStr}</span>`;
+        }
+    };
+}
+/**
+ * Format ISO date string to YYYY-MM-DD format for history display
+ */
+export function historyDateFormatter(cell) {
+    const value = cell.getValue();
+    if (!value)
+        return '-';
+    try {
+        const date = new Date(value);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    catch {
+        return value;
+    }
+}
+/**
+ * Get history-specific column definitions
+ */
+export function getHistoryColumns(headerFilters = true) {
+    const headerFilterParams = headerFilters ? { headerFilter: 'input' } : {};
+    return [
+        // Core identifier
+        {
+            title: 'Cell Name',
+            field: 'cellName',
+            width: 120,
+            frozen: true,
+            ...headerFilterParams,
+        },
+        // History-specific columns
+        {
+            title: 'Config Date',
+            field: 'configDate',
+            width: 120,
+            formatter: historyDateFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Freq (MHz)',
+            field: 'frequency',
+            width: 100,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        // Change columns (current vs previous, highlights differences)
+        {
+            title: 'Antenna',
+            field: 'antennaChange',
+            width: 160,
+            formatter: createHistoryChangeFormatter('antenna', 'prevAntenna'),
+            ...headerFilterParams,
+        },
+        {
+            title: 'E-Tilt',
+            field: 'etiltChange',
+            width: 80,
+            hozAlign: 'center',
+            formatter: createHistoryChangeFormatter('electricalTilt', 'prevElectricalTilt'),
+        },
+        {
+            title: 'M-Tilt',
+            field: 'mtiltChange',
+            width: 80,
+            hozAlign: 'center',
+            formatter: createHistoryChangeFormatter('mechanicalTilt', 'prevMechanicalTilt'),
+        },
+        {
+            title: 'Power',
+            field: 'powerChange',
+            width: 80,
+            hozAlign: 'center',
+            formatter: createHistoryChangeFormatter('power', 'prevPower'),
+        },
+    ];
+}
+/**
+ * History column fields for visibility tracking
+ */
+export const HISTORY_COLUMN_FIELDS = [
+    'cellName',
+    'configDate',
+    'frequency',
+    'antennaChange',
+    'etiltChange',
+    'mtiltChange',
+    'powerChange'
+];

package/dist/core/CellHistory/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Cell History Feature
+ *
+ * Cell configuration history tracking and comparison
+ * Uses CellTableV2 for the underlying table functionality
+ */
+export { default as CellHistoryPanel } from './CellHistoryPanel.svelte';
+export type { HistoryTableRow, CellHistoryPanelProps } from './types';
+export { transformHistoryData, EXAMPLE_HISTORY_DATA } from './transformers';

package/dist/core/CellHistory/index.js

@@ -0,0 +1,10 @@
+/**
+ * Cell History Feature
+ *
+ * Cell configuration history tracking and comparison
+ * Uses CellTableV2 for the underlying table functionality
+ */
+// Main component
+export { default as CellHistoryPanel } from './CellHistoryPanel.svelte';
+// Utilities
+export { transformHistoryData, EXAMPLE_HISTORY_DATA } from './transformers';

package/dist/core/CellHistory/transformers.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Cell History Transformers
+ *
+ * Functions to transform API data to table-ready format
+ */
+import type { CellHistoryData } from '../CellTableV2/types';
+import type { HistoryTableRow } from './types';
+/**
+ * Transform API history data to table-friendly format
+ * Maps UPPER_CASE API fields to camelCase and adds virtual fields for change detection
+ */
+export declare function transformHistoryData(apiData: CellHistoryData[]): HistoryTableRow[];
+/**
+ * Example API data for cell configuration history (for demos/testing)
+ */
+export declare const EXAMPLE_HISTORY_DATA: CellHistoryData[];

package/dist/core/CellHistory/transformers.js

@@ -0,0 +1,76 @@
+/**
+ * Cell History Transformers
+ *
+ * Functions to transform API data to table-ready format
+ */
+/**
+ * Transform API history data to table-friendly format
+ * Maps UPPER_CASE API fields to camelCase and adds virtual fields for change detection
+ */
+export function transformHistoryData(apiData) {
+    return apiData.map((record, index) => ({
+        id: `hist-${index}`,
+        cellName: record.CELLNAME,
+        frequency: record.FREQUENCY,
+        configDate: record.CONFIG_DATE,
+        // Current values
+        antenna: record.ANTENNA_TYPE,
+        electricalTilt: record.ELECTRONIC_TILT,
+        mechanicalTilt: record.MECHANIC_TILT,
+        power: record.ANTOUTPUTPWR,
+        // Previous values for change comparison
+        prevAntenna: record.PREV_ANTENNA_TYPE,
+        prevElectricalTilt: record.PREV_ELECTRONIC_TILT,
+        prevMechanicalTilt: record.PREV_MECHANIC_TILT,
+        prevPower: record.PREV_ANTOUTPUTPWR,
+        // Virtual fields for the change columns (needed for column filtering)
+        antennaChange: record.ANTENNA_TYPE,
+        etiltChange: record.ELECTRONIC_TILT,
+        mtiltChange: record.MECHANIC_TILT,
+        powerChange: record.ANTOUTPUTPWR,
+    }));
+}
+/**
+ * Example API data for cell configuration history (for demos/testing)
+ */
+export const EXAMPLE_HISTORY_DATA = [
+    {
+        CELLNAME: '1001141',
+        FREQUENCY: 1800,
+        CONFIG_DATE: '2025-12-03T23:00:00.000Z',
+        ANTENNA_TYPE: 'AQU4521R01v06',
+        PREV_ANTENNA_TYPE: 'AQU4521R01v06',
+        ANTOUTPUTPWR: 20,
+        PREV_ANTOUTPUTPWR: 20,
+        MECHANIC_TILT: 1,
+        PREV_MECHANIC_TILT: 1,
+        ELECTRONIC_TILT: 10,
+        PREV_ELECTRONIC_TILT: 9
+    },
+    {
+        CELLNAME: '1001141',
+        FREQUENCY: 1800,
+        CONFIG_DATE: '2025-09-11T22:00:00.000Z',
+        ANTENNA_TYPE: 'AQU4521R01v06',
+        PREV_ANTENNA_TYPE: 'ADU451602v01',
+        ANTOUTPUTPWR: 20,
+        PREV_ANTOUTPUTPWR: 20,
+        MECHANIC_TILT: 1,
+        PREV_MECHANIC_TILT: 0,
+        ELECTRONIC_TILT: 9,
+        PREV_ELECTRONIC_TILT: 10
+    },
+    {
+        CELLNAME: '1001141',
+        FREQUENCY: 1800,
+        CONFIG_DATE: '2021-02-15T23:00:00.000Z',
+        ANTENNA_TYPE: 'ADU451602v01',
+        PREV_ANTENNA_TYPE: 'ADU451602v01',
+        ANTOUTPUTPWR: 20,
+        PREV_ANTOUTPUTPWR: 20,
+        MECHANIC_TILT: 0,
+        PREV_MECHANIC_TILT: 2,
+        ELECTRONIC_TILT: 10,
+        PREV_ELECTRONIC_TILT: 10
+    }
+];

package/dist/core/CellHistory/types.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Cell History Types
+ *
+ * Type definitions for cell configuration history feature
+ */
+export type { CellHistoryData } from '../CellTableV2/types';
+/**
+ * Table-ready history record after transformation from API data
+ * Maps UPPER_CASE API fields to camelCase for table columns
+ */
+export interface HistoryTableRow {
+    id: string;
+    cellName: string;
+    frequency: number;
+    configDate: string;
+    antenna: string;
+    electricalTilt: number;
+    mechanicalTilt: number;
+    power: number;
+    prevAntenna: string;
+    prevElectricalTilt: number;
+    prevMechanicalTilt: number;
+    prevPower: number;
+    antennaChange: string;
+    etiltChange: number;
+    mtiltChange: number;
+    powerChange: number;
+}
+/**
+ * Props for CellHistoryPanel component
+ */
+export interface CellHistoryPanelProps {
+    /** Cell name to load history for */
+    cellName?: string;
+    /** Pre-loaded history data (optional, for external data sources) */
+    historyData?: HistoryTableRow[];
+    /** Storage key prefix for persistence */
+    storageKey?: string;
+    /** Show toolbar controls */
+    showToolbar?: boolean;
+    /** Show export button */
+    showExport?: boolean;
+    /** Enable header filters */
+    headerFilters?: boolean;
+    /** Panel title */
+    title?: string;
+    /** Callback when selection changes */
+    onselectionchange?: (event: {
+        ids: string[];
+        rows: HistoryTableRow[];
+    }) => void;
+    /** Callback when compare is requested */
+    oncompare?: (record1: HistoryTableRow, record2: HistoryTableRow) => void;
+}

package/dist/core/CellHistory/types.js

@@ -0,0 +1,6 @@
+/**
+ * Cell History Types
+ *
+ * Type definitions for cell configuration history feature
+ */
+export {};

package/dist/core/CellTable/CellHistoryDemo.svelte

@@ -174,6 +174,7 @@
 		<CellTablePanel
 			cells={historyData as unknown as import('./types').CellData[]}
 			groupBy="none"
+			storageKey="cell-history-table"
 			groupOptions={[
 				{ value: 'none', label: 'No Grouping' },
 				{ value: 'antenna', label: 'Antenna Type' },

package/dist/core/CellTable/CellTable.svelte

@@ -56,7 +56,7 @@
 		headerFilters = true,
 		resizableColumns = true,
 		movableColumns = true,
-		persistLayout = false,
+		persistLayout = true,
 		storageKey = 'cell-table-layout',
 		onselectionchange,
 		onrowclick,
@@ -119,11 +119,12 @@
 			selectable: selectable ? (multiSelect ? true : 1) : false,
 			selectableRangeMode: 'click',
 			
-			// Persistence - disable sort persistence to preserve pre-sorted order
+			// Persistence - save column widths, order, visibility and group settings
 			persistence: persistLayout ? {
-				filter: true,
-				columns: ['width', 'visible'],
+				columns: ['width', 'visible', 'order'],
+				group: true,
 			} : false,
+			persistenceMode: persistLayout ? 'local' : undefined,
 			persistenceID: persistLayout ? storageKey : undefined,
 			
 			// Grouping
@@ -230,7 +231,8 @@
 	// Track previous values to avoid unnecessary updates
 	let prevCellsRef: unknown[] | null = null;
 	let prevGroupBy: string | null = null;
-	let prevColumnPreset: string | null = null;
+	// Initialize with current preset to prevent setColumns on first load (which would override persisted layout)
+	let prevColumnPreset: string | null = columnPreset;
 
 	// Update table data when cells change (reference comparison)
 	$effect(() => {