@visns-studio/visns-components 6.24.4 → 6.25.0

package/src/components/generic/GenericDetail.jsx

@@ -68,6 +68,10 @@ import {
     isBlankValue,
     overviewFieldLabel,
 } from '../utils/displayValue';
+import {
+    isHeaderPlacement,
+    resolveEditPlacement,
+} from '../utils/editPlacement';
 import OcrTemplateEnhanced from './OcrTemplateEnhanced';
 
 import 'react-big-calendar/lib/css/react-big-calendar.css';
@@ -239,6 +243,19 @@ function GenericDetail({
     urlParam = 'dataId',
     userProfile,
     actions = null,
+    /**
+     * Where the record's action cluster sits — `'floating'` (the default, the
+     * bottom-right bar this library has always drawn) or `'header'` (inline on
+     * the right of the title row).
+     *
+     * This is an OVERRIDE, not the primary switch: the value normally comes
+     * from the view config as `setting.editPlacement`, so a page mounted by a
+     * bare `<GenericDetail setting={…} />` — which is most of them — can ask
+     * for it without a host editing JSX. See `utils/editPlacement.js` for the
+     * whole argument. Given here it wins, because a host that has already
+     * wrapped this component for one page knows something the config does not.
+     */
+    editPlacement = null,
     /**
      * Host-supplied components for `type: "custom"` tabs, keyed by the tab's
      * `renderer`.
@@ -264,6 +281,15 @@ function GenericDetail({
 
     const { filters, page, stages, tabs } = setting;
 
+    /**
+     * `'floating'` unless this page's config (or its host) asked otherwise.
+     * Resolved once per render, from one implementation, so the three places
+     * that draw a cluster and the title row that may receive it cannot
+     * disagree about where the buttons are meant to be.
+     */
+    const actionPlacement = resolveEditPlacement(setting, editPlacement);
+    const drawActionsInHeader = isHeaderPlacement(actionPlacement);
+
     /** Fileupload states */
     const [files, setFiles] = useState([]);
 
@@ -3101,192 +3127,10 @@ function GenericDetail({
                                         </div>
                                     )}
 
-                                    {activeTabConfig.form && (
-                                        <div className={styles.polActions}>
-                                            {/* Render the "Edit" button if activeTabConfig.form exists */}
-                                            {!inPlaceEditing ? (
-                                                <button
-                                                    className={styles.btn}
-                                                    title={
-                                                        activeTabConfig.form
-                                                            .editLabel || 'Edit'
-                                                    }
-                                                    aria-label={
-                                                        activeTabConfig.form
-                                                            .editLabel || 'Edit'
-                                                    }
-                                                    onClick={() => {
-                                                        if (
-                                                            activeTabConfig.form
-                                                                .inPlaceEdit
-                                                        ) {
-                                                            startInPlaceEditing(
-                                                                activeTabConfig.id
-                                                            );
-                                                        } else {
-                                                            modalOpen(
-                                                                'update',
-                                                                routeParams[
-                                                                    urlParam
-                                                                ]
-                                                            );
-                                                        }
-                                                    }}
-                                                >
-                                                    <Pencil
-                                                        size={18}
-                                                        strokeWidth={2.25}
-                                                    />
-                                                    <span>
-                                                        {activeTabConfig.form
-                                                            .editLabel ||
-                                                            'Edit'}
-                                                    </span>
-                                                </button>
-                                            ) : (
-                                                editingTabId ===
-                                                    activeTabConfig.id && (
-                                                    <>
-                                                        {/* Cancel is the way back out of editing, not a
-                                                            destructive act — it was painted in error red,
-                                                            the loudest thing on the page, next to the
-                                                            Save it competes with. Ghost secondary. */}
-                                                        <button
-                                                            className={
-                                                                styles.btnSecondary
-                                                            }
-                                                            onClick={
-                                                                cancelInPlaceEditing
-                                                            }
-                                                        >
-                                                            Cancel
-                                                        </button>
-                                                        <button
-                                                            className={
-                                                                styles.btn
-                                                            }
-                                                            onClick={() => {
-                                                                // Find the form's save button and click it
-                                                                const saveButton =
-                                                                    document.querySelector(
-                                                                        `.inPlaceEdit .${styles.saveBtn}`
-                                                                    );
-                                                                if (
-                                                                    saveButton
-                                                                ) {
-                                                                    saveButton.click();
-                                                                } else {
-                                                                    // Fallback to any button with data-type="save"
-                                                                    const fallbackButton =
-                                                                        document.querySelector(
-                                                                            `.inPlaceEdit button[data-type="save"]`
-                                                                        );
-                                                                    if (
-                                                                        fallbackButton
-                                                                    ) {
-                                                                        fallbackButton.click();
-                                                                    }
-                                                                }
-
-                                                                // Reset the editing state
-                                                                setInPlaceEditing(
-                                                                    false
-                                                                );
-                                                                setEditingTabId(
-                                                                    null
-                                                                );
-
-                                                                // Reload data
-                                                                handleReload();
-                                                            }}
-                                                        >
-                                                            Save
-                                                        </button>
-                                                    </>
-                                                )
-                                            )}
-
-                                            {/* Check if sections contain "ocrTemplate" type and render the "Save" button under the same polActions */}
-                                            {activeTabConfig.sections &&
-                                                activeTabConfig.sections
-                                                    .length > 0 &&
-                                                activeTabConfig.sections.map(
-                                                    (section, sectionIndex) =>
-                                                        section.content &&
-                                                        section.content.some(
-                                                            (item) =>
-                                                                item.type ===
-                                                                'ocrTemplate'
-                                                        ) && (
-                                                            <button
-                                                                key={`save-button-${sectionIndex}`}
-                                                                className={
-                                                                    styles.btn
-                                                                }
-                                                                onClick={() => {
-                                                                    // Handle the specific "ocrTemplate" item
-                                                                    const ocrItem =
-                                                                        section.content.find(
-                                                                            (
-                                                                                item
-                                                                            ) =>
-                                                                                item.type ===
-                                                                                'ocrTemplate'
-                                                                        );
-                                                                    handleOcrTemplateSave(
-                                                                        ocrItem.id
-                                                                    ); // Now you can safely use ocrItem.id
-                                                                }}
-                                                            >
-                                                                Save
-                                                            </button>
-                                                        )
-                                                )}
-
-                                            {/* Check if export exists and render the "Export" button under the same polActions */}
-                                            {activeTabConfig.export && (
-                                                <button
-                                                    className={styles.btn}
-                                                    onClick={() =>
-                                                        handleExport(
-                                                            activeTabConfig.export
-                                                        )
-                                                    }
-                                                >
-                                                    {activeTabConfig.export
-                                                        .label || 'Export'}
-                                                </button>
-                                            )}
-
-                                            {activeTabConfig.customAction && (
-                                                <button
-                                                    className={styles.btn}
-                                                    onClick={() =>
-                                                        handleCustomAction(
-                                                            activeTabConfig.customAction
-                                                        )
-                                                    }
-                                                >
-                                                    {
-                                                        activeTabConfig
-                                                            .customAction.label
-                                                    }
-                                                </button>
-                                            )}
-
-                                            {activeTabConfig.customActions && Array.isArray(activeTabConfig.customActions) && activeTabConfig.customActions.map((customAction, index) => (
-                                                <button
-                                                    key={index}
-                                                    className={styles.btn}
-                                                    onClick={() =>
-                                                        handleCustomAction(customAction)
-                                                    }
-                                                >
-                                                    {getActionLabel(customAction)}
-                                                </button>
-                                            ))}
-                                        </div>
-                                    )}
+                                    {!drawActionsInHeader &&
+                                        actionCluster(
+                                            renderOverviewActions(activeTabConfig)
+                                        )}
                                 </>
                             );
                         case 'qrCode':
@@ -3297,12 +3141,14 @@ function GenericDetail({
                                 />
                             );
                         case 'table':
-                            if (
-                                config.ajaxSetting &&
-                                config.form &&
-                                config.columns &&
-                                config.settings
-                            ) {
+                            // ajaxSetting and columns are what a grid IS;
+                            // form (create/edit) and settings (row actions)
+                            // are what a grid can DO, and a read-only tab
+                            // legitimately has neither. Requiring all four
+                            // rendered an empty strip with no fetch and no
+                            // error — a config mistake that looked like a
+                            // data problem, twice, in the field.
+                            if (config.ajaxSetting && config.columns) {
                                 const processUrlParams = (obj) => {
                                     if (Array.isArray(obj)) {
                                         return obj.map(processUrlParams);
@@ -3554,72 +3400,15 @@ function GenericDetail({
                                             </div>
                                         </div>
 
-                                        {activeTabConfig.functions
-                                            ?.checkboxUpdate && (
-                                            <div className={styles.polActions}>
-                                                <button
-                                                    className={styles.btn}
-                                                    onClick={
-                                                        handleCheckboxUpdate
-                                                    }
-                                                >
-                                                    {activeTabConfig.functions
-                                                        .checkboxUpdate.label ||
-                                                        'Update'}
-                                                </button>
-                                            </div>
-                                        )}
-
-                                        {(activeTabConfig.functions
-                                            ?.checkboxDelete ||
-                                            activeTabConfig.customAction ||
-                                            (activeTabConfig.customActions && activeTabConfig.customActions.length > 0)) && (
-                                            <div className={styles.polActions}>
-                                                {activeTabConfig.functions
-                                                    ?.checkboxDelete && (
-                                                    <button
-                                                        className={styles.btn}
-                                                        onClick={
-                                                            handleCheckboxDelete
-                                                        }
-                                                    >
-                                                        {activeTabConfig
-                                                            .functions
-                                                            .checkboxDelete
-                                                            .label || 'Delete'}
-                                                    </button>
-                                                )}
-
-                                                {activeTabConfig.customAction && (
-                                                    <button
-                                                        className={styles.btn}
-                                                        onClick={() =>
-                                                            handleCustomAction(
-                                                                activeTabConfig.customAction
-                                                            )
-                                                        }
-                                                    >
-                                                        {
-                                                            activeTabConfig
-                                                                .customAction
-                                                                .label
-                                                        }
-                                                    </button>
-                                                )}
+                                        {!drawActionsInHeader &&
+                                            actionCluster(
+                                                renderTableUpdateAction(activeTabConfig)
+                                            )}
 
-                                                {activeTabConfig.customActions && Array.isArray(activeTabConfig.customActions) && activeTabConfig.customActions.map((customAction, index) => (
-                                                    <button
-                                                        key={index}
-                                                        className={styles.btn}
-                                                        onClick={() =>
-                                                            handleCustomAction(customAction)
-                                                        }
-                                                    >
-                                                        {getActionLabel(customAction)}
-                                                    </button>
-                                                ))}
-                                            </div>
-                                        )}
+                                        {!drawActionsInHeader &&
+                                            actionCluster(
+                                                renderTableBulkActions(activeTabConfig)
+                                            )}
                                     </>
                                 );
                             } else {
@@ -3846,7 +3635,16 @@ function GenericDetail({
                                     ),
                                 };
 
-                                const updatedForm = {
+                                // A table tab is allowed to have NO form — a
+                                // read-only listing whose rows link elsewhere
+                                // (a client's Projects tab is one). This
+                                // branch assumed every filtered table carried
+                                // form.fields and crashed the whole page on
+                                // the first one that did not.
+                                const updatedForm = !activeTabConfig.form
+                                    ?.fields
+                                    ? activeTabConfig.form
+                                    : {
                                     ...activeTabConfig.form,
                                     fields: activeTabConfig.form.fields.map(
                                         (field) => {
@@ -4023,6 +3821,328 @@ function GenericDetail({
         setEditingTabId(null);
     };
 
+    /* ---------------------------------------------------------------------
+       The action clusters, and why they are functions rather than JSX in
+       place.
+
+       `editPlacement` draws these EITHER in the title row or pinned
+       bottom-right, and a placement switch is the classic way to end up with
+       two copies of a button. The Edit button's own logic is
+       `inPlaceEditing`, `editingTabId`, `startInPlaceEditing`, and a Save that
+       reaches into the DOM for `.inPlaceEdit button[data-type="save"]` — copy
+       that into a second branch and one of the two silently stops saving the
+       first time anything about in-place editing changes, on whichever
+       placement nobody was looking at.
+
+       So each cluster is built exactly once, here, and the render decides
+       only WHERE to hang it. `actionCluster` is the one wrapper: it is the
+       same `<div>` in both placements, carrying a modifier class in the
+       header one — the floating variant keeps its pill, its backdrop and its
+       `:has(> :nth-child(2))` rules untouched.
+
+       They take the tab config as an argument rather than closing over the
+       state copy, because the title row is rendered BEFORE `renderContent()`
+       walks the tabs and would otherwise be a render behind. Same reason the
+       parameter is named `activeTabConfig`: the bodies are the original JSX,
+       moved and not rewritten.
+       --------------------------------------------------------------------- */
+
+    /** The one wrapper. Returns nothing at all when there is nothing to draw. */
+    const actionCluster = (children) =>
+        children ? (
+            <div
+                className={
+                    drawActionsInHeader
+                        ? `${styles.polActions} ${styles.polActionsHeader}`
+                        : styles.polActions
+                }
+            >
+                {children}
+            </div>
+        ) : null;
+
+    /**
+     * An overview tab's Edit — or, once editing, its Cancel and Save — plus
+     * the OCR save, the export and any custom actions the tab declares.
+     */
+    const renderOverviewActions = (activeTabConfig) => {
+        if (!activeTabConfig?.form) {
+            return null;
+        }
+
+        return (
+            <>
+            {/* Render the "Edit" button if activeTabConfig.form exists */}
+            {!inPlaceEditing ? (
+                <button
+                    className={styles.btn}
+                    title={
+                        activeTabConfig.form
+                            .editLabel || 'Edit'
+                    }
+                    aria-label={
+                        activeTabConfig.form
+                            .editLabel || 'Edit'
+                    }
+                    onClick={() => {
+                        if (
+                            activeTabConfig.form
+                                .inPlaceEdit
+                        ) {
+                            startInPlaceEditing(
+                                activeTabConfig.id
+                            );
+                        } else {
+                            modalOpen(
+                                'update',
+                                routeParams[
+                                    urlParam
+                                ]
+                            );
+                        }
+                    }}
+                >
+                    <Pencil
+                        size={18}
+                        strokeWidth={2.25}
+                    />
+                    <span>
+                        {activeTabConfig.form
+                            .editLabel ||
+                            'Edit'}
+                    </span>
+                </button>
+            ) : (
+                editingTabId ===
+                    activeTabConfig.id && (
+                    <>
+                        {/* Cancel is the way back out of editing, not a
+                            destructive act — it was painted in error red,
+                            the loudest thing on the page, next to the
+                            Save it competes with. Ghost secondary. */}
+                        <button
+                            className={
+                                styles.btnSecondary
+                            }
+                            onClick={
+                                cancelInPlaceEditing
+                            }
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            className={
+                                styles.btn
+                            }
+                            onClick={() => {
+                                // Find the form's save button and click it
+                                const saveButton =
+                                    document.querySelector(
+                                        `.inPlaceEdit .${styles.saveBtn}`
+                                    );
+                                if (
+                                    saveButton
+                                ) {
+                                    saveButton.click();
+                                } else {
+                                    // Fallback to any button with data-type="save"
+                                    const fallbackButton =
+                                        document.querySelector(
+                                            `.inPlaceEdit button[data-type="save"]`
+                                        );
+                                    if (
+                                        fallbackButton
+                                    ) {
+                                        fallbackButton.click();
+                                    }
+                                }
+
+                                // Reset the editing state
+                                setInPlaceEditing(
+                                    false
+                                );
+                                setEditingTabId(
+                                    null
+                                );
+
+                                // Reload data
+                                handleReload();
+                            }}
+                        >
+                            Save
+                        </button>
+                    </>
+                )
+            )}
+
+            {/* Check if sections contain "ocrTemplate" type and render the "Save" button under the same polActions */}
+            {activeTabConfig.sections &&
+                activeTabConfig.sections
+                    .length > 0 &&
+                activeTabConfig.sections.map(
+                    (section, sectionIndex) =>
+                        section.content &&
+                        section.content.some(
+                            (item) =>
+                                item.type ===
+                                'ocrTemplate'
+                        ) && (
+                            <button
+                                key={`save-button-${sectionIndex}`}
+                                className={
+                                    styles.btn
+                                }
+                                onClick={() => {
+                                    // Handle the specific "ocrTemplate" item
+                                    const ocrItem =
+                                        section.content.find(
+                                            (
+                                                item
+                                            ) =>
+                                                item.type ===
+                                                'ocrTemplate'
+                                        );
+                                    handleOcrTemplateSave(
+                                        ocrItem.id
+                                    ); // Now you can safely use ocrItem.id
+                                }}
+                            >
+                                Save
+                            </button>
+                        )
+                )}
+
+            {/* Check if export exists and render the "Export" button under the same polActions */}
+            {activeTabConfig.export && (
+                <button
+                    className={styles.btn}
+                    onClick={() =>
+                        handleExport(
+                            activeTabConfig.export
+                        )
+                    }
+                >
+                    {activeTabConfig.export
+                        .label || 'Export'}
+                </button>
+            )}
+
+            {activeTabConfig.customAction && (
+                <button
+                    className={styles.btn}
+                    onClick={() =>
+                        handleCustomAction(
+                            activeTabConfig.customAction
+                        )
+                    }
+                >
+                    {
+                        activeTabConfig
+                            .customAction.label
+                    }
+                </button>
+            )}
+
+            {activeTabConfig.customActions && Array.isArray(activeTabConfig.customActions) && activeTabConfig.customActions.map((customAction, index) => (
+                <button
+                    key={index}
+                    className={styles.btn}
+                    onClick={() =>
+                        handleCustomAction(customAction)
+                    }
+                >
+                    {getActionLabel(customAction)}
+                </button>
+            ))}
+            </>
+        );
+    };
+
+    /** A table tab's "update the ticked rows" button. */
+    const renderTableUpdateAction = (activeTabConfig) => {
+        if (!activeTabConfig?.functions?.checkboxUpdate) {
+            return null;
+        }
+
+        return (
+            <>
+            <button
+                className={styles.btn}
+                onClick={
+                    handleCheckboxUpdate
+                }
+            >
+                {activeTabConfig.functions
+                    .checkboxUpdate.label ||
+                    'Update'}
+            </button>
+            </>
+        );
+    };
+
+    /** A table tab's bulk delete, and the custom actions beside it. */
+    const renderTableBulkActions = (activeTabConfig) => {
+        if (
+            !(
+                activeTabConfig?.functions?.checkboxDelete ||
+                activeTabConfig?.customAction ||
+                (activeTabConfig?.customActions &&
+                    activeTabConfig.customActions.length > 0)
+            )
+        ) {
+            return null;
+        }
+
+        return (
+            <>
+            {activeTabConfig.functions
+                ?.checkboxDelete && (
+                <button
+                    className={styles.btn}
+                    onClick={
+                        handleCheckboxDelete
+                    }
+                >
+                    {activeTabConfig
+                        .functions
+                        .checkboxDelete
+                        .label || 'Delete'}
+                </button>
+            )}
+
+            {activeTabConfig.customAction && (
+                <button
+                    className={styles.btn}
+                    onClick={() =>
+                        handleCustomAction(
+                            activeTabConfig.customAction
+                        )
+                    }
+                >
+                    {
+                        activeTabConfig
+                            .customAction
+                            .label
+                    }
+                </button>
+            )}
+
+            {activeTabConfig.customActions && Array.isArray(activeTabConfig.customActions) && activeTabConfig.customActions.map((customAction, index) => (
+                <button
+                    key={index}
+                    className={styles.btn}
+                    onClick={() =>
+                        handleCustomAction(customAction)
+                    }
+                >
+                    {getActionLabel(customAction)}
+                </button>
+            ))}
+            </>
+        );
+    };
+
+
     /**
      * Detail tabs are a horizontal strip above the content panel.
      *
@@ -4046,6 +4166,68 @@ function GenericDetail({
      */
     const tabsUnderlined = isFlatFilterList(filters);
 
+    /**
+     * The active tab's action cluster, when this page asked for it in the
+     * title row. `null` on the floating default, so the title row is
+     * byte-identical for every host that did not opt in.
+     *
+     * The active tab is worked out here rather than read off the
+     * `activeTabConfig` STATE, and that is not a preference: the state is set
+     * by an effect, so it is a render behind, and a header that lags one tab
+     * behind the panel under it draws the previous tab's Edit button. The two
+     * lines below are the same lookup `renderContent()` makes, in the same
+     * order, on the same `subnav` — which also runs during THIS render, but
+     * later in the tree than the title row.
+     *
+     * The tab TYPE gate mirrors the switch exactly, and deliberately so:
+     * placement moves a cluster, it must never add one. An overview tab draws
+     * the Edit cluster; a table tab draws its bulk actions, and only once its
+     * grid config has arrived, which is the same `config.ajaxSetting &&
+     * config.columns` test that decides whether the table case renders at all.
+     * Every other tab type has never had a cluster and still does not.
+     */
+    const headerActions = (() => {
+        if (!drawActionsInHeader || !subnav || subnav.length === 0) {
+            return null;
+        }
+
+        const activeTab = subnav.find((s) => s.show === true);
+        const activeTabConfig = activeTab
+            ? (tabs || []).find((t) => t.id === activeTab.id)
+            : null;
+
+        if (!activeTabConfig || !activeTabConfig.type) {
+            return null;
+        }
+
+        if (activeTabConfig.type === 'overview') {
+            return actionCluster(renderOverviewActions(activeTabConfig));
+        }
+
+        if (
+            activeTabConfig.type === 'table' &&
+            config.ajaxSetting &&
+            config.columns
+        ) {
+            const update = renderTableUpdateAction(activeTabConfig);
+            const bulk = renderTableBulkActions(activeTabConfig);
+
+            /* One cluster, not two. Pinned bottom-right these are separate
+               bars stacked at the same coordinates; on a single row they are
+               simply buttons beside each other. */
+            return update || bulk
+                ? actionCluster(
+                      <>
+                          {update}
+                          {bulk}
+                      </>
+                  )
+                : null;
+        }
+
+        return null;
+    })();
+
     return (
         <>
             <div className={styles.grid}>
@@ -4058,8 +4240,9 @@ function GenericDetail({
                         }`}
                     >
                         <Breadcrumb data={data} page={page} />
-                        {(actions || total > 0) && (
+                        {(actions || total > 0 || headerActions) && (
                             <div
+                                className={styles.titleActions}
                                 style={{
                                     display: 'flex',
                                     alignItems: 'center',
@@ -4074,6 +4257,10 @@ function GenericDetail({
                                     </div>
                                 )}
                                 {actions}
+                                {/* Last, so a host's own `actions` keep the
+                                    position they have always had and the
+                                    record's Edit sits outermost right. */}
+                                {headerActions}
                             </div>
                         )}
                     </div>