@smartnet360/svelte-components 0.0.103 → 0.0.104

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

@@ -0,0 +1,465 @@
+/**
+ * CellTable - Column Configuration
+ *
+ * Defines column definitions, presets, and formatters for the cell table
+ */
+/**
+ * Default technology colors (Bootstrap-aligned)
+ */
+export const DEFAULT_TECH_COLORS = {
+    '2G': '#6c757d', // secondary gray
+    '3G': '#0d6efd', // primary blue
+    '4G': '#198754', // success green
+    '5G': '#6f42c1', // purple
+    'LTE': '#198754', // success green
+    'NR': '#6f42c1', // purple
+};
+/**
+ * Default status colors (Bootstrap-aligned)
+ */
+export const DEFAULT_STATUS_COLORS = {
+    'On_Air': '#198754', // success green
+    'On_Air_UNDER_CONSTRUCTION': '#ffc107', // warning yellow
+    'On_Air_Locked': '#0dcaf0', // info cyan
+    'RF_Plan_Ready': '#0d6efd', // primary blue
+    'Re-Planned_RF_Plan_Ready': '#6f42c1', // purple
+    'Tavlati_RF_Plan_Ready': '#fd7e14', // orange
+};
+/**
+ * Frequency band colors
+ */
+export const FBAND_COLORS = {
+    'GSM900': '#6c757d',
+    'GSM1800': '#495057',
+    'LTE700': '#dc3545',
+    'LTE800': '#e35d6a',
+    'LTE900': '#fd7e14',
+    'LTE1800': '#198754',
+    'LTE2100': '#20c997',
+    'LTE2600': '#0dcaf0',
+    '5G-700': '#6f42c1',
+    '5G-3500': '#d63384',
+    'NR3500': '#d63384',
+};
+/**
+ * Column groups for different presets
+ */
+export const COLUMN_GROUPS = {
+    core: ['id', 'cellName', 'siteId', 'tech', 'fband', 'status'],
+    physical: ['antenna', 'azimuth', 'height', 'electricalTilt', 'beamwidth'],
+    network: ['dlEarfn', 'bcch', 'pci1', 'cellId3', 'nwtP1', 'nwtP2', 'nwtRS', 'nwtBW'],
+    planning: ['planner', 'comment', 'onAirDate', 'type'],
+    atoll: ['atollETP', 'atollPW', 'atollRS', 'atollBW'],
+    position: ['latitude', 'longitude', 'siteLatitude', 'siteLongitude', 'dx', 'dy'],
+};
+/**
+ * Create a technology badge formatter
+ */
+export function createTechFormatter(colors = DEFAULT_TECH_COLORS) {
+    return (cell) => {
+        const value = cell.getValue();
+        const color = colors[value] || '#6c757d';
+        return `<span class="badge" style="background-color: ${color}; color: white;">${value}</span>`;
+    };
+}
+/**
+ * Create a status badge formatter
+ */
+export function createStatusFormatter(colors = DEFAULT_STATUS_COLORS) {
+    return (cell) => {
+        const value = cell.getValue();
+        const color = colors[value] || '#6c757d';
+        const displayValue = value.replace(/_/g, ' ');
+        return `<span class="badge" style="background-color: ${color}; color: white; font-size: 0.7rem;">${displayValue}</span>`;
+    };
+}
+/**
+ * Create an fband badge formatter
+ */
+export function createFbandFormatter() {
+    return (cell) => {
+        const value = cell.getValue();
+        const color = FBAND_COLORS[value] || '#6c757d';
+        return `<span class="badge" style="background-color: ${color}; color: white;">${value}</span>`;
+    };
+}
+/**
+ * Number formatter with fixed decimals
+ */
+export function numberFormatter(decimals = 2) {
+    return (cell) => {
+        const value = cell.getValue();
+        if (value === null || value === undefined || value === '')
+            return '';
+        const num = Number(value);
+        return isNaN(num) ? String(value) : num.toFixed(decimals);
+    };
+}
+/**
+ * Coordinate formatter (lat/lng)
+ */
+export function coordinateFormatter(cell) {
+    const value = cell.getValue();
+    if (value === null || value === undefined || value === '')
+        return '';
+    const num = Number(value);
+    return isNaN(num) ? String(value) : num.toFixed(6);
+}
+/**
+ * Azimuth formatter with degree symbol
+ */
+export function azimuthFormatter(cell) {
+    const value = cell.getValue();
+    if (value === null || value === undefined || value === '')
+        return '';
+    return `${value}°`;
+}
+/**
+ * Height formatter with meter unit
+ */
+export function heightFormatter(cell) {
+    const value = cell.getValue();
+    if (value === null || value === undefined || value === '')
+        return '';
+    return `${value}m`;
+}
+/**
+ * Get all column definitions
+ */
+export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = DEFAULT_STATUS_COLORS, headerFilters = true) {
+    const headerFilterParams = headerFilters ? { headerFilter: 'input' } : {};
+    const selectHeaderFilter = headerFilters ? { headerFilter: 'list', headerFilterParams: { valuesLookup: true } } : {};
+    return [
+        // Core columns
+        {
+            title: 'ID',
+            field: 'id',
+            width: 120,
+            frozen: true,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell Name',
+            field: 'cellName',
+            width: 150,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Site ID',
+            field: 'siteId',
+            width: 120,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Tech',
+            field: 'tech',
+            width: 80,
+            hozAlign: 'center',
+            formatter: createTechFormatter(techColors),
+            ...selectHeaderFilter,
+        },
+        {
+            title: 'Band',
+            field: 'fband',
+            width: 100,
+            hozAlign: 'center',
+            formatter: createFbandFormatter(),
+            ...selectHeaderFilter,
+        },
+        {
+            title: 'Freq',
+            field: 'frq',
+            width: 80,
+            hozAlign: 'center',
+            ...selectHeaderFilter,
+        },
+        {
+            title: 'Status',
+            field: 'status',
+            width: 180,
+            formatter: createStatusFormatter(statusColors),
+            ...selectHeaderFilter,
+        },
+        {
+            title: 'Type',
+            field: 'type',
+            width: 100,
+            ...selectHeaderFilter,
+        },
+        {
+            title: 'On Air Date',
+            field: 'onAirDate',
+            width: 120,
+            ...headerFilterParams,
+        },
+        // Physical columns
+        {
+            title: 'Antenna',
+            field: 'antenna',
+            width: 150,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Azimuth',
+            field: 'azimuth',
+            width: 90,
+            hozAlign: 'right',
+            formatter: azimuthFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Height',
+            field: 'height',
+            width: 80,
+            hozAlign: 'right',
+            formatter: heightFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'E-Tilt',
+            field: 'electricalTilt',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'Beamwidth',
+            field: 'beamwidth',
+            width: 100,
+            hozAlign: 'right',
+            formatter: azimuthFormatter,
+            ...headerFilterParams,
+        },
+        // Network columns
+        {
+            title: 'DL EARFCN',
+            field: 'dlEarfn',
+            width: 100,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'BCCH',
+            field: 'bcch',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'PCI',
+            field: 'pci1',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell ID 3',
+            field: 'cellId3',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell ID',
+            field: 'cellID',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell ID 2G',
+            field: 'cellID2G',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'TX ID',
+            field: 'txId',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Ctrl ID',
+            field: 'ctrlid',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'NWT P1',
+            field: 'nwtP1',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'NWT P2',
+            field: 'nwtP2',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'NWT RS',
+            field: 'nwtRS',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'NWT BW',
+            field: 'nwtBW',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        // Atoll columns
+        {
+            title: 'Atoll ETP',
+            field: 'atollETP',
+            width: 90,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        {
+            title: 'Atoll PW',
+            field: 'atollPW',
+            width: 90,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        {
+            title: 'Atoll RS',
+            field: 'atollRS',
+            width: 90,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        {
+            title: 'Atoll BW',
+            field: 'atollBW',
+            width: 90,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        // Position columns
+        {
+            title: 'Latitude',
+            field: 'latitude',
+            width: 120,
+            hozAlign: 'right',
+            formatter: coordinateFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Longitude',
+            field: 'longitude',
+            width: 120,
+            hozAlign: 'right',
+            formatter: coordinateFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Site Lat',
+            field: 'siteLatitude',
+            width: 120,
+            hozAlign: 'right',
+            formatter: coordinateFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Site Lng',
+            field: 'siteLongitude',
+            width: 120,
+            hozAlign: 'right',
+            formatter: coordinateFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'DX',
+            field: 'dx',
+            width: 80,
+            hozAlign: 'right',
+            formatter: numberFormatter(2),
+            ...headerFilterParams,
+        },
+        {
+            title: 'DY',
+            field: 'dy',
+            width: 80,
+            hozAlign: 'right',
+            formatter: numberFormatter(2),
+            ...headerFilterParams,
+        },
+        // Planning columns
+        {
+            title: 'Planner',
+            field: 'planner',
+            width: 120,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Comment',
+            field: 'comment',
+            width: 200,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Subgroup',
+            field: 'customSubgroup',
+            width: 120,
+            ...headerFilterParams,
+        },
+    ];
+}
+/**
+ * Get columns for a specific preset
+ */
+export function getColumnsForPreset(preset, techColors = DEFAULT_TECH_COLORS, statusColors = DEFAULT_STATUS_COLORS, headerFilters = true) {
+    const allColumns = getAllColumns(techColors, statusColors, headerFilters);
+    let visibleFields;
+    switch (preset) {
+        case 'compact':
+            visibleFields = ['cellName', 'siteId', 'tech', 'fband', 'status'];
+            break;
+        case 'full':
+            return allColumns;
+        case 'physical':
+            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.physical];
+            break;
+        case 'network':
+            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.network];
+            break;
+        case 'planning':
+            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.planning];
+            break;
+        case 'default':
+        default:
+            visibleFields = [
+                'id', 'cellName', 'siteId', 'tech', 'fband', 'frq', 'status',
+                'azimuth', 'height', 'antenna'
+            ];
+    }
+    return allColumns.filter(col => visibleFields.includes(col.field));
+}
+/**
+ * Get group header formatter for a specific field
+ */
+export function getGroupHeaderFormatter(groupField) {
+    return (value, count) => {
+        const displayValue = String(value).replace(/_/g, ' ');
+        let color = '#6c757d';
+        if (groupField === 'tech') {
+            color = DEFAULT_TECH_COLORS[String(value)] || color;
+        }
+        else if (groupField === 'fband') {
+            color = FBAND_COLORS[String(value)] || color;
+        }
+        else if (groupField === 'status') {
+            color = DEFAULT_STATUS_COLORS[String(value)] || color;
+        }
+        return `<span class="badge me-2" style="background-color: ${color}; color: white;">${displayValue}</span>
+			<span class="text-muted">(${count} cell${count !== 1 ? 's' : ''})</span>`;
+    };
+}

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

@@ -0,0 +1,10 @@
+/**
+ * CellTable Component - Exports
+ *
+ * A Bootstrap-themed Tabulator wrapper for displaying cell data
+ */
+export { default as CellTable } from './CellTable.svelte';
+export { default as CellTableToolbar } from './CellTableToolbar.svelte';
+export { default as CellTablePanel } from './CellTablePanel.svelte';
+export type { CellData, CellTableGroupField, ColumnPreset, ColumnVisibility, TechColorMap, StatusColorMap, CellTableProps, RowSelectionEvent, RowClickEvent, RowDblClickEvent, DataChangeEvent, CellTableColumn, ColumnGroups } from './types';
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';

package/dist/core/CellTable/index.js

@@ -0,0 +1,11 @@
+/**
+ * CellTable Component - Exports
+ *
+ * A Bootstrap-themed Tabulator wrapper for displaying cell data
+ */
+// Components
+export { default as CellTable } from './CellTable.svelte';
+export { default as CellTableToolbar } from './CellTableToolbar.svelte';
+export { default as CellTablePanel } from './CellTablePanel.svelte';
+// Configuration utilities
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';

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

@@ -0,0 +1,166 @@
+/**
+ * CellTable Component - Type Definitions
+ *
+ * Types for the Tabulator-based cell data table component
+ */
+import type { ColumnDefinition, Options } from 'tabulator-tables';
+/**
+ * Cell data model - represents a radio cell/sector
+ * Imported from map-v3 cells feature for consistency
+ */
+export interface CellData {
+    id: string;
+    txId: string;
+    cellID: string;
+    cellID2G: string;
+    cellName: string;
+    siteId: string;
+    tech: string;
+    fband: string;
+    frq: string;
+    type: string;
+    status: string;
+    onAirDate: string;
+    bcch: number;
+    ctrlid: string;
+    dlEarfn: number;
+    antenna: string;
+    azimuth: number;
+    height: number;
+    electricalTilt: string;
+    beamwidth: number;
+    latitude: number;
+    longitude: number;
+    dx: number;
+    dy: number;
+    siteLatitude: number;
+    siteLongitude: number;
+    comment: string;
+    planner: string;
+    atollETP: number;
+    atollPW: number;
+    atollRS: number;
+    atollBW: number;
+    cellId3: string;
+    nwtP1: number;
+    nwtP2: number;
+    pci1: number;
+    nwtRS: number;
+    nwtBW: number;
+    other?: Record<string, unknown>;
+    customSubgroup: string;
+}
+/**
+ * Available grouping fields for the table
+ */
+export type CellTableGroupField = 'tech' | 'fband' | 'frq' | 'status' | 'siteId' | 'none';
+/**
+ * Column preset configurations
+ */
+export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'network' | 'planning';
+/**
+ * Column visibility configuration
+ */
+export interface ColumnVisibility {
+    [key: string]: boolean;
+}
+/**
+ * Technology color mapping
+ */
+export interface TechColorMap {
+    [tech: string]: string;
+}
+/**
+ * Status color mapping
+ */
+export interface StatusColorMap {
+    [status: string]: string;
+}
+/**
+ * CellTable component props
+ */
+export interface CellTableProps {
+    /** Cell data array to display */
+    cells: CellData[];
+    /** Field to group rows by */
+    groupBy?: CellTableGroupField;
+    /** Initial column preset */
+    columnPreset?: ColumnPreset;
+    /** Custom column visibility overrides */
+    columnVisibility?: ColumnVisibility;
+    /** Enable row selection */
+    selectable?: boolean;
+    /** Enable multi-row selection */
+    multiSelect?: boolean;
+    /** Table height (CSS value) */
+    height?: string;
+    /** Enable virtual DOM for large datasets */
+    virtualDom?: boolean;
+    /** Custom Tabulator options override */
+    tabulatorOptions?: Partial<Options>;
+    /** Technology color mapping */
+    techColors?: TechColorMap;
+    /** Status color mapping */
+    statusColors?: StatusColorMap;
+    /** Enable header filters */
+    headerFilters?: boolean;
+    /** Enable column resizing */
+    resizableColumns?: boolean;
+    /** Enable movable columns */
+    movableColumns?: boolean;
+    /** Persist column layout to localStorage */
+    persistLayout?: boolean;
+    /** Storage key for persisted layout */
+    storageKey?: string;
+}
+/**
+ * Row selection event data
+ */
+export interface RowSelectionEvent {
+    rows: CellData[];
+    ids: string[];
+}
+/**
+ * Row click event data
+ */
+export interface RowClickEvent {
+    row: CellData;
+    event: MouseEvent;
+}
+/**
+ * Row double-click event data
+ */
+export interface RowDblClickEvent {
+    row: CellData;
+    event: MouseEvent;
+}
+/**
+ * Data change event data
+ */
+export interface DataChangeEvent {
+    type: 'load' | 'update' | 'filter' | 'sort' | 'group';
+    rowCount: number;
+    filteredCount: number;
+}
+/**
+ * Column definition with Bootstrap styling helpers
+ */
+export interface CellTableColumn extends ColumnDefinition {
+    /** Bootstrap badge variant for cell rendering */
+    badgeVariant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+    /** Use technology-based coloring */
+    techColored?: boolean;
+    /** Use status-based coloring */
+    statusColored?: boolean;
+}
+/**
+ * Predefined column groups for presets
+ */
+export interface ColumnGroups {
+    core: string[];
+    physical: string[];
+    network: string[];
+    planning: string[];
+    atoll: string[];
+    position: string[];
+}

package/dist/core/CellTable/types.js

@@ -0,0 +1,6 @@
+/**
+ * CellTable Component - Type Definitions
+ *
+ * Types for the Tabulator-based cell data table component
+ */
+export {};