@visns-studio/visns-components 5.12.2 → 5.12.4

package/src/components/generic/StagePopupModal.jsx

@@ -0,0 +1,451 @@
+import React, { useState, useEffect } from 'react';
+import Swal from 'sweetalert2';
+import CustomFetch from '../Fetch';
+import styles from '../styles/StagePopupModal.module.scss';
+
+const StagePopupModal = ({
+    show,
+    stage,
+    popupConfig,
+    onConfirm,
+    onCancel,
+    entityData = {},
+    routeParams = {}
+}) => {
+    const [formData, setFormData] = useState({});
+    const [fieldOptions, setFieldOptions] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [validationErrors, setValidationErrors] = useState({});
+
+    useEffect(() => {
+        if (show && popupConfig?.fields) {
+            initializeForm();
+        }
+    }, [show, popupConfig]);
+
+    // Re-render form fields when fieldOptions change
+    useEffect(() => {
+        console.log('[StagePopupModal] useEffect triggered:', { 
+            show, 
+            loading, 
+            fieldOptionsKeys: Object.keys(fieldOptions), 
+            fieldOptions 
+        });
+        if (show && !loading && Object.keys(fieldOptions).length > 0) {
+            console.log('[StagePopupModal] Re-rendering form fields after fieldOptions update');
+            renderFormFields();
+        }
+    }, [fieldOptions, loading, formData, validationErrors, show]);
+
+    const initializeForm = async () => {
+        const initialData = {};
+        const options = {};
+
+        setLoading(true);
+
+        for (const field of popupConfig.fields) {
+            // Set default values
+            if (field.value !== undefined) {
+                initialData[field.id] = field.value;
+            } else if (field.urlParam && routeParams[field.urlParam]) {
+                initialData[field.id] = routeParams[field.urlParam];
+            } else if (entityData[field.id] !== undefined) {
+                initialData[field.id] = entityData[field.id];
+            }
+
+            // Load dropdown options
+            if (field.type === 'select' && field.url) {
+                try {
+                    let url = field.url;
+                    
+                    // Replace URL parameters
+                    Object.keys(routeParams).forEach(key => {
+                        url = url.replace(`{${key}}`, routeParams[key]);
+                    });
+
+                    const response = await CustomFetch(url, 'POST');
+                    console.log(`[StagePopupModal] Response for ${field.id}:`, response);
+                    console.log(`[StagePopupModal] Response.data:`, response.data);
+                    
+                    if (response.data && !response.data.error) {
+                        // Handle both nested (response.data.data) and direct (response.data) array formats
+                        const optionsData = Array.isArray(response.data.data) ? response.data.data : 
+                                          Array.isArray(response.data) ? response.data : [];
+                        console.log(`[StagePopupModal] Processed options for ${field.id}:`, optionsData);
+                        options[field.id] = optionsData;
+                    }
+                } catch (error) {
+                    console.error(`Failed to load options for ${field.id}:`, error);
+                    options[field.id] = [];
+                }
+            }
+        }
+
+        console.log(`[StagePopupModal] Final options object:`, options);
+        console.log(`[StagePopupModal] Setting fieldOptions state:`, options);
+        
+        setFormData(initialData);
+        setFieldOptions(options);
+        setLoading(false);
+    };
+
+    const handleFieldChange = (fieldId, value) => {
+        setFormData(prev => ({
+            ...prev,
+            [fieldId]: value
+        }));
+
+        // Clear validation error for this field
+        if (validationErrors[fieldId]) {
+            setValidationErrors(prev => ({
+                ...prev,
+                [fieldId]: null
+            }));
+        }
+    };
+
+    const validateForm = () => {
+        const errors = {};
+
+        popupConfig.fields?.forEach(field => {
+            if (field.required && (!formData[field.id] || formData[field.id] === '')) {
+                errors[field.id] = `${field.label} is required`;
+            }
+
+            if (field.validation) {
+                const value = formData[field.id];
+                
+                if (field.validation.minLength && value && value.length < field.validation.minLength) {
+                    errors[field.id] = `${field.label} must be at least ${field.validation.minLength} characters`;
+                }
+                
+                if (field.validation.maxLength && value && value.length > field.validation.maxLength) {
+                    errors[field.id] = `${field.label} must not exceed ${field.validation.maxLength} characters`;
+                }
+            }
+        });
+
+        setValidationErrors(errors);
+        return Object.keys(errors).length === 0;
+    };
+
+    const handleConfirm = () => {
+        if (!validateForm()) {
+            return;
+        }
+
+        const dataToSend = {};
+        
+        // Only include fields specified in saveFields, or all fields if not specified
+        const fieldsToSave = popupConfig.saveFields || popupConfig.fields?.map(f => f.id) || [];
+        
+        fieldsToSave.forEach(fieldId => {
+            if (formData[fieldId] !== undefined) {
+                dataToSend[fieldId] = formData[fieldId];
+            }
+        });
+
+        onConfirm(dataToSend);
+    };
+
+    const renderField = (field) => {
+        const value = formData[field.id] || '';
+        const hasError = validationErrors[field.id];
+        const fieldClass = `${styles.field} ${hasError ? styles.fieldError : ''}`;
+
+        switch (field.type) {
+            case 'select':
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <select
+                            className={styles.select}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            disabled={loading}
+                        >
+                            <option value="">-- Select {field.label} --</option>
+                            {(() => {
+                                console.log(`[StagePopupModal] Rendering JSX options for ${field.id}:`, fieldOptions[field.id]);
+                                return (fieldOptions[field.id] || []).map(option => (
+                                    <option key={option.id || option.value} value={option.id || option.value}>
+                                        {option.label || option.name || option.text}
+                                    </option>
+                                ));
+                            })()}
+                        </select>
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+
+            case 'textarea':
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <textarea
+                            className={styles.textarea}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            placeholder={field.placeholder}
+                            rows={field.rows || 3}
+                            disabled={loading}
+                        />
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+
+            case 'date':
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <input
+                            type="date"
+                            className={styles.input}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            disabled={loading}
+                        />
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+
+            case 'datetime':
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <input
+                            type="datetime-local"
+                            className={styles.input}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            disabled={loading}
+                        />
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+
+            case 'number':
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <input
+                            type="number"
+                            className={styles.input}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            placeholder={field.placeholder}
+                            min={field.min}
+                            max={field.max}
+                            step={field.step}
+                            disabled={loading}
+                        />
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+
+            case 'text':
+            default:
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <input
+                            type="text"
+                            className={styles.input}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            placeholder={field.placeholder}
+                            disabled={loading}
+                        />
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+        }
+    };
+
+    useEffect(() => {
+        if (show && popupConfig) {
+            if (popupConfig.type === 'confirm') {
+                // Simple confirmation dialog
+                Swal.fire({
+                    title: popupConfig.title || 'Confirm Action',
+                    text: popupConfig.message || 'Are you sure you want to proceed?',
+                    icon: 'question',
+                    showCancelButton: true,
+                    confirmButtonText: popupConfig.confirmText || 'Yes, proceed',
+                    cancelButtonText: popupConfig.cancelText || 'Cancel',
+                    customClass: {
+                        popup: styles.swalPopup,
+                        confirmButton: styles.swalConfirm,
+                        cancelButton: styles.swalCancel
+                    }
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        onConfirm({});
+                    } else {
+                        onCancel();
+                    }
+                });
+            } else if (popupConfig.type === 'form') {
+                // Custom form dialog
+                const formHTML = `
+                    <div class="${styles.stagePopupForm}">
+                        ${popupConfig.message ? `<p class="${styles.message}">${popupConfig.message}</p>` : ''}
+                        <div id="stage-popup-fields" class="${styles.fields}">
+                            ${loading ? '<div class="' + styles.loading + '">Loading...</div>' : ''}
+                        </div>
+                    </div>
+                `;
+
+                Swal.fire({
+                    title: popupConfig.title || 'Additional Information Required',
+                    html: formHTML,
+                    showCancelButton: true,
+                    confirmButtonText: popupConfig.confirmText || 'Complete Stage',
+                    cancelButtonText: popupConfig.cancelText || 'Cancel',
+                    customClass: {
+                        popup: styles.swalPopup,
+                        confirmButton: styles.swalConfirm,
+                        cancelButton: styles.swalCancel,
+                        htmlContainer: styles.swalHtmlContainer
+                    },
+                    didOpen: () => {
+                        renderFormFields();
+                    },
+                    preConfirm: () => {
+                        if (!validateForm()) {
+                            Swal.showValidationMessage('Please correct the errors below');
+                            return false;
+                        }
+                        return true;
+                    }
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        handleConfirm();
+                    } else {
+                        onCancel();
+                    }
+                });
+            }
+        }
+    }, [show, popupConfig, loading, formData, fieldOptions]);
+
+    const renderFormFields = () => {
+        console.log('[StagePopupModal] renderFormFields called');
+        const fieldsContainer = document.getElementById('stage-popup-fields');
+        console.log('[StagePopupModal] fieldsContainer:', fieldsContainer);
+        console.log('[StagePopupModal] loading:', loading);
+        
+        if (!fieldsContainer || loading) {
+            console.log('[StagePopupModal] Early return - no container or loading');
+            return;
+        }
+
+        console.log('[StagePopupModal] Clearing container and rendering fields');
+        fieldsContainer.innerHTML = '';
+
+        console.log('[StagePopupModal] popupConfig.fields:', popupConfig.fields);
+        popupConfig.fields?.forEach(field => {
+            console.log(`[StagePopupModal] Processing field: ${field.id}, type: ${field.type}`);
+            const fieldElement = document.createElement('div');
+            fieldElement.className = styles.fieldWrapper;
+            
+            const fieldHTML = renderFieldHTML(field);
+            console.log(`[StagePopupModal] Generated HTML for ${field.id}:`, fieldHTML);
+            fieldElement.innerHTML = fieldHTML;
+            
+            fieldsContainer.appendChild(fieldElement);
+            
+            // Add event listeners
+            const input = fieldElement.querySelector('input, select, textarea');
+            if (input) {
+                input.addEventListener('change', (e) => {
+                    handleFieldChange(field.id, e.target.value);
+                });
+            }
+        });
+    };
+
+    const renderFieldHTML = (field) => {
+        const value = formData[field.id] || '';
+        const hasError = validationErrors[field.id];
+        const requiredStar = field.required ? '<span class="' + styles.required + '">*</span>' : '';
+
+        switch (field.type) {
+            case 'select':
+                console.log(`[StagePopupModal] Rendering HTML options for ${field.id}:`, fieldOptions[field.id]);
+                const options = (fieldOptions[field.id] || []).map(option => 
+                    `<option value="${option.id || option.value}" ${value === (option.id || option.value) ? 'selected' : ''}>
+                        ${option.label || option.name || option.text}
+                    </option>`
+                ).join('');
+
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <select class="${styles.select}" data-field-id="${field.id}">
+                        <option value="">-- Select ${field.label} --</option>
+                        ${options}
+                    </select>
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+
+            case 'textarea':
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <textarea class="${styles.textarea}" data-field-id="${field.id}" placeholder="${field.placeholder || ''}" rows="${field.rows || 3}">${value}</textarea>
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+
+            case 'date':
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <input type="date" class="${styles.input}" data-field-id="${field.id}" value="${value}">
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+
+            case 'datetime':
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <input type="datetime-local" class="${styles.input}" data-field-id="${field.id}" value="${value}">
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+
+            case 'number':
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <input type="number" class="${styles.input}" data-field-id="${field.id}" value="${value}" placeholder="${field.placeholder || ''}" min="${field.min || ''}" max="${field.max || ''}" step="${field.step || ''}">
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+
+            case 'text':
+            default:
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <input type="text" class="${styles.input}" data-field-id="${field.id}" value="${value}" placeholder="${field.placeholder || ''}">
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+        }
+    };
+
+    // This component doesn't render directly - it uses SweetAlert2 for the modal
+    return null;
+};
+
+export default StagePopupModal;

