@visns-studio/visns-components 5.12.4 → 5.12.5

package/package.json

@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.12.4",
+    "version": "5.12.5",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/generic/StagePopupModal.jsx

@@ -25,14 +25,7 @@ const StagePopupModal = ({
 
     // 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]);
@@ -64,14 +57,11 @@ const StagePopupModal = ({
                     });
 
                     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) {
@@ -81,9 +71,6 @@ const StagePopupModal = ({
             }
         }
 
-        console.log(`[StagePopupModal] Final options object:`, options);
-        console.log(`[StagePopupModal] Setting fieldOptions state:`, options);
-        
         setFormData(initialData);
         setFieldOptions(options);
         setLoading(false);
@@ -106,15 +93,24 @@ const StagePopupModal = ({
 
     const validateForm = () => {
         const errors = {};
+        const fieldsContainer = document.getElementById('stage-popup-fields');
 
         popupConfig.fields?.forEach(field => {
-            if (field.required && (!formData[field.id] || formData[field.id] === '')) {
+            let value = formData[field.id];
+            
+            // Get current value from DOM if available
+            if (fieldsContainer) {
+                const input = fieldsContainer.querySelector(`[data-field-id="${field.id}"]`);
+                if (input) {
+                    value = input.value;
+                }
+            }
+
+            if (field.required && (!value || value === '')) {
                 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`;
                 }
@@ -135,13 +131,24 @@ const StagePopupModal = ({
         }
 
         const dataToSend = {};
+        const fieldsContainer = document.getElementById('stage-popup-fields');
         
         // 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];
+            let value = formData[fieldId];
+            
+            // Get current value from DOM if available
+            if (fieldsContainer) {
+                const input = fieldsContainer.querySelector(`[data-field-id="${fieldId}"]`);
+                if (input) {
+                    value = input.value;
+                }
+            }
+            
+            if (value !== undefined && value !== '') {
+                dataToSend[fieldId] = value;
             }
         });
 
@@ -168,14 +175,11 @@ const StagePopupModal = ({
                             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>
-                                ));
-                            })()}
+                            {(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>
@@ -303,13 +307,12 @@ const StagePopupModal = ({
                         onCancel();
                     }
                 });
-            } else if (popupConfig.type === 'form') {
-                // Custom form dialog
+            } else if (popupConfig.type === 'form' && !loading) {
+                // Custom form dialog - only show when not loading
                 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>
                 `;
@@ -330,6 +333,9 @@ const StagePopupModal = ({
                         renderFormFields();
                     },
                     preConfirm: () => {
+                        // Update form data from DOM before validation
+                        updateFormDataFromDOM();
+                        
                         if (!validateForm()) {
                             Swal.showValidationMessage('Please correct the errors below');
                             return false;
@@ -347,28 +353,36 @@ const StagePopupModal = ({
         }
     }, [show, popupConfig, loading, formData, fieldOptions]);
 
+    const updateFormDataFromDOM = () => {
+        const fieldsContainer = document.getElementById('stage-popup-fields');
+        if (!fieldsContainer) return;
+
+        const newFormData = { ...formData };
+        
+        popupConfig.fields?.forEach(field => {
+            const input = fieldsContainer.querySelector(`[data-field-id="${field.id}"]`);
+            if (input) {
+                newFormData[field.id] = input.value;
+            }
+        });
+
+        setFormData(newFormData);
+    };
+
     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);
@@ -379,6 +393,9 @@ const StagePopupModal = ({
                 input.addEventListener('change', (e) => {
                     handleFieldChange(field.id, e.target.value);
                 });
+                input.addEventListener('input', (e) => {
+                    handleFieldChange(field.id, e.target.value);
+                });
             }
         });
     };
@@ -390,7 +407,6 @@ const StagePopupModal = ({
 
         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}
@@ -399,7 +415,7 @@ const StagePopupModal = ({
 
                 return `
                     <label class="${styles.label}">${field.label}${requiredStar}</label>
-                    <select class="${styles.select}" data-field-id="${field.id}">
+                    <select class="${styles.select}" data-field-id="${field.id}" ${loading ? 'disabled' : ''}>
                         <option value="">-- Select ${field.label} --</option>
                         ${options}
                     </select>