@visns-studio/visns-components 5.11.10 → 5.11.12

package/src/components/crm/generic/GenericGrid.jsx

@@ -13,6 +13,7 @@ import { showContactSelectorModal } from './ContactSelectorModal';
 import { showDateRangeSelectorModal } from './DateRangeSelectorModal';
 import { showAlternativeActionModal } from './AlternativeActionModal';
 import { showReasonCollectorModal } from './ReasonCollectorModal';
+import { processGridHeaders, getColumnHeaderClasses, getColumnHeaderStyles, getColumnHeaderTooltip } from '../../../utils/columnsMetadataUtils';
 import styles from './styles/GenericIndex.module.scss';
 
 // ContactTooltip component for enhanced contact display
@@ -825,6 +826,14 @@ const GenericGrid = ({
 
     // Handle sort request
     const requestSort = useCallback((key) => {
+        // Find the header configuration for this key to check if it's sortable
+        const header = gridHeaders.find((h) => h.key === key);
+        
+        // If the column is not sortable, don't proceed with sorting
+        if (header && header.sortable === false) {
+            return;
+        }
+        
         // If clicking the same column, toggle direction
         // Otherwise, start with ascending sort for the new column
         setSortConfig((prevConfig) => {
@@ -835,7 +844,7 @@ const GenericGrid = ({
 
             return { key, direction: newDirection };
         });
-    }, []);
+    }, [gridHeaders]);
 
     // Function to filter data based on filter values
     const filterData = useCallback(
@@ -975,24 +984,16 @@ const GenericGrid = ({
                 const staticData = settings.staticData;
 
                 if (staticData.header && staticData.rows) {
-                    // Set the headers from the static data
-                    const headerEntries = Object.entries(staticData.header);
-                    setGridHeaders(
-                        headerEntries.map(([key, config]) => ({
-                            key,
-                            label: config.label || key,
-                            sort: config.sort || key,
-                            type: config.type || 'text',
-                            filter: config.filter || null,
-                            onClick: config.onClick || null,
-                        }))
-                    );
+                    // Process static headers using the metadata utilities
+                    const mockResponse = { data: { data: staticData } };
+                    const processedHeaders = processGridHeaders(mockResponse);
+                    setGridHeaders(processedHeaders);
 
                     // Initialize filter values
                     const initialFilterValues = {};
-                    headerEntries.forEach(([key, config]) => {
-                        if (config.filter) {
-                            initialFilterValues[key] = '';
+                    processedHeaders.forEach((header) => {
+                        if (header.filter) {
+                            initialFilterValues[header.key] = '';
                         }
                     });
                     setFilterValues(initialFilterValues);
@@ -1046,26 +1047,15 @@ const GenericGrid = ({
                 if (response.data.data) {
                     // Check if the response has the expected structure with header and rows
                     if (response.data.data.header && response.data.data.rows) {
-                        // Set the headers from the response with the new structure
-                        const headerEntries = Object.entries(
-                            response.data.data.header
-                        );
-                        setGridHeaders(
-                            headerEntries.map(([key, config]) => ({
-                                key,
-                                label: config.label || key,
-                                sort: config.sort || key,
-                                type: config.type || 'text',
-                                filter: config.filter || null,
-                                onClick: config.onClick || null,
-                            }))
-                        );
+                        // Process headers using the metadata utilities
+                        const processedHeaders = processGridHeaders(response.data);
+                        setGridHeaders(processedHeaders);
 
                         // Initialize filter values
                         const initialFilterValues = {};
-                        headerEntries.forEach(([key, config]) => {
-                            if (config.filter) {
-                                initialFilterValues[key] = '';
+                        processedHeaders.forEach((header) => {
+                            if (header.filter) {
+                                initialFilterValues[header.key] = '';
                             }
                         });
                         setFilterValues(initialFilterValues);
@@ -2627,34 +2617,36 @@ const GenericGrid = ({
                         <tr>
                             {/* Use gridHeaders if available, otherwise fall back to headers from columns */}
                             {gridHeaders.length > 0
-                                ? gridHeaders.map((header, index) => (
-                                      <th
-                                          key={`header-${index}`}
-                                          className={`${styles.gridHeader} ${styles.sortableHeader}`}
-                                          onClick={() =>
-                                              requestSort(header.key)
-                                          }
-                                          style={{ cursor: 'pointer' }}
-                                      >
-                                          <div className={styles.headerContent}>
-                                              {header.label}
-                                              <span
-                                                  className={
-                                                      styles.sortIndicator
-                                                  }
-                                                  style={getSortIndicatorStyle(
-                                                      header.key
+                                ? gridHeaders.map((header, index) => {
+                                      const headerClasses = getColumnHeaderClasses(header);
+                                      const headerStyles = getColumnHeaderStyles(header);
+                                      const tooltip = getColumnHeaderTooltip(header);
+                                      
+                                      return (
+                                          <th
+                                              key={`header-${index}`}
+                                              className={`${styles.gridHeader} ${headerClasses.join(' ')}`}
+                                              onClick={header.sortable !== false ? () => requestSort(header.key) : undefined}
+                                              style={headerStyles}
+                                              title={tooltip}
+                                          >
+                                              <div className={styles.headerContent}>
+                                                  {header.label}
+                                                  {header.sortable !== false && (
+                                                      <span
+                                                          className={styles.sortIndicator}
+                                                          style={getSortIndicatorStyle(header.key)}
+                                                      >
+                                                          {sortConfig.key === header.key &&
+                                                          sortConfig.direction === 'asc'
+                                                              ? ' ▲'
+                                                              : ' ▼'}
+                                                      </span>
                                                   )}
-                                              >
-                                                  {sortConfig.key ===
-                                                      header.key &&
-                                                  sortConfig.direction === 'asc'
-                                                      ? ' ▲'
-                                                      : ' ▼'}
-                                              </span>
-                                          </div>
-                                      </th>
-                                  ))
+                                              </div>
+                                          </th>
+                                      );
+                                  })
                                 : headers.map((header, index) => (
                                       <th
                                           key={`header-${index}`}

package/src/components/crm/generic/styles/GenericIndex.module.scss

@@ -502,6 +502,58 @@
     }
 }
 
+// Non-sortable column styles
+.non-sortable {
+    cursor: default !important;
+    opacity: 0.8;
+    user-select: none;
+    
+    &:hover {
+        background-color: var(--primary-color, #007bff) !important;
+    }
+    
+    .headerContent {
+        opacity: 0.9;
+    }
+}
+
+// Virtual column styles
+.virtual-column {
+    position: relative;
+    
+    &::after {
+        content: '🔗';
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        font-size: 0.7em;
+        opacity: 0.6;
+    }
+}
+
+// Computed column styles  
+.computed-column {
+    position: relative;
+    
+    &::after {
+        content: '🧮';
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        font-size: 0.7em;
+        opacity: 0.6;
+    }
+}
+
+// Column type indicators
+.column-type-virtual {
+    border-left: 3px solid rgba(255, 193, 7, 0.7);
+}
+
+.column-type-computed {
+    border-left: 3px solid rgba(40, 167, 69, 0.7);
+}
+
 .headerContent {
     display: flex;
     align-items: center;

package/src/utils/columnsMetadataUtils.js

@@ -0,0 +1,277 @@
+/**
+ * Utilities for handling columns_metadata from API responses
+ * 
+ * This module provides functions to parse and apply metadata from the backend
+ * that controls column behavior, especially for virtual columns that should not be sortable.
+ */
+
+/**
+ * Extracts and normalizes columns metadata from API response
+ * 
+ * @param {Object} response - API response object
+ * @returns {Object} - Normalized metadata object with column keys as properties
+ */
+export const extractColumnsMetadata = (response) => {
+    // Handle different possible response structures
+    const metadata = response?.data?.columns_metadata || 
+                    response?.columns_metadata || 
+                    response?.metadata?.columns ||
+                    {};
+    
+    // Ensure we have a valid object
+    if (!metadata || typeof metadata !== 'object') {
+        return {};
+    }
+    
+    return metadata;
+};
+
+/**
+ * Checks if a column is sortable based on metadata
+ * 
+ * @param {string} columnKey - The column key/identifier
+ * @param {Object} metadata - Columns metadata object
+ * @returns {boolean} - Whether the column is sortable
+ */
+export const isColumnSortable = (columnKey, metadata) => {
+    // If no metadata available, assume sortable (backward compatibility)
+    if (!metadata || typeof metadata !== 'object') {
+        return true;
+    }
+    
+    const columnMeta = metadata[columnKey];
+    
+    // If no specific metadata for this column, assume sortable
+    if (!columnMeta || typeof columnMeta !== 'object') {
+        return true;
+    }
+    
+    // Check the sortable property, default to true if not specified
+    return columnMeta.sortable !== false;
+};
+
+/**
+ * Gets the display type for a column based on metadata
+ * 
+ * @param {string} columnKey - The column key/identifier  
+ * @param {Object} metadata - Columns metadata object
+ * @returns {string} - Column display type (e.g., 'virtual', 'computed', 'regular')
+ */
+export const getColumnDisplayType = (columnKey, metadata) => {
+    if (!metadata || typeof metadata !== 'object') {
+        return 'regular';
+    }
+    
+    const columnMeta = metadata[columnKey];
+    
+    if (!columnMeta || typeof columnMeta !== 'object') {
+        return 'regular';
+    }
+    
+    return columnMeta.type || 'regular';
+};
+
+/**
+ * Gets additional column properties from metadata
+ * 
+ * @param {string} columnKey - The column key/identifier
+ * @param {Object} metadata - Columns metadata object  
+ * @returns {Object} - Additional properties like tooltip, description, etc.
+ */
+export const getColumnProperties = (columnKey, metadata) => {
+    if (!metadata || typeof metadata !== 'object') {
+        return {};
+    }
+    
+    const columnMeta = metadata[columnKey];
+    
+    if (!columnMeta || typeof columnMeta !== 'object') {
+        return {};
+    }
+    
+    return {
+        tooltip: columnMeta.tooltip || null,
+        description: columnMeta.description || null,
+        virtual: columnMeta.virtual === true,
+        computed: columnMeta.computed === true,
+        searchable: columnMeta.searchable !== false,
+        filterable: columnMeta.filterable !== false
+    };
+};
+
+/**
+ * Merges column configuration with metadata to create enhanced column objects
+ * 
+ * @param {Array} columns - Original column configuration array
+ * @param {Object} metadata - Columns metadata object
+ * @returns {Array} - Enhanced column array with metadata applied
+ */
+export const mergeColumnsWithMetadata = (columns, metadata) => {
+    if (!Array.isArray(columns)) {
+        return [];
+    }
+    
+    if (!metadata || typeof metadata !== 'object') {
+        return columns;
+    }
+    
+    return columns.map(column => {
+        const columnKey = column.key || column.id || column.name;
+        
+        if (!columnKey) {
+            return column;
+        }
+        
+        const columnProperties = getColumnProperties(columnKey, metadata);
+        const isSortable = isColumnSortable(columnKey, metadata);
+        const displayType = getColumnDisplayType(columnKey, metadata);
+        
+        return {
+            ...column,
+            sortable: isSortable,
+            displayType,
+            virtual: columnProperties.virtual,
+            computed: columnProperties.computed,
+            tooltip: columnProperties.tooltip,
+            description: columnProperties.description,
+            searchable: columnProperties.searchable,
+            filterable: columnProperties.filterable,
+            // Keep original metadata for reference
+            _metadata: metadata[columnKey] || {}
+        };
+    });
+};
+
+/**
+ * Processes grid headers from API response and applies metadata
+ * 
+ * @param {Object} response - API response containing headers and metadata
+ * @returns {Array} - Processed headers with metadata applied
+ */
+export const processGridHeaders = (response) => {
+    // Extract headers from different possible response structures
+    const headers = response?.data?.data?.header || 
+                   response?.data?.header || 
+                   response?.header || 
+                   {};
+                   
+    const metadata = extractColumnsMetadata(response);
+    
+    if (!headers || typeof headers !== 'object') {
+        return [];
+    }
+    
+    // Convert headers object to array format expected by components
+    const headerEntries = Object.entries(headers);
+    
+    return headerEntries.map(([key, config]) => {
+        const isSortable = isColumnSortable(key, metadata);
+        const displayType = getColumnDisplayType(key, metadata);
+        const properties = getColumnProperties(key, metadata);
+        
+        return {
+            key,
+            label: config.label || key,
+            sort: config.sort || key,
+            type: config.type || 'text',
+            filter: config.filter || null,
+            onClick: config.onClick || null,
+            // Apply metadata
+            sortable: isSortable,
+            displayType,
+            virtual: properties.virtual,
+            computed: properties.computed,
+            tooltip: properties.tooltip,
+            description: properties.description,
+            searchable: properties.searchable,
+            filterable: properties.filterable,
+            // Keep original metadata for reference
+            _metadata: metadata[key] || {}
+        };
+    });
+};
+
+/**
+ * Gets CSS classes for a column header based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {Array} - Array of CSS class names
+ */
+export const getColumnHeaderClasses = (header) => {
+    const classes = [];
+    
+    if (header.sortable === false) {
+        classes.push('non-sortable');
+    } else {
+        classes.push('sortable');
+    }
+    
+    if (header.virtual) {
+        classes.push('virtual-column');
+    }
+    
+    if (header.computed) {
+        classes.push('computed-column');
+    }
+    
+    if (header.displayType) {
+        classes.push(`column-type-${header.displayType}`);
+    }
+    
+    return classes;
+};
+
+/**
+ * Gets inline styles for a column header based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {Object} - Style object for the header
+ */
+export const getColumnHeaderStyles = (header) => {
+    const styles = {};
+    
+    if (header.sortable === false) {
+        styles.cursor = 'default';
+        styles.opacity = 0.7;
+    } else {
+        styles.cursor = 'pointer';
+    }
+    
+    return styles;
+};
+
+/**
+ * Gets tooltip text for a column header based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {string|null} - Tooltip text or null if no tooltip needed
+ */
+export const getColumnHeaderTooltip = (header) => {
+    if (header.tooltip) {
+        return header.tooltip;
+    }
+    
+    if (header.sortable === false) {
+        if (header.virtual) {
+            return 'This is a virtual column and cannot be sorted';
+        }
+        if (header.computed) {
+            return 'This is a computed column and cannot be sorted';
+        }
+        return 'This column cannot be sorted';
+    }
+    
+    return null;
+};
+
+export default {
+    extractColumnsMetadata,
+    isColumnSortable,
+    getColumnDisplayType,
+    getColumnProperties,
+    mergeColumnsWithMetadata,
+    processGridHeaders,
+    getColumnHeaderClasses,
+    getColumnHeaderStyles,
+    getColumnHeaderTooltip
+};

package/src/utils/relationshipSortingFallback.js

@@ -0,0 +1,37 @@
+/**
+ * Fallback version that restores original behavior
+ */
+
+export const DEFAULT_INTELLIGENT_SORTING_CONFIG = {
+    enableIntelligentSorting: false, // Disabled by default for safety
+    maxRelationshipDepth: 3,
+    customSortableFields: [],
+    customUnsortableFields: [],
+    respectExplicitSortable: true,
+    logAnalysis: false
+};
+
+export const isRelationshipColumnSortable = (column, options = {}) => {
+    // If intelligent sorting is disabled, use original behavior
+    if (options.enableIntelligentSorting === false) {
+        // Original behavior: return false for relation columns unless explicitly set
+        return column.sortable === true;
+    }
+    
+    // Respect explicit configuration
+    if (column.hasOwnProperty('sortable')) {
+        return column.sortable === true;
+    }
+    
+    // Default to false (original behavior) for safety
+    return false;
+};
+
+export const getRelationshipPath = (column) => {
+    if (!Array.isArray(column.id)) {
+        return column.nameFrom || 'unknown';
+    }
+    
+    const relationPath = column.id.join('.');
+    return column.nameFrom ? `${relationPath}.${column.nameFrom}` : relationPath;
+};