@visns-studio/visns-components 6.3.4 → 6.3.5

package/package.json

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

package/src/components/Field.jsx

@@ -2182,6 +2182,11 @@ function Field({
                         isEditable={settings.isEditable ?? false}
                         creatableConfig={settings.creatableConfig || {}}
                         editableConfig={settings.editableConfig || {}}
+                        // The checkbox renderer previously ignored the field's
+                        // read-only state, leaving `readOnlyWhen` configs
+                        // claiming a lock the UI didn't enforce — the same gap
+                        // the radio renderers had.
+                        disabled={isFieldReadOnly}
                         style={style}
                     />
                 );

package/src/components/Form.jsx

@@ -91,6 +91,56 @@ const evaluateDisableWhen = (rule, data) => {
     }
 };
 
+/**
+ * Field visibility rules (`show`).
+ *
+ * A field carries `show: [{ id: '<other field id>', <condition> }]`, meaning
+ * "when MY value satisfies this condition, reveal the named field; otherwise
+ * hide it". With `self: true` the roles swap: the condition is read from the
+ * NAMED field's value and applied to the field carrying the rule.
+ *
+ * Supported conditions:
+ *
+ *   { value: [...] }    the value equals one of the listed literals. What
+ *                       toggles ({ value: [true] }) and radios
+ *                       ({ value: [1, 2] }) use.
+ *
+ *   { minSelected: n }  the value is an array holding at least n entries.
+ *                       For the multi-* types (multi-checkbox-ajax,
+ *                       multi-dropdown-ajax, …) whose value is a list of
+ *                       selected options — e.g. reveal a pair of per-item
+ *                       quantity inputs only once two boxes are ticked.
+ *
+ * Rules are evaluated when the record loads (the effect keyed on
+ * `fetchTrigger`) and again on every change to the field that carries them,
+ * so a revealed field cannot linger after the value that revealed it goes
+ * away. See also `required_rely` (required-ness that follows another field's
+ * value) and `sumEquals` (a group of numbers that must total a target).
+ */
+const hasShowCondition = (condition) =>
+    !!condition &&
+    (condition.minSelected !== undefined ||
+        (Array.isArray(condition.value) && condition.value.length > 0));
+
+const matchesShowCondition = (condition, value) => {
+    if (!condition) {
+        return false;
+    }
+
+    if (condition.minSelected !== undefined) {
+        return (
+            Array.isArray(value) &&
+            value.length >= Number(condition.minSelected)
+        );
+    }
+
+    if (Array.isArray(condition.value)) {
+        return condition.value.includes(value);
+    }
+
+    return false;
+};
+
 function Form({
     ajaxSetting,
     api,
@@ -465,18 +515,71 @@ function Form({
             });
         };
 
+        /**
+         * Re-evaluate this field's `show` rules against the value it has just
+         * been given. The other two change handlers do this from the DOM
+         * node's `data-show`, which a select / multi-checkbox never emits, so
+         * without this a rule on one of those types would only ever run at
+         * load time — the reveal would not follow the user's clicks.
+         */
+        const applyShowConditions = (newValue) => {
+            const sourceField = formSettings.fields.find((f) => f.id === id);
+            const conditions = sourceField?.show || [];
+
+            if (conditions.length === 0) {
+                return;
+            }
+
+            const _fields = [...formSettings.fields];
+            let changed = false;
+
+            conditions.forEach((showObject) => {
+                if (!showObject?.id || !hasShowCondition(showObject)) {
+                    return;
+                }
+
+                const targetIndex = _fields.findIndex(
+                    (f) => f.id === showObject.id
+                );
+
+                if (targetIndex < 0) {
+                    return;
+                }
+
+                const shouldShow = matchesShowCondition(showObject, newValue);
+                const target = showObject.self
+                    ? _fields.find((f) => f.id === id)
+                    : _fields[targetIndex];
+
+                if (target) {
+                    target.hide = !shouldShow;
+                    changed = true;
+                }
+            });
+
+            if (changed && updateForm) {
+                updateForm((prevState) => ({
+                    ...prevState,
+                    fields: _fields,
+                }));
+            }
+        };
+
         // // Switch cases to handle different actions
         switch (action.action) {
             case 'select-option':
             case 'create-option': // New case to handle create-option
             case 'deselect-option': // Handle unchecking tags
                 handleSelectOption();
+                applyShowConditions(inputValue);
                 break;
             case 'clear':
                 updateFormData({ [id]: '' });
+                applyShowConditions([]);
                 break;
             case 'remove-value':
                 updateFormData({ [id]: inputValue });
+                applyShowConditions(inputValue);
                 break;
         }
     };
@@ -1303,6 +1406,83 @@ function Form({
                                 _inputClass[item.id] = styles.inputError;
                             }
                         }
