@visns-studio/visns-components 5.9.4 → 5.9.6

package/src/components/crm/generic/GenericIndex.jsx

@@ -15,10 +15,12 @@ import parse from 'html-react-parser';
 import moment from 'moment';
 import numeral from 'numeral';
 import { CloudDownload } from 'akar-icons';
+import Popup from 'reactjs-popup';
 
 import CustomFetch from '../Fetch';
 import Download from '../Download';
 import Field from '../Field';
+import Form from '../Form';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 
@@ -1485,6 +1487,11 @@ function GenericIndex({
     const [tableData, setTableData] = useState([]);
     const [tableInfo, setTableInfo] = useState({});
     const [total, setTotal] = useState(0);
+
+    /** Custom Action Modal States */
+    const [customActionModalShow, setCustomActionModalShow] = useState(false);
+    const [customActionFormData, setCustomActionFormData] = useState({});
+    const [customActionConfig, setCustomActionConfig] = useState(null);
     const windowHeight = useWindowHeight();
     const { config, setConfig, subnav, setSubnav } = useConfig(
         setting,
@@ -1526,20 +1533,110 @@ function GenericIndex({
         [setting, config]
     );
 
+    /** Custom Action Modal Functions */
+    const handleCustomActionModal = useCallback(
+        (customAction) => {
+            try {
+                // Get form configuration from root level (config.form)
+                const rootFormConfig = config.form;
+
+                if (!rootFormConfig || !rootFormConfig.fields) {
+                    toast.error('Form configuration not found.');
+                    return;
+                }
+
+                // Filter out hidden fields from root-level form configuration
+                const visibleFields = rootFormConfig.fields.filter(
+                    (field) => field.type !== 'hidden'
+                );
+
+                // Add hidden field for selected rows
+                const selectedRowIds = Object.keys(rowsSelected);
+                const fieldsWithRows = [
+                    ...visibleFields,
+                    {
+                        id: 'selected_rows',
+                        type: 'hidden',
+                        value: selectedRowIds,
+                    },
+                ];
+
+                // Prepare form data for the modal using root-level form config
+                const modalFormData = {
+                    ...rootFormConfig,
+                    fields: fieldsWithRows,
+                    // Use custom URL and method for submission
+                    customUrl: customAction.url,
+                    customMethod: customAction.method || 'POST',
+                    customDataId: false, // Don't append ID to URL
+                    create: {
+                        title: customAction.label,
+                        url: customAction.url,
+                        method: customAction.method || 'POST',
+                    },
+                    primaryKey: 'id',
+                };
+
+                setCustomActionConfig(customAction);
+                setCustomActionFormData(modalFormData);
+                setCustomActionModalShow(true);
+            } catch (error) {
+                console.error('Error opening custom action modal:', error);
+                toast.error('Error opening form. Please try again.');
+            }
+        },
+        [config.form, rowsSelected]
+    );
+
+    const closeCustomActionModal = useCallback(() => {
+        setCustomActionModalShow(false);
+        setCustomActionFormData({});
+        setCustomActionConfig(null);
+    }, []);
+
+    const handleCustomActionSubmit = useCallback(() => {
+        // This is called after successful form submission by the Form component
+        // Since we provide closeModal prop, the Form component won't show success message
+        // So we need to show it here, then reload grid and close modal
+
+        console.log('Custom action submitted', customActionConfig);
+        if (customActionConfig) {
+            toast.success(
+                customActionConfig.message?.success ||
+                    'Operation completed successfully.'
+            );
+        }
+        gridRef.current?.reload();
+        closeCustomActionModal();
+    }, [customActionConfig, closeCustomActionModal]);
+
     const handleCustomAction = useCallback(async () => {
         try {
             // Get the custom action configuration using our helper
             const customActionConfig = getFunctionConfig('customAction');
 
             if (customActionConfig) {
-                // Implementation will be added when needed
-                console.log('Custom action triggered', customActionConfig);
+                // Check if this is a modal type custom action
+                if (customActionConfig.type === 'modal') {
+                    // Check if rows are selected for modal type actions
+                    if (!Object.keys(rowsSelected).length) {
+                        toast.warning(
+                            customActionConfig.message?.warning ||
+                                'Please select at least one row.'
+                        );
+                        return;
+                    }
+                    handleCustomActionModal(customActionConfig);
+                } else {
+                    // Original implementation for non-modal custom actions
+                    console.log('Custom action triggered', customActionConfig);
+                }
             }
         } catch (err) {
             console.error(err);
             toast.error('An error occurred while performing the custom action');
         }
-    }, [getFunctionConfig]);
+    }, [getFunctionConfig, handleCustomActionModal, rowsSelected]);
 
     const handleCheckboxUpdate = useCallback(async () => {
         try {
@@ -2064,15 +2161,36 @@ function GenericIndex({
                                 )}
 
                             {/* Render Custom Action button if customAction function is configured in any location */}
-                            {getFunctionConfig('customAction') && (
-                                <button
-                                    className={styles.btn}
-                                    onClick={handleCustomAction}
-                                >
-                                    {getFunctionConfig('customAction').label ||
-                                        'Custom Action'}
-                                </button>
-                            )}
+                            {getFunctionConfig('customAction') &&
+                                (() => {
+                                    const customActionConfig =
+                                        getFunctionConfig('customAction');
+                                    const isModalType =
+                                        customActionConfig.type === 'modal';
+                                    const hasSelectedRows =
+                                        Object.keys(rowsSelected).length > 0;
+                                    const isDisabled =
+                                        isModalType && !hasSelectedRows;
+
+                                    return (
+                                        <button
+                                            className={styles.btn}
+                                            onClick={handleCustomAction}
+                                            disabled={isDisabled}
+                                            {...(isDisabled && {
+                                                'data-tooltip-id':
+                                                    'system-tooltip',
+                                                'data-tooltip-content':
+                                                    customActionConfig.message
+                                                        ?.warning ||
+                                                    'Please select at least one row to perform this action',
+                                            })}
+                                        >
+                                            {customActionConfig.label ||
+                                                'Custom Action'}
+                                        </button>
+                                    );
+                                })()}
 
                             {setting.export?.label && (
                                 <button
@@ -2086,6 +2204,43 @@ function GenericIndex({
                     );
                 })()}
             </div>
+
+            {/* Custom Action Modal */}
+            <Popup
+                open={customActionModalShow}
+                onClose={closeCustomActionModal}
+                closeOnDocumentClick={false}
+                contentStyle={{
+                    width: '80vw',
+                    maxWidth: '1200px',
+                    ...(customActionFormData.verticalAlign === 'top' && {
+                        position: 'fixed',
+                        top: '5vh',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        margin: '0',
+                    }),
+                }}
+            >
+                <div
+                    className={`modalwrap top--modal modalWide ${
+                        customActionFormData.verticalAlign === 'top'
+                            ? 'modal-top-aligned'
+                            : ''
+                    }`}
+                >
+                    <div className="modal">
+                        <Form
+                            closeModal={closeCustomActionModal}
+                            formSettings={customActionFormData}
+                            formType="create"
+                            fetchTable={handleCustomActionSubmit}
+                            style={userProfile?.settings?.style || {}}
+                            userProfile={userProfile}
+                        />
+                    </div>
+                </div>
+            </Popup>
         </>
     );
 }

package/src/components/crm/generic/styles/GenericIndex.module.scss

@@ -214,12 +214,20 @@
     font-size: 1.25em;
 }
 
-.btn:hover {
+.btn:hover:not(:disabled) {
     color: var(--primary-color);
     background: var(--highlight-color);
     border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
 }
 
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: var(--primary-color);
+    color: var(--tertiary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 0.5);
+}
+
 .polActions {
     position: fixed;
     bottom: 15px;

package/src/components/crm/styles/Notification.module.scss

@@ -1,7 +1,6 @@
 /* Notification Container */
 .notificationContainer {
     position: relative;
-    display: inline-flex;
     align-items: center;
 }
 

package/src/components/crm/styles/global-datagrid.css

@@ -433,4 +433,4 @@
 
 .InovuaReactDataGrid__group-toolbar {
     display: none !important;
-}
+}

package/src/components/test/TooltipTest.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import SystemTooltip from '../utils/SystemTooltip';
+
+const TooltipTest = () => {
+    return (
+        <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+            <h1>SystemTooltip Test Component</h1>
+            
+            <p>This component tests the SystemTooltip functionality. Hover over the elements below:</p>
+            
+            <div style={{ margin: '20px 0' }}>
+                <button 
+                    style={{
+                        background: '#007bff',
+                        color: 'white',
+                        border: 'none',
+                        padding: '10px 20px',
+                        borderRadius: '4px',
+                        cursor: 'pointer',
+                        margin: '10px'
+                    }}
+                    data-tooltip-content="This is a test button tooltip"
+                >
+                    Test Button
+                </button>
+                
+                <div 
+                    style={{
+                        width: '30px',
+                        height: '30px',
+                        background: '#28a745',
+                        borderRadius: '50%',
+                        display: 'inline-block',
+                        margin: '10px',
+                        cursor: 'pointer'
+                    }}
+                    data-tooltip-content="This is a test icon tooltip"
+                ></div>
+                
+                <span 
+                    style={{
+                        background: '#f8f9fa',
+                        padding: '10px',
+                        border: '1px solid #dee2e6',
+                        borderRadius: '4px',
+                        margin: '10px',
+                        display: 'inline-block',
+                        cursor: 'pointer'
+                    }}
+                    data-tooltip-content="This is a test text tooltip with some longer content to see how it wraps"
+                >
+                    Test Text Element
+                </span>
+            </div>
+            
+            <div style={{ margin: '20px 0' }}>
+                <p data-tooltip-content="This paragraph has a tooltip">
+                    Paragraph with tooltip
+                </p>
+                
+                <div data-tooltip-content="Nested element test">
+                    <span>Nested content</span>
+                </div>
+            </div>
+            
+            <div style={{ margin: '20px 0' }}>
+                <input 
+                    type="text" 
+                    placeholder="Input field" 
+                    data-tooltip-content="This is an input field tooltip"
+                    style={{ margin: '10px' }}
+                />
+                
+                <select 
+                    data-tooltip-content="This is a select dropdown tooltip"
+                    style={{ margin: '10px' }}
+                >
+                    <option>Option 1</option>
+                    <option>Option 2</option>
+                </select>
+            </div>
+            
+            <div style={{ margin: '20px 0' }}>
+                <div 
+                    data-tooltip-content="HTML content test: <strong>Bold text</strong><br/>Line break<br/>Another line"
+                    style={{
+                        background: '#ffc107',
+                        padding: '10px',
+                        borderRadius: '4px',
+                        cursor: 'pointer',
+                        display: 'inline-block'
+                    }}
+                >
+                    Element with HTML content tooltip
+                </div>
+            </div>
+            
+            {/* Include SystemTooltip component */}
+            <SystemTooltip />
+        </div>
+    );
+};
+
+export default TooltipTest;