@aglyn/plugins-logic 1.0.0-beta.246 → 1.0.0-beta.249

package/src/lib/components/host-functions-card.component.js

@@ -34,8 +34,10 @@ import { collection, doc, getCountFromServer, getDocs, limit, query } from "fire
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFirestore, useFirestoreCollection, useHostResourceApi, useUser, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
 import { writeSiteWideChange } from "@aglyn/tenant-feature-instance/hooks/helpers/site-wide-change";
-import { formatParameterOptions, parseParameterOptions } from "../model/parameter-options.js";
+import { ParameterChoicesEditor } from "./parameter-choices-editor.component.js";
 import WhereUsedDialog from "./where-used-dialog.component.js";
+import { FormulaBuilderButton } from "./formula-builder.component.js";
+import { formulaNames } from "../model/formula-names.js";
 import { useConsoleWidgetSlot } from "@aglyn/aglyn/app-utils/console-widget-slot-context";
 import { HOST_LOGIC_ZONE, LOGIC_FUNCTION_EDITOR_ZONE } from "./logic-zones.js";
 import { fetchWhereUsed, summarizeDependents } from "@aglyn/aglyn/app-utils/where-used";
@@ -106,74 +108,118 @@ function emptyDraft() {
 /**
  * What a VISITOR meets for one parameter (AGL-3202): the label above the
  * input, what it starts with, and — for a question with fixed answers — the
- * choices. Empty fields are dropped from the definition rather than stored
- * as empty strings, so a function nobody has dressed for visitors saves
- * exactly the shape it always did.
+ * choices, one row each (AGL-3768). Empty fields are dropped from the
+ * definition rather than stored as empty strings, so a function nobody has
+ * dressed for visitors saves exactly the shape it always did.
  *
- * The choices keep their own text while being typed. Parsing every keystroke
- * back into the box would eat the space after a comma, and the colon after a
- * value, the moment they were typed.
+ * "Starts as" is picked, not typed, wherever there is a list to pick from:
+ * the choices when there are any, on or off for a true/false.
  */ function ParameterAudienceFields(props) {
-    var _parameter_label, _parameter_defaultValue;
+    var _parameter_options, _parameter_label, _parameter_defaultValue;
     const { parameter, onChange } = props;
-    const [choices, setChoices] = useState(()=>formatParameterOptions(parameter.options));
     const assign = (field, value)=>{
         const next = _extends({}, parameter);
         if (value) next[field] = value;
         else delete next[field];
         onChange(next);
     };
+    const options = (_parameter_options = parameter.options) != null ? _parameter_options : [];
+    const startsAsChoices = parameter.type === 'boolean' ? [
+        {
+            value: 'true',
+            label: 'On'
+        },
+        {
+            value: 'false',
+            label: 'Off'
+        }
+    ] : options.length ? options.map((option)=>{
+        var _option_label;
+        return {
+            value: option.value,
+            label: (_option_label = option.label) != null ? _option_label : option.value
+        };
+    }) : null;
     return /*#__PURE__*/ _jsxs(Stack, {
-        direction: "row",
         spacing: 1,
-        sx: {
-            alignItems: 'center'
-        },
         children: [
-            /*#__PURE__*/ _jsx(Typography, {
-                variant: "body2",
-                color: "text.secondary",
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
                 sx: {
-                    width: 110,
-                    flexShrink: 0
+                    alignItems: 'center'
                 },
-                noWrap: true,
-                children: parameter.name || '—'
-            }),
-            /*#__PURE__*/ _jsx(TextField, {
-                label: "Label",
-                placeholder: parameter.name,
-                value: (_parameter_label = parameter.label) != null ? _parameter_label : '',
-                onChange: (event)=>assign('label', event.target.value.slice(0, 80)),
-                size: "small",
-                sx: {
-                    flex: 2
-                }
-            }),
-            /*#__PURE__*/ _jsx(TextField, {
-                label: "Starts as",
-                value: (_parameter_defaultValue = parameter.defaultValue) != null ? _parameter_defaultValue : '',
-                onChange: (event)=>assign('defaultValue', event.target.value.slice(0, 120)),
-                size: "small",
-                sx: {
-                    flex: 1
-                }
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        sx: {
+                            width: 110,
+                            flexShrink: 0
+                        },
+                        noWrap: true,
+                        children: parameter.name || '—'
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Label",
+                        placeholder: parameter.name,
+                        value: (_parameter_label = parameter.label) != null ? _parameter_label : '',
+                        onChange: (event)=>assign('label', event.target.value.slice(0, 80)),
+                        size: "small",
+                        sx: {
+                            flex: 2
+                        }
+                    }),
+                    startsAsChoices ? /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
+                        label: "Starts as",
+                        value: startsAsChoices.some((choice)=>choice.value === parameter.defaultValue) ? parameter.defaultValue : '',
+                        onChange: (event)=>assign('defaultValue', event.target.value),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "",
+                                children: /*#__PURE__*/ _jsx("em", {
+                                    children: 'Nothing chosen'
+                                })
+                            }),
+                            startsAsChoices.map((choice)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: choice.value,
+                                    children: choice.label
+                                }, choice.value))
+                        ]
+                    }) : /*#__PURE__*/ _jsx(TextField, {
+                        label: "Starts as",
+                        value: (_parameter_defaultValue = parameter.defaultValue) != null ? _parameter_defaultValue : '',
+                        onChange: (event)=>assign('defaultValue', parameter.type === 'number' ? event.target.value.replace(/[^0-9.-]/g, '') : event.target.value.slice(0, 120)),
+                        slotProps: parameter.type === 'number' ? {
+                            htmlInput: {
+                                inputMode: 'decimal'
+                            }
+                        } : undefined,
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    })
+                ]
             }),
