@visns-studio/visns-components 5.11.20 → 5.11.21

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -110,6 +110,7 @@ import {
     renderCreatedByColumn,
     renderDateRangeColumn,
     renderStageCounterColumn,
+    renderGalleryColumn,
 } from './columns/ColumnRenderers.jsx';
 import _ from 'lodash';
 
@@ -2549,6 +2550,14 @@ const DataGrid = forwardRef(
                                     column,
                                     commonProps,
                                 });
+                            case 'gallery':
+                                return renderGalleryColumn({
+                                    column,
+                                    commonProps,
+                                    modalGalleryOpen,
+                                    setGalleryData,
+                                    setCurrentItem,
+                                });
                             case 'image':
                                 return renderImageColumn({
                                     column,

package/src/components/crm/columns/ColumnRenderers.jsx

@@ -1424,6 +1424,163 @@ export const renderDateRangeColumn = ({
 };
 
 // Stage Counter Column Renderer
+// Gallery Column Renderer
+export const renderGalleryColumn = ({
+    column,
+    commonProps,
+    modalGalleryOpen,
+    setGalleryData,
+    setCurrentItem,
+}) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        sortable: false,
+        render: ({ data }) => {
+            // Function to access nested property using a series of keys
+            const getNestedValue = (data, keys) =>
+                keys.reduce(
+                    (currentValue, key) =>
+                        currentValue && currentValue[key] !== undefined
+                            ? currentValue[key]
+                            : undefined,
+                    data
+                );
+
+            // Get the images array from the nested structure
+            const imagesArray = column.relation
+                ? getNestedValue(data, column.relation)
+                : data[column.id];
+
+            // Check if we have valid image data
+            if (!imagesArray || !Array.isArray(imagesArray) || imagesArray.length === 0) {
+                return (
+                    <div style={{ 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        justifyContent: 'center',
+                        height: '40px',
+                        color: '#999',
+                        fontSize: '12px'
+                    }}>
+                        No images
+                    </div>
+                );
+            }
+
+            const maxThumbnails = column.maxThumbnails || 3;
+            const displayImages = imagesArray.slice(0, maxThumbnails);
+            const remainingCount = imagesArray.length - maxThumbnails;
+
+            const handleGalleryClick = (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+
+                // Prepare gallery data in the format expected by the modal
+                const galleryData = imagesArray.map((item) => ({
+                    src: item[column.key],
+                    caption: item[column.captionKey || 'file_name'],
+                    width: 320,
+                    height: 240,
+                }));
+
+                // Set gallery data and current item
+                setGalleryData(galleryData);
+                setCurrentItem({ 
+                    data: data, 
+                    settings: {
+                        relation: column.relation,
+                        key: column.key,
+                        captionKey: column.captionKey || 'file_name'
+                    }
+                });
+
+                // Open the gallery modal
+                modalGalleryOpen();
+            };
+
+            return (
+                <div
+                    onClick={handleGalleryClick}
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        gap: '6px',
+                        cursor: 'pointer',
+                        padding: '6px',
+                        borderRadius: '4px',
+                        transition: 'background-color 0.2s',
+                        width: '100%',
+                        height: '100%',
+                        minHeight: '60px',
+                    }}
+                    onMouseEnter={(e) => {
+                        e.target.style.backgroundColor = '#f0f0f0';
+                    }}
+                    onMouseLeave={(e) => {
+                        e.target.style.backgroundColor = 'transparent';
+                    }}
+                >
+                    {/* Thumbnail images */}
+                    <div
+                        style={{
+                            display: 'flex',
+                            gap: '4px',
+                            flexWrap: 'wrap',
+                        }}
+                    >
+                        {displayImages.map((image, index) => {
+                            const imageUrl = image[column.key];
+                            if (!imageUrl) return null;
+                            
+                            return (
+                                <div
+                                    key={index}
+                                    style={{
+                                        width: '28px',
+                                        height: '28px',
+                                        borderRadius: '3px',
+                                        overflow: 'hidden',
+                                        border: '1px solid #ddd',
+                                        flexShrink: 0,
+                                    }}
+                                >
+                                    <img
+                                        src={imageUrl}
+                                        alt={image[column.captionKey || 'file_name'] || `Image ${index + 1}`}
+                                        style={{
+                                            width: '100%',
+                                            height: '100%',
+                                            objectFit: 'cover',
+                                        }}
+                                        onError={(e) => {
+                                            e.target.style.display = 'none';
+                                        }}
+                                    />
+                                </div>
+                            );
+                        })}
+                    </div>
+                    
+                    {/* Count badge */}
+                    <div
+                        style={{
+                            fontSize: '11px',
+                            color: '#666',
+                            fontWeight: '500',
+                            lineHeight: '1.2',
+                        }}
+                    >
+                        {imagesArray.length} {imagesArray.length === 1 ? 'image' : 'images'}
+                        {remainingCount > 0 && ` (+${remainingCount})`}
+                    </div>
+                </div>
+            );
+        },
+    };
+};
+
 export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
     return {
         ...commonProps,