@visns-studio/visns-components 5.8.20 → 5.9.1

package/README.md

@@ -1375,6 +1375,155 @@ We welcome contributions! Please follow these steps:
 
 [MIT License](LICENSE)
 
+## Modal Actions in Components
+
+### Using Modal Actions in GenericQuote Component
+
+Modal actions allow you to open a form modal when a user clicks an action button. This is useful for collecting additional information from users or submitting data related to the quote.
+
+#### Implementation Methods
+
+There are two ways to implement this functionality:
+
+**1. Using the "addModal" type:**
+
+```javascript
+{
+  "id": "anyCustomId1",
+  "label": "Submit Form",
+  "type": "addModal",
+  "setting": {
+    // Form settings go here (see structure below)
+  }
+}
+```
+
+**2. Using the "modal" type (alternative approach):**
+
+```javascript
+{
+  "id": "anyCustomId2",
+  "label": "Submit Form",
+  "type": "modal",
+  "setting": {
+    // Form settings go here (see structure below)
+  }
+}
+```
+
+Both approaches are treated identically in the code.
+
+#### Form Settings Structure
+
+The `setting` property MUST follow this specific structure:
+
+```javascript
+"setting": {
+  // IMPORTANT: The 'create' property is required for the form to work properly
+  "create": {
+    "title": "Submit New Form",
+    "submitUrl": "/api/forms/submit",
+    "method": "POST"
+  },
+  // The 'fields' array is required to define the form fields
+  "fields": [
+    {
+      "id": "name",
+      "label": "Name",
+      "type": "text",
+      "required": "yes",
+      "size": "half"
+    },
+    {
+      "id": "email",
+      "label": "Email",
+      "type": "email",
+      "required": "yes",
+      "size": "half"
+    },
+    {
+      "id": "message",
+      "label": "Message",
+      "type": "textarea",
+      "required": "yes",
+      "size": "full"
+    }
+  ]
+}
+```
+
+#### Required Form Settings Properties
+
+-   `create`: Object containing settings for the create form (REQUIRED)
+
+    -   `title`: The title displayed at the top of the modal
+    -   `submitUrl`: The URL to submit the form data to
+    -   `method`: The HTTP method to use (POST, PUT, etc.)
+
+-   `fields`: Array of field objects that define the form fields (REQUIRED)
+    -   `id`: Unique identifier for the field
+    -   `label`: Display label for the field
+    -   `type`: Field type (text, email, textarea, select, etc.)
+    -   `required`: Whether the field is required ("yes" or "no")
+    -   `size`: Field size in the form layout ("full", "half", "quarter")
+    -   Additional properties depending on the field type
+
+## Troubleshooting
+
+### DataGrid Checkbox Issues
+
+#### Checkbox Cell Click Bug Fix
+
+**Problem:** Clicking anywhere within a checkbox cell (but outside the actual checkbox input) incorrectly cleared all other selected checkboxes, leaving only the clicked row selected.
+
+**Solution:** Enhanced click detection to distinguish between checkbox input clicks and cell area clicks. The fix ensures that both checkbox input clicks and cell area clicks behave identically - toggling only the specific row while maintaining all other selections.
+
+**Files Modified:**
+
+-   `src/components/crm/DataGrid.jsx` - Enhanced click handling logic
+-   `src/components/crm/styles/global-datagrid.css` - Improved cell styling
+
+#### Checkbox Improvements
+
+The DataGrid checkbox functionality has been enhanced with:
+
+-   Larger touch targets for better mobile usability
+-   Consistent behavior between input and cell area clicks
+-   Proper selection state management
+-   Improved visual feedback
+
+### Modal Action Troubleshooting
+
+If the modal doesn't open when clicking the action button, check the following:
+
+1. Make sure the action object has either:
+
+    - `id: "addModal"` or
+    - `type: "modal"`
+
+2. Check the browser console for any errors or debug messages
+
+3. **IMPORTANT**: Verify that the `setting` property has the REQUIRED structure:
+
+    - It MUST have a `create` object containing at least `title`, `submitUrl`, and `method`
+    - It MUST have a `fields` array with properly defined field objects
+
+4. If using the default form settings (without a custom `setting` property), make sure the component has valid form settings in its props.
+
+## Development Notes
+
+### DataGrid Layout Optimization
+
+The DataGrid component has been optimized for vertical space by conditionally relocating the auto refresh control when it's the sole UI control present. This provides better space utilization and cleaner interfaces.
+
+### Modal Alignment Implementation
+
+Modal components support vertical alignment configuration with the `verticalAlign` property. Setting `verticalAlign: 'top'` positions modals at 5vh from the top of the viewport for better user experience.
+
+### Grouping Investigation Results
+
+The ReactDataGrid's `defaultGroupBy` prop enables internal grouping functionality that creates collapsible group headers within the table structure. It does NOT create any external UI elements that need relocation, as all grouping controls are internal to the table component.
+
 ## Support
 
 For support, please contact the VISNS Studio team or open an issue on GitHub.

package/package.json

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