@visns-studio/visns-components 5.16.0 → 5.16.1

package/package.json

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

package/src/components/generic/ConditionalDisplayEditor.jsx

@@ -0,0 +1,448 @@
+import React, { useMemo } from 'react';
+import { X as CircleX } from 'lucide-react';
+import Select, { components } from 'react-select';
+import styles from '../styles/GenericFormBuilder.module.scss';
+
+// Field types that cannot produce a value we can compare against — disabled in the picker.
+const NON_VALUE_TYPES = new Set([
+    'plaintext',
+    'plaintextheading',
+    'signature',
+    'canvas',
+    'file',
+    'image',
+    'videoUpload',
+    'table_text',
+]);
+
+// Field types whose `options` array should populate the Value dropdown.
+const OPTION_VALUE_TYPES = new Set([
+    'checkbox',
+    'dropdown',
+    'radio',
+    'toggle',
+    'table_radio',
+]);
+
+// Stored as a literal string so the existing PDF blade (pdf/form.blade.php:132) keeps working.
+const FILLED_IN_SENTINEL = 'not null';
+
+const operatorOf = (conditionalValue) =>
+    conditionalValue === FILLED_IN_SENTINEL ? 'is filled in' : 'is';
+
+// Group fields by their preceding `type: 'section'` header. Fields that can't be
+// used in a condition (non-value types, or fields that appear after the current
+// one so their value isn't yet known) are omitted from the list entirely.
+const buildGroupedOptions = (allFields, currentField, typeLabelFor) => {
+    const currentIndex = allFields.findIndex(
+        (f) => f.id === currentField.id
+    );
+    // Brand-new field not yet in the array → treat as "at the end" so every
+    // existing field qualifies as an earlier reference.
+    const currentPos = currentIndex === -1 ? allFields.length : currentIndex;
+
+    const groups = [];
+    let group = { label: 'General', options: [] };
+    groups.push(group);
+
+    allFields.forEach((f, idx) => {
+        if (!f || !f.id) return;
+        if (f.type === 'section') {
+            group = { label: f.label || 'Section', options: [] };
+            groups.push(group);
+            return;
+        }
+        if (f.id === currentField.id) return;
+        if (NON_VALUE_TYPES.has(f.type)) return;
+        if (idx >= currentPos) return;
+
+        group.options.push({
+            value: f.id,
+            label: f.label || '(untitled)',
+            type: f.type,
+            typeLabel: typeLabelFor(f.type),
+            sectionLabel: group.label,
+            hasOptions: OPTION_VALUE_TYPES.has(f.type),
+        });
+    });
+
+    // Within each group, surface option-bearing fields first; preserve document
+    // order inside each bucket via a stable sort index.
+    groups.forEach((g) => {
+        g.options = g.options
+            .map((o, i) => ({ ...o, __i: i }))
+            .sort((a, b) => {
+                if (a.hasOptions !== b.hasOptions)
+                    return a.hasOptions ? -1 : 1;
+                return a.__i - b.__i;
+            })
+            .map(({ __i, ...rest }) => rest);
+    });
+
+    return groups.filter((g) => g.options.length > 0);
+};
+
+// Custom Option renderer — shows the field label alongside a small type pill
+// so duplicate labels stay distinguishable.
+const FieldOption = (props) => {
+    const { data } = props;
+    return (
+        <components.Option {...props}>
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 8,
+                }}
+            >
+                <span
+                    style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    {data.label}
+                </span>
+                <span
+                    style={{
+                        fontSize: '0.72rem',
+                        color: '#666',
+                        background: 'rgba(0,0,0,0.06)',
+                        borderRadius: 4,
+                        padding: '1px 6px',
+                        flexShrink: 0,
+                    }}
+                >
+                    {data.typeLabel}
+                </span>
+            </div>
+        </components.Option>
+    );
+};
+
+// Collapsed (selected) display carries the section breadcrumb so duplicate labels
+// (e.g. many "Notes" fields) remain distinguishable after selection.
+const FieldSingleValue = (props) => {
+    const { data } = props;
+    return (
+        <components.SingleValue {...props}>
+            {data.sectionLabel && data.sectionLabel !== 'General' ? (
+                <span style={{ color: '#888' }}>
+                    {data.sectionLabel} ›{' '}
+                </span>
+            ) : null}
+            {data.label}
+            {data.typeLabel ? (
+                <span style={{ color: '#888' }}> — {data.typeLabel}</span>
+            ) : null}
+        </components.SingleValue>
+    );
+};
+
+function ConditionalDisplayEditor({
+    currentField,
+    allFields = [],
+    fieldTypes = [],
+    onChange,
+}) {
+    const conditionalFieldId = currentField.conditional_field || '';
+    const conditionalValue = currentField.conditional_value || '';
+    const operator = operatorOf(conditionalValue);
+
+    const selectedField = allFields.find((f) => f.id === conditionalFieldId);
+    const referenceMissing = conditionalFieldId && !selectedField;
+
+    const typeLabelFor = (type) =>
+        fieldTypes.find((t) => t.value === type)?.label || type;
+
+    const groupedOptions = useMemo(
+        () => buildGroupedOptions(allFields, currentField, typeLabelFor),
+        // typeLabelFor is pure over fieldTypes; depend on its source array.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [allFields, currentField.id, fieldTypes]
+    );
+
+    const selectedOption = useMemo(() => {
+        if (!conditionalFieldId) return null;
+        for (const g of groupedOptions) {
+            const match = g.options.find((o) => o.value === conditionalFieldId);
+            if (match) return match;
+        }
+        return null;
+    }, [groupedOptions, conditionalFieldId]);
+
+    const targetHasOptions =
+        selectedField && OPTION_VALUE_TYPES.has(selectedField.type);
+    const targetOptions = targetHasOptions ? selectedField.options || [] : [];
+    const selectedValueOption = targetOptions.find(
+        (o) => o.id === conditionalValue
+    );
+
+    const emitChange = (patch) => {
+        if (onChange) onChange(patch);
+    };
+
+    const handleFieldChange = (option) => {
+        emitChange({
+            conditional_field: option ? option.value : '',
+            conditional_value: '',
+        });
+    };
+
+    const handleOperatorChange = (e) => {
+        const nextOperator = e.target.value;
+        if (nextOperator === 'is filled in') {
+            emitChange({ conditional_value: FILLED_IN_SENTINEL });
+        } else if (conditionalValue === FILLED_IN_SENTINEL) {
+            emitChange({ conditional_value: '' });
+        }
+    };
+
+    const handleValueChange = (e) => {
+        emitChange({ conditional_value: e.target.value });
+    };
+
+    const handleClear = (e) => {
+        e.preventDefault();
+        emitChange({ conditional_field: '', conditional_value: '' });
+    };
+
+    const renderValueControl = () => {
+        if (operator === 'is filled in') return null;
+        if (!selectedField) return null;
+
+        if (targetHasOptions) {
+            return (
+                <select
+                    name="conditional_value"
+                    value={conditionalValue}
+                    onChange={handleValueChange}
+                >
+                    <option value="">Please select a value</option>
+                    {targetOptions.map((opt, i) => (
+                        <option
+                            value={opt.id}
+                            key={`cond-value-${opt.id}-${i}`}
+                        >
+                            {opt.label}
+                        </option>
+                    ))}
+                </select>
+            );
+        }
+
+        const inputType = selectedField.type === 'number' ? 'number' : 'text';
+        return (
+            <input
+                name="conditional_value"
+                value={conditionalValue}
+                type={inputType}
+                onChange={handleValueChange}
+            />
+        );
+    };
+
+    const fieldBreadcrumb = selectedOption
+        ? `${
+              selectedOption.sectionLabel &&
+              selectedOption.sectionLabel !== 'General'
+                  ? `${selectedOption.sectionLabel} › `
+                  : ''
+          }${selectedOption.label}`
+        : selectedField
+        ? selectedField.label
+        : '…';
+
+    const renderPreview = () => {
+        if (!conditionalFieldId && !conditionalValue) {
+            return (
+                <span>
+                    No condition set — this field will always be shown.
+                </span>
+            );
+        }
+
+        if (referenceMissing) return null;
+
+        if (operator === 'is filled in') {
+            return (
+                <span>
+                    This field will only show when{' '}
+                    <strong>{fieldBreadcrumb}</strong> is filled in.
+                </span>
+            );
+        }
+
+        if (!conditionalValue) {
+            return (
+                <span>
+                    Pick a value for <strong>{fieldBreadcrumb}</strong> to
+                    finish the rule.
+                </span>
+            );
+        }
+
+        const valueLabel = targetHasOptions
+            ? selectedValueOption?.label || conditionalValue
+            : conditionalValue;
+
+        return (
+            <span>
+                This field will only show when{' '}
+                <strong>{fieldBreadcrumb}</strong> is{' '}
+                <strong>{valueLabel}</strong>.
+            </span>
+        );
+    };
+
+    const hasAnyRule = !!(conditionalFieldId || conditionalValue);
+
+    const reactSelectStyles = {
+        menu: (provided) => ({ ...provided, zIndex: 99999 }),
+        menuPortal: (base) => ({ ...base, zIndex: 99999 }),
+        control: (base) => ({
+            ...base,
+            minHeight: 44,
+            borderRadius: 6,
+        }),
+        groupHeading: (base) => ({
+            ...base,
+            fontSize: '0.7rem',
+            textTransform: 'uppercase',
+            letterSpacing: '0.04em',
+            color: 'var(--primary-color)',
+            fontWeight: 700,
+            padding: '6px 12px',
+            background: 'rgba(var(--primary-rgb), 0.05)',
+        }),
+        option: (base, state) => ({
+            ...base,
+            cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+        }),
+    };
+
+    return (
+        <>
+            <div className={`${styles.formItem} ${styles.fwItem}`}>
+                <div className={styles.gridtxt__header}>
+                    <span>Conditional Field Display Criteria</span>
+                </div>
+            </div>
+
+            {referenceMissing ? (
+                <div
+                    className={`${styles.formItem} ${styles.fwItem}`}
+                    style={{
+                        background: '#fff8e1',
+                        border: '1px solid #f4c544',
+                        borderRadius: 6,
+                        padding: '8px 12px',
+                        color: '#7a5c00',
+                        fontSize: '0.85rem',
+                    }}
+                >
+                    The field this rule references no longer exists. Pick
+                    another field or clear the rule.
+                </div>
+            ) : null}
+
+            <div className={styles.formItem}>
+                <label className={styles.fi__label}>
+                    <Select
+                        inputId="conditional_field"
+                        classNamePrefix="visns-select"
+                        options={groupedOptions}
+                        value={selectedOption}
+                        onChange={handleFieldChange}
+                        isClearable
+                        isSearchable
+                        placeholder="Always show this field (type to search…)"
+                        menuPortalTarget={
+                            typeof document !== 'undefined'
+                                ? document.body
+                                : undefined
+                        }
+                        menuPlacement="auto"
+                        components={{
+                            Option: FieldOption,
+                            SingleValue: FieldSingleValue,
+                        }}
+                        styles={reactSelectStyles}
+                        noOptionsMessage={() => 'No matching fields'}
+                    />
+                    <span
+                        className={`${styles.fi__span} ${styles.prefocus}`}
+                    >
+                        Show only when
+                    </span>
+                </label>
+            </div>
+
+            <div className={styles.formItem}>
+                <label className={styles.fi__label}>
+                    <select
+                        name="conditional_operator"
+                        value={operator}
+                        onChange={handleOperatorChange}
+                        disabled={!conditionalFieldId}
+                    >
+                        <option value="is">is</option>
+                        <option value="is filled in">is filled in</option>
+                    </select>
+                    <span className={styles.fi__span}>Condition</span>
+                </label>
+            </div>
+
+            {(() => {
+                const valueControl = renderValueControl();
+                if (!valueControl) return null;
+                return (
+                    <div className={styles.formItem}>
+                        <label className={styles.fi__label}>
+                            {valueControl}
+                            <span className={styles.fi__span}>Value</span>
+                        </label>
+                    </div>
+                );
+            })()}
+
+            <div
+                className={`${styles.formItem} ${styles.fwItem}`}
+                style={{
+                    background: 'rgba(0,0,0,0.03)',
+                    borderRadius: 6,
+                    padding: '8px 12px',
+                    color: 'var(--paragraph-color)',
+                    fontSize: '0.85rem',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 8,
+                }}
+            >
+                <div>{renderPreview()}</div>
+                {hasAnyRule ? (
+                    <button
+                        type="button"
+                        onClick={handleClear}
+                        title="Clear rule"
+                        style={{
+                            background: 'transparent',
+                            border: 'none',
+                            cursor: 'pointer',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            color: '#666',
+                        }}
+                    >
+                        <CircleX size={16} />
+                    </button>
+                ) : null}
+            </div>
+        </>
+    );
+}
+
+export default ConditionalDisplayEditor;

