@visns-studio/visns-components 5.11.10 → 5.11.12

package/README.md

@@ -321,6 +321,7 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 - **Extensibility**: Easy to add new column types or modify existing ones
 - **Maintainability**: Centralized location for all column rendering logic
 - **Performance**: Optimized rendering for each specific column type
+- **Intelligent Sorting**: Automatic detection of sortable relationship and JSON fields
 
 **Supported Column Types:**
 - `boolean` - Yes/No display with tooltips
@@ -354,6 +355,133 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 
 All column renderers are exported from `@visns-studio/visns-components` and can be used individually or as part of the DataGrid component.
 
+#### Intelligent Relationship Sorting
+
+The DataGrid component includes intelligent sorting capabilities that automatically detect and enable sorting for relationship and JSON fields. This feature works seamlessly with the backend `HasRelationshipSorting` trait.
+
+**Automatic Sortable Detection:**
+
+```jsx
+// The DataGrid automatically detects sortable fields based on naming patterns
+<DataGrid
+    columns={[
+        {
+            name: 'user.profile.name',     // Relationship field - automatically sortable
+            headerName: 'User Name',
+            nameFrom: ['user', 'profile', 'name']
+        },
+        {
+            name: 'settings.theme',        // JSON field - automatically sortable  
+            headerName: 'Theme Preference',
+            nameFrom: ['settings', 'theme']
+        },
+        {
+            name: 'client.company',        // BelongsTo relationship - automatically sortable
+            headerName: 'Company',
+            nameFrom: ['client', 'company']
+        }
+    ]}
+    settings={{
+        intelligentSorting: true  // Enable intelligent sorting (default: true)
+    }}
+/>
+```
+
+**Manual Sortable Control:**
+
+```jsx
+// Override automatic detection with explicit sortable configuration
+<DataGrid
+    columns={[
+        {
+            name: 'user.profile.name',
+            headerName: 'User Name',
+            sortable: true,  // Explicitly enable sorting
+            nameFrom: ['user', 'profile', 'name']
+        },
+        {
+            name: 'complex.calculation',
+            headerName: 'Complex Field',
+            sortable: false, // Explicitly disable sorting
+            nameFrom: ['complex', 'calculation']
+        }
+    ]}
+/>
+```
+
+**Supported Sorting Patterns:**
+
+The intelligent sorting system recognizes these field patterns as sortable:
+
+- **Relationship Fields**: `user.profile.name`, `order.customer.company`
+- **JSON Fields**: `settings.theme`, `metadata.tags`, `data.preferences.language`
+- **Standard Fields**: Any direct model attribute
+- **Nested Relationships**: `post.author.profile.display_name`
+
+**Field Name Detection:**
+
+The sorting system intelligently determines sortable fields using:
+
+1. **nameFrom Array**: Primary method for complex field paths
+   ```jsx
+   nameFrom: ['user', 'profile', 'full_name']  // → user.profile.full_name
+   ```
+
+2. **Dot Notation**: Direct string paths
+   ```jsx
+   name: 'client.address.city'  // → client.address.city
+   ```
+
+3. **Pattern Recognition**: Automatic detection of common relationship patterns
+   - Fields ending with `_id` that have corresponding relationships
+   - JSON field patterns like `data.*`, `settings.*`, `metadata.*`
+   - Nested object notation
+
+**Configuration Options:**
+
+```jsx
+<DataGrid
+    settings={{
+        // Global intelligent sorting toggle
+        intelligentSorting: true,  // default: true
+        
+        // Additional sorting configuration
+        sortingConfig: {
+            // Custom sortable field patterns
+            additionalPatterns: [
+                /^custom_data\./,   // Match custom_data.* fields
+                /^config\./         // Match config.* fields
+            ],
+            
+            // Fields to exclude from automatic sorting
+            excludePatterns: [
+                /^temp\./,          // Exclude temp.* fields
+                /^cache\./          // Exclude cache.* fields
+            ]
+        }
+    }}
+/>
+```
+
+**Backend Integration:**
+
+The frontend intelligent sorting works seamlessly with the backend `HasRelationshipSorting` trait:
+
+```jsx
+// Frontend automatically generates these API calls:
+// GET /ajax/users/table?orderBy=profile.name&order=asc
+// GET /ajax/orders/table?orderBy=customer.company&order=desc
+// GET /ajax/products/table?orderBy=metadata.category&order=asc
+```
+
+**Benefits:**
+
+- **Zero Configuration**: Most relationship and JSON fields work automatically
+- **Performance Optimized**: Uses backend subqueries instead of joins
+- **Type Safety**: Automatic validation of sortable field patterns
+- **Fallback Support**: Graceful handling of unsupported sort fields
+- **Developer Friendly**: Clear visual indicators for sortable columns
+
 #### DataGrid Props
 
 | Prop                  | Description                                | Type     | Default |

