@visns-studio/visns-components 5.18.1 → 5.20.0

package/package.json

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

package/src/components/DataGrid.jsx

@@ -2800,6 +2800,27 @@ const DataGrid = forwardRef(
                         return { ...acc, ...result };
                     }, {});
 
+                    // Settings that an 'action' column renders inline render there
+                    // instead of the trailing Action column (avoids duplication).
+                    const actionColumnSettingIds = new Set(
+                        (columns || [])
+                            .filter(
+                                (c) =>
+                                    c.type === 'action' &&
+                                    Array.isArray(c.settings)
+                            )
+                            .flatMap((c) => c.settings)
+                    );
+
+                    // Width to fit N action icons: tablet-mode icons have a larger
+                    // tap target/margin (~44px) than the default (~34px), plus cell
+                    // padding. Used by both action columns and the trailing column.
+                    const actionColumnWidthFor = (count) =>
+                        Math.max(
+                            100,
+                            count * (isTabletMode ? 44 : 34) + 16
+                        );
+
                     const renderColumn = (column) => {
                         let childValue;
                         let columnId;
@@ -2951,6 +2972,37 @@ const DataGrid = forwardRef(
                         }
 
                         switch (column.type) {
+                            case 'action': {
+                                const actionSettings = (column.settings || [])
+                                    .map((id) =>
+                                        memoizedSettings.find(
+                                            (s) => s.id === id
+                                        )
+                                    )
+                                    .filter(Boolean);
+                                const width = actionColumnWidthFor(
+                                    actionSettings.length
+                                );
+                                return {
+                                    ...commonProps,
+                                    name: Array.isArray(column.id)
+                                        ? column.id.join('_')
+                                        : column.id,
+                                    header: column.label ?? '',
+                                    sortable: false,
+                                    defaultFlex: undefined,
+                                    defaultWidth: width,
+                                    minWidth: width,
+                                    textAlign: 'center',
+                                    render: ({ data }) => (
+                                        <div className={styles.tdactions}>
+                                            {actionSettings.map((setting) =>
+                                                renderSetting(setting, data)
+                                            )}
+                                        </div>
+                                    ),
+                                };
+                            }
                             case 'address':
                                 return renderAddressColumn({
                                     column,
@@ -3283,37 +3335,42 @@ const DataGrid = forwardRef(
 
                     const newColumns = columns.map(renderColumn);
 
-                    // Function to check if any settings would be visible for any row
-                    const hasVisibleSettings = () => {
-                        if (memoizedSettings.length === 0) return false;
-
-                        // Check if any setting would be visible based on role permissions
-                        return memoizedSettings.some((setting) => {
-                            // Check role-based permissions
+                    // Count settings that could render in the trailing Action
+                    // column: role-permitted AND not claimed by an 'action' column.
+                    // Per-row conditions (active/condition/hide) may hide more at
+                    // runtime, but the column must fit the maximum case.
+                    const trailingSettings = memoizedSettings.filter(
+                        (setting) => {
+                            if (actionColumnSettingIds.has(setting.id)) {
+                                return false;
+                            }
                             if (
                                 setting.roles &&
                                 Array.isArray(setting.roles) &&
                                 setting.roles.length > 0
                             ) {
-                                const hasRequiredRole = setting.roles.some(
-                                    (requiredRole) =>
-                                        userProfile?.roles?.some(
-                                            (userRole) =>
-                                                userRole.name === requiredRole
-                                        )
+                                return setting.roles.some((requiredRole) =>
+                                    userProfile?.roles?.some(
+                                        (userRole) =>
+                                            userRole.name === requiredRole
+                                    )
                                 );
-                                return hasRequiredRole;
                             }
                             // If no roles specified, setting is visible
                             return true;
-                        });
-                    };
+                        }
+                    );
+
+                    if (trailingSettings.length > 0) {
+                        const actionColumnWidth = actionColumnWidthFor(
+                            trailingSettings.length
+                        );
 
-                    if (hasVisibleSettings()) {
                         newColumns.push({
                             name: 'setting',
                             header: 'Action',
-                            defaultWidth: 100,
+                            defaultWidth: actionColumnWidth,
+                            minWidth: actionColumnWidth,
                             textAlign: 'center',
                             textVerticalAlign:
                                 style && style.text_vertical_align
@@ -3322,9 +3379,16 @@ const DataGrid = forwardRef(
                             render: ({ data }) => {
                                 return (
                                     <div className={styles.tdactions}>
-                                        {memoizedSettings.map((setting) =>
-                                            renderSetting(setting, data)
-                                        )}
+                                        {memoizedSettings
+                                            .filter(
+                                                (setting) =>
+                                                    !actionColumnSettingIds.has(
+                                                        setting.id
+                                                    )
+                                            )
+                                            .map((setting) =>
+                                                renderSetting(setting, data)
+                                            )}
                                     </div>
                                 );
                             },
@@ -3405,7 +3469,7 @@ const DataGrid = forwardRef(
                 .catch((error) => {
                     console.error('Error in fetching dropdown data: ', error);
                 });
-        }, [columns, filterDataSource, memoizedSettings]);
+        }, [columns, filterDataSource, memoizedSettings, isTabletMode]);
 
         // Force re-render when filterDataSource updates to ensure dropdown filters get their data
         const [renderKey, setRenderKey] = useState(0);

package/src/components/Field.jsx

@@ -44,6 +44,37 @@ import DatePickerPortal from './utils/DatePickerPortal';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
+
+/**
+ * Insert `token` at the textarea's caret (or replacing its selection) and
+ * fire a native input event so the controlled React value updates. Restores
+ * the caret just after the inserted token. Used by textarea fields that
+ * declare a `variables` list (click-to-insert).
+ */
+function insertVariableAtCursor(el, token) {
+    if (!el) return;
+    const start = el.selectionStart ?? el.value.length;
+    const end = el.selectionEnd ?? el.value.length;
+    const next = el.value.slice(0, start) + token + el.value.slice(end);
+    const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        'value'
+    )?.set;
+    if (setter) {
+        setter.call(el, next);
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    const caret = start + token.length;
+    requestAnimationFrame(() => {
+        el.focus();
+        try {
+            el.setSelectionRange(caret, caret);
+        } catch (e) {
+            /* noop */
+        }
+    });
+}
+
 function Field({
     api,
     autocompleteCallback,
@@ -99,6 +130,7 @@ function Field({
     const [lineWidth, setLineWidth] = useState(2);
     const [lineColor, setLineColor] = useState('rgba(0, 0, 0, 1)');
     const sketchRef = useRef(null);
+    const variableTextareaRef = useRef(null);
 
     /** Email Functions */
     const validateEmail = (email) => {
@@ -2566,17 +2598,65 @@ function Field({
                 };
 
                 return (
-                    <textarea
-                        data-name={settings.id}
-                        className={inputClass[settings.id]}
-                        onChange={onChange}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                        rows={getTextareaRows(settings.textareaHeight)}
-                    ></textarea>
+                    <>
+                        {Array.isArray(settings.variables) &&
+                            settings.variables.length > 0 && (
+                                <div
+                                    style={{
+                                        display: 'flex',
+                                        flexWrap: 'wrap',
+                                        gap: '6px',
+                                        marginBottom: '8px',
+                                    }}
+                                >
+                                    {settings.variables.map((v) => {
+                                        const token = v.token ?? v;
+                                        return (
+                                            <button
+                                                type="button"
+                                                key={token}
+                                                title={`Insert ${token}`}
+                                                onClick={() =>
+                                                    insertVariableAtCursor(
+                                                        variableTextareaRef.current,
+                                                        token
+                                                    )
+                                                }
+                                                style={{
+                                                    cursor: 'pointer',
+                                                    fontSize: '12px',
+                                                    fontWeight: 500,
+                                                    padding: '3px 9px',
+                                                    borderRadius: '999px',
+                                                    border:
+                                                        '1px solid rgba(var(--primary-rgb), 0.3)',
+                                                    background:
+                                                        'rgba(var(--primary-rgb), 0.06)',
+                                                    color: 'var(--primary-color)',
+                                                }}
+                                            >
+                                                {v.label ?? token}
+                                            </button>
+                                        );
+                                    })}
+                                </div>
+                            )}
+                        <textarea
+                            ref={variableTextareaRef}
+                            data-name={settings.id}
+                            className={inputClass[settings.id]}
+                            onChange={onChange}
+                            value={
+                                inputValue && inputValue !== 'null'
+                                    ? inputValue
+                                    : ''
+                            }
+                            rows={
+                                settings.rows ||
+                                getTextareaRows(settings.textareaHeight)
+                            }
+                        ></textarea>
+                    </>
                 );
             case 'text':
                 return (

package/src/components/columns/ColumnRenderers.jsx

@@ -1145,17 +1145,58 @@ export const renderOptionColumn = ({
             let newData;
 
             if (data && column.options && column.options[data[column.id]]) {
+                const rawValue = data[column.id];
+
                 if (
                     column.key &&
                     data[column.key] > 0 &&
-                    column.options[data[column.id]].includes('#')
+                    column.options[rawValue].includes('#')
                 ) {
-                    newData = column.options[data[column.id]].replace(
+                    newData = column.options[rawValue].replace(
                         /#/g,
                         data[column.key]
                     );
                 } else {
-                    newData = column.options[data[column.id]];
+                    newData = column.options[rawValue];
+                }
+
+                // Coloured badge variant — opt in via column.badge. Per-value
+                // colours come from column.badgeColours[rawValue] ({ bg, fg,
+                // border }); unmapped values fall back to a neutral pill.
+                // Without column.badge the original plain-text behaviour is
+                // unchanged (backward compatible).
+                if (column.badge) {
+                    const palette =
+                        (column.badgeColours &&
+                            column.badgeColours[rawValue]) || {
+                            bg: '#eceff1',
+                            fg: '#37474f',
+                        };
+
+                    return (
+                        <CellWithTooltip value={newData} columnType="option">
+                            <span
+                                style={{
+                                    display: 'inline-block',
+                                    padding: '2px 10px',
+                                    borderRadius: '999px',
+                                    fontSize: '11px',
+                                    fontWeight: 600,
+                                    lineHeight: 1.6,
+                                    letterSpacing: '0.02em',
+                                    textTransform: 'uppercase',
+                                    whiteSpace: 'nowrap',
+                                    backgroundColor: palette.bg,
+                                    color: palette.fg,
+                                    border: palette.border
+                                        ? `1px solid ${palette.border}`
+                                        : '1px solid transparent',
+                                }}
+                            >
+                                {newData}
+                            </span>
+                        </CellWithTooltip>
+                    );
                 }
 
                 return (

package/src/components/generic/GenericDetail.jsx

@@ -231,8 +231,9 @@ function GenericDetail({
     layout = 'full',
     setting,
     setActiveNav = null,
-    urlParam,
+    urlParam = 'dataId',
     userProfile,
+    actions = null,
 }) {
     const gridRef = useRef(null);
     const currentConfigRef = useRef(null);
@@ -2828,6 +2829,17 @@ function GenericDetail({
                                             {!inPlaceEditing ? (
                                                 <button
                                                     className={styles.btn}
+                                                    title="Edit"
+                                                    aria-label="Edit"
+                                                    style={{
+                                                        display: 'inline-flex',
+                                                        alignItems: 'center',
+                                                        justifyContent:
+                                                            'center',
+                                                        gap: '7px',
+                                                        minWidth: '92px',
+                                                        height: '42px',
+                                                    }}
                                                     onClick={() => {
                                                         if (
                                                             activeTabConfig.form
@@ -2846,7 +2858,11 @@ function GenericDetail({
                                                         }
                                                     }}
                                                 >
-                                                    Edit
+                                                    <Pencil
+                                                        size={18}
+                                                        strokeWidth={2.25}
+                                                    />
+                                                    <span>Edit</span>
                                                 </button>
                                             ) : (
                                                 editingTabId ===
@@ -3786,11 +3802,22 @@ function GenericDetail({
                         }`}
                     >
                         <Breadcrumb data={data} page={page} />
-                        {total > 0 && (
-                            <div className={styles.titleInfo}>
-                                <span>
-                                    [<strong>{total}</strong> Total]
-                                </span>
+                        {(actions || total > 0) && (
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.75rem',
+                                }}
+                            >
+                                {total > 0 && (
+                                    <div className={styles.titleInfo}>
+                                        <span>
+                                            [<strong>{total}</strong> Total]
+                                        </span>
+                                    </div>
+                                )}
+                                {actions}
                             </div>
                         )}
                     </div>

package/src/components/generic/GenericIndex.jsx

@@ -1,7 +1,7 @@
 import '../styles/global.css';
 
-import React, { useCallback, useEffect, useInsertionEffect, useRef, useState } from 'react';
-import { useParams, Outlet } from 'react-router-dom';
+import React, { useCallback, useEffect, useInsertionEffect, useMemo, useRef, useState } from 'react';
+import { useParams, useSearchParams, Outlet } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
 import _ from 'lodash';
@@ -35,6 +35,61 @@ function useWindowDimensions() {
     return { windowHeight, windowWidth };
 }
 
+/**
+ * Returns a copy of `filters` with the `show` flags adjusted so the subnav
+ * item (or child) whose id matches `tabId` is active, enabling deep-links
+ * such as /page?tab=tourFormats. If `tabId` is empty or matches nothing,
+ * the original filters are returned unchanged (default behaviour preserved).
+ */
+function applyTabParam(filters, tabId) {
+    if (!filters || !tabId) {
+        return filters;
+    }
+
+    // The left subnav highlight is driven by each item's `class` (and
+    // `active`) — not `show` — so we must move all three. Reuse whatever
+    // class the currently-active item uses so we stay theme-consistent.
+    const activeClass =
+        filters.find((f) => f.show && f.class)?.class || 'subactive';
+    const activeChildClass =
+        filters
+            .flatMap((f) => f.children || [])
+            .find((c) => c.show && c.class)?.class || 'subactivechildren';
+
+    let matched = false;
+    const next = filters.map((f) => {
+        if (f.isParent && Array.isArray(f.children)) {
+            const childMatch = f.children.some((c) => c.id === tabId);
+            if (childMatch) matched = true;
+            return {
+                ...f,
+                show: childMatch,
+                active: childMatch,
+                class: childMatch ? f.class || activeClass : '',
+                children: f.children.map((c) => {
+                    const isMatch = c.id === tabId;
+                    return {
+                        ...c,
+                        show: isMatch,
+                        active: isMatch,
+                        class: isMatch ? c.class || activeChildClass : '',
+                    };
+                }),
+            };
+        }
+        const isMatch = f.id === tabId;
+        if (isMatch) matched = true;
+        return {
+            ...f,
+            show: isMatch,
+            active: isMatch,
+            class: isMatch ? activeClass : '',
+        };
+    });
+
+    return matched ? next : filters;
+}
+
 function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
     const [config, setConfig] = useState({});
     const [subnav, setSubnav] = useState(filters || []);
@@ -258,10 +313,20 @@ function GenericIndex({
         };
     }, [setting?.tabletMode]);
 
+    // Honour a ?tab=<id> deep-link by seeding the active subnav item.
+    // Memoised so a stable reference is passed to useConfig (otherwise its
+    // reset effect would clobber the user's tab clicks every render).
+    const [searchParams] = useSearchParams();
+    const tabParam = searchParams.get('tab');
+    const effectiveFilters = useMemo(
+        () => applyTabParam(setting.filters, tabParam),
+        [setting.filters, tabParam]
+    );
+
     const { config, setConfig, subnav, setSubnav } = useConfig(
         setting,
         setting.tabs,
-        setting.filters,
+        effectiveFilters,
         setRowsSelected,
         setting.tableSetting
     );