@saltcorn/builder 1.3.1-beta.0 → 1.3.1-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.3.1-beta.0",
+  "version": "1.3.1-beta.10",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,7 +20,7 @@
     "@babel/preset-react": "7.24.7",
     "@craftjs/core": "0.1.0-beta.20",
     "@craftjs/utils": "0.1.0-beta.20",
-    "@saltcorn/common-code": "1.3.1-beta.0",
+    "@saltcorn/common-code": "1.3.1-beta.10",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
@@ -58,6 +58,7 @@
   "overrides": {
     "immer": "9.0.6",
     "glob-parent": "^5.1.2",
+    "undici": "7.12.0",
     "parse5": "7.2.1",
     "parse5-htmlparser2-tree-adapter": "7.0.0"
   },

package/src/components/Builder.js

@@ -127,7 +127,8 @@ const SettingsPanel = () => {
    */
   const handleUserKeyPress = (event) => {
     const { keyCode, target } = event;
-    if (target.tagName.toLowerCase() === "body" && selected) {
+    const tagName = target.tagName.toLowerCase();
+    if ((tagName === "body" || tagName === "button") && selected) {
       //8 backsp, 46 del
       if ((keyCode === 8 || keyCode === 46) && selected.id === "ROOT") {
         deleteChildren();

package/src/components/elements/Action.js

@@ -5,7 +5,7 @@
  */
 /*global notifyAlert*/
 
-import React, { Fragment, useContext } from "react";
+import React, { Fragment, useContext, useEffect } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import {
@@ -22,6 +22,7 @@ import {
 } from "./utils";
 import { ntimes } from "./Columns";
 import { ArrayManager } from "./ArrayManager";
+import Select from "react-select";
 
 export /**
  *
@@ -155,6 +156,78 @@ const ActionSettings = () => {
           step_action_names?.[use_setting_action_n]
         )}`
       : "";
+  const setAction = (value0) => {
+    const value = value0.value || value0;
+    setProp((prop) => {
+      prop.name = value;
+      if (options.mode === "filter" && value !== "Clear") {
+        const rowRequired =
+          options.actionConstraints &&
+          options.actionConstraints[value]?.requireRow;
+        if (!action_row_variable) {
+          prop.action_row_variable = rowRequired ? "state" : "none";
+        } else if (rowRequired && action_row_variable === "none") {
+          prop.action_row_variable = "state";
+        }
+      }
+      if (value === "Multi-step action" && !nsteps) prop.nsteps = 1;
+      if (value === "Multi-step action" && !setting_action_n)
+        prop.setting_action_n = 0;
+      if (value === "Multi-step action" && !configuration.steps)
+        prop.configuration = { steps: [] };
+    });
+    setInitialConfig(setProp, value, getCfgFields(value));
+  };
+  const setMultistepAction = (value0) => {
+    const value = value0.value || value0;
+    setProp((prop) => {
+      if (!prop.step_action_names) prop.step_action_names = [];
+      prop.step_action_names[use_setting_action_n] = value;
+    });
+  };
+  const actionOptions = options.actions.filter(Boolean).map((f, ix) =>
+    f.optgroup && !f.options.length
+      ? null
+      : f.optgroup
+        ? {
+            label: f.label,
+            options: f.options.map((a, jx) => ({ label: a, value: a })),
+          }
+        : { label: f, value: f }
+  );
+  const selectedAction = { label: name, value: name };
+  const multiStepActionOptions = options.actions
+    .filter((f) => f && !(options.builtInActions || []).includes(f))
+    .map((f, ix) =>
+      f.optgroup && !f.options.length
+        ? null
+        : f.optgroup
+          ? {
+              label: f.label,
+              options: f.options
+                .filter(
+                  (f) =>
+                    ![
+                      "Multi-step action",
+                      ...(options.builtInActions || []),
+                    ].includes(f)
+                )
+                .map((a, jx) => ({ label: a, value: a })),
+            }
+          : { label: f, value: f }
+    );
+  const selectedMultiStepAction = {
+    label: step_action_names?.[use_setting_action_n] || "",
+    value: step_action_names?.[use_setting_action_n] || "",
+  };
+  useEffect(() => {
+    apply_showif();
+  }, [
+    name,
+    step_action_names?.[use_setting_action_n] || "",
+    JSON.stringify(configuration?.steps?.[use_setting_action_n]),
+  ]);
+
   return (
     <div>
       <table className="w-100">
@@ -164,55 +237,19 @@ const ActionSettings = () => {
               <label>Action</label>
             </td>
             <td>
-              <select
-                value={name}
-                className="form-control form-select"
-                onChange={(e) => {
-                  if (!e.target) return;
-                  const value = e.target.value;
-                  setProp((prop) => {
-                    prop.name = value;
-                    if (options.mode === "filter" && value !== "Clear") {
-                      const rowRequired =
-                        options.actionConstraints &&
-                        options.actionConstraints[value]?.requireRow;
-                      if (!action_row_variable) {
-                        prop.action_row_variable = rowRequired
-                          ? "state"
-                          : "none";
-                      } else if (
-                        rowRequired &&
-                        action_row_variable === "none"
-                      ) {
-                        prop.action_row_variable = "state";
-                      }
-                    }
-                    if (value === "Multi-step action" && !nsteps)
-                      prop.nsteps = 1;
-                    if (value === "Multi-step action" && !setting_action_n)
-                      prop.setting_action_n = 0;
-                    if (value === "Multi-step action" && !configuration.steps)
-                      prop.configuration = { steps: [] };
-                  });
-                  setInitialConfig(setProp, value, getCfgFields(value));
-                }}
-              >
-                {options.actions.filter(Boolean).map((f, ix) =>
-                  f.optgroup && !f.options.length ? null : f.optgroup ? (
-                    <optgroup key={ix} label={f.label}>
-                      {f.options.map((a, jx) => (
-                        <option key={jx} value={a}>
-                          {a}
-                        </option>
-                      ))}
-                    </optgroup>
-                  ) : (
-                    <option key={ix} value={f}>
-                      {f}
-                    </option>
-                  )
-                )}
-              </select>
+              {options.inJestTestingMode ? null : (
+                <Select
+                  options={actionOptions}
+                  className="react-select action-selector"
+                  value={selectedAction}
+                  defaultValue={selectedAction}
+                  onChange={setAction}
+                  menuPortalTarget={document.body}
+                  styles={{
+                    menuPortal: (base) => ({ ...base, zIndex: 19999 }),
+                  }}
+                ></Select>
+              )}
             </td>
           </tr>
           {name !== "Clear" && options.mode === "filter" ? (
@@ -344,47 +381,19 @@ const ActionSettings = () => {
           ></ArrayManager>
 
           <label>Action</label>
-          <select
-            value={step_action_names?.[use_setting_action_n] || ""}
-            className="form-control form-select"
-            onChange={(e) => {
-              if (!e.target) return;
-              const value = e.target.value;
-              setProp((prop) => {
-                if (!prop.step_action_names) prop.step_action_names = [];
-                prop.step_action_names[use_setting_action_n] = value;
-              });
-            }}
-          >
-            <option value="" disabled>
-              Select action...
-            </option>
-            {options.actions
-              .filter((f) => !(options.builtInActions || []).includes(f))
-              .map((f, ix) =>
-                f.optgroup ? (
-                  <optgroup key={ix} label={f.label}>
-                    {f.options
-                      .filter(
-                        (f) =>
-                          ![
-                            "Multi-step action",
-                            ...(options.builtInActions || []),
-                          ].includes(f)
-                      )
-                      .map((a, jx) => (
-                        <option key={jx} value={a}>
-                          {a}
-                        </option>
-                      ))}
-                  </optgroup>
-                ) : (
-                  <option key={ix} value={f}>
-                    {f}
-                  </option>
-                )
-              )}
-          </select>
+          {options.inJestTestingMode ? null : (
+            <Select
+              options={multiStepActionOptions}
+              className="react-select multistep-action-selector"
+              value={selectedMultiStepAction}
+              defaultValue={selectedMultiStepAction}
+              onChange={setMultistepAction}
+              menuPortalTarget={document.body}
+              styles={{
+                menuPortal: (base) => ({ ...base, zIndex: 19999 }),
+              }}
+            ></Select>
+          )}
           {options.mode !== "page" ? (
             <Fragment>
               <label>Only if... (formula)</label>

package/src/components/elements/DropMenu.js

@@ -51,11 +51,11 @@ const DropMenu = ({
   //const [dropWidth, setDropWidth] = useState(200);
   return (
     <div
-      className={`${selected ? "selected-node" : ""} ${block ? "d-block" : ""}`}
+      className={`${selected ? "selected-node" : ""} ${block ? "d-block" : "d-inline"}`}
       ref={(dom) => connect(drag(dom))}
     >
       <button
-        className={`btn ${action_style || "btn-primary"} ${action_size || ""} `}
+        className={`btn ${action_style || "btn-primary"} d-inline-block ${action_size || ""} `}
         style={
           action_style === "btn-custom-color"
             ? {

package/src/components/elements/Link.js

@@ -67,7 +67,7 @@ const Link = ({
       <button
         className={`${textStyle} is-builder-link ${
           selected ? "selected-node" : ""
-        } ${isFormula?.text ? "font-monospace" : ""} ${link_style} ${
+        } ${isFormula?.text ? "font-monospace" : ""} ${link_style} ${link_style && link_style.includes("btn") ? "d-inline-block" : ""} ${
           link_size || ""
         } ${block ? "d-block" : ""}`}
         ref={(dom) => connect(drag(dom))}

package/src/components/elements/View.js

@@ -261,6 +261,7 @@ const ViewSettings = () => {
               <Select
                 options={viewOptions}
                 value={selectedView}
+                className="react-select view-selector"
                 onChange={set_view_name}
                 onBlur={set_view_name}
                 menuPortalTarget={document.body}
@@ -302,6 +303,7 @@ const ViewSettings = () => {
             <Select
               options={viewOptions}
               value={selectedView}
+              className="react-select view-selector"
               onChange={(e) => {
                 const target_value = e?.target?.value || e?.value;
                 setProp((prop) => {

package/src/components/elements/ViewLink.js

@@ -254,6 +254,7 @@ const ViewLinkSettings = () => {
               {options.inJestTestingMode ? null : (
                 <Select
                   options={viewOptions}
+                  className="react-select viewlink-selector"
                   value={selectedView}
                   onChange={set_view_name}
                   onBlur={set_view_name}

package/src/components/elements/utils.js

@@ -132,15 +132,19 @@ export const FormulaTooltip = () => {
           ))}
         </Fragment>
       ) : null}
-  
+
       <div>
-        In view formulae, you can use aggregation formulae. The syntax for this is 
-        <code>{inbound_table}${inboundkey_field}${target_field}${aggrgation}</code> 
-        The aggregation (which should be lower case) can be ommitted and defaults to 
-        <code>array_agg</code>. Examples: <code>patients$favbook$id$count</code> or 
-        <code>patients$favbook$id</code>. 
-        This is useful if you want a count in a view link label 
-        without creating a stored calculated field.
+        In view formulae, you can use aggregation formulae. The syntax for this
+        is
+        <code>
+          [inbound_table]$[inboundkey_field]$[target_field]$[aggrgation]
+        </code>
+        The aggregation (which should be lower case) can be ommitted and
+        defaults to
+        <code>array_agg</code>. Examples: <code>patients$favbook$id$count</code>{" "}
+        or
+        <code>patients$favbook$id</code>. This is useful if you want a count in
+        a view link label without creating a stored calculated field.
       </div>
       <a
         className="d-block"
@@ -786,7 +790,7 @@ const ConfigForm = ({
   tableName,
   fieldName,
 }) => (
-  <div>
+  <div className="form-namespace">
     {fields.map((f, ix) => {
       if (f.showIf && configuration) {
         let noshow = false;
@@ -948,6 +952,7 @@ const ConfigField = ({
         return (
           <select
             className={`field-${field?.name} form-control form-select`}
+            name={field?.name}
             value={value || ""}
             onChange={(e) => e.target && myOnChange(e.target.value)}
             onBlur={(e) => e.target && myOnChange(e.target.value)}
@@ -966,6 +971,7 @@ const ConfigField = ({
         return (
           <input
             type="text"
+            name={field?.name}
             className={`field-${field?.name} form-control`}
             value={value || ""}
             spellCheck={false}
@@ -977,6 +983,7 @@ const ConfigField = ({
       <select
         className="fontselect form-control form-select"
         value={value || ""}
+        name={field?.name}
         onChange={(e) => e.target && myOnChange(e.target.value)}
         onBlur={(e) => e.target && myOnChange(e.target.value)}
       >
@@ -997,6 +1004,7 @@ const ConfigField = ({
         step={field.step || 1}
         min={field.min}
         max={field.max}
+        name={field?.name}
         value={value || ""}
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
@@ -1007,6 +1015,7 @@ const ConfigField = ({
         className={`field-${field?.name} form-control`}
         value={value || ""}
         step={0.01}
+        name={field?.name}
         max={or_if_undef(field?.attributes?.max, undefined)}
         min={or_if_undef(field?.attributes?.min, undefined)}
         onChange={(e) => e.target && myOnChange(e.target.value)}
@@ -1019,6 +1028,7 @@ const ConfigField = ({
           type="checkbox"
           className={`field-${field?.name} form-check-input`}
           checked={value}
+          name={field?.name}
           onChange={(e) => e.target && myOnChange(e.target.checked)}
         />
         <label className="form-check-label">{field.label}</label>
@@ -1030,6 +1040,7 @@ const ConfigField = ({
         type="text"
         className={`field-${field?.name} form-control`}
         value={value}
+        name={field?.name}
         spellCheck={false}
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
@@ -1040,6 +1051,7 @@ const ConfigField = ({
         type="text"
         className={`field-${field?.name} form-control`}
         value={value}
+        name={field?.name}
         onChange={(e) => e.target && myOnChange(e.target.value)}
         spellCheck={false}
       />
@@ -1056,12 +1068,14 @@ const ConfigField = ({
         return (
           <Select
             options={seloptions}
+            className="react-select selectized-field"
             value={seloptions.find((so) => value === so.value)}
             onChange={(e) =>
               (e.name && myOnChange(e.name)) ||
               (e.value && myOnChange(e.value)) ||
               (typeof e === "string" && myOnChange(e))
             }
+            name={field?.name}
             onBlur={(e) =>
               (e.name && myOnChange(e.name)) ||
               (e.value && myOnChange(e.value)) ||
@@ -1076,6 +1090,7 @@ const ConfigField = ({
           <select
             className={`field-${field?.name} form-control form-select`}
             value={value || ""}
+            name={field?.name}
             onChange={(e) => e.target && myOnChange(e.target.value)}
             onBlur={(e) => e.target && myOnChange(e.target.value)}
           >
@@ -1790,8 +1805,7 @@ export const buildLayers = (relations, tableName, tableNameCache) => {
         fkeys: [],
         relPath: relation.relationString,
       });
-    }
-    else {
+    } else {
       let currentTbl = relation.sourceTblName;
       for (const pathElement of relation.path) {
         if (pathElement.inboundKey) {