@saltcorn/builder 1.0.0-beta.9 → 1.0.0-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-rc.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.0.0-beta.9",
+    "@saltcorn/common-code": "1.0.0-rc.10",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",

package/src/components/Builder.js

@@ -257,6 +257,32 @@ const SettingsPanel = () => {
   );
 };
 
+// https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
+function getWindowDimensions() {
+  const { innerWidth: windowWidth, innerHeight: windowHeight } = window;
+  return {
+    windowWidth,
+    windowHeight,
+  };
+}
+
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions()
+  );
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return windowDimensions;
+}
+
 const AddColumnButton = () => {
   const { query, actions } = useEditor(() => {});
   const options = useContext(optionsCtx);
@@ -369,6 +395,23 @@ const Builder = ({ options, layout, mode }) => {
   const [isEnlarged, setIsEnlarged] = useState(false);
   const [isLeftEnlarged, setIsLeftEnlarged] = useState(false);
   const [relationsCache, setRelationsCache] = useState({});
+  const { windowWidth, windowHeight } = useWindowDimensions();
+
+  const [builderHeight, setBuilderHeight] = useState(0);
+  const [builderTop, setBuilderTop] = useState(0);
+
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    setBuilderHeight(ref.current.clientHeight);
+    const rect = ref.current.getBoundingClientRect();
+    setBuilderTop(rect.top);
+  });
+
+  const canvasHeight =
+    Math.max(windowHeight - builderTop, builderHeight, 600) - 10;
+
   return (
     <ErrorBoundary>
       <Editor onRender={RenderNode}>
@@ -382,7 +425,7 @@ const Builder = ({ options, layout, mode }) => {
                 setRelationsCache,
               }}
             >
