@saltcorn/builder 0.9.1-beta.9 → 0.9.2-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.1-beta.9",
+  "version": "0.9.2-rc.1",
   "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,104 @@ const ActionSettings = () => {
       {action_style !== "on_page_load" ? (
         <BlockSetting block={block} setProp={setProp} />
       ) : null}
-      {cfgFields ? (
+      {name === "Multi-step action" ? (
+        <Fragment>
+          <table className="mb-2">
+            <tbody>
+              <tr>
+                <td className="w-50">
+                  <label>#Steps</label>
+                </td>
+                <td>
+                  <input
+                    type="number"
+                    value={nsteps}
+                    className="form-control d-inline"
+                    step="1"
+                    min="1"
+                    onChange={(e) => {
+                      if (!e.target) return;
+                      const value = e.target.value;
+                      setProp((prop) => {
+                        prop.nsteps = value;
+                      });
+                    }}
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <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
+              .filter((f) => !(options.builtInActions || []).includes(f))
+              .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 +395,7 @@ const ActionSettings = () => {
  */
 Action.craft = {
   displayName: "Action",
+  defaultProps: { setting_action_n: 0, nsteps: 1 },
   related: {
     settings: ActionSettings,
   },

package/src/components/elements/BoxModelEditor.js

@@ -272,7 +272,12 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
           {selectedCategory === "size" && (
             <Fragment>
               <SettingsRow
-                field={{ name: "width", label: "width", type: "DimUnits" }}
+                field={{
+                  name: "width",
+                  label: "width",
+                  type: "DimUnits",
+                  horiz: true,
+                }}
                 node={node}
                 setProp={setProp}
                 isStyle={!!sizeWithStyle}
@@ -282,6 +287,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                   name: "min-width",
                   label: "min width",
                   type: "DimUnits",
+                  horiz: true,
                 }}
                 node={node}
                 setProp={setProp}
@@ -292,6 +298,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                   name: "max-width",
                   label: "max width",
                   type: "DimUnits",
+                  horiz: true,
                 }}
                 node={node}
                 setProp={setProp}

package/src/components/elements/Card.js

@@ -99,6 +99,16 @@ const CardSettings = () => {
             node={node}
             setProp={setProp}
           />
+          <SettingsRow
+            field={{
+              label: "Class",
+              name: "class",
+              type: "String",
+              canBeFormula: true,
+            }}
+            node={node}
+            setProp={setProp}
+          />
           <SettingsRow
             field={{ label: "Shadow", name: "shadow", type: "Bool" }}
             node={node}
@@ -135,6 +145,7 @@ const fields = [
     canBeFormula: true,
   },
   { label: "URL", name: "url", type: "String", canBeFormula: true },
+  { label: "Class", name: "class", type: "String", canBeFormula: true },
   { label: "Shadow", name: "shadow", type: "Bool" },
   { label: "Save indicator", name: "titleAjaxIndicator", type: "Bool" },
   { label: "No padding", name: "noPadding", type: "Bool" },
@@ -148,6 +159,7 @@ Card.craft = {
   props: {
     title: "",
     url: "",
+    class: "",
     shadow: true,
     isFormula: {},
     style: {},

package/src/components/elements/Link.js

@@ -307,6 +307,30 @@ const LinkSettings = () => {
 
       <BlockSetting block={block} setProp={setProp} />
       <TextStyleSetting textStyle={textStyle} setProp={setProp} />
+      <table>
+        <tbody>
+          {(link_src === "Page" && url && url.startsWith("/page/")) ||
+          (link_src === "View" && url && url.startsWith("/view/")) ? (
+            <tr>
+              <td colSpan="2">
+                <a
+                  className="d-block mt-2"
+                  target="_blank"
+                  href={
+                    link_src === "Page"
+                      ? url.replace("/page/", `/pageedit/edit/`)
+                      : link_src === "View"
+                      ? url.replace("/view/", `/viewedit/config/`)
+                      : ""
+                  }
+                >
+                  Configure this {link_src}
+                </a>
+              </td>
+            </tr>
+          ) : null}
+        </tbody>
+      </table>
     </div>
   );
 };

package/src/components/elements/Tabs.js

@@ -241,24 +241,26 @@ const TabsSettings = () => {
           </td>
         </tr>
         {tabsStyle === "Value switch" ? (
-          <tr>
-            <td>
-              <label>Field</label>
-            </td>
-            <td>
-              <select
-                value={field}
-                className="form-control form-select"
-                onChange={setAProp("field")}
-              >
-                {options.fields.map((f, ix) => (
-                  <option key={ix} value={f.name}>
-                    {f.label}
-                  </option>
-                ))}
-              </select>
-            </td>
-          </tr>
+          <Fragment>
+            <tr>
+              <td>
+                <label>Field</label>
+              </td>
+              <td>
+                <select
+                  value={field}
+                  className="form-control form-select"
+                  onChange={setAProp("field")}
+                >
+                  {options.fields.map((f, ix) => (
+                    <option key={ix} value={f.name}>
+                      {f.label}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+          </Fragment>
         ) : (
           <Fragment>
             <tr>

package/src/components/elements/Text.js

@@ -297,6 +297,16 @@ const TextSettings = () => {
             setProp={setProp}
             isStyle={true}
           />
+          <SettingsRow
+            field={{
+              name: "color",
+              label: "Color",
+              type: "Color",
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
         </tbody>
       </table>
       <BlockOrInlineSetting

package/src/components/elements/ViewLink.js

@@ -268,6 +268,19 @@ const ViewLinkSettings = () => {
       <table>
         <tbody>
           <MinRoleSettingRow minRole={minRole} setProp={setProp} />
+          {use_view_name ? (
+            <tr>
+              <td colSpan="2">
+                <a
+                  className="d-block mt-2"
+                  target="_blank"
+                  href={`/viewedit/config/${use_view_name}`}
+                >
+                  Configure this view
+                </a>
+              </td>
+            </tr>
+          ) : null}
         </tbody>
       </table>
     </div>

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) {
@@ -813,11 +817,13 @@ const ConfigField = ({
         onBlur={(e) => e.target && myOnChange(e.target.value)}
       >
         <option value={""}></option>
-        {Object.entries(options.fonts || {}).map(([nm, ff], ix) => (
-          <option key={ix} value={ff}>
-            {nm}
-          </option>
-        ))}
+        {Object.entries(options.fonts || {})
+          .sort()
+          .map(([nm, ff], ix) => (
+            <option key={ix} value={ff}>
+              {nm}
+            </option>
+          ))}
       </select>
     ),
     Integer: () => (
@@ -943,7 +949,7 @@ const ConfigField = ({
             className={`w-${
               styleDim === "auto" ? 100 : 50
             } form-control-sm d-inline dimunit`}
-            vert={true}
+            vert={!field.horiz}
             onChange={(e) => {
               if (!e.target) return;
               const target_value = e.target.value;
@@ -1002,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;
@@ -1332,16 +1338,24 @@ export const bstyleopt = (style) => ({
     ></div>
   ),
 });
+
+export const rand_ident = () =>
+  Math.floor(Math.random() * 16777215).toString(16);
+
 export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
   const { data } = query.node(nodeId).get();
   const { type, props, nodes } = data;
+  const newProps = { ...props };
+  if (newProps.rndid) {
+    newProps.rndid = rand_ident();
+  }
   const children = (nodes || []).map(recursivelyCloneToElems(query));
   if (data.displayName === "Columns") {
     const cols = ntimes(data.props.ncols, (ix) =>
       recursivelyCloneToElems(query)(data.linkedNodes["Col" + ix])
     );
     return React.createElement(Columns, {
-      ...props,
+      ...newProps,
       ...(typeof ix !== "undefined" ? { key: ix } : {}),
       contents: cols,
     });
@@ -1350,7 +1364,7 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
     return React.createElement(
       Element,
       {
-        ...props,
+        ...newProps,
         canvas: true,
         is: type,
         ...(typeof ix !== "undefined" ? { key: ix } : {}),
@@ -1360,7 +1374,7 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
   return React.createElement(
     type,
     {
-      ...props,
+      ...newProps,
       ...(typeof ix !== "undefined" ? { key: ix } : {}),
     },
     children

package/src/components/storage.js

@@ -28,6 +28,7 @@ import { Container } from "./elements/Container";
 import { DropDownFilter } from "./elements/DropDownFilter";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import { DropMenu } from "./elements/DropMenu";
+import { rand_ident } from "./elements/utils";
 
 /**
  * @param {object} segment
@@ -167,6 +168,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}
@@ -344,7 +348,6 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
 /**
  * @returns {number}
  */
-const rand_ident = () => Math.floor(Math.random() * 16777215).toString(16);
 
 export /**
  * @param {object[]} nodes
@@ -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,