@visns-studio/visns-components 5.12.2 → 5.12.4

package/src/components/columns/ColumnRenderers.jsx

@@ -10,6 +10,127 @@ import {
     DEFAULT_INTELLIGENT_SORTING_CONFIG,
 } from '../../utils/relationshipSortingUtils';
 
+// Stage Toggle Utility Functions
+const buildToggleUrl = (urlTemplate, stageItem, rowData) => {
+    if (!urlTemplate) return null;
+    
+    let url = urlTemplate;
+    
+    // Replace common placeholders
+    url = url.replace('{id}', rowData.id || '');
+    url = url.replace('{stage_id}', stageItem?.id || '');
+    
+    // Replace any other field placeholders from rowData
+    Object.keys(rowData).forEach(key => {
+        url = url.replace(`{${key}}`, rowData[key] || '');
+    });
+    
+    // Replace any field placeholders from stageItem
+    if (stageItem) {
+        Object.keys(stageItem).forEach(key => {
+            url = url.replace(`{stage_${key}}`, stageItem[key] || '');
+        });
+    }
+    
+    return url;
+};
+
+const getStageStatus = (stageItem, toggleConfig) => {
+    if (!toggleConfig || !toggleConfig.statusField) return null;
+    
+    const currentValue = stageItem[toggleConfig.statusField];
+    const isActive = currentValue === toggleConfig.activeStatusValue;
+    const isInactive = currentValue === toggleConfig.inactiveStatusValue;
+    
+    return {
+        isActive,
+        isInactive,
+        currentValue,
+        targetValue: isActive ? toggleConfig.inactiveStatusValue : toggleConfig.activeStatusValue
+    };
+};
+
+const handleStageToggle = async (stageItem, toggleConfig, rowData, onUpdate) => {
+    if (!toggleConfig || !toggleConfig.updateUrl) {
+        console.warn('Stage toggle configuration missing updateUrl');
+        return;
+    }
+    
+    try {
+        const stageStatus = getStageStatus(stageItem, toggleConfig);
+        if (!stageStatus) {
+            console.warn('Unable to determine stage status');
+            return;
+        }
+        
+        // Debug logging
+        console.log('Stage toggle debug:', {
+            stageItem,
+            toggleConfig,
+            stageStatus,
+            currentValue: stageStatus.currentValue,
+            targetValue: stageStatus.targetValue,
+            isActive: stageStatus.isActive
+        });
+        
+        const url = buildToggleUrl(toggleConfig.updateUrl, stageItem, rowData);
+        if (!url) {
+            console.warn('Unable to build toggle URL');
+            return;
+        }
+        
+        const method = toggleConfig.updateMethod || 'PATCH';
+        const updateKey = toggleConfig.updateKey || toggleConfig.statusField;
+        
+        // Prepare request body
+        const body = {
+            [updateKey]: stageStatus.targetValue
+        };
+        
+        // Get CSRF token if available
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+        
+        // Prepare headers
+        const headers = {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+        };
+        
+        if (csrfToken) {
+            headers['X-CSRF-TOKEN'] = csrfToken;
+        }
+        
+        // Make API call
+        const response = await fetch(url, {
+            method,
+            headers,
+            body: JSON.stringify(body),
+        });
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        
+        const result = await response.json();
+        
+        // Show success message
+        const actionText = stageStatus.isActive ? 'disabled' : 'enabled';
+        toast.success(`Stage ${actionText} successfully`);
+        
+        // Call update callback if provided
+        if (onUpdate && typeof onUpdate === 'function') {
+            onUpdate(result);
+        }
+        
+        return result;
+        
+    } catch (error) {
+        console.error('Stage toggle error:', error);
+        toast.error(`Failed to toggle stage: ${error.message}`);
+        throw error;
+    }
+};
+
 // Boolean Column Renderer
 export const renderBooleanColumn = ({
     column,
@@ -1030,20 +1151,139 @@ export const renderRichTextColumn = ({ column, commonProps }) => {
 };
 
 // Stage Column Renderer
-export const renderStageColumn = ({ column, commonProps }) => {
+export const renderStageColumn = ({ column, commonProps, onUpdate }) => {
     return {
         ...commonProps,
         name: column.id,
         sortable: false,
         render: ({ data }) => {
             let stage = '';
+            let activeStageIndex = -1;
 
             column.keyIds.forEach((a, b) => {
                 if (data[a] === 1) {
                     stage = column.valueIds[b];
+                    activeStageIndex = b;
                 }
             });
 
+            // Check if toggle functionality is enabled
+            const isToggleable = column.toggleable && column.toggleConfig;
+            
+            // Handle stage click for toggling
+            const handleStageClick = async (e, stageIndex) => {
+                e.stopPropagation();
+                e.preventDefault();
+
+                if (!isToggleable) return;
+
+                try {
+                    // For basic stage column, we toggle the specific stage field
+                    const stageKey = column.keyIds[stageIndex];
+                    const currentValue = data[stageKey];
+                    const targetValue = currentValue === 1 ? 0 : 1;
+                    
+                    const url = buildToggleUrl(column.toggleConfig.updateUrl, null, data);
+                    if (!url) {
+                        console.warn('Unable to build toggle URL for stage column');
+                        return;
+                    }
+
+                    const method = column.toggleConfig.updateMethod || 'PATCH';
+                    const updateKey = column.toggleConfig.updateKey || stageKey;
+
+                    // Prepare request body
+                    const body = {
+                        [updateKey]: targetValue
+                    };
+
+                    // Get CSRF token if available
+                    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
+                    // Prepare headers
+                    const headers = {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                    };
+
+                    if (csrfToken) {
+                        headers['X-CSRF-TOKEN'] = csrfToken;
+                    }
+
+                    // Make API call
+                    const response = await fetch(url, {
+                        method,
+                        headers,
+                        body: JSON.stringify(body),
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                    }
+
+                    const result = await response.json();
+
+                    // Show success message
+                    const stageLabel = column.valueIds[stageIndex];
+                    const actionText = currentValue === 1 ? 'disabled' : 'enabled';
+                    toast.success(`Stage "${stageLabel}" ${actionText} successfully`);
+
+                    // Call update callback if provided
+                    if (onUpdate && typeof onUpdate === 'function') {
+                        onUpdate(result);
+                    }
+
+                } catch (error) {
+                    console.error('Stage toggle error:', error);
+                    toast.error(`Failed to toggle stage: ${error.message}`);
+                }
+            };
+
+            // Create clickable stage buttons if toggleable
+            if (isToggleable) {
+                const stageButtons = column.keyIds.map((keyId, index) => {
+                    const isActive = data[keyId] === 1;
+                    const stageLabel = column.valueIds[index];
+                    
+                    return (
+                        <button
+                            key={index}
+                            onClick={(e) => handleStageClick(e, index)}
+                            style={{
+                                padding: '4px 8px',
+                                margin: '0 2px',
+                                borderRadius: '3px',
+                                border: '1px solid #ccc',
+                                backgroundColor: isActive ? 'var(--primary-color, #4a90e2)' : '#f8f9fa',
+                                color: isActive ? 'white' : '#333',
+                                fontSize: '11px',
+                                fontWeight: 'bold',
+                                cursor: 'pointer',
+                                opacity: isActive ? 1 : 0.7,
+                                transition: 'all 0.2s ease',
+                            }}
+                            onMouseEnter={(e) => {
+                                e.target.style.transform = 'scale(1.05)';
+                            }}
+                            onMouseLeave={(e) => {
+                                e.target.style.transform = 'scale(1)';
+                            }}
+                            data-tooltip-id="system-tooltip"
+                            data-tooltip-content={`Click to ${isActive ? 'disable' : 'enable'} ${stageLabel}`}
+                        >
+                            {stageLabel}
+                        </button>
+                    );
+                });
+
+                return (
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
+                        {stageButtons}
+                    </div>
+                );
+            }
+
+            // Default non-toggleable behavior
             return (
                 <CellWithTooltip value={stage} columnType="stage">
                     <span>{stage}</span>
@@ -1592,7 +1832,7 @@ export const renderGalleryColumn = ({
     };
 };
 
-export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
+export const renderStageCounterColumn = ({ column, commonProps, navigate, onUpdate }) => {
     return {
         ...commonProps,
         name: column.id,
@@ -1605,16 +1845,21 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
                 if (stageData && Array.isArray(stageData)) {
                     const stageCount = stageData.length;
 
-                    // Create a clickable element if link is provided
-                    const handleClick = (e) => {
+                    // Check if toggle functionality is enabled
+                    const isToggleable = column.stageConfig?.toggleable && column.stageConfig?.toggleConfig;
+                    
+                    // Container click handler for navigation
+                    const handleContainerClick = (e) => {
                         e.stopPropagation();
                         e.preventDefault();
 
+                        // Only navigate if toggle is not enabled or if link is specifically configured
                         if (
                             column.link &&
                             column.link.url &&
                             column.link.key &&
-                            navigate
+                            navigate &&
+                            !isToggleable
                         ) {
                             navigate(
                                 `${column.link.url}${data[column.link.key]}`
@@ -1622,6 +1867,26 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
                         }
                     };
 
+                    // Individual stage click handler for toggling
+                    const handleStageClick = async (e, stageItem, stageIndex) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+
+                        if (isToggleable) {
+                            try {
+                                await handleStageToggle(
+                                    stageItem,
+                                    column.stageConfig.toggleConfig,
+                                    data,
+                                    onUpdate
+                                );
+                            } catch (error) {
+                                // Error already handled in handleStageToggle
+                                console.error('Stage toggle failed:', error);
+                            }
+                        }
+                    };
+
                     // Create an array of squares based on the stage data
                     const squares = [];
                     for (let i = 0; i < stageCount; i++) {
@@ -1730,24 +1995,61 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
                             }
                         }
 
+                        // Get stage status for visual feedback
+                        const stageStatus = isToggleable ? getStageStatus(stageItem, column.stageConfig.toggleConfig) : null;
+                        const isStageActive = stageStatus?.isActive ?? true; // Default to active if not toggleable
+                        
+                        // Debug logging for visual state
+                        if (isToggleable) {
+                            console.log('Visual state debug:', {
+                                stageItem,
+                                stageStatus,
+                                isStageActive,
+                                toggleConfig: column.stageConfig.toggleConfig
+                            });
+                        }
+                        
+                        // Apply visual feedback for inactive stages
+                        const stageStyle = {
+                            width: '20px',
+                            height: '20px',
+                            backgroundColor: backgroundColor,
+                            borderRadius: '3px',
+                            margin: '0 2px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            color: 'white',
+                            fontSize: '11px',
+                            fontWeight: 'bold',
+                            cursor: isToggleable ? 'pointer' : 'default',
+                            opacity: isStageActive ? 1 : 0.5,
+                            transition: 'opacity 0.2s ease, transform 0.1s ease',
+                            border: isToggleable ? '1px solid rgba(255,255,255,0.3)' : 'none',
+                        };
+
+                        // Enhanced tooltip for toggleable stages
+                        const enhancedTooltipContent = isToggleable 
+                            ? `${tooltipContent} - Click to ${isStageActive ? 'disable' : 'enable'}`
+                            : tooltipContent;
+
                         squares.push(
                             <div
                                 key={i}
-                                style={{
-                                    width: '20px',
-                                    height: '20px',
-                                    backgroundColor: backgroundColor,
-                                    borderRadius: '3px',
-                                    margin: '0 2px',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                    color: 'white',
-                                    fontSize: '11px',
-                                    fontWeight: 'bold',
+                                style={stageStyle}
+                                onClick={(e) => isToggleable ? handleStageClick(e, stageItem, i) : undefined}
+                                onMouseEnter={(e) => {
+                                    if (isToggleable) {
+                                        e.target.style.transform = 'scale(1.1)';
+                                    }
+                                }}
+                                onMouseLeave={(e) => {
+                                    if (isToggleable) {
+                                        e.target.style.transform = 'scale(1)';
+                                    }
                                 }}
                                 data-tooltip-id="system-tooltip"
-                                data-tooltip-content={tooltipContent}
+                                data-tooltip-content={enhancedTooltipContent}
                             >
                                 {labelValue}
                             </div>
@@ -1756,13 +2058,13 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
 
                     return (
                         <div
-                            onClick={handleClick}
+                            onClick={handleContainerClick}
                             style={{
                                 display: 'flex',
                                 flexWrap: 'wrap',
                                 justifyContent: 'center',
                                 alignItems: 'center',
-                                cursor: column.link ? 'pointer' : 'default',
+                                cursor: (column.link && !isToggleable) ? 'pointer' : 'default',
                                 gap: '4px',
                                 padding: '2px 0',
                                 maxWidth: '100%',