@visns-studio/visns-components 6.0.3 → 6.0.5

package/src/components/generic/GenericFormBuilder.jsx

@@ -1,6 +1,6 @@
 import '../styles/global.css';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import StandardModal from './StandardModal';
 import { arrayMove } from '@dnd-kit/sortable';
@@ -38,6 +38,8 @@ import {
     Search,
     ChevronDown,
     ChevronRight,
+    Copy,
+    List,
 } from 'lucide-react';
 import { confirmDialog } from '../utils/ConfirmDialog';
 
@@ -124,10 +126,28 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     });
     const [moveToPosition, setMoveToPosition] = useState('');
     const [collapsedSections, setCollapsedSections] = useState(new Set());
+
+    /**
+     * Compact mode renders each field as a one-line summary instead of a live
+     * control. Site Start Inspection has 87 fields; previewing them all means
+     * two dozen full-height textareas and file pickers, so arranging the form
+     * turns into a scroll expedition through mostly empty boxes. Preview is
+     * still a click away when you want to see the real thing.
+     */
+    const [compactMode, setCompactMode] = useState(true);
+    const [showOutline, setShowOutline] = useState(true);
     const sortTriggeredRef = useRef(false);
 
     const canvasTypes = SketchConfig.canvasTypes;
 
+    /**
+     * Templates whose fields are composed per form rather than authored here
+     * (outstanding items build theirs from the linked inspection). Offering
+     * "add a field" on one of these would be offering something that has no
+     * effect.
+     */
+    const dynamicFields = data.field_source === 'dynamic';
+
     // Generate compact field info for display in the center top
     const getFieldInfo = (field) => {
         const fieldTypeLabel =
@@ -236,6 +256,181 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         return collapsed;
     };
 
