@visns-studio/visns-components 5.19.0 → 5.21.0

package/package.json

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

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/Navigation.jsx

@@ -8,6 +8,8 @@ import {
     Users,
     User,
     Search,
+    UserSearch,
+    ClipboardCheck,
     LogOut,
     Shield,
     Image,
@@ -236,6 +238,9 @@ function Navigation({
             phone: Phone,
             shield: Shield,
             signOut: LogOut,
+            search: Search,
+            userSearch: UserSearch,
+            clipboardCheck: ClipboardCheck,
         };
 
         // Check if the setting's URL matches the current page
@@ -302,7 +307,9 @@ function Navigation({
                         target={n.target ? n.target : '_self'}
                         title={n.label}
                     >
-                        <IconComponent size={19} strokeWidth={2} />
+                        {IconComponent && (
+                            <IconComponent size={19} strokeWidth={2} />
+                        )}
                     </Link>
                 </li>
             );

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
     );