@visns-studio/visns-components 6.3.6 → 6.3.8

package/package.json

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

package/src/components/DataGrid.jsx

@@ -78,6 +78,16 @@ import {
 } from 'lucide-react';
 import styles from './styles/DataGrid.module.scss';
 
+/**
+ * `ajaxSetting.rowStyles[].style` tokens → the module class that draws them.
+ * Kept as a map rather than `styles['row' + capitalise(token)]` so an unknown
+ * token in a config is simply ignored instead of resolving to `undefined` and
+ * putting the literal string "undefined" in the row's class list.
+ */
+const ROW_STYLE_CLASSES = {
+    complete: styles.rowComplete,
+};
+
 import '@visns-studio/visns-datagrid-enterprise/index.css';
 
 import CustomFetch from './Fetch';
@@ -649,11 +659,11 @@ const DataGrid = forwardRef(
                     }
 
                     // Opt-in grouped display (ajaxSetting.treeGroupBy {key,
-                    // column, parentFields, countLabel, collapsible,
-                    // defaultCollapsed, icons}): consecutive rows sharing a
-                    // non-empty `key` value get a synthetic summary parent
-                    // row inserted above them. `parentFields` are lifted from
-                    // the first row onto the parent and blanked on the
+                    // column, parentFields, parentFieldAliases, countLabel,
+                    // collapsible, defaultCollapsed, icons}): consecutive rows
+                    // sharing a non-empty `key` value get a synthetic summary
+                    // parent row inserted above them. `parentFields` are lifted
+                    // from the first row onto the parent and blanked on the
                     // children, so shared details display once; children get
                     // an "↳" prefix in the display column. Single rows stay
                     // plain — unlike the grid's own groupBy, which forces a
@@ -668,6 +678,7 @@ const DataGrid = forwardRef(
                             key: treeKey,
                             column: treeDisplayColumn,
                             parentFields = [],
+                            parentFieldAliases = {},
                             countLabel,
                             collapsible,
                             defaultCollapsed,
@@ -712,6 +723,35 @@ const DataGrid = forwardRef(
                                     });
                                 });
 
