@saltcorn/builder 0.8.7-beta.6 → 0.8.8-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.8.7-beta.6",
+  "version": "0.8.8-beta.0",
   "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

@@ -436,7 +436,7 @@ const ViewLinkElem = ({ connectors, options }) => (
         options.link_view_opts.length > 0 ? options.link_view_opts[0].name : ""
       }
       block={false}
-      minRole={10}
+      minRole={100}
       label={""}
     />
   </WrapElem>
@@ -459,8 +459,9 @@ const ActionElem = ({ connectors, options }) => (
   >
     <Action
       name={options.actions[0]}
+      action_row_variable={""}
       block={false}
-      minRole={10}
+      minRole={100}
       confirm={false}
       action_label={""}
       isFormula={{}}

package/src/components/elements/Action.js

@@ -3,12 +3,12 @@
  * @module components/elements/Action
  * @subcategory components / elements
  */
+/*global notifyAlert*/
 
 import React, { Fragment, useContext } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import {
-  blockProps,
   BlockSetting,
   MinRoleSettingRow,
   OrFormula,
@@ -17,6 +17,7 @@ import {
   ButtonOrLinkSettingsRows,
   DynamicFontAwesomeIcon,
   setAPropGen,
+  buildOptions,
 } from "./utils";
 
 export /**
@@ -89,6 +90,8 @@ export /**
 const ActionSettings = () => {
   const node = useNode((node) => ({
     name: node.data.props.name,
+    action_row_variable: node.data.props.action_row_variable,
+    action_row_limit: node.data.props.action_row_limit,
     block: node.data.props.block,
     minRole: node.data.props.minRole,
     confirm: node.data.props.confirm,
@@ -105,6 +108,8 @@ const ActionSettings = () => {
   const {
     actions: { setProp },
     name,
+    action_row_variable,
+    action_row_limit,
     block,
     minRole,
     isFormula,
@@ -117,7 +122,6 @@ const ActionSettings = () => {
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
   const cfgFields = getCfgFields(name);
   const setAProp = setAPropGen(setProp);
-
   return (
     <div>
       <table className="w-100">
@@ -133,7 +137,24 @@ const ActionSettings = () => {
                 onChange={(e) => {
                   if (!e.target) return;
                   const value = e.target.value;
-                  setProp((prop) => (prop.name = 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";
+                      }
+                    }
+                  });
                   setInitialConfig(setProp, value, getCfgFields(value));
                 }}
               >
@@ -145,6 +166,55 @@ const ActionSettings = () => {
               </select>
             </td>
           </tr>
+          {name !== "Clear" && options.mode === "filter" ? (
+            <tr>
+              <td>
+                <label>Row variable</label>
+              </td>
+              <td>
+                <select
+                  value={action_row_variable}
+                  className="form-control form-select"
+                  onChange={(e) => {
+                    if (!e.target) return;
+                    const value = e.target.value;
+                    const rowRequired =
+                      options.actionConstraints &&
+                      options.actionConstraints[name]?.requireRow;
+                    if (value === "none" && rowRequired) {
+                      notifyAlert({
+                        type: "warning",
+                        text: `${name} requires a row, none is not possible`,
+                      });
+                    } else
+                      setProp((prop) => (prop.action_row_variable = value));
+                    setInitialConfig(setProp, value, getCfgFields(value));
+                  }}
+                >
+                  {buildOptions(["none", "state", "each_matching_row"], {
+                    valAttr: true,
+                    keyAttr: true,
+                  })}
+                </select>
+              </td>
+            </tr>
+          ) : null}
+          {action_row_variable === "each_matching_row" ? (
+            <tr>
+              <td>
+                <label>Rows limit</label>
+              </td>
+              <td>
+                <input
+                  type="number"
+                  className="form-control"
+                  min="0"
+                  value={action_row_limit}
+                  onChange={setAProp("action_row_limit")}
+                />
+              </td>
+            </tr>
+          ) : null}
           {action_style !== "on_page_load" ? (
             <tr>
               <td colSpan="2">

package/src/components/elements/Aggregation.js

@@ -7,7 +7,13 @@
 import React, { useContext } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
-import { blockProps, BlockSetting, TextStyleRow, setAPropGen } from "./utils";
+import {
+  blockProps,
+  BlockSetting,
+  TextStyleRow,
+  setAPropGen,
+  buildOptions,
+} from "./utils";
 
 export /**
  * @param {object} props
@@ -21,21 +27,21 @@ export /**
  * @subcategory components
  * @namespace
  */
-  const Aggregation = ({ agg_relation, agg_field, stat, block, textStyle }) => {
-    const {
-      selected,
-      connectors: { connect, drag },
-    } = useNode((node) => ({ selected: node.events.selected }));
-    return (
-      <span
-        className={`${textStyle} ${selected ? "selected-node" : ""}`}
-        {...blockProps(block)}
-        ref={(dom) => connect(drag(dom))}
-      >
-        [{stat} {agg_relation} {agg_field}]
-      </span>
-    );
-  };
+const Aggregation = ({ agg_relation, agg_field, stat, block, textStyle }) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <span
+      className={`${textStyle} ${selected ? "selected-node" : ""}`}
+      {...blockProps(block)}
+      ref={(dom) => connect(drag(dom))}
+    >
+      [{stat} {agg_relation} {agg_field}]
+    </span>
+  );
+};
 
 export /**
  * @returns {table}
@@ -43,126 +49,134 @@ export /**
  * @subcategory components
  * @namespace
  */
