@saltcorn/builder 0.9.3-beta.0 → 0.9.3-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.3-beta.0",
+  "version": "0.9.3-beta.2",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/Toolbox.js

@@ -251,15 +251,19 @@ const LinkElem = ({ connectors }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const ViewElem = ({ connectors, views }) => (
+const ViewElem = ({ connectors, views, isPageEdit }) => (
   <WrapElem
     connectors={connectors}
     icon="fas fa-eye"
     title="Embed a view"
     label="View"
-    disable={views.length < 2}
+    disable={!views || views.length < (!isPageEdit ? 2 : 1)}
   >
-    <View name={"not_assigned"} state={"shared"} view={views[0].name} />
+    <View
+      name={"not_assigned"}
+      state={"shared"}
+      view={views?.length > 0 ? views[0].name : ""}
+    />
   </WrapElem>
 );
 /**
@@ -425,10 +429,10 @@ const ViewLinkElem = ({ connectors, options }) => (
     icons={["fas fa-eye", "fas fa-link"]}
     title="Link to a view"
     label="ViewLink"
-    disable={options.views.length < 2}
+    disable={!options.views || options.views.length < 2}
   >
     <ViewLink
-      name={options.views.length > 0 ? options.views[0].name : ""}
+      name={options.views?.length > 0 ? options.views[0].name : ""}
       block={false}
       minRole={100}
       label={""}
@@ -703,7 +707,7 @@ const ToolboxPage = () => {
       </div>
       <div className="toolbar-row">
         <LinkElem connectors={connectors} />
-        <ViewElem connectors={connectors} views={views} />
+        <ViewElem connectors={connectors} views={views} isPageEdit={true} />
       </div>
       <div className="toolbar-row">
         <SearchElem connectors={connectors} />

package/src/components/elements/Action.js

@@ -336,6 +336,9 @@ const ActionSettings = () => {
               });
             }}
           >
+            <option value="" disabled>
+              Select action...
+            </option>
             {options.actions
               .filter((f) => !(options.builtInActions || []).includes(f))
               .map((f, ix) => (
@@ -344,20 +347,24 @@ const ActionSettings = () => {
                 </option>
               ))}
           </select>
-          <label>Only if... (formula)</label>
-          <input
-            type="text"
-            className="form-control text-to-display"
-            value={step_only_ifs?.[use_setting_action_n] || ""}
-            onChange={(e) => {
-              if (!e.target) return;
-              const value = e.target.value;
-              setProp((prop) => {
-                if (!prop.step_only_ifs) prop.step_only_ifs = [];
-                prop.step_only_ifs[use_setting_action_n] = value;
-              });
-            }}
-          />
+          {options.mode !== "page" ? (
+            <Fragment>
+              <label>Only if... (formula)</label>
+              <input
+                type="text"
+                className="form-control text-to-display"
+                value={step_only_ifs?.[use_setting_action_n] || ""}
+                onChange={(e) => {
+                  if (!e.target) return;
+                  const value = e.target.value;
+                  setProp((prop) => {
+                    if (!prop.step_only_ifs) prop.step_only_ifs = [];
+                    prop.step_only_ifs[use_setting_action_n] = value;
+                  });
+                }}
+              />
+            </Fragment>
+          ) : null}
           {stepCfgFields ? (
             <Fragment>
               Step configuration:

package/src/components/elements/Field.js

@@ -97,6 +97,7 @@ const FieldSettings = () => {
     node_id,
     click_to_edit,
     textStyle,
+    onchange_action,
   } = useNode((node) => ({
     name: node.data.props.name,
     fieldview: node.data.props.fieldview,
@@ -104,6 +105,7 @@ const FieldSettings = () => {
     click_to_edit: node.data.props.click_to_edit,
     inline: node.data.props.inline,
     textStyle: node.data.props.textStyle,
+    onchange_action: node.data.props.onchange_action,
     configuration: node.data.props.configuration,
     node_id: node.id,
   }));
@@ -249,6 +251,38 @@ const FieldSettings = () => {
           onChange={(k, v) => refetchPreview({ configuration: { [k]: v } })}
         />
       ) : null}
+      {options.mode === "edit" && options.triggerActions ? (
+        <Fragment>
+          <label>On change action</label>
+          <select
+            value={onchange_action}
+            className="form-control form-select"
+            onChange={(e) => {
+              if (!e.target) return;
+              const value = e.target.value;
+              setProp((prop) => {
+                prop.onchange_action = value;
+              });
+            }}
+          >
+            <option value="">None</option>
+            {options.triggerActions.map((f, ix) => (
+              <option key={ix} value={f}>
+                {f}
+              </option>
+            ))}
+          </select>
+          {onchange_action ? (
+            <a
+              className="d-block mt-2"
+              target="_blank"
+              href={`/actions/configure/${onchange_action}`}
+            >
+              Configure this action
+            </a>
+          ) : null}
+        </Fragment>
+      ) : null}
     </Fragment>
   );
 };
@@ -269,6 +303,7 @@ Field.craft = {
       "block",
       "inline",
       "click_to_edit",
+      "onchange_action",
       { name: "configuration", default: {} },
     ],
   },

package/src/components/elements/utils.js

@@ -4,7 +4,7 @@
  * @subcategory components / elements
  */
 /* globals $, _sc_globalCsrf*/
-import React, { Fragment, useState } from "react";
+import React, { Fragment, useState, useEffect } from "react";
 import optionsCtx from "../context";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -775,13 +775,29 @@ const ConfigField = ({
         : field.attributes.options;
     if (!field.required && field.options) field.options.unshift("");
   }
+  const field_type = field.input_type || field.type.name || field.type;
+  const hasSelect =
+    (field_type === "String" && field.attributes?.options) ||
+    field_type === "select";
+  const getOptions = () =>
+    typeof field?.attributes?.options === "string"
+      ? field.attributes.options.split(",").map((s) => s.trim())
+      : field?.attributes?.options || field.options;
+
+  if (hasSelect && typeof value === "undefined") {
+    //pick first value to mimic html form behaviour
+    const options = getOptions();
+    let o;
+    if ((o = options[0]))
+      useEffect(() => {
+        myOnChange(typeof o === "string" ? o : o.value || o.name || o);
+      }, []);
+  }
+
   const dispatch = {
     String() {
       if (field.attributes?.options) {
-        const options =
-          typeof field.attributes.options === "string"
-            ? field.attributes.options.split(",").map((s) => s.trim())
-            : field.attributes.options;
+        const options = getOptions();
         return (
           <select
             className="form-control form-select"
@@ -973,7 +989,7 @@ const ConfigField = ({
       );
     },
   };
-  const f = dispatch[field.input_type || field.type.name || field.type];
+  const f = dispatch[field_type];
   return f ? f() : null;
 };