package/src/components/styles/StagePopupModal.module.scss

@@ -0,0 +1,234 @@
+.stagePopupForm {
+    text-align: left;
+    min-width: 400px;
+}
+
+.message {
+    margin-bottom: 20px;
+    color: #666;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.fields {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.fieldWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.fieldError {
+    .input,
+    .select,
+    .textarea {
+        border-color: #e74c3c;
+        box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1);
+    }
+}
+
+.label {
+    font-weight: 500;
+    color: #333;
+    font-size: 14px;
+    margin-bottom: 4px;
+}
+
+.required {
+    color: #e74c3c;
+    margin-left: 2px;
+}
+
+.input,
+.select,
+.textarea {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: inherit;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    
+    &:focus {
+        outline: none;
+        border-color: #3498db;
+        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+    }
+    
+    &:disabled {
+        background-color: #f8f9fa;
+        color: #6c757d;
+        cursor: not-allowed;
+    }
+}
+
+.select {
+    cursor: pointer;
+    
+    &:disabled {
+        cursor: not-allowed;
+    }
+}
+
+.textarea {
+    resize: vertical;
+    min-height: 80px;
+}
+
+.errorText {
+    color: #e74c3c;
+    font-size: 12px;
+    margin-top: 4px;
+}
+
+.loading {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+    font-style: italic;
+}
+
+// SweetAlert2 customizations
+.swalPopup {
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.swalHtmlContainer {
+    padding: 0 !important;
+    margin: 16px 0 !important;
+}
+
+.swalConfirm {
+    background-color: #3498db !important;
+    border: none !important;
+    border-radius: 4px !important;
+    font-weight: 500 !important;
+    padding: 10px 20px !important;
+    
+    &:hover {
+        background-color: #2980b9 !important;
+    }
+    
+    &:focus {
+        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3) !important;
+    }
+}
+
+.swalCancel {
+    background-color: #95a5a6 !important;
+    border: none !important;
+    border-radius: 4px !important;
+    font-weight: 500 !important;
+    padding: 10px 20px !important;
+    
+    &:hover {
+        background-color: #7f8c8d !important;
+    }
+    
+    &:focus {
+        box-shadow: 0 0 0 2px rgba(149, 165, 166, 0.3) !important;
+    }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+    .stagePopupForm {
+        min-width: 300px;
+    }
+    
+    .fields {
+        gap: 12px;
+    }
+    
+    .input,
+    .select,
+    .textarea {
+        font-size: 16px; // Prevents zoom on iOS
+    }
+}
+
+// Theme variations
+.stagePopupForm {
+    &.theme-dark {
+        .label {
+            color: #f8f9fa;
+        }
+        
+        .message {
+            color: #adb5bd;
+        }
+        
+        .input,
+        .select,
+        .textarea {
+            background-color: #343a40;
+            border-color: #495057;
+            color: #f8f9fa;
+            
+            &:focus {
+                border-color: #3498db;
+                box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+            }
+            
+            &:disabled {
+                background-color: #495057;
+                color: #6c757d;
+            }
+        }
+        
+        .select option {
+            background-color: #343a40;
+            color: #f8f9fa;
+        }
+    }
+}
+
+// Animation for field validation
+.field {
+    transition: all 0.2s ease;
+}
+
+.fieldError {
+    animation: shake 0.3s ease-in-out;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-2px); }
+    75% { transform: translateX(2px); }
+}
+
+// Loading state
+.loading {
+    position: relative;
+    
+    &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+        width: 16px;
+        height: 16px;
+        border: 2px solid #ddd;
+        border-top: 2px solid #3498db;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+}
+
+@keyframes spin {
+    0% { transform: translateY(-50%) rotate(0deg); }
+    100% { transform: translateY(-50%) rotate(360deg); }
+}

package/src/components/utils/ConfirmDialog.js

@@ -1,5 +1,5 @@
 import Swal from 'sweetalert2';
-import '../crm/generic/styles/SweetAlert.module.css';
+import '../styles/SweetAlert.module.css';
 
 /**
  * A utility function that replaces react-confirm-alert with SweetAlert2