@visns-studio/visns-components 5.14.14 → 5.14.15

package/package.json

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

package/src/components/DataGrid.jsx

@@ -24,6 +24,7 @@ import React, {
     useCallback,
     useEffect,
     useImperativeHandle,
+    useMemo,
     useRef,
     useState,
 } from 'react';
@@ -250,6 +251,28 @@ const DataGrid = forwardRef(
     ) => {
         const navigate = useNavigate();
 
+        /**
+         * DEBUG: Settings Configuration Tracking
+         * Monitor changes to settings prop to identify config update issues
+         */
+        useEffect(() => {
+            console.log('🔍 DataGrid settings prop changed:', {
+                settings: settings,
+                settingsLength: settings?.length || 0,
+                hasUpdateSetting: settings?.some(s => s.id === 'update') || false,
+                settingsIds: settings?.map(s => s.id) || [],
+                timestamp: new Date().toISOString()
+            });
+        }, [settings]);
+
+        useEffect(() => {
+            console.log('🔍 DataGrid form prop changed:', {
+                form: form,
+                primaryKey: form?.primaryKey,
+                timestamp: new Date().toISOString()
+            });
+        }, [form]);
+
         /** Audio */
         const [audioSource, setAudioSource] = useState('');
 
@@ -285,6 +308,11 @@ const DataGrid = forwardRef(
 
         /** Modal Functions */
         const modalOpen = (formType, formId) => {
+            console.log('🔍 modalOpen called:', {
+                formType: formType,
+                formId: formId,
+                timestamp: new Date().toISOString()
+            });
             setModalShow(true);
             setFormType(formType);
             setFormId(formId);
@@ -303,6 +331,25 @@ const DataGrid = forwardRef(
         /** Table States */
         const dataRef = useRef(null);
         const [dSearch, setDSearch] = useState('');
+        
+        /** Optimized refs for settings and form to avoid unnecessary re-renders */
+        const settingsRef = useRef(settings);
+        const formRef = useRef(form);
+        
+        // Keep refs updated with current values
+        useEffect(() => {
+            settingsRef.current = settings;
+        }, [settings]);
+        
+        useEffect(() => {
+            formRef.current = form;
+        }, [form]);
+        
+        // Memoize settings to avoid unnecessary re-renders when array reference changes but content is same
+        const memoizedSettings = useMemo(() => settings, [
+            settings?.length,
+            settings?.map(s => `${s.id}-${s.roles?.join(',') || ''}-${s.active}`).join('|')
+        ]);
 
         /** Group expansion state */
         const [collapsedGroups, setCollapsedGroups] = useState({});
@@ -1463,13 +1510,46 @@ const DataGrid = forwardRef(
             }
         };
 
+        /**
+         * DEBUG: Row Click Analysis
+         * 
+         * When row clicks aren't working, check the console for these debug messages:
+         * 
+         * 1. "Row onClick triggered" - Initial row click detection
+         * 2. "Group row check" - Whether it's a group row (should be false for data rows)
+         * 3. "Cell element in row handler" - Cell element detection
+         * 4. "Row handler column analysis" - Column identification
+         * 5. "Non-checkbox column - calling onRowClick" - Normal row click path
+         * 6. "DataGrid onRowClick triggered" - Main onRowClick function entry
+         * 7. "Column analysis" - Column detection and type checking
+         * 8. "Checking for update setting" - Modal opening prerequisites
+         * 9. "Update setting found" - Whether update setting exists
+         * 10. "Opening modal with" / "No update setting found" - Final modal decision
+         * 11. "modalOpen called" - Modal function execution
+         * 
+         * Common issues:
+         * - Missing cell element: Check if click target is within grid
+         * - Wrong column type: Check column configuration
+         * - No update setting: Check config.settings for update permission
+         * - Group row interference: Check if data is being treated as group row
+         */
         const onRowClick = useCallback((rowProps, event) => {
+            console.log('🔍 DataGrid onRowClick triggered:', {
+                rowData: rowProps.data,
+                event: event,
+                target: event.target,
+                timestamp: new Date().toISOString()
+            });
+
             const cellElement = event.target.closest(
                 '.InovuaReactDataGrid__cell'
             );
 
+            console.log('🔍 Cell element found:', cellElement);
+
             // Add null check to prevent errors when cellElement is null
             if (!cellElement) {
+                console.warn('⚠️ No cell element found - row click aborted');
                 return; // Exit early if no cell element was found
             }
 
@@ -1477,13 +1557,26 @@ const DataGrid = forwardRef(
                 cellElement.parentNode.children
             ).indexOf(cellElement);
 
+            console.log('🔍 Column analysis:', {
+                columnIndex: columnIndex,
+                totalColumns: rowProps.columns.length,
+                isLastColumn: columnIndex === rowProps.columns.length - 1,
+                columns: rowProps.columns.map(col => ({ id: col.id, type: col.type }))
+            });
+
             if (
                 rowProps.columns.length > 1 &&
                 columnIndex === rowProps.columns.length - 1
             ) {
+                console.log('🔍 Last column clicked - no action');
                 // Handle last column click
             } else {
                 const column = rowProps.columns[columnIndex];
+                console.log('🔍 Column clicked:', {
+                    columnId: column?.id,
+                    columnType: column?.type,
+                    hasLink: !!column?.link
+                });
 
                 if (
                     column.type !== 'dropdown' &&
@@ -1554,21 +1647,36 @@ const DataGrid = forwardRef(
                                 'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
                             );
                         } else {
-                            const updateSetting = settings.find(
+                            console.log('🔍 Checking for update setting:', {
+                                settings: settingsRef.current,
+                                form: formRef.current,
+                                primaryKey: formRef.current?.primaryKey,
+                                rowId: rowProps.data[formRef.current?.primaryKey]
+                            });
+
+                            const updateSetting = settingsRef.current.find(
                                 (setting) => setting.id === 'update'
                             );
 
+                            console.log('🔍 Update setting found:', updateSetting);
+
                             if (updateSetting) {
+                                console.log('✅ Opening modal with:', {
+                                    type: 'update',
+                                    id: rowProps.data[formRef.current.primaryKey]
+                                });
                                 modalOpen(
                                     'update',
-                                    rowProps.data[form.primaryKey]
+                                    rowProps.data[formRef.current.primaryKey]
                                 );
+                            } else {
+                                console.warn('⚠️ No update setting found - modal will not open');
                             }
                         }
                     }
                 }
             }
-        }, []);
+        }, [modalOpen, navigate]);
 
         const onRenderRow = useCallback(
             (rowProps) => {
@@ -1576,6 +1684,14 @@ const DataGrid = forwardRef(
                 const { onClick } = rowProps;
 
                 rowProps.onClick = (event) => {
+                    console.log('🔍 Row onClick triggered:', {
+                        rowId: rowProps.data?.id,
+                        rowData: rowProps.data,
+                        event: event,
+                        target: event.target,
+                        timestamp: new Date().toISOString()
+                    });
+
                     // Check if this is a group row - group rows should only handle expand/collapse, not onRowClick
                     const isGroupRow =
                         rowProps.isGroupRow ||
@@ -1587,7 +1703,10 @@ const DataGrid = forwardRef(
                             '.InovuaReactDataGrid__group-cell'
                         );
 
+                    console.log('🔍 Group row check:', isGroupRow);
+
                     if (isGroupRow) {
+                        console.log('🔍 Group row detected - calling original onClick only');
                         // For group rows, only allow the original onClick handler (for expand/collapse)
                         // Do NOT call onRowClick as it should only apply to data rows
                         if (onClick) {
@@ -1600,8 +1719,11 @@ const DataGrid = forwardRef(
                         '.InovuaReactDataGrid__cell'
                     );
 
+                    console.log('🔍 Cell element in row handler:', cellElement);
+
                     // Add null check to prevent errors when cellElement is null
                     if (!cellElement) {
+                        console.warn('⚠️ No cell element found in row handler - exiting');
                         return; // Exit early if no cell element was found
                     }
 
@@ -1611,7 +1733,14 @@ const DataGrid = forwardRef(
 
                     const column = rowProps.columns[columnIndex];
 
+                    console.log('🔍 Row handler column analysis:', {
+                        columnIndex: columnIndex,
+                        columnId: column?.id,
+                        isCheckboxColumn: column?.id === '__checkbox-column'
+                    });
+
                     if (column.id === '__checkbox-column') {
+                        console.log('🔍 Checkbox column clicked - handling checkbox logic');
                         // For checkbox column clicks, we need to handle them specially
                         // to ensure consistent behavior whether clicking checkbox or cell area
 
@@ -1657,10 +1786,12 @@ const DataGrid = forwardRef(
                             onClick(event);
                         }
                     } else {
+                        console.log('🔍 Non-checkbox column - calling onRowClick');
                         // For non-checkbox columns, handle normal row clicks
                         // But do NOT trigger checkbox selection
                         onRowClick(rowProps, event);
 
+                        console.log('🔍 Calling original onClick handler:', !!onClick);
                         // Call the original onClick handler
                         if (onClick) {
                             onClick(event);
@@ -1942,6 +2073,14 @@ const DataGrid = forwardRef(
         }, [search, setDSearch]);
 
         const renderSetting = (s, d) => {
+            console.log('🔍 renderSetting called for:', {
+                settingId: s.id,
+                settingRoles: s.roles,
+                userRoles: userProfile?.roles?.map(r => r.name),
+                settingActive: s.active,
+                rowData: d?.id || 'unknown'
+            });
+
             let iconStyle = {};
             let allow = true;
 
@@ -1955,6 +2094,11 @@ const DataGrid = forwardRef(
                 );
 
                 if (!hasRequiredRole) {
+                    console.log('🔍 Setting filtered out by role permissions:', {
+                        settingId: s.id,
+                        requiredRoles: s.roles,
+                        userRoles: userProfile?.roles?.map(r => r.name)
+                    });
                     allow = false;
                 }
             }
@@ -2231,10 +2375,21 @@ const DataGrid = forwardRef(
                 }
 
                 if (!tmpCheckValue) {
+                    console.log('🔍 Setting filtered out by active condition:', {
+                        settingId: s.id,
+                        activeCondition: s.active,
+                        rowData: d?.id || 'unknown'
+                    });
                     allow = false;
                 }
             }
 
+            console.log('🔍 renderSetting final decision:', {
+                settingId: s.id,
+                allowed: allow,
+                willRender: allow ? 'YES' : 'NO'
+            });
+
             if (allow) {
                 switch (s.id) {
                     case 'activate':
@@ -2283,6 +2438,10 @@ const DataGrid = forwardRef(
                         return null;
                 }
             } else {
+                console.log('🔍 Setting NOT rendered (allow=false):', {
+                    settingId: s.id,
+                    reason: 'filtered out by permissions or active conditions'
+                });
                 return null;
             }
 
@@ -2874,10 +3033,10 @@ const DataGrid = forwardRef(
 
                     // Function to check if any settings would be visible for any row
                     const hasVisibleSettings = () => {
-                        if (settings.length === 0) return false;
+                        if (memoizedSettings.length === 0) return false;
                         
                         // Check if any setting would be visible based on role permissions
-                        return settings.some(setting => {
+                        return memoizedSettings.some(setting => {
                             // Check role-based permissions
                             if (setting.roles && Array.isArray(setting.roles) && setting.roles.length > 0) {
                                 const hasRequiredRole = setting.roles.some(requiredRole => 
@@ -2903,7 +3062,7 @@ const DataGrid = forwardRef(
                             render: ({ data }) => {
                                 return (
                                     <div className={styles.tdactions}>
-                                        {settings.map((setting) =>
+                                        {memoizedSettings.map((setting) =>
                                             renderSetting(setting, data)
                                         )}
                                     </div>
@@ -2986,7 +3145,7 @@ const DataGrid = forwardRef(
                 .catch((error) => {
                     console.error('Error in fetching dropdown data: ', error);
                 });
-        }, [columns, filterDataSource]);
+        }, [columns, filterDataSource, memoizedSettings]);
 
         useEffect(() => {
             if (setFilterData) {

package/src/components/Form.jsx

@@ -125,45 +125,49 @@ function Form({
 
         if (e.target.files && e.target.files.length > 0) {
             // Find the field settings to check if multiple is enabled
-            const fieldSettings = formSettings?.fields?.find(field => field.id === id);
+            const fieldSettings = formSettings?.fields?.find(
+                (field) => field.id === id
+            );
             const isMultiple = fieldSettings?.multiple === true;
-            
+
             // Debug logging for development
             if (process.env.NODE_ENV === 'development') {
                 console.log('File input change:', {
                     id,
                     filesCount: e.target.files.length,
                     isMultiple,
-                    fieldSettings
+                    fieldSettings,
                 });
             }
-            
+
             if (isMultiple) {
                 // For multiple file inputs, append new files to existing ones
                 setFormData((prevState) => {
                     const existingFiles = prevState[id] || [];
                     const newFiles = Array.from(e.target.files);
-                    
+
                     // Ensure existingFiles is always an array for multiple inputs
-                    const currentFiles = Array.isArray(existingFiles) ? existingFiles : [];
-                    
+                    const currentFiles = Array.isArray(existingFiles)
+                        ? existingFiles
+                        : [];
+
                     const updatedFiles = [...currentFiles, ...newFiles];
-                    
+
                     // Debug logging for development
                     if (process.env.NODE_ENV === 'development') {
                         console.log('Multiple file update:', {
                             existingCount: currentFiles.length,
                             newCount: newFiles.length,
-                            totalCount: updatedFiles.length
+                            totalCount: updatedFiles.length,
                         });
                     }
-                    
+
                     return {
                         ...prevState,
                         [id]: updatedFiles,
                     };
                 });
-                
+
                 // Clear the input so the same files can be selected again
                 setTimeout(() => {
                     if (e.target) {
@@ -495,7 +499,7 @@ function Form({
     const handleFileDownload = async (fileData) => {
         try {
             console.info('File download data:', fileData);
-            
+
             if (!fileData) {
                 toast.error('No file data available for download');
                 return;
@@ -503,7 +507,11 @@ function Form({
 
             // Handle different file data structures
             let downloadUrl = null;
-            let fileName = fileData.filename || fileData.name || fileData.file_name || 'download';
+            let fileName =
+                fileData.filename ||
+                fileData.name ||
+                fileData.file_name ||
+                'download';
 
             // Priority order for download methods:
             // 1. Direct file URL (S3, CDN, etc.)
@@ -518,7 +526,9 @@ function Form({
                     downloadUrl = filePath;
                 } else {
                     // Construct URL - adjust this based on your API structure
-                    downloadUrl = `/api/files/download?path=${encodeURIComponent(filePath)}`;
+                    downloadUrl = `/api/files/download?path=${encodeURIComponent(
+                        filePath
+                    )}`;
                 }
             }
             // 3. Legacy key/uuid method
@@ -529,7 +539,7 @@ function Form({
             else if (fileData.id) {
                 downloadUrl = `/api/files/download/${fileData.id}`;
             }
-            
+
             if (!downloadUrl) {
                 toast.error('Unable to determine download URL for this file');
                 return;
@@ -540,14 +550,13 @@ function Form({
             link.href = downloadUrl;
             link.download = fileName;
             link.target = '_blank';
-            
+
             // Add to DOM, click, and remove
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
-            
+
             toast.success(`Downloading ${fileName}...`);
-            
         } catch (error) {
             console.error('File download error:', error);
             toast.error('Failed to download file');
@@ -925,11 +934,19 @@ function Form({
 
                             // Check if formData[item.id] is null, undefined, or an empty string AND there's no auto value
                             // Note: 0 is considered a valid value for dropdowns/options
-                            if ((formData[item.id] === null || formData[item.id] === undefined || formData[item.id] === '') && !autoValue) {
+                            if (
+                                (formData[item.id] === null ||
+                                    formData[item.id] === undefined ||
+                                    formData[item.id] === '') &&
+                                !autoValue
+                            ) {
                                 // Check for required_check dependency
                                 if (
                                     item.required_check &&
-                                    (formData[item.required_check] === null || formData[item.required_check] === undefined || formData[item.required_check] === '')
+                                    (formData[item.required_check] === null ||
+                                        formData[item.required_check] ===
+                                            undefined ||
+                                        formData[item.required_check] === '')
                                 ) {
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
@@ -943,7 +960,9 @@ function Form({
                         } else if (
                             item.required_rely &&
                             formData[item.required_rely] &&
-                            (formData[item.id] === null || formData[item.id] === undefined || formData[item.id] === '')
+                            (formData[item.id] === null ||
+                                formData[item.id] === undefined ||
+                                formData[item.id] === '')
                         ) {
                             // Check if the dependent required field is empty when it should be filled
                             validation += `${item.label} is a required field.<br/>`;
@@ -994,9 +1013,13 @@ function Form({
                             method = formSettings.customMethod;
                         } else {
                             // Check if this is bulk edit mode
-                            if (bulkEditMode && bulkEditGroupData?.iconConfig?.formModal) {
+                            if (
+                                bulkEditMode &&
+                                bulkEditGroupData?.iconConfig?.formModal
+                            ) {
                                 // Use bulk edit endpoint configuration
-                                const formModalConfig = bulkEditGroupData.iconConfig.formModal;
+                                const formModalConfig =
+                                    bulkEditGroupData.iconConfig.formModal;
                                 url = formModalConfig.url || url;
                                 method = formModalConfig.method || 'POST';
                             } else {
@@ -1020,7 +1043,9 @@ function Form({
                                                       }`;
                                         } else {
                                             url += `/${
-                                                formData[formSettings.primaryKey]
+                                                formData[
+                                                    formSettings.primaryKey
+                                                ]
                                             }`;
                                         }
                                         method =
@@ -1179,9 +1204,11 @@ function Form({
                                 ...payload,
                                 bulkEdit: true,
                                 groupValue: bulkEditGroupData.groupValue,
-                                groupKey: bulkEditGroupData.iconConfig.formModal?.groupKey || ajaxSetting?.groupBy?.[0],
+                                groupKey:
+                                    bulkEditGroupData.iconConfig.formModal
+                                        ?.groupKey || ajaxSetting?.groupBy?.[0],
                                 rowIds: bulkEditGroupData.groupRowIds,
-                                ...bulkEditGroupData.iconConfig.formModal?.data
+                                ...bulkEditGroupData.iconConfig.formModal?.data,
                             };
                         }
 
@@ -1237,7 +1264,8 @@ function Form({
                                         if (resSaveAnother.data.error === '') {
                                             toast.success(saveAnother.message);
                                             if (fetchTable) {
-                                                const createdItem = res.data.data || res.data;
+                                                const createdItem =
+                                                    res.data.data || res.data;
                                                 fetchTable(createdItem);
                                             }
                                         }
@@ -1846,28 +1874,36 @@ function Form({
                         />
                     </div>
                     {tableData?.dataSource?.length > 0 && (
-                        <div 
+                        <div
                             className={`${styles.formItem} ${styles.fwItem}`}
                             style={{
-                                width: formSettings?.save?.return?.width 
-                                    ? `min(${parseInt(formSettings.save.return.width)}px, 100vw - 40px)` 
+                                width: formSettings?.save?.return?.width
+                                    ? `min(${parseInt(
+                                          formSettings.save.return.width
+                                      )}px, 100vw - 40px)`
                                     : '100%',
-                                maxWidth: formSettings?.save?.return?.width 
-                                    ? `${parseInt(formSettings.save.return.width)}px` 
+                                maxWidth: formSettings?.save?.return?.width
+                                    ? `${parseInt(
+                                          formSettings.save.return.width
+                                      )}px`
                                     : '100%',
                                 overflow: 'auto',
-                                margin: formSettings?.save?.return?.width ? '0 auto' : undefined
+                                margin: formSettings?.save?.return?.width
+                                    ? '0 auto'
+                                    : undefined,
                             }}
                         >
                             <ReactDataGrid
                                 idProperty="form-table-result"
                                 columns={tableData.columns}
                                 dataSource={tableData.dataSource}
-                                style={{ 
+                                style={{
                                     minHeight: 550,
-                                    width: formSettings?.save?.return?.width 
-                                        ? `${parseInt(formSettings.save.return.width)}px` 
-                                        : '100%'
+                                    width: formSettings?.save?.return?.width
+                                        ? `${parseInt(
+                                              formSettings.save.return.width
+                                          )}px`
+                                        : '100%',
                                 }}
                                 showActiveRowIndicator={false}
                                 selected={selected}
@@ -2361,9 +2397,13 @@ function Form({
                     <div className={styles.modal__header}>
                         <h1>
                             {bulkEditMode && bulkEditGroupData
-                                ? `${bulkEditGroupData.iconConfig.formModal?.title || 'Bulk Edit'} - ${bulkEditGroupData.groupValue} (${bulkEditGroupData.groupRows.length} items)`
-                                : formSettings[formType]?.title
-                            }
+                                ? `${
+                                      bulkEditGroupData.iconConfig.formModal
+                                          ?.title || 'Bulk Edit'
+                                  } - ${bulkEditGroupData.groupValue} (${
+                                      bulkEditGroupData.groupRows.length
+                                  } items)`
+                                : formSettings[formType]?.title}
                         </h1>
                         <button
                             className={styles.modal__close}
@@ -2398,9 +2438,12 @@ function Form({
                                     }
                                     // In bulk edit mode, only show fields specified in the formModal configuration
                                     if (
-                                        bulkEditMode && 
-                                        bulkEditGroupData?.iconConfig?.formModal?.fields &&
-                                        !bulkEditGroupData.iconConfig.formModal.fields.includes(item.id)
+                                        bulkEditMode &&
+                                        bulkEditGroupData?.iconConfig?.formModal
+                                            ?.fields &&
+                                        !bulkEditGroupData.iconConfig.formModal.fields.includes(
+                                            item.id
+                                        )
                                     ) {
                                         return null;
                                     }