@visns-studio/visns-components 5.15.15 → 5.15.16

package/README.md

@@ -13,6 +13,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 
 ### Latest Enhancements
 
+- **Phone and ABN Formatting**: Added specialized formatting for Australian phone numbers and ABNs across DataGrid, GenericDetail, and JSON fields with format support
 - **CameraPlacement Legacy Import**: Added comprehensive legacy JSON file import functionality with support for multiple data formats, automatic image loading, and seamless database integration
 - **CameraPlacement Module**: Enhanced interactive camera placement tool with improved UI consistency, better icon visibility, drag-and-drop image upload, professional export capabilities, and complete Verkada database integration
 - **Complete StandardModal Migration**: All components now use StandardModal instead of reactjs-popup for consistent modal behavior across the entire library
@@ -586,6 +587,8 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 - `json` - JSON data extraction and display
 - `number` - Numeric values
 - `option` - Option mapping with placeholders
+- `phone` - Phone number formatting for Australian numbers
+- `abn` - Australian Business Number formatting
 - `placeholder` - Static placeholder text
 - `age` - Age calculation from dates
 - `coding` - Custom coding logic
@@ -677,6 +680,72 @@ The `html5_date` column type provides native HTML5 date picker functionality in
 }
 ```
 
+#### Phone and ABN Formatting
+
+The DataGrid and GenericDetail components include specialized formatting for Australian phone numbers and ABNs (Australian Business Numbers).
+
+##### Phone Number Formatting
+
+The `phone` column type automatically formats phone numbers according to Australian standards:
+
+**Supported Formats:**
+- **Mobile Numbers**: `0400 000 000` (04XX XXX XXX)
+- **1300/1800 Numbers**: `1300 000 000` (1300 XXX XXX)
+- **Landline Numbers**: `(02) 0000 0000` ((0X) XXXX XXXX)
+- **Generic Formatting**: Applied to other number patterns
+- **Fallback**: Returns original value if no pattern matches
+
+**Configuration Examples:**
+
+DataGrid:
+```jsx
+{
+    id: 'phone',
+    label: 'Phone Number',
+    type: 'phone',
+    width: '15%'
+}
+```
+
+GenericDetail:
+```jsx
+{
+    id: 'phone',
+    label: 'Phone Number',
+    type: 'phone',
+    relation: ['company'] // Also works with relationship fields
+}
+```
+
+JSON Fields with Format:
+```jsx
+{
+    id: 'contact_data',
+    label: 'Contact',
+    type: 'json',
+    jsonData: 'phone',
+    format: 'phone' // Applies phone formatting to JSON field values
+}
+```
+
+##### ABN Formatting
+
+The `abn` column type formats Australian Business Numbers:
+
+**Format**: `00 000 000 000` (XX XXX XXX XXX)
+- Validates 11-digit ABNs
+- Returns original value if not valid format
+
+**Configuration Example:**
+```jsx
+{
+    id: 'abn',
+    label: 'ABN',
+    type: 'abn',
+    width: '15%'
+}
+```
+
 #### 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.

package/package.json

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

package/src/components/DataGrid.jsx

@@ -2412,6 +2412,22 @@ const DataGrid = forwardRef(
                 }
             }
 
+            // Check function-based condition if it exists
+            if (allow && s.condition && typeof s.condition === 'function') {
+                try {
+                    console.log('🔍 DataGrid: Evaluating condition for setting:', s.id, 'with data:', d);
+                    const conditionResult = s.condition(d);
+                    console.log('🔍 DataGrid: Condition result:', conditionResult, 'for setting:', s.id);
+                    if (!conditionResult) {
+                        allow = false;
+                        console.log('🔍 DataGrid: Setting blocked by condition:', s.id);
+                    }
+                } catch (error) {
+                    console.warn('🔍 DataGrid: Condition function error for setting:', s.id, error);
+                    allow = false;
+                }
+            }
+
             if (allow) {
                 switch (s.id) {
                     case 'activate':
@@ -2456,6 +2472,8 @@ const DataGrid = forwardRef(
                         return getIconComponent(RotateCcw);
                     case 'update':
                         return getIconComponent(Edit);
+                    case 'romComplete':
+                        return getIconComponent(CheckCircle);
                     default:
                         return null;
                 }

package/src/components/generic/shared/formatters.js

@@ -15,6 +15,11 @@ const interpretBooleanValue = (value, column) => {
     
     if (!isTrue && !isFalse) return value; // Return original if not clearly boolean
     
+    // Check for custom boolean labels first
+    if (column.booleanLabels && typeof column.booleanLabels === 'object') {
+        return isTrue ? column.booleanLabels.true : column.booleanLabels.false;
+    }
+    
     // Contextual interpretations based on column name patterns
     const interpretations = {
         // Status/State patterns