+
+                        /**
+                         * `sumEquals`: a set of numeric fields that must add
+                         * up to a target.
+                         *
+                         *   sumEquals: {
+                         *       fields: ['qty_a', 'qty_b'],
+                         *       equals: 'qty_total',   // field id, or a number
+                         *       message: '…'           // optional override
+                         *   }
+                         *
+                         * Declared once, on any one of the fields in the
+                         * group. Every named field is marked in error so the
+                         * user sees which inputs to reconcile, not just a
+                         * message.
+                         *
+                         * The rule is skipped while its own field is hidden,
+                         * so a group that only appears in a revealed section
+                         * (see the `show` documentation above) cannot block an
+                         * ordinary save. While visible it also stands in for
+                         * `required` on the whole group: a blank member is as
+                         * wrong as a wrong total.
+                         */
+                        if (item.sumEquals && item.hide !== true) {
+                            const rule = item.sumEquals;
+                            const groupIds = Array.isArray(rule.fields)
+                                ? rule.fields
+                                : [];
+
+                            if (groupIds.length > 0) {
+                                const labelFor = (fieldId) =>
+                                    fields.find((f) => f.id === fieldId)
+                                        ?.label || fieldId;
+                                const groupLabels = groupIds
+                                    .map(labelFor)
+                                    .join(' and ');
+                                const groupValues = groupIds.map(
+                                    (fieldId) => formData[fieldId]
+                                );
+                                const incomplete = groupValues.some(
+                                    (v) =>
+                                        v === null ||
+                                        v === undefined ||
+                                        v === '' ||
+                                        isNaN(Number(v))
+                                );
+
+                                const target =
+                                    typeof rule.equals === 'number'
+                                        ? rule.equals
+                                        : Number(formData[rule.equals]);
+
+                                const markGroup = () =>
+                                    groupIds.forEach((fieldId) => {
+                                        _inputClass[fieldId] =
+                                            styles.inputError;
+                                    });
+
+                                if (incomplete) {
+                                    validation += `${groupLabels} are required.<br/>`;
+                                    markGroup();
+                                } else if (!isNaN(target)) {
+                                    const sum = groupValues.reduce(
+                                        (total, v) => total + Number(v),
+                                        0
+                                    );
+
+                                    if (sum !== target) {
+                                        validation +=
+                                            (rule.message ||
+                                                `${groupLabels} must add up to ${target} - they add up to ${sum}.`) +
+                                            '<br/>';
+                                        markGroup();
+                                    }
+                                }
+                            }
+                        }
                     });
 
                     setInputClass(_inputClass);
@@ -2676,9 +2856,9 @@ function Form({
             const showConditions = field.show || [];
 
             showConditions.forEach((showObject) => {
-                const { id, value, self } = showObject;
+                const { id, self } = showObject;
 
-                if (id != '' && value.length > 0) {
+                if (id != '' && hasShowCondition(showObject)) {
                     const targetField = formSettings.fields.find(
                         (f) => f.id === id
                     );
@@ -2695,7 +2875,10 @@ function Form({
                             valueChecker !== undefined &&
                             valueChecker !== null
                         ) {
-                            const shouldShow = value.includes(valueChecker);
+                            const shouldShow = matchesShowCondition(
+                                showObject,
+                                valueChecker
+                            );
 
                             if (self) {
                                 field.hide = !shouldShow;

package/src/components/MultiCheckbox.jsx

@@ -16,6 +16,11 @@ function MultiCheckbox({
     isEditable = false,
     creatableConfig = {},
     editableConfig = {},
+    // The checkbox renderer used to ignore the field's read-only state, so a
+    // `readOnlyWhen` config claimed a lock the UI never enforced (the same
+    // gap the radio renderers had). Disabling the boxes also takes the
+    // create/edit affordances away — they mutate the option list.
+    disabled = false,
 }) {
     const [checkboxOptions, setCheckboxOptions] = useState([]);
     const [selectedValues, setSelectedValues] = useState([]);
@@ -75,8 +80,12 @@ function MultiCheckbox({
     const filteredOptions = checkboxOptions;
 
     const handleCheckboxChange = (option, isChecked) => {
+        if (disabled) {
+            return;
+        }
+
         let newSelected;
-        
+
         if (isChecked) {
             // Add to selection
             newSelected = [...selectedValues, option];
@@ -186,7 +195,7 @@ function MultiCheckbox({
         <div className={`${styles.multiCheckbox} ${className || ''}`} style={style}>
 
             {/* Create new tag section */}
-            {isCreatable && (
+            {isCreatable && !disabled && (
                 <div className={styles.createSection}>
                     {!isCreating ? (
                         <button
@@ -294,9 +303,10 @@ function MultiCheckbox({
                                     checked={isSelected(option.id)}
                                     onChange={(e) => handleCheckboxChange(option, e.target.checked)}
                                     className={styles.checkbox}
+                                    disabled={disabled}
                                 />
                                 <span className={styles.labelText}>{option.label}</span>
-                                {isEditable && (
+                                {isEditable && !disabled && (
                                     <button
                                         type="button"
                                         onClick={(e) => {