@saltcorn/builder 0.7.2-beta.8 → 0.7.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.7.2-beta.8",
+  "version": "0.7.3-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

@@ -591,6 +591,7 @@ const ToolboxFilter = () => {
       </div>
       <div className="toolbar-row">
         <HTMLElem connectors={connectors} />
+        <LinkElem connectors={connectors} />
       </div>
     </Fragment>
   );

package/src/components/elements/Link.js

@@ -95,6 +95,7 @@ const LinkSettings = () => {
     link_bgcol: node.data.props.link_bgcol,
     link_bordercol: node.data.props.link_bordercol,
     link_textcol: node.data.props.link_textcol,
+    transfer_state: node.data.props.transfer_state,
   }));
   const {
     actions: { setProp },
@@ -107,6 +108,7 @@ const LinkSettings = () => {
     target_blank,
     link_src,
     in_modal,
+    transfer_state,
   } = node;
   const options = useContext(optionsCtx);
   const setAProp = (key) => (e) => {
@@ -154,7 +156,9 @@ const LinkSettings = () => {
                 <option>URL</option>
                 {(options.pages || []).length > 0 && <option>Page</option>}
                 {(options.views || []).length > 0 &&
-                  options.mode === "page" && <option>View</option>}
+                  ["page", "filter"].includes(options.mode) && (
+                    <option>View</option>
+                  )}
               </select>
             </td>
           </tr>
@@ -187,8 +191,10 @@ const LinkSettings = () => {
                   onChange={setAProp("url")}
                 >
                   <option></option>
-                  {(options.pages || []).map((p) => (
-                    <option value={`/page/${p.name}`}>{p.name}</option>
+                  {(options.pages || []).map((p, ix) => (
+                    <option key={ix} value={`/page/${p.name}`}>
+                      {p.name}
+                    </option>
                   ))}
                 </select>
               </td>
@@ -206,8 +212,8 @@ const LinkSettings = () => {
                   onChange={setAProp("url")}
                 >
                   <option></option>
-                  {(options.views || []).map((p) => (
-                    <option value={`/view/${p.name}`}>
+                  {(options.views || []).map((p, ix) => (
+                    <option key={ix} value={`/view/${p.name}`}>
                       {p.name} [{p.viewtemplate}]
                     </option>
                   ))}
@@ -261,6 +267,22 @@ const LinkSettings = () => {
         />
         <label className="form-check-label">Open in popup modal?</label>
       </div>
+
+      {["filter", "page"].includes(options.mode) && (
+        <div className="form-check">
+          <input
+            className="form-check-input"
+            name="block"
+            type="checkbox"
+            checked={transfer_state}
+            onChange={(e) =>
+              setProp((prop) => (prop.transfer_state = e.target.checked))
+            }
+          />
+          <label className="form-check-label">Transfer state</label>
+        </div>
+      )}
+
       <BlockSetting block={block} setProp={setProp} />
       <TextStyleSetting textStyle={textStyle} setProp={setProp} />
     </div>
@@ -300,6 +322,7 @@ Link.craft = {
       "link_bordercol",
       "link_textcol",
       "in_modal",
+      "transfer_state",
     ],
   },
 };

package/src/components/elements/View.js

@@ -105,6 +105,12 @@ const ViewSettings = () => {
       setProp((prop) => (prop[key] = target_value));
     }
   };
+  let errorString = false;
+  try {
+    Function("return " + extra_state_fml);
+  } catch (error) {
+    errorString = error.message;
+  }
   return (
     <div>
       <div>
@@ -163,6 +169,11 @@ const ViewSettings = () => {
               setProp((prop) => (prop.extra_state_fml = e.target.value))
             }
           />
+          {errorString ? (
+            <small className="text-danger font-monospace d-block">
+              {errorString}
+            </small>
+          ) : null}
         </Fragment>
       )}
       {view ? (

package/src/components/elements/ViewLink.js

@@ -113,6 +113,12 @@ const ViewLinkSettings = () => {
     extra_state_fml,
   } = node;
   const options = useContext(optionsCtx);
+  let errorString = false;
+  try {
+    Function("return " + extra_state_fml);
+  } catch (error) {
+    errorString = error.message;
+  }
   return (
     <div>
       <table className="w-100">
@@ -161,6 +167,11 @@ const ViewLinkSettings = () => {
                   setProp((prop) => (prop.extra_state_fml = e.target.value))
                 }
               />
+              {errorString ? (
+                <small className="text-danger font-monospace d-block">
+                  {errorString}
+                </small>
+              ) : null}
             </td>
           </tr>
 

package/src/components/elements/utils.js

@@ -110,6 +110,14 @@ const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
       }
     });
   };
+  let errorString = false;
+  if (isFormula[nodekey]) {
+    try {
+      Function("return " + node[nodekey]);
+    } catch (error) {
+      errorString = error.message;
+    }
+  }
   return mode !== "show" ? (
     children
   ) : (
@@ -119,7 +127,7 @@ const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
           <input
             type="text"
             className="form-control text-to-display"
-            value={node[nodekey]}
+            value={node[nodekey] || ""}
             onChange={(e) => {
               if (e.target) {
                 const target_value = e.target.value;
@@ -145,6 +153,11 @@ const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
       {isFormula[nodekey] && (
         <div style={{ marginTop: "-5px" }}>
           <small className="text-muted font-monospace">FORMULA</small>
+          {errorString ? (
+            <small className="text-danger font-monospace d-block">
+              {errorString}
+            </small>
+          ) : null}
         </div>
       )}
     </Fragment>