+    /**
+     * Sections are implicit: `type: 'section'` acts as a divider in a flat
+     * array, and everything after it belongs to it until the next one. This
+     * turns that into groups for the outline and the section headers.
+     */
+    const sectionGroups = useMemo(() => {
+        const groups = [];
+        let current = null;
+
+        (data.detail || []).forEach((field, index) => {
+            if (field.type === 'section') {
+                current = {
+                    id: field.id,
+                    label: field.label || 'Untitled section',
+                    index,
+                    fields: [],
+                };
+                groups.push(current);
+                return;
+            }
+
+            // Fields before the first section still need somewhere to live.
+            if (!current) {
+                current = {
+                    id: '__ungrouped',
+                    label: 'Before first section',
+                    index: -1,
+                    fields: [],
+                };
+                groups.push(current);
+            }
+
+            current.fields.push({ field, index });
+        });
+
+        return groups;
+    }, [data.detail]);
+
+    /**
+     * A duplicate needs its own id or React keys collide and the sortable
+     * list starts swapping the wrong rows. Ids are "<slug>::<uuid>", so the
+     * slug is kept for readability and the uuid regenerated.
+     */
+    const freshFieldId = (existingId) => {
+        const slug = String(existingId || 'field').split('::')[0];
+        return `${slug}::${uuidv4()}`;
+    };
+
+    const handleDuplicateField = (id) => {
+        const index = (data.detail || []).findIndex((item) => item.id === id);
+        if (index < 0) return;
+
+        const original = data.detail[index];
+        const copy = {
+            ...original,
+            id: freshFieldId(original.id),
+            label: `${original.label} (copy)`,
+        };
+
+        const newDetail = [...data.detail];
+        newDetail.splice(index + 1, 0, copy);
+        setData((items) => ({ ...items, detail: newDetail }));
+        toast.success(`Duplicated "${original.label}".`);
+    };
+
+    /**
+     * Duplicating a section takes its fields with it — the whole point is the
+     * repeated checkbox / photo / comments block, which is tedious to rebuild
+     * one field at a time.
+     */
+    const handleDuplicateSection = (sectionId) => {
+        const group = sectionGroups.find((entry) => entry.id === sectionId);
+        if (!group || group.index < 0) return;
+
+        const section = data.detail[group.index];
+        const block = [section, ...group.fields.map((entry) => entry.field)];
+        const copies = block.map((field, offset) => ({
+            ...field,
+            id: freshFieldId(field.id),
+            label: offset === 0 ? `${field.label} (copy)` : field.label,
+            // A copied field must not keep pointing at the original's
+            // conditional source, or editing one would silently drive both.
+            conditional_field: '',
+            conditional_value: '',
+        }));
+
+        const insertAt = group.index + block.length;
+        const newDetail = [...data.detail];
+        newDetail.splice(insertAt, 0, ...copies);
+        setData((items) => ({ ...items, detail: newDetail }));
+        toast.success(
+            `Duplicated "${section.label}" and ${group.fields.length} field${
+                group.fields.length === 1 ? '' : 's'
+            }.`
+        );
+    };
+
+
+    /**
+     * Which section is currently on screen, so the outline reflects where you
+     * are rather than just listing what exists. Without it the rail is a
+     * static menu and you still lose your place in 87 fields.
+     */
+    const [activeSection, setActiveSection] = useState(null);
+
+    useEffect(() => {
+        if (!showOutline || sectionGroups.length === 0) return undefined;
+
+        const onScroll = () => {
+            let current = null;
+            for (const group of sectionGroups) {
+                if (group.index < 0) continue;
+                const node = document.getElementById(`fb-field-${group.id}`);
+                if (!node) continue;
+                // A section counts as current once its header passes the
+                // upper third of the viewport.
+                if (node.getBoundingClientRect().top <= window.innerHeight / 3) {
+                    current = group.id;
+                }
+            }
+            setActiveSection(current);
+        };
+
+        onScroll();
+        window.addEventListener('scroll', onScroll, { passive: true });
+
+        return () => window.removeEventListener('scroll', onScroll);
+    }, [showOutline, sectionGroups]);
+
+
+    /**
+     * The app header is `position: fixed` with a content-driven height, so a
+     * hard-coded sticky offset puts the builder toolbar underneath it.
+     * Measure it and expose it as a custom property instead.
+     */
+    useEffect(() => {
+        const measure = () => {
+            // The <header> TAG, not a class: GenericMain renders it with a
+            // CSS-module class, so the DOM name is hashed and a `.header`
+            // selector never matches.
+            const header = document.querySelector('header');
+
+            // Only a fixed or sticky header overlaps the page; a static one
+            // scrolls away and must not add an offset.
+            let height = 0;
+            if (header) {
+                const pos = window.getComputedStyle(header).position;
+                if (pos === 'fixed' || pos === 'sticky') {
+                    height = Math.round(header.getBoundingClientRect().height);
+                }
+            }
+
+            document.documentElement.style.setProperty(
+                '--fb-sticky-top',
+                `${height}px`
+            );
+        };
+
+        measure();
+        window.addEventListener('resize', measure);
+        // Fonts and logo images can land after first paint and change the
+        // header height, so re-measure once things settle.
+        const settle = setTimeout(measure, 400);
+
+        return () => {
+            window.removeEventListener('resize', measure);
+            clearTimeout(settle);
+        };
+    }, []);
+
+    const scrollToField = (fieldId) => {
+        const node = document.getElementById(`fb-field-${fieldId}`);
+        if (node) node.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    };
+
     const toggleSectionCollapse = (sectionId) => {
         setCollapsedSections((prev) => {
             const newSet = new Set(prev);
@@ -273,6 +468,155 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     const collapsedFieldIds = getCollapsedFieldIds();
 
     // Create sortable field item using @dnd-kit
+
+    /**
+     * Compact edit row.
+     *
+     * Deliberately shares NO markup or styles with SortableFieldItem. That
+     * component renders a tall preview card — absolutely positioned control
+     * bar, fixed heights, a two-column grid — and every attempt to override
+     * those from the outside produced a different broken layout. Two modes,
+     * two renderers, no shared stylesheet.
+     *
+     * The behaviour is identical: same sortable id, same handlers, same
+     * DndContext. Only the presentation differs.
+     */
+
+    /**
+     * Preview row — the form as it will actually appear.
+     *
+     * No drag handle, index badge, action icons or hover chrome: editing all
+     * happens in the compact list, so carrying the authoring furniture in
+     * here only obscures what the preview is for. Not sortable either, which
+     * is why it needs no DndContext.
+     */
+    const PreviewFieldItem = ({ field }) => (
+        <div
+            className={`${renderClassName(field)} ${styles.pvItem}`}
+            data-field-size={field.size}
+        >
+            {renderField(field)}
+        </div>
+    );
+
+    const CompactFieldRow = ({ field, index: counter }) => {
+        const {
+            attributes,
+            listeners,
+            setNodeRef,
+            transform,
+            transition,
+            isDragging,
+        } = useSortable({
+            id: field.id,
+            data: { type: 'field', size: field.size, index: counter },
+        });
+
+        const isSection = field.type === 'section';
+        const group = isSection
+            ? sectionGroups.find((entry) => entry.id === field.id)
+            : null;
+        const isSectionCollapsed = isSection && collapsedSections.has(field.id);
+
+        const isDimmed =
+            searchQuery &&
+            !(
+                field.label?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                field.type?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                field.id?.toLowerCase().includes(searchQuery.toLowerCase())
+            );
+
+        return (
+            <div
+                ref={setNodeRef}
+                id={`fb-field-${field.id}`}
+                className={`${styles.cRow} ${isSection ? styles.cRowSection : ''} ${
+                    isDragging ? styles.cRowDragging : ''
+                }`}
+                style={{
+                    transform: CSS.Transform.toString(transform),
+                    transition: isDragging ? 'none' : transition,
+                    opacity: isDimmed ? 0.3 : 1,
+                }}
+            >
+                <span
+                    {...attributes}
+                    {...listeners}
+                    className={styles.cGrip}
+                    title="Drag to reorder"
+                >
+                    <ChevronVertical size={15} strokeWidth={2.5} />
+                </span>
+
+                {isSection ? (
+                    <button
+                        className={styles.cCollapse}
+                        onClick={() => toggleSectionCollapse(field.id)}
+                        title={isSectionCollapsed ? 'Expand' : 'Collapse'}
+                    >
+                        {isSectionCollapsed ? (
+                            <ChevronRight size={15} />
+                        ) : (
+                            <ChevronDown size={15} />
+                        )}
+                    </button>
+                ) : (
+                    <span className={styles.cNum}>{counter + 1}</span>
+                )}
+
+                <span className={styles.cLabel} title={field.label}>
+                    {field.label || <em>Untitled</em>}
+                </span>
+
+                <span className={styles.cMeta}>
+                    {isSection
+                        ? `${group ? group.fields.length : 0} fields`
+                        : getFieldInfo(field)}
+                </span>
+
+                <span className={styles.cActions}>
+                    <button
+                        title={
+                            isSection
+                                ? 'Duplicate section and its fields'
+                                : 'Duplicate field'
+                        }
+                        onClick={() =>
+                            isSection
+                                ? handleDuplicateSection(field.id)
+                                : handleDuplicateField(field.id)
+                        }
+                    >
+                        <Copy size={15} />
+                    </button>
+                    <button
+                        title="Move to position"
+                        onClick={() => {
+                            setMoveToDialog({
+                                show: true,
+                                fieldId: field.id,
+                                currentPos: counter + 1,
+                            });
+                            setMoveToPosition(String(counter + 1));
+                        }}
+                    >
+                        <ArrowUpDown size={15} />
+                    </button>
+                    <button title="Edit" onClick={() => handleEdit(counter)}>
+                        <Pencil size={15} />
+                    </button>
+                    <button
+                        className={styles.cDelete}
+                        title="Delete"
+                        onClick={() => handleDeleteField(field.id, field.label)}
+                    >
+                        <TrashCan size={15} />
+                    </button>
+                </span>
+            </div>
+        );
+    };
+
     const SortableFieldItem = ({ field, index: counter }) => {
         const {
             attributes,
@@ -413,6 +757,27 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                 )}
                             </button>
                         )}
+                        <button
+                            className={styles.duplicateBtn}
+                            data-tooltip-id="action-tooltip"
+                            data-tooltip-content={
+                                isSection
+                                    ? 'Duplicate section and its fields'
+                                    : 'Duplicate field'
+                            }
+                            data-tooltip-place="top"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                if (isSection) {
+                                    handleDuplicateSection(field.id);
+                                } else {
+                                    handleDuplicateField(field.id);
+                                }
+                            }}
+                        >
+                            <Copy strokeWidth={2.5} size={17} />
+                        </button>
                         <ArrowUpDown
                             className={styles.moveIcon}
                             strokeWidth={3}
