@visns-studio/visns-components 5.8.19 → 5.9.0

package/src/examples/ImprovedCheckboxDataGrid.jsx

@@ -0,0 +1,269 @@
+import React, { useState } from 'react';
+import DataGrid from '../components/crm/DataGrid';
+
+/**
+ * Example demonstrating the improved checkbox column functionality in DataGrid
+ *
+ * Key improvements:
+ * 1. Larger touch targets for mobile devices
+ * 2. Fixed unintended "uncheck all" behavior when clicking empty space
+ * 3. Better visual feedback for clickable areas
+ * 4. Maintained existing selection functionality
+ */
+const ImprovedCheckboxDataGrid = () => {
+    const [rowsSelected, setRowsSelected] = useState({});
+    const [tableData, setTableData] = useState([]);
+    const [total, setTotal] = useState(0);
+
+    // Example configuration with checkbox functionality enabled
+    const exampleConfig = {
+        ajaxSetting: {
+            url: '/api/example/data',
+            take: 25,
+            sortBy: 'id',
+            sort: 'desc',
+            where: [],
+        },
+        columns: [
+            {
+                id: 'id',
+                label: 'ID',
+                type: 'text',
+                minWidth: 80,
+                maxWidth: 80,
+            },
+            {
+                id: 'name',
+                label: 'Name',
+                type: 'text',
+                flex: 1,
+            },
+            {
+                id: 'email',
+                label: 'Email',
+                type: 'text',
+                flex: 1,
+            },
+            {
+                id: 'status',
+                label: 'Status',
+                type: 'text',
+                minWidth: 100,
+                maxWidth: 100,
+            },
+        ],
+        settings: [
+            {
+                id: 'edit',
+                label: 'Edit',
+                icon: 'edit',
+                url: '/edit/{id}',
+            },
+            {
+                id: 'delete',
+                label: 'Delete',
+                icon: 'delete',
+                url: '/delete/{id}',
+                method: 'DELETE',
+            },
+        ],
+        // Enable checkbox column functionality
+        tableSetting: {
+            checkboxColumn: true,
+            enableSelection: true,
+        },
+        functions: {
+            checkboxUpdate: {
+                url: '/api/bulk-update',
+                method: 'POST',
+                data: {},
+                message: {
+                    warning: 'Please select at least one item to update.',
+                    success: 'Items updated successfully!',
+                    error: 'Failed to update items.',
+                },
+                label: 'Update Selected',
+            },
+            checkboxDelete: {
+                url: '/api/bulk-delete',
+                method: 'DELETE',
+                data: {},
+                message: {
+                    warning: 'Please select at least one item to delete.',
+                    success: 'Items deleted successfully!',
+                    error: 'Failed to delete items.',
+                },
+                label: 'Delete Selected',
+            },
+        },
+    };
+
+    const handleBulkUpdate = () => {
+        const selectedCount = Object.keys(rowsSelected).length;
+        console.log(
+            `Bulk update triggered for ${selectedCount} items:`,
+            rowsSelected
+        );
+        // In a real implementation, this would call the API
+    };
+
+    const handleBulkDelete = () => {
+        const selectedCount = Object.keys(rowsSelected).length;
+        console.log(
+            `Bulk delete triggered for ${selectedCount} items:`,
+            rowsSelected
+        );
+        // In a real implementation, this would call the API
+    };
+
+    return (
+        <div style={{ padding: '20px' }}>
+            <h2>Improved Checkbox DataGrid Example</h2>
+
+            <div style={{ marginBottom: '20px' }}>
+                <h3>Key Improvements:</h3>
+                <ul>
+                    <li>
+                        <strong>Fixed checkbox cell clicks:</strong> Clicking
+                        anywhere in a checkbox cell (including empty space) now
+                        properly toggles ONLY that row
+                    </li>
+                    <li>
+                        <strong>Eliminated "clear all" bug:</strong> No more
+                        accidental clearing of all selections when clicking
+                        checkbox cell areas
+                    </li>
+                    <li>
+                        <strong>Consistent toggle behavior:</strong> Both
+                        checkbox input clicks and cell area clicks now behave
+                        identically
+                    </li>
+                    <li>
+                        <strong>Multiple selection support:</strong> Can
+                        properly select/deselect individual rows when multiple
+                        rows are already selected
+                    </li>
+                    <li>
+                        <strong>Header-only bulk actions:</strong>{' '}
+                        Select/unselect all only works from header checkbox
+                    </li>
+                    <li>
+                        <strong>Touch-friendly targets:</strong> Larger
+                        clickable areas for mobile devices
+                    </li>
+                </ul>
+            </div>
+
+            <div style={{ marginBottom: '20px' }}>
+                <p>
+                    <strong>Selected items:</strong>{' '}
+                    {Object.keys(rowsSelected).length}
+                </p>
+                {Object.keys(rowsSelected).length > 0 && (
+                    <div style={{ display: 'flex', gap: '10px' }}>
+                        <button
+                            onClick={handleBulkUpdate}
+                            style={{
+                                padding: '8px 16px',
+                                backgroundColor: '#3b82f6',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                            }}
+                        >
+                            Update Selected ({Object.keys(rowsSelected).length})
+                        </button>
+                        <button
+                            onClick={handleBulkDelete}
+                            style={{
+                                padding: '8px 16px',
+                                backgroundColor: '#ef4444',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                            }}
+                        >
+                            Delete Selected ({Object.keys(rowsSelected).length})
+                        </button>
+                    </div>
+                )}
+            </div>
+
+            <div
+                style={{
+                    border: '1px solid #d1d5db',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                }}
+            >
+                <DataGrid
+                    {...exampleConfig}
+                    setRowsSelected={setRowsSelected}
+                    setTableData={setTableData}
+                    setTotal={setTotal}
+                    gridHeight={400}
+                />
+            </div>
+
+            <div
+                style={{
+                    marginTop: '20px',
+                    fontSize: '14px',
+                    color: '#6b7280',
+                }}
+            >
+                <h4>Testing Instructions:</h4>
+                <ol>
+                    <li>
+                        <strong>Test checkbox input clicks:</strong> Click
+                        directly on checkbox inputs - should toggle individual
+                        rows
+                    </li>
+                    <li>
+                        <strong>Test cell area clicks:</strong> Click on empty
+                        space within checkbox cells - should behave identically
+                        to checkbox clicks
+                    </li>
+                    <li>
+                        <strong>Test multiple selections:</strong> Select 2-3
+                        rows, then try to deselect individual rows - should work
+                        properly
+                    </li>
+                    <li>
+                        <strong>Test header checkbox:</strong> Click header
+                        checkbox to select/unselect ALL rows
+                    </li>
+                    <li>
+                        <strong>Test mixed interactions:</strong> Mix checkbox
+                        input clicks and cell area clicks - should behave
+                        consistently
+                    </li>
+                    <li>
+                        <strong>Touch devices:</strong> Verify larger touch
+                        targets work properly on mobile devices
+                    </li>
+                </ol>
+
+                <h4>Expected Behavior:</h4>
+                <ul>
+                    <li>
+                        ✅ Clicking any part of a checkbox cell toggles that
+                        specific row
+                    </li>
+                    <li>
+                        ✅ Header checkbox controls select/unselect all
+                        functionality
+                    </li>
+                    <li>✅ No more unexpected "uncheck all" behavior</li>
+                    <li>
+                        ✅ Consistent behavior across desktop and mobile devices
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default ImprovedCheckboxDataGrid;

package/src/examples/MultiSelectStylingTest.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import MultiSelect from '../components/crm/MultiSelect';
+
+function MultiSelectStylingTest() {
+    const [selectedValues, setSelectedValues] = useState([]);
+    
+    const options = [
+        { id: 1, label: 'Customer Service Representative' },
+        { id: 2, label: 'Dashboard Administrator' },
+        { id: 3, label: 'Project Manager' },
+        { id: 4, label: 'Technical Support Specialist' },
+        { id: 5, label: 'Sales Representative' },
+        { id: 6, label: 'Quality Assurance Analyst' },
+        { id: 7, label: 'Business Development Manager' },
+        { id: 8, label: 'Software Engineer' }
+    ];
+    
+    const handleChange = (values) => {
+        setSelectedValues(values);
+    };
+    
+    return (
+        <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
+            <h1>MultiSelect Styling Test</h1>
+            <p>This test verifies that the delete/cross icons appear inline with the selected item text, not on a new line.</p>
+            
+            <div style={{ marginBottom: '20px' }}>
+                <h3>Test Case: Multi-Select with Long Labels</h3>
+                <p>Select multiple items to test the inline styling of delete icons:</p>
+                
+                <MultiSelect
+                    settings={{ 
+                        id: 'stylingTest',
+                        multi: true
+                    }}
+                    multi={true}
+                    options={options}
+                    inputValue={selectedValues}
+                    onChange={handleChange}
+                    placeholder="Select multiple roles..."
+                />
+            </div>
+            
+            <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
+                <h3>Expected Behavior:</h3>
+                <ul>
+                    <li>✅ Delete icons should appear on the same line as the text</li>
+                    <li>✅ Selected items should have a consistent height</li>
+                    <li>✅ Delete icons should be clickable and remove the item</li>
+                    <li>✅ Hover effect should work on delete icons</li>
+                    <li>✅ Multiple selections should wrap properly without excessive height</li>
+                </ul>
+            </div>
+            
+            <div style={{ marginTop: '20px' }}>
+                <h3>Selected Values:</h3>
+                <pre style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px', border: '1px solid #ddd' }}>
+                    {JSON.stringify(selectedValues, null, 2)}
+                </pre>
+            </div>
+            
+            <div style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>
+                <p><strong>Testing Instructions:</strong></p>
+                <ol>
+                    <li>Select 2-3 items from the dropdown</li>
+                    <li>Verify that delete icons (×) appear next to each selected item on the same line</li>
+                    <li>Hover over delete icons to see the red background effect</li>
+                    <li>Click delete icons to remove items</li>
+                    <li>Check that the component height doesn't grow unnecessarily</li>
+                </ol>
+            </div>
+        </div>
+    );
+}
+
+export default MultiSelectStylingTest;