package/src/components/generic/GenericFormBuilder.jsx

@@ -47,6 +47,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
 import SketchConfig from '../sketch/json/config.json';
+import ConditionalDisplayEditor from './ConditionalDisplayEditor';
 
 import styles from '../styles/GenericFormBuilder.module.scss'; // Import the CSS module
 
@@ -69,6 +70,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         size: 'half',
         required: 'no',
         textareaHeight: 'normal',
+        conditional_field: '',
+        conditional_value: '',
     });
     const [dataOption, setDataOption] = useState({
         id: '',
@@ -657,6 +660,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
             size: 'half',
             required: 'no',
             textareaHeight: 'normal',
+            conditional_field: '',
+            conditional_value: '',
         }));
         setModalType(() => ({
             type: 'create',
@@ -739,11 +744,32 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                             let newDetail = [...data.detail];
                             newDetail.splice(index, 1);
 
+                            let orphanCount = 0;
+                            newDetail = newDetail.map((item) => {
+                                if (item.conditional_field === id) {
+                                    orphanCount += 1;
+                                    return {
+                                        ...item,
+                                        conditional_field: '',
+                                        conditional_value: '',
+                                    };
+                                }
+                                return item;
+                            });
+
                             setData((items) => ({
                                 ...items,
                                 detail: newDetail,
                             }));
 
+                            if (orphanCount > 0) {
+                                toast.info(
+                                    `Cleared ${orphanCount} conditional rule${
+                                        orphanCount === 1 ? '' : 's'
+                                    } that referenced the deleted field.`
+                                );
+                            }
+
                             handleCloseModal();
                         }
                     },
@@ -2214,63 +2240,17 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                         </div>
                                     ) : null}
 
