@visns-studio/visns-components 5.11.22 → 5.12.1

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.11.22",
+    "version": "5.12.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -275,6 +275,8 @@ const DataGrid = forwardRef(
         const [formType, setFormType] = useState('');
         const [formId, setFormId] = useState(0);
         const [modalShow, setModalShow] = useState(false);
+        const [bulkEditMode, setBulkEditMode] = useState(false);
+        const [bulkEditGroupData, setBulkEditGroupData] = useState(null);
 
         /** Modal Functions */
         const modalOpen = (formType, formId) => {
@@ -285,6 +287,8 @@ const DataGrid = forwardRef(
 
         const modalClose = () => {
             setModalShow(false);
+            setBulkEditMode(false);
+            setBulkEditGroupData(null);
         };
 
         useEffect(() => {
@@ -1209,7 +1213,13 @@ const DataGrid = forwardRef(
             // Get all rows for this group
             const groupRows = getGroupRows(groupValue);
 
-            // Show confirmation dialog to prevent accidental clicks
+            // Skip confirmation dialog for edit actions - open modal directly
+            if (iconConfig.id === 'edit' && iconConfig.formModal) {
+                executeGroupAction(groupValue, iconConfig);
+                return;
+            }
+
+            // Show confirmation dialog for other actions to prevent accidental clicks
             const confirmMessage = `Are you sure you want to perform "${iconConfig.label}" action on group "${groupValue}" (${groupRows.length} rows)?`;
 
             confirmDialog({
@@ -1310,7 +1320,10 @@ const DataGrid = forwardRef(
                 }
             } else {
                 // Fallback to existing switch logic if no fetch config
-                toast.info(`${iconConfig.label} - Group: ${groupValue}`);
+                // Skip toast notification for edit actions
+                if (iconConfig.id !== 'edit') {
+                    toast.info(`${iconConfig.label} - Group: ${groupValue}`);
+                }
 
                 switch (iconConfig.id) {
                     case 'clock':
@@ -1329,9 +1342,28 @@ const DataGrid = forwardRef(
                         );
                         break;
                     case 'edit':
-                        console.log(
-                            `Bulk edit action for group: ${groupValue}`
-                        );
+                        // Handle bulk edit action
+                        if (iconConfig.formModal) {
+                            // Get all rows in the group for bulk editing
+                            const groupRows = getGroupRows(groupValue);
+                            const groupRowIds = groupRows.map(row => row[form?.primaryKey || 'id']);
+                            
+                            // Set bulk edit data
+                            setBulkEditMode(true);
+                            setBulkEditGroupData({
+                                groupValue: groupValue,
+                                groupRows: groupRows,
+                                groupRowIds: groupRowIds,
+                                iconConfig: iconConfig
+                            });
+                            
+                            // Open modal for bulk editing
+                            modalOpen('update', null);
+                        } else {
+                            console.log(
+                                `Bulk edit action for group: ${groupValue}`
+                            );
+                        }
                         break;
                     case 'envelope':
                         console.log(
@@ -3621,6 +3653,8 @@ const DataGrid = forwardRef(
                                 style={style}
                                 updateForm={setFormData}
                                 userProfile={userProfile}
+                                bulkEditMode={bulkEditMode}
+                                bulkEditGroupData={bulkEditGroupData}
                             />
                         </div>
                     </div>

package/src/components/Form.jsx

@@ -80,6 +80,8 @@ function Form({
     type,
     updateForm,
     userProfile,
+    bulkEditMode = false,
+    bulkEditGroupData = null,
 }) {
     const navigate = useNavigate();
     const [fetchTrigger, setFetchTrigger] = useState(false);
@@ -888,34 +890,42 @@ function Form({
                             }
                             method = formSettings.customMethod;
                         } else {
-                            switch (formType) {
-                                case 'create':
-                                    if (formSettings.json) {
-                                        url += '/json/store';
-                                    }
-                                    break;
-                                case 'update':
-                                case 'delete':
-                                    if (formSettings.json) {
-                                        url +=
+                            // Check if this is bulk edit mode
+                            if (bulkEditMode && bulkEditGroupData?.iconConfig?.formModal) {
+                                // Use bulk edit endpoint configuration
+                                const formModalConfig = bulkEditGroupData.iconConfig.formModal;
+                                url = formModalConfig.url || url;
+                                method = formModalConfig.method || 'POST';
+                            } else {
+                                switch (formType) {
+                                    case 'create':
+                                        if (formSettings.json) {
+                                            url += '/json/store';
+                                        }
+                                        break;
+                                    case 'update':
+                                    case 'delete':
+                                        if (formSettings.json) {
+                                            url +=
+                                                formType === 'update'
+                                                    ? '/json/update'
+                                                    : `/json/delete/${
+                                                          formData[
+                                                              formSettings
+                                                                  .primaryKey
+                                                          ]
+                                                      }`;
+                                        } else {
+                                            url += `/${
+                                                formData[formSettings.primaryKey]
+                                            }`;
+                                        }
+                                        method =
                                             formType === 'update'
-                                                ? '/json/update'
-                                                : `/json/delete/${
-                                                      formData[
-                                                          formSettings
-                                                              .primaryKey
-                                                      ]
-                                                  }`;
-                                    } else {
-                                        url += `/${
-                                            formData[formSettings.primaryKey]
-                                        }`;
-                                    }
-                                    method =
-                                        formType === 'update'
-                                            ? 'PUT'
-                                            : 'DELETE';
-                                    break;
+                                                ? 'PUT'
+                                                : 'DELETE';
+                                        break;
+                                }
                             }
                         }
 
@@ -1046,7 +1056,7 @@ function Form({
                         }
 
                         // Transform keys with dots into nested objects
-                        const payload = Object.keys(updatedFormData).reduce(
+                        let payload = Object.keys(updatedFormData).reduce(
                             (acc, key) => {
                                 if (key.includes('.')) {
                                     const [root, sub] = key.split('.');
@@ -1060,6 +1070,18 @@ function Form({
                             {}
                         );
 
+                        // Add bulk edit data to payload if in bulk edit mode
+                        if (bulkEditMode && bulkEditGroupData) {
+                            payload = {
+                                ...payload,
+                                bulkEdit: true,
+                                groupValue: bulkEditGroupData.groupValue,
+                                groupKey: bulkEditGroupData.iconConfig.formModal?.groupKey || ajaxSetting?.groupBy?.[0],
+                                rowIds: bulkEditGroupData.groupRowIds,
+                                ...bulkEditGroupData.iconConfig.formModal?.data
+                            };
+                        }
+
                         const res = await CustomFetch(url, method, payload);
 
                         if (res.data.error === '') {
@@ -2233,7 +2255,12 @@ function Form({
             <div className={styles.modalwrap}>
                 <div className={styles.modal}>
                     <div className={styles.modal__header}>
-                        <h1>{formSettings[formType]?.title}</h1>
+                        <h1>
+                            {bulkEditMode && bulkEditGroupData
+                                ? `${bulkEditGroupData.iconConfig.formModal?.title || 'Bulk Edit'} - ${bulkEditGroupData.groupValue} (${bulkEditGroupData.groupRows.length} items)`
+                                : formSettings[formType]?.title
+                            }
+                        </h1>
                         <button
                             className={styles.modal__close}
                             onClick={closeModal}
@@ -2265,6 +2292,14 @@ function Form({
                                     ) {
                                         return null;
                                     }
+                                    // 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)
+                                    ) {
+                                        return null;
+                                    }
 
                                     return (
                                         <Field

package/src/utils/ConfirmDialog.jsx

@@ -46,7 +46,7 @@ export const confirmDialog = ({
                     }}
                     style={{
                         padding: '6px 12px',
-                        background: '#d32f2f',
+                        background: '#2563eb',
                         color: 'white',
                         border: 'none',
                         borderRadius: '4px',