@visns-studio/visns-components 5.14.12 → 5.14.14
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/package.json
CHANGED
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
90
90
|
},
|
|
91
91
|
"name": "@visns-studio/visns-components",
|
|
92
|
-
"version": "5.14.
|
|
92
|
+
"version": "5.14.14",
|
|
93
93
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
94
94
|
"main": "src/index.js",
|
|
95
95
|
"files": [
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"type": "git",
|
|
105
105
|
"url": "git+https://github.com/visnsstudio/visns-components.git"
|
|
106
106
|
},
|
|
107
|
-
"author": "
|
|
107
|
+
"author": "Omnia Global",
|
|
108
108
|
"license": "ISC",
|
|
109
109
|
"bugs": {
|
|
110
110
|
"url": "https://github.com/visnsstudio/visns-components/issues"
|
|
@@ -70,6 +70,7 @@ import {
|
|
|
70
70
|
Archive,
|
|
71
71
|
Volume2,
|
|
72
72
|
AlertTriangle,
|
|
73
|
+
AlertCircle,
|
|
73
74
|
} from 'lucide-react';
|
|
74
75
|
import styles from './styles/DataGrid.module.scss';
|
|
75
76
|
|
|
@@ -3282,6 +3283,39 @@ const DataGrid = forwardRef(
|
|
|
3282
3283
|
groupData?.name ||
|
|
3283
3284
|
'';
|
|
3284
3285
|
|
|
3286
|
+
// Check for important marker
|
|
3287
|
+
const checkGroupImportantMarker = (groupValue, importantMarkerConfig) => {
|
|
3288
|
+
if (!importantMarkerConfig || !dataRef.current?.length || !ajaxSetting?.groupBy) {
|
|
3289
|
+
return false;
|
|
3290
|
+
}
|
|
3291
|
+
|
|
3292
|
+
const { id: fieldId, value: expectedValue } = importantMarkerConfig;
|
|
3293
|
+
const groupField = ajaxSetting.groupBy[0];
|
|
3294
|
+
|
|
3295
|
+
// Get all rows that belong to this group
|
|
3296
|
+
const groupRows = dataRef.current.filter(
|
|
3297
|
+
(row) => row[groupField] === groupValue
|
|
3298
|
+
);
|
|
3299
|
+
|
|
3300
|
+
return groupRows.some(row => {
|
|
3301
|
+
const fieldValue = row[fieldId];
|
|
3302
|
+
|
|
3303
|
+
// Handle different value types
|
|
3304
|
+
if (typeof expectedValue === 'boolean') {
|
|
3305
|
+
return Boolean(fieldValue) === expectedValue;
|
|
3306
|
+
}
|
|
3307
|
+
|
|
3308
|
+
return fieldValue === expectedValue;
|
|
3309
|
+
});
|
|
3310
|
+
};
|
|
3311
|
+
|
|
3312
|
+
const hasImportantMarker = checkGroupImportantMarker(
|
|
3313
|
+
groupValue,
|
|
3314
|
+
ajaxSetting?.groupBySetting?.importantMarker
|
|
3315
|
+
);
|
|
3316
|
+
const importantMarkerColor = ajaxSetting?.groupBySetting?.importantMarker?.colour;
|
|
3317
|
+
const importantMarkerTooltip = ajaxSetting?.groupBySetting?.importantMarker?.tooltip || "This group contains items that require attention";
|
|
3318
|
+
|
|
3285
3319
|
// Use ReactDataGrid's built-in toggle functionality
|
|
3286
3320
|
const collapsed =
|
|
3287
3321
|
collapsedGroups[groupValue] ||
|
|
@@ -3361,7 +3395,11 @@ const DataGrid = forwardRef(
|
|
|
3361
3395
|
|
|
3362
3396
|
return (
|
|
3363
3397
|
<div
|
|
3364
|
-
className={`group-header-clean group-header-fixed-height ${styles.groupHeaderContainer}`}
|
|
3398
|
+
className={`group-header-clean group-header-fixed-height ${styles.groupHeaderContainer} ${hasImportantMarker ? styles.groupHeaderImportant : ''}`}
|
|
3399
|
+
style={hasImportantMarker ? {
|
|
3400
|
+
borderLeftColor: importantMarkerColor || '#FF6961',
|
|
3401
|
+
background: `linear-gradient(135deg, ${importantMarkerColor || '#FF6961'}15 0%, ${importantMarkerColor || '#FF6961'}08 100%)`
|
|
3402
|
+
} : {}}
|
|
3365
3403
|
onClick={
|
|
3366
3404
|
handleGroupHeaderClick
|
|
3367
3405
|
}
|
|
@@ -3534,6 +3572,23 @@ const DataGrid = forwardRef(
|
|
|
3534
3572
|
}
|
|
3535
3573
|
>
|
|
3536
3574
|
{groupValue}
|
|
3575
|
+
{/* Important marker */}
|
|
3576
|
+
{hasImportantMarker && (
|
|
3577
|
+
<AlertCircle
|
|
3578
|
+
className="important-marker"
|
|
3579
|
+
style={{
|
|
3580
|
+
display: 'inline-block',
|
|
3581
|
+
marginLeft: '8px',
|
|
3582
|
+
color: importantMarkerColor || '#FF6961',
|
|
3583
|
+
position: 'relative',
|
|
3584
|
+
top: '1px'
|
|
3585
|
+
}}
|
|
3586
|
+
size={16}
|
|
3587
|
+
title={importantMarkerTooltip}
|
|
3588
|
+
data-tooltip-id="system-tooltip"
|
|
3589
|
+
data-tooltip-content={importantMarkerTooltip}
|
|
3590
|
+
/>
|
|
3591
|
+
)}
|
|
3537
3592
|
</strong>
|
|
3538
3593
|
{/* Click indicator */}
|
|
3539
3594
|
<span
|
|
@@ -1078,6 +1078,15 @@
|
|
|
1078
1078
|
opacity: 1;
|
|
1079
1079
|
}
|
|
1080
1080
|
}
|
|
1081
|
+
}
|
|
1082
|
+
|
|
1083
|
+
.groupHeaderImportant {
|
|
1084
|
+
border-left-width: 5px !important;
|
|
1085
|
+
box-shadow: 0 2px 8px rgba(255, 105, 97, 0.2) !important;
|
|
1086
|
+
|
|
1087
|
+
&:hover {
|
|
1088
|
+
box-shadow: 0 3px 12px rgba(255, 105, 97, 0.3) !important;
|
|
1089
|
+
}
|
|
1081
1090
|
|
|
1082
1091
|
&:active {
|
|
1083
1092
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|