-                                    <div
-                                        className={`${styles.formItem} ${styles.fwItem}`}
-                                    >
-                                        <div className={styles.gridtxt__header}>
-                                            <span>
-                                                Conditional Field Display
-                                                Criteria
-                                            </span>
-                                        </div>
-                                    </div>
-
-                                    <div className={styles.formItem}>
-                                        <label className={styles.fi__label}>
-                                            <select
-                                                name="conditional_field"
-                                                value={
-                                                    dataField.conditional_field
-                                                }
-                                                onChange={handleChangeForm}
-                                            >
-                                                <option>
-                                                    Please Select an Option
-                                                </option>
-                                                {data.detail &&
-                                                    data.detail.length > 0 &&
-                                                    data.detail.map(
-                                                        (item, key) => (
-                                                            <option
-                                                                value={item.id}
-                                                                key={`conditional-field-${item.id}-${key}`}
-                                                            >
-                                                                {item.label}
-                                                            </option>
-                                                        )
-                                                    )}
-                                            </select>
-                                            <span className={styles.fi__span}>
-                                                Field
-                                            </span>
-                                        </label>
-                                    </div>
-
-                                    <div className={styles.formItem}>
-                                        <label className={styles.fi__label}>
-                                            <input
-                                                name="conditional_value"
-                                                value={
-                                                    dataField.conditional_value
-                                                }
-                                                type="text"
-                                                onChange={handleChangeForm}
-                                            />
-                                            <span className={styles.fi__span}>
-                                                Value
-                                            </span>
-                                        </label>
-                                    </div>
+                                    <ConditionalDisplayEditor
+                                        currentField={dataField}
+                                        allFields={data.detail || []}
+                                        fieldTypes={fieldTypes}
+                                        onChange={(patch) =>
+                                            setDataField((prev) => ({
+                                                ...prev,
+                                                ...patch,
+                                            }))
+                                        }
+                                    />
 
                                     <div
                                         className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}