@@ -464,7 +829,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                         />
                     </div>
                 </div>
-                <div className={styles.fieldContent}>
+                <div className={styles.fieldContent} id={`fb-field-${field.id}`}>
                     {renderField(field)}
                 </div>
             </div>
@@ -1348,16 +1713,23 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
             <div className={styles.grid}>
                 <div className={styles.grid__row}>
                     <div className={styles.grid__fullwidth}>
-                        <div className={styles.formSplit}>
-                            <div className={styles.gridtxt__header}>
+                        <div
+                            className={styles.formSplit}
+                        >
+                            <div className={styles.stickyHead}>
+                            <div
+                                className={`${styles.gridtxt__header} ${styles.builderBar}`}
+                            >
                                 <span>
                                     {formTitle
                                         ? formTitle
                                         : 'Form Template Preview'}
                                 </span>
-                            </div>
+                                <div className={styles.builderTools}>
                             {data.detail && data.detail.length > 5 && (
-                                <div className={styles.searchBar}>
+                                <div
+                                    className={`${styles.searchBar} ${styles.searchBarTop}`}
+                                >
                                     <Search
                                         size={16}
                                         className={styles.searchIcon}
@@ -1406,6 +1778,108 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                     )}
                                 </div>
                             )}
+                                    <span className={styles.fieldCount}>
+                                        {(data.detail || []).length} fields ·{' '}
+                                        {sectionGroups.filter(
+                                            (group) => group.index >= 0
+                                        ).length}{' '}
+                                        sections
+                                    </span>
+                                    <button
+                                        className={`${styles.toolBtn} ${
+                                            showOutline ? styles.toolBtnOn : ''
+                                        }`}
+                                        onClick={() =>
+                                            setShowOutline((open) => !open)
+                                        }
+                                        data-tooltip-id="action-tooltip"
+                                        data-tooltip-content="Toggle the section outline"
+                                    >
+                                        <List size={15} /> Sections
+                                    </button>
+                                    <div className={styles.modeSwitch}>
+                                        <button
+                                            className={
+                                                compactMode
+                                                    ? styles.modeOn
+                                                    : undefined
+                                            }
+                                            onClick={() => setCompactMode(true)}
+                                        >
+                                            Edit
+                                        </button>
+                                        <button
+                                            className={
+                                                compactMode
+                                                    ? undefined
+                                                    : styles.modeOn
+                                            }
+                                            onClick={() =>
+                                                setCompactMode(false)
+                                            }
+                                        >
+                                            Preview
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            {showOutline && sectionGroups.length > 0 && (
+                                <nav className={styles.sectionNav}>
+                                    {sectionGroups.map((group) => {
+                                        const collapsed = collapsedSections.has(
+                                            group.id
+                                        );
+
+                                        return (
+                                            <button
+                                                key={group.id}
+                                                className={`${styles.sectionChip} ${
+                                                    activeSection === group.id
+                                                        ? styles.sectionChipActive
+                                                        : ''
+                                                } ${
+                                                    collapsed
+                                                        ? styles.sectionChipCollapsed
+                                                        : ''
+                                                }`}
+                                                title={
+                                                    collapsed
+                                                        ? `${group.label} (collapsed)`
+                                                        : group.label
+                                                }
+                                                onClick={() => {
+                                                    // Jumping into a collapsed
+                                                    // section opens it first,
+                                                    // otherwise the scroll
+                                                    // lands on nothing.
+                                                    if (collapsed) {
+                                                        toggleSectionCollapse(
+                                                            group.id
+                                                        );
+                                                    }
+                                                    scrollToField(group.id);
+                                                }}
+                                            >
+                                                <span
+                                                    className={
+                                                        styles.sectionChip__label
+                                                    }
+                                                >
+                                                    {group.label}
+                                                </span>
+                                                <span
+                                                    className={
+                                                        styles.sectionChip__count
+                                                    }
+                                                >
+                                                    {group.fields.length}
+                                                </span>
+                                            </button>
+                                        );
+                                    })}
+                                </nav>
+                            )}
+                            </div>
                             {data.detail && data.detail.length > 0 ? (
                                 <div className={styles.modal__content}>
                                     <div className={styles.formcontainer}>
@@ -1431,16 +1905,30 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                 strategy={rectSortingStrategy}
                                             >
                                                 <div
-                                                    className={styles.modalForm}
+                                                    className={`${
+                                                        compactMode
+                                                            ? styles.cList
+                                                            : styles.modalForm
+                                                    } ${
+                                                        compactMode
+                                                            ? ''
+                                                            : styles.pvForm
+                                                    }`}
                                                 >
                                                     {data.detail.map(
-                                                        (field, index) => (
-                                                            <SortableFieldItem
-                                                                key={field.id}
-                                                                field={field}
-                                                                index={index}
-                                                            />
-                                                        )
+                                                        (field, index) =>
+                                                            compactMode ? (
+                                                                <CompactFieldRow
+                                                                    key={field.id}
+                                                                    field={field}
+                                                                    index={index}
+                                                                />
+                                                            ) : (
+                                                                <PreviewFieldItem
+                                                                    key={field.id}
+                                                                    field={field}
+                                                                />
+                                                            )
                                                     )}
                                                 </div>
                                             </SortableContext>
@@ -1481,21 +1969,58 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                     </div>
                                 </div>
                             ) : (
-                                <div className={styles.emptyState}>
-                                    <p>
-                                        No fields added yet. Click "Add Field"
-                                        to get started.
-                                    </p>
+                                <div
+                                    className={`${styles.emptyState} ${
+                                        dynamicFields
+                                            ? styles.emptyStateDynamic
+                                            : ''
+                                    }`}
+                                >
+                                    <span className={styles.emptyState__icon}>
+                                        <List size={26} strokeWidth={1.75} />
+                                    </span>
+                                    {dynamicFields ? (
+                                        <>
+                                            <h3>Fields are added automatically</h3>
+                                            <p>
+                                                This form builds its own fields
+                                                each time it is created, from
+                                                the outstanding items on the
+                                                linked inspection. Anything
+                                                added here would not appear on
+                                                the form.
+                                            </p>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <h3>This form has no fields yet</h3>
+                                            <p>
+                                                Add a section to group related
+                                                questions, then add the fields
+                                                that go inside it.
+                                            </p>
+                                            <button
+                                                className={styles.btn}
+                                                onClick={handleOpenModal}
+                                            >
+                                                Add the first field
+                                            </button>
+                                        </>
+                                    )}
                                 </div>
                             )}
                         </div>
                         <div className={styles.polActions}>
-                            <button
-                                className={styles.btn}
-                                onClick={handleOpenModal}
-                            >
-                                Add Field
-                            </button>
+                            {/* Nothing to author on a dynamic template, but
+                                Edit Form stays so it can still be renamed. */}
+                            {!dynamicFields && (
+                                <button
+                                    className={styles.btn}
+                                    onClick={handleOpenModal}
+                                >
+                                    Add Field
+                                </button>
+                            )}
                             <button
                                 className={styles.btn}
                                 onClick={handleOpenModalForm}