@visns-studio/visns-components 5.13.9 → 5.13.11

package/package.json

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

package/src/components/DataGrid.jsx

@@ -450,7 +450,7 @@ const DataGrid = forwardRef(
                         if (gridRef.current?.api) {
                             gridRef.current.api.forceUpdate();
                         }
-                    }, 10);
+                    }, 50); // Increased delay to ensure proper rendering consistency
                 });
 
                 return sqlResult.then((res) => ({
@@ -1208,6 +1208,14 @@ const DataGrid = forwardRef(
 
         const handleReload = () => {
             gridRef.current.paginationProps.reload();
+            
+            // Force grid to recalculate row heights after reload
+            // This fixes the row height rendering issue after filter changes
+            setTimeout(() => {
+                if (gridRef.current?.api) {
+                    gridRef.current.api.forceUpdate();
+                }
+            }, 50); // Increased delay to ensure proper rendering after reload
         };
 
         const handleGroupAction = async (groupValue, iconConfig) => {
@@ -1312,6 +1320,13 @@ const DataGrid = forwardRef(
                     // Reload grid data if needed
                     if (gridRef.current && gridRef.current.paginationProps) {
                         gridRef.current.paginationProps.reload();
+                        
+                        // Force grid to recalculate row heights after reload
+                        setTimeout(() => {
+                            if (gridRef.current?.api) {
+                                gridRef.current.api.forceUpdate();
+                            }
+                        }, 50);
                     }
                 } catch (error) {
                     console.error('Group action fetch error:', error);
@@ -3130,6 +3145,13 @@ const DataGrid = forwardRef(
             // Force reload of data
             if (gridRef.current && gridRef.current.paginationProps) {
                 gridRef.current.paginationProps.reload();
+                
+                // Force grid to recalculate row heights after reload
+                setTimeout(() => {
+                    if (gridRef.current?.api) {
+                        gridRef.current.api.forceUpdate();
+                    }
+                }, 50);
             }
         }, [ajaxSetting?.url]);
 

package/src/components/generic/GenericDetail.jsx

@@ -638,11 +638,46 @@ function GenericDetail({
         }
     };
 
-    const handleExport = ({ url, key }) => {
+    const handleExport = ({ url, key, method = 'GET' }) => {
         if (!url) return toast.error('Export URL not found');
 
-        const exportUrl = key ? `${url}/${data[key]}` : url;
-        window.open(exportUrl);
+        let exportUrl = url;
+        
+        // Replace {id} placeholder with actual ID value
+        if (key && data[key]) {
+            exportUrl = url.replace('{id}', data[key]);
+        } else if (url.includes('{id}') && data.id) {
+            exportUrl = url.replace('{id}', data.id);
+        }
+        
+        // Legacy support: append key value to URL if no placeholder found
+        if (!url.includes('{id}') && key && data[key]) {
+            exportUrl = `${url}/${data[key]}`;
+        }
+        
+        if (method === 'POST') {
+            // Create a form to submit POST request
+            const form = document.createElement('form');
+            form.method = 'POST';
+            form.action = exportUrl;
+            form.target = '_blank';
+            
+            // Add CSRF token if available
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            if (csrfToken) {
+                const csrfInput = document.createElement('input');
+                csrfInput.type = 'hidden';
+                csrfInput.name = '_token';
+                csrfInput.value = csrfToken;
+                form.appendChild(csrfInput);
+            }
+            
+            document.body.appendChild(form);
+            form.submit();
+            document.body.removeChild(form);
+        } else {
+            window.open(exportUrl);
+        }
     };
 
     const handleCustomAction = async (action) => {
@@ -1398,6 +1433,115 @@ function GenericDetail({
             case 'total':
                 return renderTotal();
             default:
+                if (id === 'proposalDynamic') {
+                    return size === 'full' && truncatedValue
+                        ? <div className={styles.proposalDynamicContainer}>
+                            <iframe 
+                                srcDoc={`
+                                    <!DOCTYPE html>
+                                    <html>
+                                    <head>
+                                        <style>
+                                            body {
+                                                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                                                font-size: 14px;
+                                                line-height: 1.5;
+                                                color: #333;
+                                                margin: 0;
+                                                padding: 16px;
+                                                overflow-wrap: break-word;
+                                                word-wrap: break-word;
+                                            }
+                                            h1, h2, h3, h4, h5, h6 {
+                                                font-size: 1.2em;
+                                                font-weight: bold;
+                                                margin: 0.5em 0;
+                                                padding: 0;
+                                                line-height: 1.3;
+                                            }
+                                            p, div, span {
+                                                margin: 0 0 0.5em 0;
+                                                padding: 0;
+                                                font-size: 14px;
+                                                line-height: 1.5;
+                                            }
+                                            table {
+                                                max-width: 100%;
+                                                border-collapse: collapse;
+                                                font-size: 14px;
+                                                margin: 0.5em 0;
+                                            }
+                                            td, th {
+                                                padding: 0.25em 0.5em;
+                                                font-size: 14px;
+                                                line-height: 1.3;
+                                            }
+                                            img {
+                                                max-width: 100%;
+                                                height: auto;
+                                                display: block;
+                                                margin: 0.5em 0;
+                                            }
+                                        </style>
+                                    </head>
+                                    <body>
+                                        <br /><p>${truncatedValue}</p>
+                                    </body>
+                                    </html>
+                                `}
+                                style={{
+                                    width: '100%',
+                                    minHeight: '400px',
+                                    border: 'none',
+                                    backgroundColor: 'transparent'
+                                }}
+                                onLoad={(e) => {
+                                    const iframe = e.target;
+                                    const doc = iframe.contentDocument || iframe.contentWindow.document;
+                                    const height = doc.body.scrollHeight;
+                                    iframe.style.height = height + 'px';
+                                }}
+                            />
+                          </div>
+                        : <div className={styles.proposalDynamicContainer}>
+                            <iframe 
+                                srcDoc={`
+                                    <!DOCTYPE html>
+                                    <html>
+                                    <head>
+                                        <style>
+                                            body {
+                                                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                                                font-size: 14px;
+                                                line-height: 1.5;
+                                                color: #333;
+                                                margin: 0;
+                                                padding: 16px;
+                                                overflow-wrap: break-word;
+                                                word-wrap: break-word;
+                                            }
+                                        </style>
+                                    </head>
+                                    <body>
+                                        ${truncatedValue}
+                                    </body>
+                                    </html>
+                                `}
+                                style={{
+                                    width: '100%',
+                                    minHeight: '200px',
+                                    border: 'none',
+                                    backgroundColor: 'transparent'
+                                }}
+                                onLoad={(e) => {
+                                    const iframe = e.target;
+                                    const doc = iframe.contentDocument || iframe.contentWindow.document;
+                                    const height = doc.body.scrollHeight;
+                                    iframe.style.height = height + 'px';
+                                }}
+                            />
+                          </div>;
+                }
                 return size === 'full' && truncatedValue
                     ? parse(`<br /><p>${truncatedValue}</p>`)
                     : truncatedValue;
@@ -2528,7 +2672,7 @@ function GenericDetail({
                                                         )
                                                     }
                                                 >
-                                                    Export
+                                                    {activeTabConfig.export.label || 'Export'}
                                                 </button>
                                             )}