@saltcorn/builder 0.9.1-beta.10 → 0.9.1-beta.12

package/package.json

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

package/src/components/elements/Action.js

@@ -18,7 +18,9 @@ import {
   DynamicFontAwesomeIcon,
   setAPropGen,
   buildOptions,
+  ConfigField,
 } from "./utils";
+import { ntimes } from "./Columns";
 
 export /**
  *
@@ -104,6 +106,10 @@ const ActionSettings = () => {
     action_bgcol: node.data.props.action_bgcol,
     action_bordercol: node.data.props.action_bordercol,
     action_textcol: node.data.props.action_textcol,
+    nsteps: node.data.props.nsteps,
+    step_only_ifs: node.data.props.step_only_ifs,
+    step_action_names: node.data.props.step_action_names,
+    setting_action_n: node.data.props.setting_action_n,
   }));
   const {
     actions: { setProp },
@@ -117,11 +123,22 @@ const ActionSettings = () => {
     configuration,
     action_label,
     action_style,
+    nsteps,
+    setting_action_n,
+    step_only_ifs,
+    step_action_names,
   } = node;
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
   const cfgFields = getCfgFields(name);
   const setAProp = setAPropGen(setProp);
+  const use_setting_action_n =
+    setting_action_n || setting_action_n === 0 ? setting_action_n : 0;
+  const stepCfgFields =
+    name === "Multi-step action"
+      ? getCfgFields(step_action_names?.[use_setting_action_n])
+      : null;
+
   return (
     <div>
       <table className="w-100">
@@ -154,6 +171,12 @@ const ActionSettings = () => {
                         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));
                 }}
@@ -163,6 +186,9 @@ const ActionSettings = () => {
                     {f}
                   </option>
                 ))}
+                {options.allowMultiStepAction ? (
+                  <option value={"Multi-step action"}>Multi-step action</option>
+                ) : null}
               </select>
             </td>
           </tr>
@@ -255,7 +281,92 @@ const ActionSettings = () => {
       {action_style !== "on_page_load" ? (
         <BlockSetting block={block} setProp={setProp} />
       ) : null}
-      {cfgFields ? (
+      {name === "Multi-step action" ? (
+        <Fragment>
+          <label>#Steps</label>{" "}
+          <input
+            type="number"
+            value={nsteps}
+            className="form-control w-50 d-inline"
+            step="1"
+            min="1"
+            onChange={(e) => {
+              if (!e.target) return;
+              const value = e.target.value;
+              setProp((prop) => {
+                prop.nsteps = value;
+              });
+            }}
+          />
+          <ConfigField
+            field={{
+              name: "setting_action_n",
+              label: "Column number",
+              type: "btn_select",
+              options: ntimes(nsteps, (i) => ({
+                value: i,
+                title: `${i + 1}`,
+                label: `${i + 1}`,
+              })),
+            }}
+            node={node}
+            setProp={setProp}
+            props={node}
+          ></ConfigField>
+          <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;
+              });
+            }}
+          >
+            {options.actions.map((f, ix) => (
+              <option key={ix} value={f}>
+                {f}
+              </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;
+              });
+            }}
+          />
+          {stepCfgFields ? (
+            <Fragment>
+              Step configuration:
+              <ConfigForm
+                fields={stepCfgFields}
+                configuration={
+                  configuration?.steps?.[use_setting_action_n] || {}
+                }
+                setProp={setProp}
+                setter={(prop, fldname, v) => {
+                  if (!prop.configuration.steps) prop.configuration.steps = [];
+                  if (!prop.configuration.steps[use_setting_action_n])
+                    prop.configuration.steps[use_setting_action_n] = {};
+                  prop.configuration.steps[use_setting_action_n][fldname] = v;
+                }}
+                node={node}
+              />
+            </Fragment>
+          ) : null}
+        </Fragment>
+      ) : cfgFields ? (
         <ConfigForm
           fields={cfgFields}
           configuration={configuration}
@@ -272,6 +383,7 @@ const ActionSettings = () => {
  */
 Action.craft = {
   displayName: "Action",
+  defaultProps: { setting_action_n: 0, nsteps: 1 },
   related: {
     settings: ActionSettings,
   },

package/src/components/elements/Tabs.js

@@ -260,24 +260,6 @@ const TabsSettings = () => {
                 </select>
               </td>
             </tr>
-            {options.mode === "edit" && !serverRendered ? (
-              <tr>
-                <td colSpan="2">
-                  <div className="form-check">
-                    <input
-                      className="form-check-input"
-                      name="block"
-                      type="checkbox"
-                      checked={disable_inactive}
-                      onChange={setAProp("disable_inactive", { checked: true })}
-                    />
-                    <label className="form-check-label">
-                      Disable inactive inputs
-                    </label>
-                  </div>
-                </td>
-              </tr>
-            ) : null}
           </Fragment>
         ) : (
           <Fragment>

package/src/components/elements/utils.js

@@ -652,6 +652,7 @@ const ConfigForm = ({
   fields,
   configuration,
   setProp,
+  setter,
   node,
   onChange,
   tableName,
@@ -663,7 +664,7 @@ const ConfigForm = ({
         let noshow = false;
         Object.entries(f.showIf).forEach(([nm, value]) => {
           if (Array.isArray(value))
-            noshow = noshow || value.includes(configuration[nm]);
+            noshow = noshow || !value.includes(configuration[nm]);
           else noshow = noshow || value !== configuration[nm];
         });
         if (noshow) return null;
@@ -684,6 +685,7 @@ const ConfigForm = ({
           ) : null}
           <ConfigField
             field={f}
+            setter={setter}
             configuration={configuration}
             setProp={setProp}
             onChange={onChange}
@@ -734,6 +736,7 @@ const ConfigField = ({
   setProp,
   onChange,
   props,
+  setter,
   isStyle,
 }) => {
   /**
@@ -744,7 +747,8 @@ const ConfigField = ({
 
   const myOnChange = (v) => {
     setProp((prop) => {
-      if (configuration) {
+      if (setter) setter(prop, field.name, v);
+      else if (configuration) {
         if (!prop.configuration) prop.configuration = {};
         prop.configuration[field.name] = v;
       } else if (isStyle) {
@@ -1004,7 +1008,7 @@ const SettingsFromFields =
               let noshow = false;
               Object.entries(f.showIf).forEach(([nm, value]) => {
                 if (Array.isArray(value))
-                  noshow = noshow || value.includes(node[nm]);
+                  noshow = noshow || !value.includes(node[nm]);
                 else noshow = noshow || value !== node[nm];
               });
               if (noshow) return null;

package/src/components/storage.js

@@ -167,6 +167,9 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           action_bgcol={segment.action_bgcol || ""}
           action_bordercol={segment.action_bordercol || ""}
           action_textcol={segment.action_textcol || ""}
+          nsteps={segment.nsteps || ""}
+          step_only_ifs={segment.step_only_ifs || ""}
+          step_action_names={segment.step_action_names || ""}
           confirm={segment.confirm}
           configuration={segment.configuration || {}}
           block={segment.block || false}
@@ -555,6 +558,9 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         action_textcol: node.props.action_textcol,
         minRole: node.props.minRole,
         confirm: node.props.confirm,
+        nsteps: node.props.nsteps,
+        step_only_ifs: node.props.step_only_ifs,
+        step_action_names: node.props.step_action_names,
         configuration: node.props.configuration,
         isFormula: node.props.isFormula,
         rndid: node.props.rndid === "not_assigned" ? newid : node.props.rndid,
@@ -578,6 +584,9 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         action_bgcol: node.props.action_bgcol,
         action_bordercol: node.props.action_bordercol,
         action_textcol: node.props.action_textcol,
+        nsteps: node.props.nsteps,
+        step_only_ifs: node.props.step_only_ifs,
+        step_action_names: node.props.step_action_names,
         minRole: node.props.minRole,
         isFormula: node.props.isFormula,
         rndid: node.props.rndid === "not_assigned" ? newid : node.props.rndid,