@saltcorn/builder 0.9.3-beta.4 → 0.9.3-beta.5

package/package.json

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

package/src/components/elements/Card.js

@@ -7,6 +7,7 @@
 import React, { Fragment } from "react";
 import { Text } from "./Text";
 import { OrFormula, SettingsRow, Accordion, reactifyStyles } from "./utils";
+import { Column } from "./Column";
 
 import { Element, useNode } from "@craftjs/core";
 import { BoxModelEditor } from "./BoxModelEditor";
@@ -25,7 +26,16 @@ export /**
  * @subcategory components
  * @namespace
  */
-const Card = ({ children, isFormula, title, shadow, noPadding, style }) => {
+const Card = ({
+  children,
+  isFormula,
+  title,
+  shadow,
+  noPadding,
+  style,
+  footer,
+  hasFooter,
+}) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -51,6 +61,13 @@ const Card = ({ children, isFormula, title, shadow, noPadding, style }) => {
       <div className={`card-body ${noPadding ? "p-0" : ""}`}>
         <div className="canvas">{children}</div>
       </div>
+      {hasFooter ? (
+        <div className={`card-footer ${noPadding ? "p-0" : ""}`}>
+          <Element canvas id={`cardfooter`} is={Column}>
+            {footer}
+          </Element>
+        </div>
+      ) : null}
     </div>
   );
 };
@@ -109,6 +126,11 @@ const CardSettings = () => {
             node={node}
             setProp={setProp}
           />
+          <SettingsRow
+            field={{ label: "Card footer", name: "hasFooter", type: "Bool" }}
+            node={node}
+            setProp={setProp}
+          />
           <SettingsRow
             field={{ label: "Shadow", name: "shadow", type: "Bool" }}
             node={node}
@@ -147,8 +169,10 @@ const fields = [
   { label: "URL", name: "url", type: "String", canBeFormula: true },
   { label: "Class", name: "class", type: "String", canBeFormula: true },
   { label: "Shadow", name: "shadow", type: "Bool" },
+  { label: "Card footer", name: "hasFooter", type: "Bool" },
   { label: "Save indicator", name: "titleAjaxIndicator", type: "Bool" },
   { label: "No padding", name: "noPadding", type: "Bool" },
+  { label: "Footer", name: "footer", type: "Nodes", nodeID: "cardfooter" },
   { name: "style", default: {} },
 ];
 
@@ -163,6 +187,7 @@ Card.craft = {
     shadow: true,
     isFormula: {},
     style: {},
+    footer: [],
   },
   displayName: "Card",
   related: {

package/src/components/elements/Link.js

@@ -173,6 +173,9 @@ const LinkSettings = () => {
                   ["page", "filter"].includes(options.mode) && (
                     <option>View</option>
                   )}
+                {(options.page_groups || []).length > 0 && (
+                  <option>Page Group</option>
+                )}
               </select>
             </td>
           </tr>
@@ -214,6 +217,27 @@ const LinkSettings = () => {
               </td>
             </tr>
           )}
+          {link_src === "Page Group" && (
+            <tr>
+              <td>
+                <label>Page Group</label>
+              </td>
+              <td>
+                <select
+                  value={url}
+                  className="form-control form-select"
+                  onChange={setAProp("url")}
+                >
+                  <option></option>
+                  {(options.page_groups || []).map((p, ix) => (
+                    <option key={ix} value={`/page/${p.name}`}>
+                      {p.name}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+          )}
           {link_src === "View" && (
             <tr>
               <td>

package/src/components/storage.js

@@ -111,8 +111,13 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
       const related = MatchElement.craft.related;
       const props = {};
       related.fields.forEach((f) => {
-        const v = segment[f.segment_name || f.name || f];
-        props[f.name || f] = typeof v === "undefined" ? f.default : v;
+        if (f.type === "Nodes" && f.nodeID) {
+          props[f.name || f] = toTag(segment[f.segment_name || f.name || f]);
+          //).map(toTag);
+        } else {
+          const v = segment[f.segment_name || f.name || f];
+          props[f.name || f] = typeof v === "undefined" ? f.default : v;
+        }
       });
       if (related.fields.some((f) => f.canBeFormula))
         props.isFormula = segment.isFormula;
@@ -360,15 +365,20 @@ export /**
 const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
   //console.log(JSON.stringify(nodes, null, 2));
   var columns = [];
-
   /**
    * @param {object} node
    * @returns {void|object}
    */
+  const removeEmpty = ({ above }) => {
+    const valids = above.filter(Boolean);
+    if (valids.length === 1) return valids[0];
+    else return { above: valids };
+  };
+
   const get_nodes = (node) => {
     if (!node.nodes || node.nodes.length == 0) return;
     else if (node.nodes.length == 1) return go(nodes[node.nodes[0]]);
-    else return { above: node.nodes.map((nm) => go(nodes[nm])) };
+    else return removeEmpty({ above: node.nodes.map((nm) => go(nodes[nm])) });
   };
 
   /**
@@ -389,7 +399,12 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
       const s = { type: related.segment_type };
       if (related.hasContents) s.contents = get_nodes(node);
       related.fields.forEach((f) => {
-        s[f.segment_name || f.name || f] = node.props[f.name || f];
+        if (f.type === "Nodes" && f.nodeID) {
+          //console.log("nodetype", node);
+          s[f.segment_name || f.name || f] = go(
+            nodes[node.linkedNodes[f.nodeID]]
+          );
+        } else s[f.segment_name || f.name || f] = node.props[f.name || f];
       });
       if (related.fields.some((f) => f.canBeFormula))
         s.isFormula = node.props.isFormula;
@@ -596,6 +611,6 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
   const layout = go(nodes[startFrom]) || { type: "blank", contents: "" };
   /*console.log("nodes", JSON.stringify(nodes));
     console.log("cols", JSON.stringify(columns));
-    console.log("layout", JSON.stringify(layout));*/
+  console.log("layout", JSON.stringify(layout));*/
   return { columns, layout };
 };