package/package.json

@@ -24,13 +24,13 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.18.1",
+        "framer-motion": "^12.19.1",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.518.0",
         "moment": "^2.30.1",
-        "motion": "^12.18.1",
+        "motion": "^12.19.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -58,7 +58,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.0",
+        "sweetalert2": "^11.22.1",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.10",
+    "version": "5.11.12",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/cms/DataGrid.jsx

@@ -36,6 +36,7 @@ import 'react-toggle/style.css';
 
 import CustomFetch from '../crm/Fetch';
 import Form from './Form';
+import { extractColumnsMetadata, isColumnSortable } from '../../utils/columnsMetadataUtils';
 
 const loadData = async (
     { skip, limit, sortInfo, currentData, filterValue, groupBy },
@@ -83,10 +84,14 @@ const loadData = async (
     try {
         const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
-        return { data, count: total };
+        
+        // Extract columns metadata if available
+        const metadata = extractColumnsMetadata(response);
+        
+        return { data, count: total, metadata };
     } catch (error) {
         console.error('Error fetching data:', error);
-        return { data: [], count: 0 };
+        return { data: [], count: 0, metadata: {} };
     }
 };
 
@@ -146,9 +151,16 @@ const DataGrid = ({
 
             sqlResult.then((res) => {
                 setDataCount(res.count);
+                // Update metadata when data is loaded
+                if (res.metadata) {
+                    setColumnsMetadata(res.metadata);
+                }
             });
 
-            return sqlResult;
+            return sqlResult.then(res => ({
+                data: res.data,
+                count: res.count
+            }));
         },
         [ajaxSetting, dataReload, dSearch]
     );
@@ -157,6 +169,7 @@ const DataGrid = ({
     const [gridColumns, setGridColumns] = useState([]);
     const [limit, setLimit] = useState(ajaxSetting.take || 10);
     const [search, setSearch] = useState('');
+    const [columnsMetadata, setColumnsMetadata] = useState({});
 
     /** Table Functions */
     const handleChangeSearch = (e) => {
@@ -455,9 +468,14 @@ const DataGrid = ({
             let style;
             let value;
 
+            // Check if column is sortable based on metadata
+            const columnKey = column.id;
+            const sortable = isColumnSortable(columnKey, columnsMetadata);
+            
             const commonProps = {
                 header: column.label,
                 defaultFlex: 1,
+                sortable: sortable,
                 link: column.link ? column.link : {},
                 minWidth:
                     column.minWidth && column.minWidth > 0
@@ -1384,7 +1402,7 @@ const DataGrid = ({
             });
 
         setFilterValue(newFilterValue);
-    }, [columns, filterDataSource]);
+    }, [columns, filterDataSource, columnsMetadata]);
 
     useEffect(() => {
         if (setFilterData) {

package/src/components/crm/Autocomplete.jsx

@@ -178,11 +178,11 @@ const VisnsAutocomplete = memo((props) => {
 
     // Effect to handle overwrite toggle
     useEffect(() => {
-        if (!overwrite && search) {
+        if (!overwrite && search && search.length > 1 && isFocused) {
             setIsLoading(true);
             performSearch(1, search);
         }
-    }, [overwrite, search, performSearch]);
+    }, [overwrite, search, performSearch, isFocused]);
 
     // Effect to sync with inputValue prop
     useEffect(() => {
@@ -274,7 +274,7 @@ const VisnsAutocomplete = memo((props) => {
                 )}
             </div>
 
-            {isFocused && (search.length > 1 || isLoading) && (
+            {isFocused && !overwrite && (search.length > 1 || isLoading) && (
                 <ul
                     ref={resultsRef}
                     className={styles['AutocompletePlace-results']}

package/src/components/crm/DataGrid.jsx

@@ -41,6 +41,8 @@ import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import { toast } from 'react-toastify';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
+import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../../utils/relationshipSortingUtils';
+import { extractColumnsMetadata, isColumnSortable } from '../../utils/columnsMetadataUtils';
 import {
     AlarmClock,
     RotateCcw,
@@ -204,10 +206,14 @@ const loadData = async (
     try {
         const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
-        return { data, count: total };
+        
+        // Extract columns metadata if available
+        const metadata = extractColumnsMetadata(response);
+        
+        return { data, count: total, metadata };
     } catch (error) {
         console.error('Error fetching data:', error);
-        return { data: [], count: 0 };
+        return { data: [], count: 0, metadata: {} };
     }
 };
 
@@ -376,6 +382,11 @@ const DataGrid = forwardRef(
                 }
 
                 sqlResult.then((res) => {
+                    // Update metadata when data is loaded
+                    if (res.metadata) {
+                        setColumnsMetadata(res.metadata);
+                    }
+                    
                     // Sort data by grouping field if grouping is enabled
                     if (ajaxSetting?.groupBy?.length > 0) {
                         const groupField = ajaxSetting.groupBy[0]; // groupBy is array of strings
@@ -433,13 +444,17 @@ const DataGrid = forwardRef(
                     }, 10);
                 });
 
-                return sqlResult;
+                return sqlResult.then(res => ({
+                    data: res.data,
+                    count: res.count
+                }));
             },
             [ajaxSetting, dSearch, collapsedGroups]
         );
         const [filterDataSource, setFilterDataSource] = useState([]);
         const [filterValue, setFilterValue] = useState([]);
         const [gridColumns, setGridColumns] = useState([]);
+        const [columnsMetadata, setColumnsMetadata] = useState({});
         const gridRef = useRef(null);
         const [limit, setLimit] = useState(0);
         const [search, setSearch] = useState('');
@@ -2353,9 +2368,14 @@ const DataGrid = forwardRef(
                         let columnStyle;
                         let value;
 
+                        // Check if column is sortable based on metadata
+                        const columnKey = column.id;
+                        const sortable = isColumnSortable(columnKey, columnsMetadata);
+                        
                         const commonProps = {
                             header: column.label,
                             defaultFlex: 1,
+                            sortable: sortable,
                             link: column.link ?? {},
                             minWidth: column.minWidth ?? undefined,
                             maxWidth: column.maxWidth ?? undefined,
@@ -2592,6 +2612,7 @@ const DataGrid = forwardRef(
                                     filterEditor,
                                     filterEditorProps,
                                     relationName,
+                                    intelligentSortingConfig: tableSetting?.intelligentSorting || DEFAULT_INTELLIGENT_SORTING_CONFIG,
                                 });
                             case 'relationArray':
                                 return renderRelationArrayColumn({
@@ -2600,6 +2621,7 @@ const DataGrid = forwardRef(
                                     filterEditor,
                                     filterEditorProps,
                                     relationName,
+                                    intelligentSortingConfig: tableSetting?.intelligentSorting || DEFAULT_INTELLIGENT_SORTING_CONFIG,
                                 });
                             case 'richtext':
                                 return renderRichTextColumn({
@@ -2833,7 +2855,7 @@ const DataGrid = forwardRef(
                 .catch((error) => {
                     console.error('Error in fetching dropdown data: ', error);
                 });
-        }, [columns, filterDataSource]);
+        }, [columns, filterDataSource, columnsMetadata]);
 
         useEffect(() => {
             if (setFilterData) {

package/src/components/crm/Field.jsx

@@ -1,6 +1,6 @@
 import '../styles/global.css';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
 import Toggle from 'react-toggle';
@@ -189,22 +189,6 @@ function Field({
         const fetchOptions = () => {
             let filter = {};
 
-            if (settings.where?.length > 0) {
-                const processedWhere = settings.where.map((whereItem) => {
-                    if (whereItem.getKey && formData[whereItem.getKey]) {
-                        return {
-                            ...whereItem,
-                            value: formData[whereItem.getKey],
-                        };
-                    }
-                    return whereItem;
-                });
-
-                filter = {
-                    where: processedWhere,
-                };
-            }
-
             if (settings.fields?.length > 0) {
                 filter.fields = settings.fields;
             }
@@ -261,7 +245,10 @@ function Field({
             case 'dropdown-ajax':
             case 'multi-dropdown-ajax':
             case 'radio-ajax':
-                fetchOptions();
+                // Only fetch if there are no dependent fields (no 'where' conditions)
+                if (!settings.where || settings.where.length === 0) {
+                    fetchOptions();
+                }
                 break;
             default:
                 break;
@@ -285,7 +272,66 @@ function Field({
             );
             setCanvasUrl(canvasType.url);
         }
-    }, [settings, counter, formData]);
+    }, [settings, counter]);
+
+    // Get dependency field keys once
+    const dependencyKeys = useMemo(() => {
+        return settings.where?.map(whereItem => whereItem.getKey).filter(Boolean) || [];
+    }, [settings.where]);
+
+    // Separate useEffect for handling dependent form data changes for dropdown refetch
+    useEffect(() => {
+        if (['dropdown-ajax', 'multi-dropdown-ajax', 'radio-ajax'].includes(settings.type) && settings.where?.length > 0) {
+            let filter = {};
+
+            const processedWhere = settings.where.map((whereItem) => {
+                if (whereItem.getKey && formData[whereItem.getKey]) {
+                    return {
+                        ...whereItem,
+                        value: formData[whereItem.getKey],
+                    };
+                }
+                return whereItem;
+            });
+
+            filter = { where: processedWhere };
+
+            if (settings.fields?.length > 0) {
+                filter.fields = settings.fields;
+            }
+
+            if (settings.order && settings.order.sortBy && settings.order.sort) {
+                filter.sortBy = settings.order.sortBy;
+                filter.sort = settings.order.sort;
+            }
+
+            if (settings?.customParams) {
+                filter = { ...filter, ...settings.customParams };
+            }
+
+            CustomFetch(settings.url, 'POST', filter, function (result) {
+                setOptions(result.data);
+
+                let dataArray = [];
+                result.data.forEach((a) => {
+                    let _tempObject = a;
+                    if (!_.isEmpty(_tempObject)) {
+                        let modifiedObject = {};
+                        Object.keys(_tempObject).forEach(function (c) {
+                            if (c !== 'id' && c !== 'label') {
+                                modifiedObject['data-' + c] = _tempObject[c];
+                            }
+                        });
+                        dataArray.push(modifiedObject);
+                    }
+                });
+
+                if (dataArray.length > 0) {
+                    setDataOptions(dataArray);
+                }
+            });
+        }
+    }, [...dependencyKeys.map(key => formData[key])]);
 
     const fetchChildDropdownData = (s, v) => {
         let filter = {};
@@ -2126,7 +2172,6 @@ function Field({
                         </span>
                     );
                 }
-                break;
             case 'plaintextheading':
                 return <h2>{settings.label ? settings.label : ''}</h2>;
             case 'section':
@@ -2143,7 +2188,7 @@ function Field({
                         onEditorChange={(value, e) => {
                             onChangeRicheditor(e, value, settings.id);
                         }}
-                        onInit={(evt, editor) => (editorRef.current = editor)}
+                        onInit={(_, editor) => (editorRef.current = editor)}
                         value={inputValue || ''}
                         init={{
                             branding: false,

package/src/components/crm/columns/ColumnRenderers.jsx

@@ -4,6 +4,11 @@ import parse from 'html-react-parser';
 import { Download, AlarmClock } from 'lucide-react';
 import { toast } from 'react-toastify';
 import CellWithTooltip from '../cells/CellWithTooltip';
+import {
+    isRelationshipColumnSortable,
+    getRelationshipPath,
+    DEFAULT_INTELLIGENT_SORTING_CONFIG,
+} from '../../../utils/relationshipSortingUtils';
 
 // Boolean Column Renderer
 export const renderBooleanColumn = ({
@@ -17,7 +22,7 @@ export const renderBooleanColumn = ({
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
         name: `${column.type}.${column.id}`,
-        sortable: false,
+        sortable: true,
         render: ({ data }) => {
             const value = data[column.id] ? 'Yes' : 'No';
             return (
@@ -146,7 +151,7 @@ export const renderArrayCountColumn = ({ column, commonProps }) => {
     return {
         ...commonProps,
         name: `${column.type}.${column.id}`,
-        sortable: false,
+        sortable: true,
         render: ({ data }) => {
             if (data && data[column.id]) {
                 return data[column.id].length;
@@ -713,11 +718,39 @@ export const renderRelationColumn = ({
     filterEditor,
     filterEditorProps,
     relationName,
+    intelligentSortingConfig = DEFAULT_INTELLIGENT_SORTING_CONFIG,
 }) => {
+    // Intelligent sorting detection
+    const isSortable = isRelationshipColumnSortable(
+        column,
+        intelligentSortingConfig
+    );
+
+    // Log sorting analysis in development
+    if (
+        intelligentSortingConfig.logAnalysis &&
+        process.env.NODE_ENV === 'development'
+    ) {
+        const relationshipPath = getRelationshipPath(column);
+        console.log(
+            `Relationship sorting analysis for "${relationshipPath}":`,
+            {
+                sortable: isSortable,
+                fieldName: column.nameFrom,
+                relationshipDepth: Array.isArray(column.id)
+                    ? column.id.length
+                    : 1,
+                explicitSortable: column.hasOwnProperty('sortable')
+                    ? column.sortable
+                    : 'not specified',
+            }
+        );
+    }
+
     return {
         ...commonProps,
         name: relationName,
-        sortable: false,
+        sortable: isSortable,
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
         render: ({ data }) => {
@@ -770,18 +803,22 @@ export const renderRelationColumn = ({
                         // Check if the value is a hex color and render with color preview
                         const isHexColor = (str) => {
                             if (!str || typeof str !== 'string') return false;
-                            return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(str);
+                            return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(
+                                str
+                            );
                         };
 
                         if (isHexColor(value)) {
                             return (
                                 <div className="relation-color-container">
-                                    <div 
+                                    <div
                                         className="relation-color-preview"
                                         style={{ backgroundColor: value }}
                                         title={`Color: ${value}`}
                                     ></div>
-                                    <span className="relation-color-text">{value}</span>
+                                    <span className="relation-color-text">
+                                        {value}
+                                    </span>
                                 </div>
                             );
                         }
@@ -812,11 +849,39 @@ export const renderRelationArrayColumn = ({
     filterEditor,
     filterEditorProps,
     relationName,
+    intelligentSortingConfig = DEFAULT_INTELLIGENT_SORTING_CONFIG,
 }) => {
+    // Intelligent sorting detection for relation arrays
+    const isSortable = isRelationshipColumnSortable(
+        column,
+        intelligentSortingConfig
+    );
+
+    // Log sorting analysis in development
+    if (
+        intelligentSortingConfig.logAnalysis &&
+        process.env.NODE_ENV === 'development'
+    ) {
+        const relationshipPath = getRelationshipPath(column);
+        console.log(
+            `Relationship array sorting analysis for "${relationshipPath}":`,
+            {
+                sortable: isSortable,
+                fieldName: column.nameFrom,
+                relationshipDepth: Array.isArray(column.id)
+                    ? column.id.length
+                    : 1,
+                explicitSortable: column.hasOwnProperty('sortable')
+                    ? column.sortable
+                    : 'not specified',
+            }
+        );
+    }
+
     return {
         ...commonProps,
         name: relationName,
-        sortable: false,
+        sortable: isSortable,
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
         render: ({ data }) => {
@@ -1284,7 +1349,7 @@ export const renderCreatedByColumn = ({ column, commonProps }) => {
     return {
         ...commonProps,
         name: `${column.type}.${column.id}`,
-        sortable: false,
+        sortable: true,
         render: ({ data }) => {
             if (
                 data.audits[0] &&