@visns-studio/visns-components 5.12.2 → 5.12.4

package/src/components/generic/GenericDetail.jsx

@@ -71,6 +71,7 @@ import GenericEditableTable from './GenericEditableTable';
 import MergeEntity from '../MergeEntity';
 import MultiSelect from '../MultiSelect';
 import QrCode from '../QrCode';
+import StagePopupModal from './StagePopupModal';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 
@@ -157,6 +158,10 @@ function GenericDetail({
     const [total, setTotal] = useState(0);
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);
 
+    /** Stage Popup States */
+    const [showStagePopup, setShowStagePopup] = useState(false);
+    const [stagePopupData, setStagePopupData] = useState(null);
+
     /** Ocr States */
     const [ocrRowsSelected, setOcrRowsSelected] = useState('');
 
@@ -297,6 +302,45 @@ function GenericDetail({
     };
 
     const handleStageUpdate = async (stage, type) => {
+        try {
+            // Check if stage has popup configuration
+            if (stage.popup?.enabled) {
+                setStagePopupData({ stage, type });
+                setShowStagePopup(true);
+                return;
+            }
+
+            // If no popup, proceed with normal stage update
+            await performStageUpdate(stage, type);
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    const handleStagePopupConfirm = async (popupFormData) => {
+        try {
+            setShowStagePopup(false);
+            
+            if (!stagePopupData) return;
+            
+            const { stage, type } = stagePopupData;
+            
+            // Proceed with normal stage update, but include popup form data
+            await performStageUpdate(stage, type, popupFormData);
+            
+            setStagePopupData(null);
+        } catch (error) {
+            console.error('Stage popup confirm error:', error);
+            toast.error('Failed to update stage');
+        }
+    };
+
+    const handleStagePopupCancel = () => {
+        setShowStagePopup(false);
+        setStagePopupData(null);
+    };
+
+    const performStageUpdate = async (stage, type, additionalData = {}) => {
         try {
             const activeTab = subnav.find((s) => s.show === true);
 
@@ -305,7 +349,102 @@ function GenericDetail({
 
                 if (type === 'view') {
                     setActiveStage(stage.id);
+                } else if (type === 'stageCounter') {
+                    // Handle new stageCounter functionality
+                    console.log('performStageUpdate called with stageCounter type:', { stage, data, stages });
+                    
+                    const stageConfig = stages.stageConfig || activeTabConfig.stages?.stageConfig;
+                    if (!stageConfig?.toggleable || !stageConfig?.toggleConfig) {
+                        console.warn('Stage is not configured for toggling', { stageConfig });
+                        return;
+                    }
+
+                    // Get current stage data
+                    const stageDataArray = data[stageConfig.key] || [];
+                    const currentStage = stageDataArray.find(s => s.id === stage.id);
+                    
+                    if (!currentStage) {
+                        console.warn('Stage not found in data');
+                        return;
+                    }
+
+                    // Determine current and target status
+                    const currentStatus = currentStage[stageConfig.toggleConfig.statusField];
+                    const isActive = currentStatus === stageConfig.toggleConfig.activeStatusValue;
+                    const targetStatus = isActive 
+                        ? stageConfig.toggleConfig.inactiveStatusValue 
+                        : stageConfig.toggleConfig.activeStatusValue;
+
+                    // Build API URL
+                    let url = stageConfig.toggleConfig.updateUrl;
+                    url = url.replace('{id}', routeParams[stages.urlParam]);
+                    url = url.replace('{stage_id}', stage.id);
+                    
+                    // Make API call with additional data from popup
+                    const res = await CustomFetch(
+                        url,
+                        stageConfig.toggleConfig.updateMethod || 'PUT',
+                        {
+                            [stageConfig.toggleConfig.updateKey]: targetStatus,
+                            ...additionalData
+                        }
+                    );
+
+                    if (res.data.error === '') {
+                        handleReload();
+                        const actionText = isActive ? 'disabled' : 'enabled';
+                        toast.success(`Stage "${stage.label}" ${actionText} successfully`);
+                    } else {
+                        toast.error(res.data.error);
+                    }
+                } else if (type === 'legacy_toggle') {
+                    // Handle legacy toggle functionality - toggle between current stage and previous
+                    console.log('performStageUpdate called with legacy_toggle type:', { stage, data, stages });
+                    
+                    if (
+                        stages &&
+                        stages.url &&
+                        stages.url !== '' &&
+                        stages.key &&
+                        stages.key !== '' &&
+                        stages.urlParam &&
+                        stages.urlParam !== ''
+                    ) {
+                        const currentStatus = data[stages.key];
+                        let targetStatus;
+                        
+                        // If clicking on the current stage (completed), move back one step
+                        // If clicking on a future stage, move to that stage
+                        if (currentStatus >= stage.id) {
+                            // Stage is completed, move back one step (or to 0 if clicking stage 1)
+                            targetStatus = stage.id > 1 ? stage.id - 1 : 0;
+                        } else {
+                            // Stage is not completed, move to this stage
+                            targetStatus = stage.id;
+                        }
+
+                        const url = `${stages.url}/${routeParams[stages.urlParam]}`;
+
+                        // Include additional data from popup
+                        const res = await CustomFetch(
+                            url,
+                            stages.method || 'PUT',
+                            {
+                                [stages.key]: targetStatus,
+                                ...additionalData
+                            }
+                        );
+
+                        if (res.data.error === '') {
+                            handleReload();
+                            const actionText = currentStatus >= stage.id ? 'moved back from' : 'progressed to';
+                            toast.success(`Stage ${actionText} "${stage.label}" successfully`);
+                        } else {
+                            toast.error(res.data.error);
+                        }
+                    }
                 } else {
+                    // Handle legacy stage functionality
                     if (
                         activeTabConfig.stages &&
                         activeTabConfig.stages.url &&
@@ -319,6 +458,7 @@ function GenericDetail({
 
                         const res = await CustomFetch(url, 'POST', {
                             [activeTabConfig.stages.key]: stage.id,
+                            ...additionalData
                         });
 
                         if (res.data.error === '') {
@@ -343,6 +483,7 @@ function GenericDetail({
                             stages.method || 'POST',
                             {
                                 [stages.key]: stage.id,
+                                ...additionalData
                             }
                         );
 
@@ -2878,8 +3019,46 @@ function GenericDetail({
                             <div className={styles.oppstatus}>
                                 <ul className={styles.opppath}>
                                     {stages.data.map((stage) => {
-                                        const isStageComplete =
-                                            data[stages.key] >= stage.id;
+                                        let isStageComplete = false;
+                                        
+                                        if (stages.type === 'stageCounter') {
+                                            // For stageCounter, check individual stage status
+                                            const stageConfig = stages.stageConfig;
+                                            if (stageConfig && data[stageConfig.key]) {
+                                                const stageDataArray = data[stageConfig.key];
+                                                const currentStage = stageDataArray.find(s => s.id === stage.id);
+                                                if (currentStage && stageConfig.toggleConfig) {
+                                                    const currentStatus = currentStage[stageConfig.toggleConfig.statusField];
+                                                    isStageComplete = currentStatus === stageConfig.toggleConfig.activeStatusValue;
+                                                    
+                                                    // Debug logging
+                                                    console.log('Stage completion check:', {
+                                                        stageId: stage.id,
+                                                        stageLabel: stage.label,
+                                                        currentStatus,
+                                                        activeStatusValue: stageConfig.toggleConfig.activeStatusValue,
+                                                        isStageComplete
+                                                    });
+                                                }
+                                            }
+                                        } else {
+                                            // Legacy stage completion check
+                                            isStageComplete = data[stages.key] >= stage.id;
+                                        }
+
+                                        // Get color for stageCounter type
+                                        let stageColor = null;
+                                        if (stages.type === 'stageCounter' && stages.stageConfig?.stageColour) {
+                                            const stageDataArray = data[stages.stageConfig.key] || [];
+                                            const currentStage = stageDataArray.find(s => s.id === stage.id);
+                                            if (currentStage) {
+                                                const currentStatus = currentStage[stages.stageConfig.stageColour.key];
+                                                const colorOption = stages.stageConfig.stageColour.options?.find(
+                                                    opt => opt.id === currentStatus
+                                                );
+                                                stageColor = colorOption?.colour;
+                                            }
+                                        }
 
                                         return (
                                             <li
@@ -2889,6 +3068,11 @@ function GenericDetail({
                                                         ? `${styles['opp-complete']}`
                                                         : ''
                                                 }
+                                                style={stageColor ? { 
+                                                    borderColor: stageColor,
+                                                    color: isStageComplete ? '#fff' : stageColor,
+                                                    backgroundColor: isStageComplete ? stageColor : 'transparent'
+                                                } : {}}
                                                 onClick={(e) => {
                                                     e.preventDefault();
 
@@ -2898,12 +3082,15 @@ function GenericDetail({
                                                     );
                                                 }}
                                             >
-                                                <a>
+                                                <a style={stageColor ? { 
+                                                    color: isStageComplete ? '#fff' : stageColor 
+                                                } : {}}>
                                                     {stage.label}
                                                     {isStageComplete && (
                                                         <CircleCheck
                                                             strokeWidth={2}
                                                             size={16}
+                                                            color={stageColor ? '#fff' : undefined}
                                                         />
                                                     )}
                                                 </a>
@@ -2970,6 +3157,16 @@ function GenericDetail({
                     </div>
                 </div>
             </Popup>
+
+            <StagePopupModal
+                show={showStagePopup}
+                stage={stagePopupData?.stage}
+                popupConfig={stagePopupData?.stage?.popup}
+                onConfirm={handleStagePopupConfirm}
+                onCancel={handleStagePopupCancel}
+                entityData={data}
+                routeParams={routeParams}
+            />
         </>
     );
 }

package/src/components/generic/GenericIndex.jsx

@@ -1,11 +1,6 @@
 import '../styles/global.css';
 
-import React, {
-    useCallback,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useParams, Outlet } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
@@ -223,7 +218,6 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
     return { config, setConfig, subnav, setSubnav };
 }
 
-
 function GenericIndex({
     layout = 'full',
     setting,
@@ -494,26 +488,38 @@ function GenericIndex({
             let payload = {};
             if (config.export.payload) {
                 payload = { ...config.export.payload };
-                
+
                 // Process special values in the payload
-                Object.keys(payload).forEach(key => {
+                Object.keys(payload).forEach((key) => {
                     if (payload[key] === 'currentActive()') {
                         // Get the current active filter value
-                        const activeFilter = subnav?.find(filter => {
+                        const activeFilter = subnav?.find((filter) => {
                             if (filter.isParent) {
-                                return filter.children && filter.children.some(child => child.show);
+                                return (
+                                    filter.children &&
+                                    filter.children.some((child) => child.show)
+                                );
                             }
                             return filter.show === true;
                         });
 
                         if (activeFilter) {
-                            if (activeFilter.isParent && activeFilter.children && activeFilter.children.length > 0) {
+                            if (
+                                activeFilter.isParent &&
+                                activeFilter.children &&
+                                activeFilter.children.length > 0
+                            ) {
                                 // If it's a parent filter, get the active child's value
-                                const activeChild = activeFilter.children.find(child => child.show);
-                                payload[key] = activeChild ? activeChild.value || activeChild.id : '';
+                                const activeChild = activeFilter.children.find(
+                                    (child) => child.show
+                                );
+                                payload[key] = activeChild
+                                    ? activeChild.value || activeChild.id
+                                    : '';
                             } else {
                                 // For non-parent filters, use the filter's value or id
-                                payload[key] = activeFilter.value || activeFilter.id;
+                                payload[key] =
+                                    activeFilter.value || activeFilter.id;
                             }
                         } else {
                             // If no active filter is found, set to empty string
@@ -571,7 +577,7 @@ function GenericIndex({
                     {...configWithStyle}
                     ref={gridRef}
                     hoverColor={configWithStyle.style?.hoverColor}
-                    gridHeight={windowHeight * 0.65}
+                    gridHeight={windowHeight * 0.8}
                     setConfig={setConfig}
                     setTableData={setTableData}
                     setTotal={setTotal}
@@ -606,11 +612,18 @@ function GenericIndex({
     const renderContentBasedOnType = useCallback(() => {
         switch (config.type) {
             case 'grid':
-                return <GenericGrid config={config} userProfile={userProfile} />;
+                return (
+                    <GenericGrid config={config} userProfile={userProfile} />
+                );
             case 'table':
                 return renderTable();
             case 'report':
-                return <GenericReportForm config={config} userProfile={userProfile} />;
+                return (
+                    <GenericReportForm
+                        config={config}
+                        userProfile={userProfile}
+                    />
+                );
             default:
                 return renderTable(); // Fallback to table if no type is specified or recognized
         }