-            /*#__PURE__*/ _jsx(TextField, {
-                label: "Choices",
-                placeholder: "value: Label, value: Label",
-                value: choices,
-                onChange: (event)=>{
-                    setChoices(event.target.value);
-                    const options = parseParameterOptions(event.target.value);
+            parameter.type === 'boolean' ? null : /*#__PURE__*/ _jsx(ParameterChoicesEditor, {
+                parameterName: parameter.name,
+                type: parameter.type,
+                options: parameter.options,
+                onChange: (nextOptions)=>{
                     const next = _extends({}, parameter);
-                    if (options.length) next.options = options;
+                    if (nextOptions.length) next.options = nextOptions;
                     else delete next.options;
+                    // A start that is no longer a choice would preselect nothing.
+                    if (nextOptions.length && next.defaultValue !== undefined && !nextOptions.some((option)=>option.value === next.defaultValue)) {
+                        delete next.defaultValue;
+                    }
                     onChange(next);
-                },
-                size: "small",
-                sx: {
-                    flex: 3
                 }
             })
         ]
@@ -194,7 +240,7 @@ function emptyDraft() {
  * the shared evaluator. Definitions persist to `hosts/{hostId}/functions`;
  * prop/event wiring lands with AGL-93.
  */ export function HostFunctionsCard(props) {
-    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10;
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12;
     var _functions_find;
     const { hostId } = props;
     const firestore = useFirestore();
@@ -340,6 +386,35 @@ function emptyDraft() {
         ...((_ref1 = draft == null ? void 0 : draft.parameters) != null ? _ref1 : []).map((parameter)=>parameter.name),
         ...((_ref2 = draft == null ? void 0 : draft.variables) != null ? _ref2 : []).map((variable)=>variable.name)
     ].filter((name)=>VARIABLE_NAME_PATTERN.test(name));
+    /**
+   * The site's variables, for the formula builder's value picker
+   * (AGL-3757). Read the first time a builder opens, like the test run's
+   * read below, so an author who never builds a formula costs nothing.
+   */ const [siteVariables, setSiteVariables] = useState(null);
+    const loadSiteVariables = useCallback(()=>{
+        if (siteVariables) return;
+        setSiteVariables([]);
+        getDocs(query(collection(firestore, 'hosts', hostId, 'variables'), limit(100))).then((snapshot)=>{
+            const rows = [];
+            snapshot.forEach((row)=>{
+                const data = row.data();
+                if ((data == null ? void 0 : data.name) && !data.deletedAt) rows.push(data);
+            });
+            setSiteVariables(rows);
+        }).catch((error)=>{
+            // The builder still offers the function's own names.
+            console.error(error);
+        });
+    }, [
+        siteVariables,
+        firestore,
+        hostId
+    ]);
+    const formulaNameOptions = formulaNames({
+        parameters: (_ref3 = draft == null ? void 0 : draft.parameters) != null ? _ref3 : [],
+        locals: (_ref4 = draft == null ? void 0 : draft.variables) != null ? _ref4 : [],
+        siteVariables: siteVariables != null ? siteVariables : []
+    });
     // Case-insensitive uniqueness (AGL-185): function names must stay
     // unambiguous for legacy {{fn:name(...)}} token resolution.
     const nameTaken = Boolean(draft && functions.some((definition)=>{
@@ -566,6 +641,12 @@ function emptyDraft() {
                                     flex: 1
                                 }
                             }),
+                            /*#__PURE__*/ _jsx(FormulaBuilderButton, {
+                                current: row.expression,
+                                names: formulaNameOptions,
+                                onOpen: loadSiteVariables,
+                                onUse: (expression)=>setRow(section, operationIndex, rowIndex, 'expression', expression)
+                            }),
                             /*#__PURE__*/ _jsx(IconButton, {
                                 size: "small",
                                 "aria-label": "remove operation row",
@@ -752,7 +833,7 @@ function emptyDraft() {
                                 label: "Name",
                                 helperText: nameTaken ? 'A function with this name already exists' : 'Used to identify the function',
                                 error: nameTaken,
-                                value: (_ref3 = draft == null ? void 0 : draft.name) != null ? _ref3 : '',
+                                value: (_ref5 = draft == null ? void 0 : draft.name) != null ? _ref5 : '',
                                 onChange: (event)=>patch((previous)=>_extends({}, previous, {
                                             name: event.target.value
                                         })),
@@ -765,7 +846,7 @@ function emptyDraft() {
                             /*#__PURE__*/ _jsx(SectionLabel, {
                                 children: 'Parameters'
                             }),
-                            ((_ref4 = draft == null ? void 0 : draft.parameters) != null ? _ref4 : []).map((parameter, index)=>/*#__PURE__*/ _jsxs(Stack, {
+                            ((_ref6 = draft == null ? void 0 : draft.parameters) != null ? _ref6 : []).map((parameter, index)=>/*#__PURE__*/ _jsxs(Stack, {
                                     direction: "row",
                                     spacing: 1,
                                     sx: {
@@ -854,7 +935,7 @@ function emptyDraft() {
                                         })),
                                 children: 'Add parameter'
                             }),
-                            ((_ref5 = draft == null ? void 0 : draft.parameters) != null ? _ref5 : []).length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            ((_ref7 = draft == null ? void 0 : draft.parameters) != null ? _ref7 : []).length ? /*#__PURE__*/ _jsxs(_Fragment, {
                                 children: [
                                     /*#__PURE__*/ _jsx(SectionLabel, {
                                         children: 'What visitors see'
@@ -862,9 +943,9 @@ function emptyDraft() {
                                     /*#__PURE__*/ _jsx(Typography, {
                                         variant: "caption",
                                         color: "text.secondary",
-                                        children: 'Used by a Function Widget on a page. A parameter with ' + 'choices is asked as a list, a number as a number box and ' + 'a true/false as a switch.'
+                                        children: 'Used by a Function Widget on a page. A parameter with ' + 'choices is asked as a list — Add choice gives it one — a ' + 'number as a number box and a true/false as a switch.'
                                     }),
-                                    ((_ref6 = draft == null ? void 0 : draft.parameters) != null ? _ref6 : []).map((parameter, index)=>/*#__PURE__*/ _jsx(ParameterAudienceFields, {
+                                    ((_ref8 = draft == null ? void 0 : draft.parameters) != null ? _ref8 : []).map((parameter, index)=>/*#__PURE__*/ _jsx(ParameterAudienceFields, {
                                             parameter: parameter,
                                             onChange: (next)=>patch((previous)=>_extends({}, previous, {
                                                         parameters: previous.parameters.map((p, index2)=>index2 === index ? next : p)
@@ -875,7 +956,7 @@ function emptyDraft() {
                             /*#__PURE__*/ _jsx(SectionLabel, {
                                 children: 'Variables'
                             }),
-                            ((_ref7 = draft == null ? void 0 : draft.variables) != null ? _ref7 : []).map((variable, index)=>/*#__PURE__*/ _jsxs(Stack, {
+                            ((_ref9 = draft == null ? void 0 : draft.variables) != null ? _ref9 : []).map((variable, index)=>/*#__PURE__*/ _jsxs(Stack, {
                                     direction: "row",
                                     spacing: 1,
                                     sx: {
@@ -948,9 +1029,9 @@ function emptyDraft() {
                             /*#__PURE__*/ _jsx(Typography, {
                                 variant: "caption",
                                 color: "text.secondary",
-                                children: 'An expression can use + − × ÷ and parentheses, any site ' + 'variable by its name (a dictionary’s members as ' + 'name.member), and ' + `${FUNCTION_BUILTIN_NAMES.map((name)=>`${name}()`).join(', ')}.`
+                                children: 'Press ƒx beside a box to build its formula by picking values — ' + 'add, smallest of, format as money and more. A box also takes ' + 'a formula written out: + − × ÷ and parentheses, any site ' + 'variable by its name (a dictionary’s members as ' + 'name.member), and ' + `${FUNCTION_BUILTIN_NAMES.map((name)=>`${name}()`).join(', ')}.`
                             }),
-                            ((_ref8 = draft == null ? void 0 : draft.operations) != null ? _ref8 : []).map((operation, index)=>/*#__PURE__*/ _jsxs(Stack, {
+                            ((_ref10 = draft == null ? void 0 : draft.operations) != null ? _ref10 : []).map((operation, index)=>/*#__PURE__*/ _jsxs(Stack, {
                                     spacing: 1,
                                     sx: {
                                         border: 1,
@@ -986,6 +1067,18 @@ function emptyDraft() {
                                                         flex: 1
                                                     }
                                                 }),
+                                                /*#__PURE__*/ _jsx(FormulaBuilderButton, {
+                                                    current: operation.if.left,
+                                                    names: formulaNameOptions,
+                                                    onOpen: loadSiteVariables,
+                                                    onUse: (expression)=>patch((previous)=>_extends({}, previous, {
+                                                                operations: previous.operations.map((op, index2)=>index2 === index ? _extends({}, op, {
+                                                                        if: _extends({}, op.if, {
+                                                                            left: expression
+                                                                        })
+                                                                    }) : op)
+                                                            }))
+                                                }),
                                                 /*#__PURE__*/ _jsx(TextField, {
                                                     value: operation.if.comparator,
                                                     onChange: (event)=>patch((previous)=>_extends({}, previous, {
@@ -1019,6 +1112,18 @@ function emptyDraft() {
                                                     sx: {
                                                         flex: 1
                                                     }
+                                                }),
+                                                /*#__PURE__*/ _jsx(FormulaBuilderButton, {
+                                                    current: operation.if.right,
+                                                    names: formulaNameOptions,
+                                                    onOpen: loadSiteVariables,
+                                                    onUse: (expression)=>patch((previous)=>_extends({}, previous, {
+                                                                operations: previous.operations.map((op, index2)=>index2 === index ? _extends({}, op, {
+                                                                        if: _extends({}, op.if, {
+                                                                            right: expression
+                                                                        })
+                                                                    }) : op)
+                                                            }))
                                                 })
                                             ]
                                         }),
@@ -1064,7 +1169,7 @@ function emptyDraft() {
                             }),
                             /*#__PURE__*/ _jsx(TextField, {
                                 label: "Return value",
-                                value: (_ref9 = draft == null ? void 0 : draft.returnValue) != null ? _ref9 : '',
+                                value: (_ref11 = draft == null ? void 0 : draft.returnValue) != null ? _ref11 : '',
                                 onChange: (event)=>patch((previous)=>_extends({}, previous, {
                                             returnValue: event.target.value
                                         })),
@@ -1086,7 +1191,7 @@ function emptyDraft() {
                                     flexWrap: 'wrap'
                                 },
                                 children: [
-                                    ((_ref10 = draft == null ? void 0 : draft.parameters) != null ? _ref10 : []).map((parameter)=>{
+                                    ((_ref12 = draft == null ? void 0 : draft.parameters) != null ? _ref12 : []).map((parameter)=>{
                                         var _testArgs_parameter_name;
                                         return /*#__PURE__*/ _jsx(TextField, {
                                             label: parameter.name,