-              <div className="row" style={{ marginTop: "-5px" }}>
+              <div className="row" ref={ref} style={{ marginTop: "-5px" }}>
                 <div
                   className={`col-sm-auto left-builder-col ${
                     isLeftEnlarged
@@ -437,6 +480,7 @@ const Builder = ({ options, layout, mode }) => {
                 </div>
                 <div
                   id="builder-main-canvas"
+                  style={{ height: canvasHeight }}
                   className={`col builder-mode-${options.mode} ${
                     options.mode !== "list" ? "emptymsg" : ""
                   }`}

package/src/components/Toolbox.js

@@ -457,7 +457,11 @@ const ActionElem = ({ connectors, options }) => (
     title="Action button"
   >
     <Action
-      name={options.actions[0]}
+      name={
+        options.actions[0].optgroup
+          ? options.actions[0].options[0]
+          : options.actions[0]
+      }
       action_row_variable={""}
       block={false}
       minRole={100}

package/src/components/elements/Action.js

@@ -142,7 +142,16 @@ const ActionSettings = () => {
     name === "Multi-step action"
       ? getCfgFields(step_action_names?.[use_setting_action_n])
       : null;
-
+  const cfg_link = (options.triggerActions || []).includes(name)
+    ? `/actions/configure/${encodeURIComponent(name)}`
+    : name === "Multi-step action" &&
+      (options.triggerActions || []).includes(
+        step_action_names?.[use_setting_action_n]
+      )
+    ? `/actions/configure/${encodeURIComponent(
+        step_action_names?.[use_setting_action_n]
+      )}`
+    : "";
   return (
     <div>
       <table className="w-100">
@@ -185,14 +194,21 @@ const ActionSettings = () => {
                   setInitialConfig(setProp, value, getCfgFields(value));
                 }}
               >
-                {options.actions.map((f, ix) => (
-                  <option key={ix} value={f}>
-                    {f}
-                  </option>
-                ))}
-                {options.allowMultiStepAction ? (
-                  <option value={"Multi-step action"}>Multi-step action</option>
-                ) : null}
+                {options.actions.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>
             </td>
           </tr>
@@ -355,11 +371,29 @@ const ActionSettings = () => {
             </option>
             {options.actions
               .filter((f) => !(options.builtInActions || []).includes(f))
-              .map((f, ix) => (
-                <option key={ix} value={f}>
-                  {f}
-                </option>
-              ))}
+              .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.mode !== "page" ? (
             <Fragment>
@@ -407,6 +441,11 @@ const ActionSettings = () => {
           node={node}
         />
       ) : null}
+      {cfg_link ? (
+        <a className="d-block mt-2" target="_blank" href={cfg_link}>
+          Configure this action
+        </a>
+      ) : null}
     </div>
   );
 };

package/src/components/elements/Aggregation.js

@@ -14,6 +14,7 @@ import {
   setAPropGen,
   buildOptions,
   ConfigForm,
+  HelpTopicLink,
 } from "./utils";
 
 export /**
@@ -215,7 +216,16 @@ const AggregationSettings = () => {
           </tr>
           <tr>
             <td>
-              <label>Where</label>
+              <label>
+                Where
+                <HelpTopicLink
+                  topic="Aggregation where formula"
+                  table_name={options.tableName}
+                  mode={options.mode}
+                  agg_relation={agg_relation}
+                  agg_field={agg_field}
+                ></HelpTopicLink>
+              </label>
             </td>
             <td>
               <input

package/src/components/elements/Container.js

@@ -118,7 +118,7 @@ const Container = ({
     htmlElement,
     {
       ref: (dom) => connect(drag(dom)),
-      className: `${customClass || ""} canvas text-${hAlign} ${
+      className: `${customClass || ""} kontainer canvas text-${hAlign} ${
         vAlign === "middle" ? "d-flex align-items-center" : ""
       } ${
         vAlign === "middle" && hAlign === "center" && "justify-content-center"

package/src/components/elements/utils.js

@@ -677,7 +677,7 @@ const ConfigForm = ({
         if (noshow) return null;
       }
       return (
-        <div key={ix} className="builder-config-field">
+        <div key={ix} className="builder-config-field" data-field-name={f.name}>
           {!isCheckbox(f) ? (
             <label>
               {f.label || f.name}
@@ -783,7 +783,7 @@ const ConfigField = ({
     field.options =
       typeof field.attributes?.options === "string"
         ? field.attributes?.options.split(",").map((s) => s.trim())
-        : field.attributes?.options;
+        : [...field.attributes?.options];
     if (!field.required && field.options) field.options.unshift("");
   }
   const field_type = field.input_type || field.type.name || field.type;
@@ -799,7 +799,7 @@ const ConfigField = ({
     //pick first value to mimic html form behaviour
     const options = getOptions();
     let o;
-    if ((o = options[0]))
+    if (options && (o = options[0]))
       useEffect(() => {
         myOnChange(typeof o === "string" ? o : o.value || o.name || o);
       }, []);
@@ -939,7 +939,7 @@ const ConfigField = ({
             onChange={(e) => e.target && myOnChange(e.target.value)}
             onBlur={(e) => e.target && myOnChange(e.target.value)}
           >
-            {field.options.map((o, ix) =>
+            {(field.options || []).map((o, ix) =>
               o.name && o.label ? (
                 <option key={ix} value={o.name}>
                   {o.label}

package/src/components/storage.js

@@ -127,15 +127,25 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
         props.isFormula = segment.isFormula;
       if (related.hasContents)
         return (
-          <Element key={ix} canvas {...props} is={MatchElement}>
+          <Element
+            key={ix}
+            canvas
+            {...props}
+            is={MatchElement}
+            custom={segment._custom || {}}
+          >
             {toTag(segment.contents)}
           </Element>
         );
-      else return <MatchElement key={ix} {...props} />;
+      else
+        return (
+          <MatchElement key={ix} custom={segment._custom || {}} {...props} />
+        );
     }
     if (segment.type === "blank") {
       return (
         <Text
+          custom={segment._custom || {}}
           key={ix}
           text={segment.contents}
           isFormula={segment.isFormula || {}}
@@ -151,6 +161,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
     } else if (segment.type === "view") {
       return (
         <View
+          custom={segment._custom || {}}
           key={ix}
           view={segment.view}
           relation={segment.relation}
@@ -165,6 +176,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
     } else if (segment.type === "action") {
       return (
         <Action
+          custom={segment._custom || {}}
           key={ix}
           name={segment.action_name}
           rndid={segment.rndid || "not_assigned"}
@@ -193,6 +205,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
       return (
         <Element
           key={ix}
+          custom={segment._custom || {}}
           canvas
           gradStartColor={segment.gradStartColor}
           gradEndColor={segment.gradEndColor}
@@ -259,6 +272,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
       return (
         <Tabs
           key={ix}
+          custom={segment._custom || {}}
           titles={segment.titles}
           showif={segment.showif}
           ntabs={segment.ntabs}
@@ -278,6 +292,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
       return (
         <Table
           key={ix}
+          custom={segment._custom || {}}
           rows={segment.rows || 2}
           columns={segment.columns || 2}
           bs_style={segment.bs_style || false}
@@ -301,6 +316,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
         });
         return (
           <ListColumn
+            custom={segment._custom || {}}
             key={jx}
             alignment={col.alignment}
             header_label={col.header_label}
@@ -316,6 +332,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
       return (
         <Columns
           key={ix}
+          custom={segment._custom || {}}
           breakpoints={segment.breakpoints || default_breakpoints(segment)}
           ncols={segment.besides.length}
           widths={getColWidths(segment)}
@@ -423,6 +440,9 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
    */
   const go = (node) => {
     if (!node) return;
+    let customProps = {};
+    if (Object.keys(node?.custom || {}).length)
+      customProps = { _custom: { ...node?.custom } };
     const matchElement = allElements.find(
       (e) =>
         e.craft.related &&
@@ -432,7 +452,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
     );
     if (matchElement) {
       const related = matchElement.craft.related;
-      const s = { type: related.segment_type };
+      const s = { type: related.segment_type, ...customProps };
       if (related.hasContents) s.contents = get_nodes(node);
       related.fields.forEach((f) => {
         if (f.type === "Nodes" && f.nodeID) {
@@ -459,6 +479,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
       return {
         besides: node.nodes.map((nm) => go(nodes[nm])),
         list_columns: true,
+        ...customProps,
       };
     }
     if (node.displayName === ListColumn.craft.displayName) {
@@ -471,6 +492,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         alignment: node.props.alignment,
         header_label: node.props.header_label,
         showif: node.props.showif,
+        ...customProps,
       };
       (addFields || []).forEach((f) => {
         lc[f.name] = node.props[f.name];
@@ -519,6 +541,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
           click_action: node.props.click_action,
           rotate: node.props.rotate,
           style: node.props.style,
+          ...customProps,
         };
       else return get_nodes(node);
     }
@@ -535,6 +558,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         style: node.props.style,
         icon: node.props.icon,
         font: node.props.font,
+        ...customProps,
       };
     }
 
@@ -556,6 +580,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         bs_bordered: node.props.bs_bordered,
         bs_borderless: node.props.bs_borderless,
         bs_wauto: node.props.bs_wauto,
+        ...customProps,
       };
     }
 
@@ -572,6 +597,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         colStyles: node.props.colStyles,
         style: node.props.style,
         widths,
+        ...customProps,
       };
     }
     if (node.displayName === Tabs.craft.displayName) {
@@ -600,6 +626,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         serverRendered: node.props.serverRendered,
         tabId: node.props.tabId,
         ntabs: node.props.ntabs,
+        ...customProps,
       };
     }
 
@@ -614,6 +641,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         state: node.props.state,
         configuration: node.props.configuration,
         extra_state_fml: node.props.extra_state_fml,
+        ...customProps,
       };
     }
     if (node.displayName === Action.craft.displayName) {
@@ -672,6 +700,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         minRole: node.props.minRole,
         isFormula: node.props.isFormula,
         rndid: node.props.rndid === "not_assigned" ? newid : node.props.rndid,
+        ...customProps,
       };
     }
   };