@visns-studio/visns-components 5.12.0 → 5.12.2

package/README.md

@@ -625,6 +625,197 @@ You can add summary calculations to grouped data:
 />
 ```
 
+### Group-Level Bulk Edit Operations (Enhanced v5.13.0+)
+
+The DataGrid component now supports powerful bulk editing capabilities through group-based operations, allowing users to efficiently manage multiple items simultaneously.
+
+#### How Group Bulk Edit Works
+
+When data is grouped using the `groupBy` or `defaultGroupBy` properties, each group header can display action icons for common operations. The new bulk edit functionality adds an "edit" icon that opens a form modal for updating all items in the group simultaneously.
+
+#### Configuration Structure
+
+Group operations are configured through the `ajaxSetting.groupBySetting.icons` array:
+
+```jsx
+<DataGrid
+    ajaxSetting={{
+        url: '/api/data',
+        groupBy: ['category'],
+        groupBySetting: {
+            icons: [
+                {
+                    id: 'edit',
+                    label: 'Edit Group',
+                    formModal: {
+                        title: 'Bulk Edit Items',
+                        url: '/ajax/data/bulkFormUpdate',
+                        method: 'POST',
+                        groupKey: 'category',
+                        fields: ['assigned_user_id', 'status'],
+                        data: {
+                            stage: 'processing'
+                        }
+                    },
+                    show: [
+                        {
+                            id: 'status',
+                            value: 'pending'
+                        }
+                    ]
+                }
+            ]
+        }
+    }}
+    // Other props...
+/>
+```
+
+#### Configuration Properties
+
+**Icon Configuration:**
+- `id`: Must be set to `'edit'` to enable bulk edit functionality
+- `label`: Display text for the action button
+- `formModal`: Configuration object for the bulk edit form
+- `show`: Optional conditions to control when the icon appears
+
+**Form Modal Configuration:**
+- `title`: Title displayed in the bulk edit modal
+- `url`: API endpoint for bulk update requests
+- `method`: HTTP method (typically 'POST')
+- `groupKey`: Field name used for grouping (matches the groupBy value)
+- `fields`: Array of field IDs that can be bulk edited
+- `data`: Additional data to send with the bulk update request
+
+#### Form Integration
+
+The bulk edit feature integrates seamlessly with the existing Form component. When the edit icon is clicked:
+
+1. A form modal opens with the specified title
+2. Only the fields listed in the `fields` array are displayed
+3. The form shows an indication that this is a bulk operation
+4. On submission, all items in the group are updated simultaneously
+
+#### Backend Integration
+
+The bulk edit functionality expects a specific API endpoint structure:
+
+```javascript
+// POST /ajax/data/bulkFormUpdate
+{
+    "bulkEdit": true,
+    "groupValue": "Category Name",
+    "groupKey": "category", 
+    "rowIds": [1, 2, 3, 4],
+    "assigned_user_id": 5,
+    "status": "in_progress",
+    // Additional form fields...
+}
+
+// Expected Response:
+{
+    "error": "",
+    "message": "Bulk update completed successfully",
+    "data": {
+        "updated_count": 4,
+        "group_value": "Category Name",
+        "updated_items": [...]
+    }
+}
+```
+
+#### Features and Benefits
+
+**User Experience:**
+- **No Confirmation Dialog**: Edit actions open the form immediately (unlike timer operations)
+- **No Toast Notifications**: Silent operation that focuses on the form interaction
+- **Visual Group Context**: Modal title includes group information and item count
+- **Field Filtering**: Only relevant fields are shown for bulk editing
+
+**Technical Features:**
+- **Transaction Safety**: All updates wrapped in database transactions
+- **Partial Updates**: Only changed fields are updated
+- **Audit Trail**: Full change tracking for compliance
+- **Error Handling**: Graceful handling of validation errors and conflicts
+- **Performance Optimized**: Efficient bulk operations with minimal database calls
+
+#### Advanced Example
+
+```jsx
+// Manufacturing workflow with bulk edit capabilities
+<DataGrid
+    ajaxSetting={{
+        url: '/ajax/manufacturing/items',
+        groupBy: ['work_order'],
+        groupBySetting: {
+            icons: [
+                // Bulk edit for user assignment
+                {
+                    id: 'edit',
+                    label: 'Assign Operator',
+                    formModal: {
+                        title: 'Bulk Assign Operator',
+                        url: '/ajax/manufacturing/bulkAssign',
+                        method: 'POST',
+                        groupKey: 'work_order',
+                        fields: ['operator_id', 'priority'],
+                        data: {
+                            stage: 'production',
+                            update_type: 'assignment'
+                        }
+                    },
+                    show: [
+                        { id: 'status', value: 'ready' }
+                    ]
+                },
+                // Timer operations (existing functionality)
+                {
+                    id: 'clock',
+                    label: 'Start Production',
+                    fetch: {
+                        url: '/ajax/manufacturing/groupTimer',
+                        method: 'POST',
+                        data: {
+                            action: 'start_production',
+                            timestamp: 'now()'
+                        }
+                    }
+                }
+            ]
+        }
+    }}
+    columns={[
+        { name: 'item_code', headerName: 'Item Code' },
+        { name: 'operator', headerName: 'Operator' },
+        { name: 'status', headerName: 'Status' },
+        { name: 'priority', headerName: 'Priority' }
+    ]}
+    form={{
+        fields: [
+            {
+                id: 'operator_id',
+                label: 'Production Operator',
+                type: 'dropdown-ajax',
+                url: '/ajax/users/operators',
+                required: true
+            },
+            {
+                id: 'priority',
+                label: 'Priority Level',
+                type: 'select',
+                options: [
+                    { value: 'normal', label: 'Normal' },
+                    { value: 'high', label: 'High' },
+                    { value: 'urgent', label: 'Urgent' }
+                ]
+            }
+        ]
+    }}
+/>
+```
+
+This implementation provides a powerful and intuitive way to manage bulk operations in grouped data scenarios, significantly improving workflow efficiency for users managing large datasets.
+
 ##### Customizing Group Rendering
 
 You can customize how groups are displayed:

package/package.json

@@ -14,8 +14,8 @@
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.2.1",
         "@uiw/react-color": "^2.6.0",
-        "@visns-studio/visns-datagrid-community": "^1.0.23",
-        "@visns-studio/visns-datagrid-enterprise": "^1.0.23",
+        "@visns-studio/visns-datagrid-community": "1.1.0",
+        "@visns-studio/visns-datagrid-enterprise": "1.1.0",
         "@vitejs/plugin-react": "^4.6.0",
         "add": "^2.0.6",
         "array-move": "^4.0.0",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.12.0",
+    "version": "5.12.2",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Field.jsx

@@ -1027,7 +1027,7 @@ function Field({
                                                     <div className={styles['file-image-preview']}>
                                                         <img
                                                             src={fileImageSrc}
-                                                            alt={file.name || file.file_name || 'Preview'}
+                                                            alt={file.name || file.file_name || file.filename || 'Preview'}
                                                             className={styles['file-thumbnail']}
                                                             onError={(e) => {
                                                                 e.target.style.display = 'none';
@@ -1050,6 +1050,7 @@ function Field({
                                                 <span className={styles['file-name']}>
                                                     {file.name ||
                                                         file.file_name ||
+                                                        file.filename ||
                                                         ''}
                                                 </span>
                                                 
@@ -1107,7 +1108,7 @@ function Field({
                                     {inputValue ? getFileIcon(inputValue) : '📁'}
                                 </span>
                                 <span className={styles['file-button-text']}>
-                                    {inputValue?.filename || inputValue?.name
+                                    {inputValue?.filename || inputValue?.name || inputValue?.file_name
                                         ? isImage 
                                             ? 'Replace Image...'
                                             : 'Replace File...'
@@ -1133,7 +1134,7 @@ function Field({
                                         <div className={styles['image-preview-container']}>
                                             <img
                                                 src={imageSrc}
-                                                alt={inputValue.filename || inputValue.name || 'Preview'}
+                                                alt={inputValue.filename || inputValue.name || inputValue.file_name || 'Preview'}
                                                 className={styles['image-preview']}
                                                 onError={(e) => {
                                                     e.target.style.display = 'none';
@@ -1145,14 +1146,14 @@ function Field({
                                     
                                     <div className={styles['file-details']}>
                                         <span className={styles['file-name-display']}>
-                                            {inputValue.filename || inputValue.name || ''}
+                                            {inputValue.filename || inputValue.name || inputValue.file_name || ''}
                                         </span>
                                         
-                                        {inputValue.key && inputValue.uuid && (
+                                        {((inputValue.key && inputValue.uuid) || inputValue.file_url || inputValue.file_path || inputValue.id) && (
                                             <button
                                                 className={styles['download-button']}
                                                 data-tooltip-id="system-tooltip"
-                                                data-tooltip-content={`Download ${inputValue.filename || inputValue.name}`}
+                                                data-tooltip-content={`Download ${inputValue.filename || inputValue.name || inputValue.file_name}`}
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     onFileDownload(inputValue);

package/src/components/Form.jsx

@@ -443,11 +443,65 @@ function Form({
         }
     };
 
-    const handleFileDownload = async (d) => {
+    const handleFileDownload = async (fileData) => {
         try {
-            console.info(d);
+            console.info('File download data:', fileData);
+            
+            if (!fileData) {
+                toast.error('No file data available for download');
+                return;
+            }
+
+            // Handle different file data structures
+            let downloadUrl = null;
+            let fileName = fileData.filename || fileData.name || fileData.file_name || 'download';
+
+            // Priority order for download methods:
+            // 1. Direct file URL (S3, CDN, etc.)
+            if (fileData.file_url) {
+                downloadUrl = fileData.file_url;
+            }
+            // 2. File path (construct URL if needed)
+            else if (fileData.file_path || fileData.file_full_path) {
+                const filePath = fileData.file_full_path || fileData.file_path;
+                // If it's already a full URL, use it directly
+                if (filePath.startsWith('http')) {
+                    downloadUrl = filePath;
+                } else {
+                    // Construct URL - adjust this based on your API structure
+                    downloadUrl = `/api/files/download?path=${encodeURIComponent(filePath)}`;
+                }
+            }
+            // 3. Legacy key/uuid method
+            else if (fileData.key && fileData.uuid) {
+                downloadUrl = `/api/files/download/${fileData.uuid}/${fileData.key}`;
+            }
+            // 4. File ID method
+            else if (fileData.id) {
+                downloadUrl = `/api/files/download/${fileData.id}`;
+            }
+            
+            if (!downloadUrl) {
+                toast.error('Unable to determine download URL for this file');
+                return;
+            }
+
+            // Create a temporary anchor element to trigger download
+            const link = document.createElement('a');
+            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(error);
+            console.error('File download error:', error);
+            toast.error('Failed to download file');
         }
     };
 
@@ -1721,6 +1775,7 @@ function Form({
                                             handleChangeSignature
                                         }
                                         onChangeToggle={handleChangeToggle}
+                                        onFileDownload={handleFileDownload}
                                         settings={item}
                                         setFormData={setFormData}
                                         style={style}

package/src/components/generic/GenericReportForm.jsx

@@ -163,6 +163,7 @@ const GenericReportForm = ({ config, userProfile, onExport, onFormChange }) => {
                             onChangeRicheditor={() => {}}
                             onChangeSelect={handleChangeSelect}
                             onChangeToggle={() => {}}
+                            onFileDownload={() => console.warn('File download not implemented in GenericReportForm')}
                             settings={item}
                             setFormData={setFormData}
                             style={userProfile?.settings?.style}