@visns-studio/visns-components 5.12.0 → 5.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +191 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -625,6 +625,197 @@ You can add summary calculations to grouped data:
|
|
|
625
625
|
/>
|
|
626
626
|
```
|
|
627
627
|
|
|
628
|
+
### Group-Level Bulk Edit Operations (Enhanced v5.13.0+)
|
|
629
|
+
|
|
630
|
+
The DataGrid component now supports powerful bulk editing capabilities through group-based operations, allowing users to efficiently manage multiple items simultaneously.
|
|
631
|
+
|
|
632
|
+
#### How Group Bulk Edit Works
|
|
633
|
+
|
|
634
|
+
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.
|
|
635
|
+
|
|
636
|
+
#### Configuration Structure
|
|
637
|
+
|
|
638
|
+
Group operations are configured through the `ajaxSetting.groupBySetting.icons` array:
|
|
639
|
+
|
|
640
|
+
```jsx
|
|
641
|
+
<DataGrid
|
|
642
|
+
ajaxSetting={{
|
|
643
|
+
url: '/api/data',
|
|
644
|
+
groupBy: ['category'],
|
|
645
|
+
groupBySetting: {
|
|
646
|
+
icons: [
|
|
647
|
+
{
|
|
648
|
+
id: 'edit',
|
|
649
|
+
label: 'Edit Group',
|
|
650
|
+
formModal: {
|
|
651
|
+
title: 'Bulk Edit Items',
|
|
652
|
+
url: '/ajax/data/bulkFormUpdate',
|
|
653
|
+
method: 'POST',
|
|
654
|
+
groupKey: 'category',
|
|
655
|
+
fields: ['assigned_user_id', 'status'],
|
|
656
|
+
data: {
|
|
657
|
+
stage: 'processing'
|
|
658
|
+
}
|
|
659
|
+
},
|
|
660
|
+
show: [
|
|
661
|
+
{
|
|
662
|
+
id: 'status',
|
|
663
|
+
value: 'pending'
|
|
664
|
+
}
|
|
665
|
+
]
|
|
666
|
+
}
|
|
667
|
+
]
|
|
668
|
+
}
|
|
669
|
+
}}
|
|
670
|
+
// Other props...
|
|
671
|
+
/>
|
|
672
|
+
```
|
|
673
|
+
|
|
674
|
+
#### Configuration Properties
|
|
675
|
+
|
|
676
|
+
**Icon Configuration:**
|
|
677
|
+
- `id`: Must be set to `'edit'` to enable bulk edit functionality
|
|
678
|
+
- `label`: Display text for the action button
|
|
679
|
+
- `formModal`: Configuration object for the bulk edit form
|
|
680
|
+
- `show`: Optional conditions to control when the icon appears
|
|
681
|
+
|
|
682
|
+
**Form Modal Configuration:**
|
|
683
|
+
- `title`: Title displayed in the bulk edit modal
|
|
684
|
+
- `url`: API endpoint for bulk update requests
|
|
685
|
+
- `method`: HTTP method (typically 'POST')
|
|
686
|
+
- `groupKey`: Field name used for grouping (matches the groupBy value)
|
|
687
|
+
- `fields`: Array of field IDs that can be bulk edited
|
|
688
|
+
- `data`: Additional data to send with the bulk update request
|
|
689
|
+
|
|
690
|
+
#### Form Integration
|
|
691
|
+
|
|
692
|
+
The bulk edit feature integrates seamlessly with the existing Form component. When the edit icon is clicked:
|
|
693
|
+
|
|
694
|
+
1. A form modal opens with the specified title
|
|
695
|
+
2. Only the fields listed in the `fields` array are displayed
|
|
696
|
+
3. The form shows an indication that this is a bulk operation
|
|
697
|
+
4. On submission, all items in the group are updated simultaneously
|
|
698
|
+
|
|
699
|
+
#### Backend Integration
|
|
700
|
+
|
|
701
|
+
The bulk edit functionality expects a specific API endpoint structure:
|
|
702
|
+
|
|
703
|
+
```javascript
|
|
704
|
+
// POST /ajax/data/bulkFormUpdate
|
|
705
|
+
{
|
|
706
|
+
"bulkEdit": true,
|
|
707
|
+
"groupValue": "Category Name",
|
|
708
|
+
"groupKey": "category",
|
|
709
|
+
"rowIds": [1, 2, 3, 4],
|
|
710
|
+
"assigned_user_id": 5,
|
|
711
|
+
"status": "in_progress",
|
|
712
|
+
// Additional form fields...
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
// Expected Response:
|
|
716
|
+
{
|
|
717
|
+
"error": "",
|
|
718
|
+
"message": "Bulk update completed successfully",
|
|
719
|
+
"data": {
|
|
720
|
+
"updated_count": 4,
|
|
721
|
+
"group_value": "Category Name",
|
|
722
|
+
"updated_items": [...]
|
|
723
|
+
}
|
|
724
|
+
}
|
|
725
|
+
```
|
|
726
|
+
|
|
727
|
+
#### Features and Benefits
|
|
728
|
+
|
|
729
|
+
**User Experience:**
|
|
730
|
+
- **No Confirmation Dialog**: Edit actions open the form immediately (unlike timer operations)
|
|
731
|
+
- **No Toast Notifications**: Silent operation that focuses on the form interaction
|
|
732
|
+
- **Visual Group Context**: Modal title includes group information and item count
|
|
733
|
+
- **Field Filtering**: Only relevant fields are shown for bulk editing
|
|
734
|
+
|
|
735
|
+
**Technical Features:**
|
|
736
|
+
- **Transaction Safety**: All updates wrapped in database transactions
|
|
737
|
+
- **Partial Updates**: Only changed fields are updated
|
|
738
|
+
- **Audit Trail**: Full change tracking for compliance
|
|
739
|
+
- **Error Handling**: Graceful handling of validation errors and conflicts
|
|
740
|
+
- **Performance Optimized**: Efficient bulk operations with minimal database calls
|
|
741
|
+
|
|
742
|
+
#### Advanced Example
|
|
743
|
+
|
|
744
|
+
```jsx
|
|
745
|
+
// Manufacturing workflow with bulk edit capabilities
|
|
746
|
+
<DataGrid
|
|
747
|
+
ajaxSetting={{
|
|
748
|
+
url: '/ajax/manufacturing/items',
|
|
749
|
+
groupBy: ['work_order'],
|
|
750
|
+
groupBySetting: {
|
|
751
|
+
icons: [
|
|
752
|
+
// Bulk edit for user assignment
|
|
753
|
+
{
|
|
754
|
+
id: 'edit',
|
|
755
|
+
label: 'Assign Operator',
|
|
756
|
+
formModal: {
|
|
757
|
+
title: 'Bulk Assign Operator',
|
|
758
|
+
url: '/ajax/manufacturing/bulkAssign',
|
|
759
|
+
method: 'POST',
|
|
760
|
+
groupKey: 'work_order',
|
|
761
|
+
fields: ['operator_id', 'priority'],
|
|
762
|
+
data: {
|
|
763
|
+
stage: 'production',
|
|
764
|
+
update_type: 'assignment'
|
|
765
|
+
}
|
|
766
|
+
},
|
|
767
|
+
show: [
|
|
768
|
+
{ id: 'status', value: 'ready' }
|
|
769
|
+
]
|
|
770
|
+
},
|
|
771
|
+
// Timer operations (existing functionality)
|
|
772
|
+
{
|
|
773
|
+
id: 'clock',
|
|
774
|
+
label: 'Start Production',
|
|
775
|
+
fetch: {
|
|
776
|
+
url: '/ajax/manufacturing/groupTimer',
|
|
777
|
+
method: 'POST',
|
|
778
|
+
data: {
|
|
779
|
+
action: 'start_production',
|
|
780
|
+
timestamp: 'now()'
|
|
781
|
+
}
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
]
|
|
785
|
+
}
|
|
786
|
+
}}
|
|
787
|
+
columns={[
|
|
788
|
+
{ name: 'item_code', headerName: 'Item Code' },
|
|
789
|
+
{ name: 'operator', headerName: 'Operator' },
|
|
790
|
+
{ name: 'status', headerName: 'Status' },
|
|
791
|
+
{ name: 'priority', headerName: 'Priority' }
|
|
792
|
+
]}
|
|
793
|
+
form={{
|
|
794
|
+
fields: [
|
|
795
|
+
{
|
|
796
|
+
id: 'operator_id',
|
|
797
|
+
label: 'Production Operator',
|
|
798
|
+
type: 'dropdown-ajax',
|
|
799
|
+
url: '/ajax/users/operators',
|
|
800
|
+
required: true
|
|
801
|
+
},
|
|
802
|
+
{
|
|
803
|
+
id: 'priority',
|
|
804
|
+
label: 'Priority Level',
|
|
805
|
+
type: 'select',
|
|
806
|
+
options: [
|
|
807
|
+
{ value: 'normal', label: 'Normal' },
|
|
808
|
+
{ value: 'high', label: 'High' },
|
|
809
|
+
{ value: 'urgent', label: 'Urgent' }
|
|
810
|
+
]
|
|
811
|
+
}
|
|
812
|
+
]
|
|
813
|
+
}}
|
|
814
|
+
/>
|
|
815
|
+
```
|
|
816
|
+
|
|
817
|
+
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.
|
|
818
|
+
|
|
628
819
|
##### Customizing Group Rendering
|
|
629
820
|
|
|
630
821
|
You can customize how groups are displayed:
|
package/package.json
CHANGED
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"@tinymce/miniature": "^6.0.0",
|
|
15
15
|
"@tinymce/tinymce-react": "^6.2.1",
|
|
16
16
|
"@uiw/react-color": "^2.6.0",
|
|
17
|
-
"@visns-studio/visns-datagrid-community": "
|
|
18
|
-
"@visns-studio/visns-datagrid-enterprise": "
|
|
17
|
+
"@visns-studio/visns-datagrid-community": "1.1.0",
|
|
18
|
+
"@visns-studio/visns-datagrid-enterprise": "1.1.0",
|
|
19
19
|
"@vitejs/plugin-react": "^4.6.0",
|
|
20
20
|
"add": "^2.0.6",
|
|
21
21
|
"array-move": "^4.0.0",
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
88
88
|
},
|
|
89
89
|
"name": "@visns-studio/visns-components",
|
|
90
|
-
"version": "5.12.
|
|
90
|
+
"version": "5.12.1",
|
|
91
91
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
92
92
|
"main": "src/index.js",
|
|
93
93
|
"files": [
|