+                                // `parentFieldAliases` ({columnField:
+                                // sourceField}): the parent shows a DIFFERENT
+                                // field in a column than its children do, so
+                                // one column can carry the per-member value on
+                                // members and the group's summary on the
+                                // parent instead of spending a second column
+                                // on the summary alone.
+                                //
+                                // Unlike `parentFields` this deliberately does
+                                // NOT blank the column on the children — the
+                                // members' own values are the reason the
+                                // column exists. (Listing the same field in
+                                // both would blank it on the children and
+                                // defeat that, so pick one.)
+                                //
+                                // Distinct from `countLabel` too, which
+                                // templates a summary from the child COUNT and
+                                // so can only produce one fixed wording. An
+                                // alias reads a field the backend computed,
+                                // which is what it takes for the summary to
+                                // vary with the data ("2 Headers" for one kind
+                                // of group, "2 Stations" for another).
+                                Object.entries(parentFieldAliases).forEach(
+                                    ([columnField, sourceField]) => {
+                                        parent[columnField] =
+                                            children[0]?.[sourceField];
+                                    }
+                                );
+
                                 // Mark children for styling (getRowStyle) and
                                 // prefix their display value so nesting reads
                                 children.forEach((child) => {
@@ -959,6 +999,80 @@ const DataGrid = forwardRef(
             [ajaxSetting]
         );
 
+        /**
+         * Opt-in non-colour row states (`ajaxSetting.rowStyles`).
+         *
+         *   rowStyles: [
+         *       { id: 'jigging_status', value: 1, style: 'complete' }
+         *   ]
+         *
+         * Each rule names a FIELD STATE, not a look: `style` is a token the
+         * package maps to a class in DataGrid.module.scss, so a project says
+         * what a row means and the library decides how that reads. Today the
+         * only token is `complete` (line-through plus a muted ink).
+         *
+         * Deliberately different from `rowColours` in two ways:
+         *
+         *  - EVERY matching rule applies, where rowColours takes the first
+         *    match only. A row is frequently more than one thing at once (a
+         *    finished item that is also on a T-Bar), and with first-match the
+         *    completion state would be swallowed by whichever tint happened to
+         *    be listed above it.
+         *  - It carries no colour. That is the point: a pale tint is the first
+         *    thing to disappear on a plant-floor tablet in daylight, so a state
+         *    that matters has to be legible without one. Colour, where a rule
+         *    also sets one, stays the redundant second channel.
+         *
+         * `operator` follows the same small vocabulary as `readOnlyWhen`:
+         * eq (default), neq, notEmpty.
+         */
+        const getRowClassName = useCallback(
+            ({ data }) => {
+                const rules = ajaxSetting?.rowStyles;
+
+                if (!Array.isArray(rules) || rules.length === 0 || !data) {
+                    return '';
+                }
+
+                const matches = (rule) => {
+                    const value = data[rule.id];
+
+                    switch (rule.operator) {
+                        case 'neq':
+                            return value != rule.value;
+                        case 'notEmpty':
+                            return Array.isArray(value)
+                                ? value.length > 0
+                                : value != null && value !== '';
+                        case 'eq':
+                        default:
+                            return value == rule.value;
+                    }
+                };
+
+                return rules
+                    .filter(matches)
+                    .map((rule) => ROW_STYLE_CLASSES[rule.style])
+                    .filter(Boolean)
+                    .join(' ');
+            },
+            [ajaxSetting]
+        );
+
+        /**
+         * The grid's own row class plus whatever `rowStyles` adds. Passed as a
+         * function rather than the bare string the grid used to get: the grid
+         * accepts either, and `vs-datagrid--row` (the hover rule) has to stay
+         * on every row regardless.
+         */
+        const rowClassName = useCallback(
+            (rowProps) =>
+                ['vs-datagrid--row', getRowClassName(rowProps)]
+                    .filter(Boolean)
+                    .join(' '),
+            [getRowClassName]
+        );
+
         const handleDownload = async (d) => {
             const toastId = toast.loading('Starting download please wait...');
 
@@ -5205,7 +5319,7 @@ const DataGrid = forwardRef(
                             pagination
                             renderRowContextMenu={renderRowContextMenu}
                             renderColumnContextMenu={renderColumnContextMenu}
-                            rowClassName="vs-datagrid--row"
+                            rowClassName={rowClassName}
                             rowHeight={isTabletMode ? 52 : null}
                             rowStyle={getRowStyle}
                             selected={selected}

package/src/components/columns/ColumnRenderers.jsx

@@ -40,6 +40,55 @@ const buildToggleUrl = (urlTemplate, stageItem, rowData) => {
     return url;
 };
 
+/**
+ * Evaluate an opt-in stageConfig rule ({key, operator, value}) against one
+ * entry of a stage list. Absent rule -> false, so every setting that uses this
+ * is inert until a config asks for it.
+ *
+ * Operators: eq (default), neq, gte, gt, lte, lt, in. The comparison operators
+ * coerce to Number, because the values these rules match on arrive as strings
+ * from some payloads and as numbers from others, and a stage ordinal compared
+ * as a string sorts "10" below "2".
+ */
+const matchesStageRule = (rule, stageItem) => {
+    if (!rule || !rule.key || !stageItem) {
+        return false;
+    }
+
+    const value = stageItem[rule.key];
+
+    if (value === null || value === undefined) {
+        return false;
+    }
+
+    if (rule.operator === 'in') {
+        return (
+            Array.isArray(rule.value) &&
+            rule.value.some((candidate) => candidate == value)
+        );
+    }
+
+    const left = Number(value);
+    const right = Number(rule.value);
+    const comparable = !Number.isNaN(left) && !Number.isNaN(right);
+
+    switch (rule.operator) {
+        case 'neq':
+            return value != rule.value;
+        case 'gte':
+            return comparable && left >= right;
+        case 'gt':
+            return comparable && left > right;
+        case 'lte':
+            return comparable && left <= right;
+        case 'lt':
+            return comparable && left < right;
+        case 'eq':
+        default:
+            return value == rule.value;
+    }
+};
+
 const getStageStatus = (stageItem, toggleConfig) => {
     if (!toggleConfig || !toggleConfig.statusField) return null;
     
@@ -2895,6 +2944,30 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate, onUpda
                             });
                         }
                         
+                        // `completeWhen` (opt-in): the rule that says this
+                        // entry is DONE as far as the grid showing it is
+                        // concerned, drawn as a rule through the label plus a
+                        // step back in weight.
+                        //
+                        // It lives in the view config rather than in the data
+                        // because "complete" is a statement about the VIEWER,
+                        // not about the entry: the same stage list is served
+                        // unchanged to every grid, and a member sitting at
+                        // Despatch is finished business to the Despatch list
+                        // while still being work in progress to Pickling. The
+                        // grid is the only party that knows which it is.
+                        //
+                        // Not a colour, on purpose: the pill's fill already
+                        // encodes the stage, and a second hue on a tablet in
+                        // daylight is the signal least likely to survive the
+                        // reading conditions. The rule through the label is
+                        // legible in glare and in greyscale; the fill stays as
+                        // it was, so nothing is lost by adding this.
+                        const isStageComplete = matchesStageRule(
+                            column.stageConfig.completeWhen,
+                            stageItem
+                        );
+
                         // Apply visual feedback for inactive stages
                         const stageStyle = {
                             width: useFullLabel ? 'auto' : '20px',
@@ -2911,7 +2984,21 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate, onUpda
                             fontSize: '11px',
                             fontWeight: 'bold',
                             cursor: isToggleable ? 'pointer' : 'default',
-                            opacity: isStageActive ? 1 : 0.5,
+                            ...(isStageComplete
+                                ? {
+                                      textDecoration: 'line-through',
+                                      textDecorationThickness:
+                                          'var(--grid-stage-complete-thickness, 2px)',
+                                  }
+                                : {}),
+                            // An inactive toggle already mutes to 0.5; a
+                            // complete entry steps back a little less, so the
+                            // two states stay tellable apart when both apply
+                            opacity: !isStageActive
+                                ? 0.5
+                                : isStageComplete
+                                ? 'var(--grid-stage-complete-opacity, 0.65)'
+                                : 1,
                             transition: 'opacity 0.2s ease, transform 0.1s ease',
                             border: isToggleable ? '1px solid rgba(255,255,255,0.3)' : 'none',
                         };

package/src/components/styles/DataGrid.module.scss

@@ -1354,3 +1354,51 @@
 }
 
 
+
+/* =========================================================================
+   Row states (`ajaxSetting.rowStyles`)
+
+   A row tint is the first thing to go on a plant-floor tablet: pale fills
+   are chosen to sit under black text, which is exactly what makes them
+   vanish under glare or a low-angle view. The rows that carry these states
+   are the ones a crew scans a list FOR ("which of these headers is already
+   done?"), so the state has to survive the conditions the list is read in.
+
+   The treatment is therefore a rule through the text plus a step back in
+   ink weight — two signals, neither of them hue. Any `rowColours` tint on
+   the same row is untouched and becomes the redundant third.
+
+   Strike and ink are applied to the CELLS, not the row: the grid lays its
+   cells out absolutely, so `text-decoration` set on the row element has no
+   in-flow descendants to inherit it and would draw nothing.
+
+   Density hooks, per the `--nav-*` / `--grid-legend-*` convention above —
+   every declaration is `var(--hook, <the value it always had>)`, so an unset
+   hook is a no-op and a project retunes from `:root`:
+
+     --grid-row-complete-ink        struck-through text colour.
+                                    default: var(--muted-color, #6b7688)
+     --grid-row-complete-thickness  weight of the rule through the text.
+                                    default: 2px — heavier than the browser
+                                    default, which is hairline at this size.
+     --grid-row-complete-opacity    applies to non-text cell content (status
+                                    pills, icons), which a rule cannot cross.
+                                    default: 0.7
+   ========================================================================= */
+
+.rowComplete {
+    :global(.InovuaReactDataGrid__cell) {
+        color: var(--grid-row-complete-ink, var(--muted-color, #6b7688));
+        text-decoration: line-through;
+        text-decoration-thickness: var(--grid-row-complete-thickness, 2px);
+    }
+
+    // Cell content that is drawn rather than set — the action buttons, the
+    // stage pills, the boolean ticks — takes the muting alone, since a rule
+    // through the text cannot cross it.
+    :global(.InovuaReactDataGrid__cell) svg,
+    :global(.InovuaReactDataGrid__cell) img,
+    :global(.InovuaReactDataGrid__cell) button {
+        opacity: var(--grid-row-complete-opacity, 0.7);
+    }
+}