-  const AggregationSettings = () => {
-    const {
-      actions: { setProp },
-      agg_relation,
-      agg_field,
-      stat,
-      aggwhere,
-      block,
-      textStyle,
-    } = useNode((node) => ({
-      agg_relation: node.data.props.agg_relation,
-      agg_field: node.data.props.agg_field,
-      aggwhere: node.data.props.aggwhere,
-      stat: node.data.props.stat,
-      block: node.data.props.block,
-      textStyle: node.data.props.textStyle,
-    }));
-    const options = useContext(optionsCtx);
-    const setAProp = setAPropGen(setProp);
+const AggregationSettings = () => {
+  const {
+    actions: { setProp },
+    agg_relation,
+    agg_field,
+    stat,
+    aggwhere,
+    block,
+    textStyle,
+  } = useNode((node) => ({
+    agg_relation: node.data.props.agg_relation,
+    agg_field: node.data.props.agg_field,
+    aggwhere: node.data.props.aggwhere,
+    stat: node.data.props.stat,
+    block: node.data.props.block,
+    textStyle: node.data.props.textStyle,
+  }));
+  const options = useContext(optionsCtx);
+  const setAProp = setAPropGen(setProp);
 
-    return (
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label>Relation</label>
-            </td>
-            <td>
-              <select
-                className="form-control form-select"
-                value={agg_relation}
-                onChange={(e) => {
-                  if (!e.target) return;
-                  const value = e.target.value;
-                  setProp((prop) => {
-                    prop.agg_relation = value;
-                    const fs = options.agg_field_opts[value];
-                    if (fs && fs.length > 0) prop.agg_field = fs[0];
-                  });
-                }}
-              >
-                {options.child_field_list.map((f, ix) => (
-                  <option key={ix} value={f}>
-                    {f}
-                  </option>
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <td>
+            <label>Relation</label>
+          </td>
+          <td>
+            <select
+              className="form-control form-select"
+              value={agg_relation}
+              onChange={(e) => {
+                if (!e.target) return;
+                const value = e.target.value;
+                setProp((prop) => {
+                  prop.agg_relation = value;
+                  const fs = options.agg_field_opts[value];
+                  if (fs && fs.length > 0) prop.agg_field = fs[0];
+                });
+              }}
+            >
+              {options.child_field_list.map((f, ix) => (
+                <option key={ix} value={f}>
+                  {f}
+                </option>
+              ))}
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label>Child table field</label>
+          </td>
+          <td>
+            <select
+              className="form-control form-select"
+              value={agg_field}
+              onChange={setAProp("agg_field")}
+            >
+              {(options.agg_field_opts[agg_relation] || []).map((f, ix) => (
+                <option key={ix} value={f}>
+                  {f}
+                </option>
+              ))}
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label>Statistic</label>
+          </td>
+          <td>
+            <select
+              value={stat}
+              className="form-control form-select"
+              onChange={setAProp("stat")}
+              onBlur={setAProp("stat")}
+            >
+              {buildOptions(
+                [
+                  "Count",
+                  "CountUnique",
+                  "Avg",
+                  "Sum",
+                  "Max",
+                  "Min",
+                  "Array_Agg",
+                ],
+                { valAttr: true }
+              )}
+              {options.fields
+                .filter((f) => f.type.name === "Date")
+                .map((f) => (
+                  <option value={`Latest ${f.name}`}>Latest {f.name}</option>
                 ))}
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label>Child table field</label>
-            </td>
-            <td>
-              <select
-                className="form-control form-select"
-                value={agg_field}
-                onChange={setAProp("agg_field")}
-              >
-                {(options.agg_field_opts[agg_relation] || []).map((f, ix) => (
-                  <option key={ix} value={f}>
-                    {f}
+              {options.fields
+                .filter((f) => f.type.name === "Date")
+                .map((f) => (
+                  <option value={`Earliest ${f.name}`}>
+                    Earliest {f.name}
                   </option>
                 ))}
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label>Statistic</label>
-            </td>
-            <td>
-              <select
-                value={stat}
-                className="form-control form-select"
-                onChange={setAProp("stat")}
-                onBlur={setAProp("stat")}
-              >
-                <option value={"Count"}>Count</option>
-                <option value={"Avg"}>Avg</option>
-                <option value={"Sum"}>Sum</option>
-                <option value={"Max"}>Max</option>
-                <option value={"Min"}>Min</option>
-                <option value={"Array_Agg"}>Array_Agg</option>
-                {options.fields
-                  .filter((f) => f.type.name === "Date")
-                  .map((f) => (
-                    <option value={`Latest ${f.name}`}>Latest {f.name}</option>
-                  ))}
-                {options.fields
-                  .filter((f) => f.type.name === "Date")
-                  .map((f) => (
-                    <option value={`Earliest ${f.name}`}>Earliest {f.name}</option>
-                  ))}
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label>Where</label>
-            </td>
-            <td>
-              <input
-                type="text"
-                className="form-control"
-                value={aggwhere}
-                onChange={setAProp("aggwhere")}
-              />
-            </td>
-          </tr>
-          <TextStyleRow textStyle={textStyle} setProp={setProp} />
-          <tr>
-            <td colSpan="2">
-              <BlockSetting block={block} setProp={setProp} />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    );
-  };
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label>Where</label>
+          </td>
+          <td>
+            <input
+              type="text"
+              className="form-control"
+              value={aggwhere}
+              onChange={setAProp("aggwhere")}
+            />
+          </td>
+        </tr>
+        <TextStyleRow textStyle={textStyle} setProp={setProp} />
+        <tr>
+          <td colSpan="2">
+            <BlockSetting block={block} setProp={setProp} />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
 
 /**
  * @type {object}

package/src/components/elements/Columns.js

@@ -14,6 +14,7 @@ import {
   SettingsRow,
   reactifyStyles,
   SettingsSectionHeaderRow,
+  buildBootstrapOptions,
 } from "./utils";
 import { BoxModelEditor } from "./BoxModelEditor";
 import {
@@ -213,10 +214,8 @@ const ColumnsSettings = () => {
                     }}
                   >
                     <option disabled>Breakpoint</option>
-                    <option value="">None</option>
-                    <option value="sm">Small</option>
-                    <option value="md">Medium</option>
-                    <option value="lg">Large</option>
+                    <option value="">none</option>
+                    {buildBootstrapOptions(["sm", "md", "lg"])}
                   </select>
                 </td>
               </tr>

package/src/components/elements/Container.js

@@ -10,16 +10,15 @@ import { Element, useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import {
   Accordion,
-  BlockSetting,
   OrFormula,
   parseStyles,
-  SelectUnits,
   SettingsSectionHeaderRow,
   SettingsRow,
   reactifyStyles,
-  bstyleopt,
   setAPropGen,
   FormulaTooltip,
+  buildOptions,
+  buildBootstrapOptions,
 } from "./utils";
 import {
   BorderOuter,
@@ -47,15 +46,6 @@ import { faScroll, faRobot } from "@fortawesome/free-solid-svg-icons";
 import { BoxModelEditor } from "./BoxModelEditor";
 import previewCtx from "../preview_context";
 
-/**
- *
- * @param {string} string
- * @returns {string}
- */
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 export /**
  * @param {object} props
  * @param {*} props.children
@@ -511,9 +501,7 @@ const ContainerSettings = () => {
                     className="form-control-sm  form-select"
                     onChange={setAProp("imageSize")}
                   >
-                    <option>contain</option>
-                    <option>cover</option>
-                    <option>repeat</option>
+                    {buildOptions(["contain", "cover", "repeat"])}
                   </select>
                 </td>
               </tr>
@@ -823,10 +811,7 @@ const ContainerSettings = () => {
                 onChange={setAProp("minScreenWidth")}
               >
                 <option value="">all</option>
-                <option value="sm">small</option>
-                <option value="md">medium</option>
-                <option value="lg">large</option>
-                <option value="xl">x-large</option>
+                {buildBootstrapOptions(["sm", "md", "lg", "xl"])}
               </select>
             </td>
           </tr>
@@ -866,11 +851,10 @@ const ContainerSettings = () => {
           className="form-control form-select"
           onChange={setAProp("hoverColor")}
         >
-          <option value="">None</option>
-          <option value="gray">gray</option>
-          <option value="gray-dark">gray-dark</option>
-          <option value="light">light</option>
-          <option value="dark">dark</option>
+          <option value="">none</option>
+          {buildOptions(["gray", "gray-dark", "light", "dark"], {
+            valAttr: true,
+          })}
         </select>
       </div>
 

package/src/components/elements/Image.js

@@ -17,6 +17,7 @@ import {
   Accordion,
   OrFormula,
   setAPropGen,
+  buildOptions,
 } from "./utils";
 
 export /**
@@ -121,6 +122,8 @@ export /**
       }
     };
     const setAProp = setAPropGen(setProp);
+    const sourceOpts = ["File", "URL", "Upload"];
+    if (options.mode === "show") sourceOpts.push("Field");
     return (
       <Accordion>
         <table accordiontitle="Select image">
@@ -142,10 +145,7 @@ export /**
                   className="form-control form-select"
                   onChange={setAProp("srctype")}
                 >
-                  <option>File</option>
-                  <option>URL</option>
-                  <option>Upload</option>
-                  {options.mode === "show" && <option>Field</option>}
+                  {buildOptions(sourceOpts)}
                 </select>
               </td>
             </tr>