@visns-studio/visns-components 5.10.1 → 5.10.3

package/src/components/crm/Field.jsx

@@ -162,8 +162,18 @@ function Field({
             let filter = {};
 
             if (settings.where?.length > 0) {
+                const processedWhere = settings.where.map((whereItem) => {
+                    if (whereItem.getKey && formData[whereItem.getKey]) {
+                        return {
+                            ...whereItem,
+                            value: formData[whereItem.getKey],
+                        };
+                    }
+                    return whereItem;
+                });
+
                 filter = {
-                    where: settings.where,
+                    where: processedWhere,
                 };
             }
 
@@ -247,7 +257,7 @@ function Field({
             );
             setCanvasUrl(canvasType.url);
         }
-    }, [settings, counter]);
+    }, [settings, counter, formData]);
 
     const fetchChildDropdownData = (s, v) => {
         let filter = {};
@@ -265,7 +275,9 @@ function Field({
                                     {
                                         id: s.id,
                                         value: _inputValue,
-                                        ...(a.whereHas && { whereHas: a.whereHas }),
+                                        ...(a.whereHas && {
+                                            whereHas: a.whereHas,
+                                        }),
                                     },
                                 ],
                             };

package/src/components/crm/cells/CellWithTooltip.jsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Tooltip } from 'react-tooltip';
+import moment from 'moment';
+import numeral from 'numeral';
+
+// Utility function to check if text content is truncated
+const isTextTruncated = (element) => {
+    if (!element) return false;
+    return (
+        element.scrollWidth > element.clientWidth ||
+        element.scrollHeight > element.clientHeight
+    );
+};
+
+// Utility function to format cell value for tooltip display
+const formatCellValueForTooltip = (value, columnType) => {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+
+    switch (columnType) {
+        case 'date':
+        case 'datetime':
+            if (
+                moment(value).isValid() &&
+                moment(value).format('YYYY-MM-DD') !== '1970-01-01'
+            ) {
+                return moment(value).format('DD-MM-YYYY HH:mm');
+            }
+            return String(value);
+        case 'currency':
+            return numeral(value).format('$0,0.00');
+        case 'number':
+            return numeral(value).format('0,0');
+        case 'boolean':
+            return value ? 'Yes' : 'No';
+        case 'richtext':
+            // Strip HTML tags for tooltip
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = value;
+            return tempDiv.textContent || tempDiv.innerText || '';
+        default:
+            return String(value);
+    }
+};
+
+// Component to wrap cell content with tooltip functionality
+const CellWithTooltip = ({
+    children,
+    value,
+    columnType = 'text',
+    className = '',
+}) => {
+    const cellRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipId] = useState(
+        () => `cell-tooltip-${Math.random().toString(36).substr(2, 9)}`
+    );
+
+    useEffect(() => {
+        const checkTruncation = () => {
+            if (cellRef.current) {
+                const isTruncated = isTextTruncated(cellRef.current);
+                setShowTooltip(isTruncated);
+            }
+        };
+
+        // Check truncation on mount and when content changes
+        checkTruncation();
+
+        // Also check on window resize
+        const handleResize = () => checkTruncation();
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [children, value]);
+
+    const tooltipContent = formatCellValueForTooltip(value, columnType);
+
+    // Only show tooltip if content is truncated and we have meaningful content
+    const shouldShowTooltip =
+        showTooltip && tooltipContent && tooltipContent.trim() !== '';
+
+    return (
+        <div
+            ref={cellRef}
+            className={className}
+            style={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                width: '100%',
+            }}
+            {...(shouldShowTooltip && {
+                'data-tooltip-id': tooltipId,
+                'data-tooltip-html': tooltipContent,
+            })}
+        >
+            {children}
+            {shouldShowTooltip && (
+                <Tooltip
+                    id={tooltipId}
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                        color: 'white',
+                        borderRadius: '6px',
+                        padding: '8px 12px',
+                        fontSize: '13px',
+                        maxWidth: '500px',
+                        wordWrap: 'break-word',
+                        zIndex: 1000,
+                    }}
+                    place="top"
+                    offset={5}
+                />
+            )}
+        </div>
+    );
+};
+
+export default CellWithTooltip;