@saltcorn/builder 0.8.6-beta.2 → 0.8.6-beta.4

package/src/components/elements/View.js

@@ -10,15 +10,15 @@ import optionsCtx from "../context";
 import previewCtx from "../preview_context";
 
 import {
-  blockProps,
-  BlockSetting,
-  MinRoleSetting,
   fetchViewPreview,
   ConfigForm,
   setAPropGen,
   FormulaTooltip,
 } from "./utils";
 
+import { RelationPicker } from "./RelationPicker";
+import { RelationBadges } from "./RelationBadges";
+
 export /**
  * @param {object} props
  * @param {*} props.name
@@ -29,45 +29,46 @@ export /**
  * @subcategory components
  * @namespace
  */
-  const View = ({ name, view, configuration, state }) => {
-    const {
-      selected,
-      node_id,
-      connectors: { connect, drag },
-    } = useNode((node) => ({ selected: node.events.selected, node_id: node.id }));
-    const options = useContext(optionsCtx);
+const View = ({ name, view, configuration, state }) => {
+  const {
+    selected,
+    node_id,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected, node_id: node.id }));
+  const options = useContext(optionsCtx);
 
-    const views = options.views;
-    const theview = views.find((v) => v.name === view);
-    const label = theview ? theview.label : view;
-    const { previews, setPreviews } = useContext(previewCtx);
-    const myPreview = previews[node_id];
-    useEffect(() => {
-      fetchViewPreview({
-        options,
-        view,
-        setPreviews,
-        configuration,
-        node_id,
-      })();
-    }, [view, configuration, state]);
-    return (
-      <div
-        ref={(dom) => connect(drag(dom))}
-        className={`${myPreview ? "" : "builder-embed-view"} ${selected ? "selected-node" : ""
-          }`}
-      >
-        {myPreview ? (
-          <div
-            className="d-inline"
-            dangerouslySetInnerHTML={{ __html: myPreview }}
-          ></div>
-        ) : (
-          `View: ${label}`
-        )}
-      </div>
-    );
-  };
+  const views = options.views;
+  const theview = views.find((v) => v.name === view);
+  const label = theview ? theview.label : view;
+  const { previews, setPreviews } = useContext(previewCtx);
+  const myPreview = previews[node_id];
+  useEffect(() => {
+    fetchViewPreview({
+      options,
+      view,
+      setPreviews,
+      configuration,
+      node_id,
+    })();
+  }, [view, configuration, state]);
+  return (
+    <div
+      ref={(dom) => connect(drag(dom))}
+      className={`${myPreview ? "" : "builder-embed-view"} ${
+        selected ? "selected-node" : ""
+      }`}
+    >
+      {myPreview ? (
+        <div
+          className="d-inline"
+          dangerouslySetInnerHTML={{ __html: myPreview }}
+        ></div>
+      ) : (
+        `View: ${label}`
+      )}
+    </div>
+  );
+};
 
 export /**
  * @returns {div}
@@ -75,161 +76,186 @@ export /**
  * @subcategory components
  * @namespace
  */
-  const ViewSettings = () => {
-    const node = useNode((node) => ({
-      view_name: node.data.props.view_name,
-      name: node.data.props.name,
-      view: node.data.props.view,
-      state: node.data.props.state,
-      extra_state_fml: node.data.props.extra_state_fml,
-      configuration: node.data.props.configuration, // fixed states
-      node_id: node.id,
-    }));
+const ViewSettings = () => {
+  const node = useNode((node) => ({
+    view_name: node.data.props.view_name,
+    name: node.data.props.name,
+    view: node.data.props.view,
+    relation: node.data.props.relation,
+    state: node.data.props.state,
+    extra_state_fml: node.data.props.extra_state_fml,
+    configuration: node.data.props.configuration, // fixed states
+    node_id: node.id,
+  }));
 
-    const {
-      actions: { setProp },
-      name,
-      view,
-      state,
-      node_id,
-      configuration,
-      extra_state_fml,
-      view_name,
-    } = node;
-    const options = useContext(optionsCtx);
-    const views = options.views;
-    const fixed_state_fields =
-      options.fixed_state_fields && options.fixed_state_fields[view];
-    const { setPreviews } = useContext(previewCtx);
+  const {
+    actions: { setProp },
+    name,
+    view,
+    relation,
+    state,
+    node_id,
+    configuration,
+    extra_state_fml,
+    view_name,
+  } = node;
+  const options = useContext(optionsCtx);
+  const views = options.views;
+  const fixed_state_fields =
+    options.fixed_state_fields && options.fixed_state_fields[view];
+  const { setPreviews } = useContext(previewCtx);
 
-    const setAProp = setAPropGen(setProp);
-    let errorString = false;
-    try {
-      Function("return " + extra_state_fml);
-    } catch (error) {
-      errorString = error.message;
-    }
-    let viewname = view_name || view;
-    if (viewname && viewname.includes(":")) viewname = viewname.split(":")[1];
-    if (viewname && viewname.includes(".")) viewname = viewname.split(".")[0];
-    const set_view_name = (e) => {
-      if (e.target) {
-        const target_value = e.target.value;
-        setProp((prop) => (prop.view_name = target_value));
-        if (target_value !== viewname) {
-          setProp((prop) => (prop.view = options.view_relation_opts[target_value][0].value));
+  const setAProp = setAPropGen(setProp);
+  let errorString = false;
+  try {
+    Function("return " + extra_state_fml);
+  } catch (error) {
+    errorString = error.message;
+  }
 
-        }
+  let viewname = view_name || view;
+  if (viewname && viewname.includes(":")) {
+    const [prefix, rest] = viewname.split(":");
+    if (rest.startsWith(".")) viewname = prefix;
+    else viewname = rest;
+  }
+  if (viewname.includes(".")) viewname = viewname.split(".")[0];
+
+  const set_view_name = (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop.view_name = target_value));
+      if (target_value !== viewname) {
+        setProp((prop) => {
+          if (options.view_relation_opts[target_value]) {
+            prop.view = options.view_relation_opts[target_value][0].value;
+            prop.relation = undefined;
+          }
+        });
       }
-    };
-    return (
-      <div>
-        {options.view_name_opts
-          ? <Fragment>
-            <div>
-              <label>View to {options.mode === "show" ? "embed" : "show"}</label>
-              <select
-                value={viewname}
-                className="form-control form-select"
-                onChange={set_view_name}
-                onBlur={set_view_name}
-              >
-                {options.view_name_opts.map((f, ix) => (
-                  <option key={ix} value={f.name}>
-                    {f.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label>Relation</label>
-              <select
-                value={view}
-                className="form-control form-select"
-                onChange={setAProp("view")}
-                onBlur={setAProp("view")}
-              >
-                {(options.view_relation_opts[viewname] || []).map((f, ix) => (
-                  <option key={ix} value={f.value}>
-                    {f.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </Fragment>
-          : <div>
+    }
+  };
+
+  return (
+    <div>
+      {options.view_name_opts ? (
+        <Fragment>
+          <div>
             <label>View to {options.mode === "show" ? "embed" : "show"}</label>
             <select
-              value={view}
+              value={viewname}
               className="form-control form-select"
-              onChange={setAProp("view")}
-              onBlur={setAProp("view")}
+              onChange={set_view_name}
+              onBlur={set_view_name}
             >
-              {views.map((f, ix) => (
+              {options.view_name_opts.map((f, ix) => (
                 <option key={ix} value={f.name}>
-                  {f.label || f.name}
+                  {f.label}
                 </option>
               ))}
             </select>
-          </div>}
-        {options.mode === "page" && (
-          <Fragment>
-            <div>
-              <label>State</label>
-              <select
-                value={state}
-                className="form-control form-select"
-                onChange={setAProp("state")}
-                onBlur={setAProp("state")}
-              >
-                <option value="shared">Shared</option>
-                <option value="fixed">Fixed</option>
-              </select>
-            </div>
-            {state === "fixed" &&
-              fixed_state_fields &&
-              fixed_state_fields.length > 0 && (
-                <Fragment>
-                  <h6>View state fields</h6>
-                  <ConfigForm
-                    fields={fixed_state_fields}
-                    configuration={configuration || {}}
-                    setProp={setProp}
-                    node={node}
-                  />
-                </Fragment>
-              )}
-          </Fragment>
-        )}
-        {(state === "shared" || options.mode === "page") && (
-          <Fragment>
-            {" "}
-            <label>Extra state Formula <FormulaTooltip /></label>
-            <input
-              type="text"
-              className="viewlink-label form-control"
-              value={extra_state_fml}
-              onChange={setAProp("extra_state_fml")}
-            />
-            {errorString ? (
-              <small className="text-danger font-monospace d-block">
-                {errorString}
-              </small>
-            ) : null}
-          </Fragment>
-        )}
-        {view ? (
-          <a
-            className="d-block mt-2"
-            target="_blank"
-            href={`/viewedit/config/${viewname}`}
+          </div>
+          <RelationPicker
+            options={options}
+            viewname={viewname}
+            update={(relPath) => {
+              if (relPath.startsWith(".")) {
+                setProp((prop) => {
+                  prop.view = viewname;
+                  prop.relation = relPath;
+                });
+              } else {
+                setProp((prop) => {
+                  prop.view = relPath;
+                  prop.relation = undefined;
+                });
+              }
+            }}
+          />
+          <RelationBadges
+            view={view}
+            relation={relation}
+            parentTbl={options.tableName}
+            fk_options={options.fk_options}
+          />
+        </Fragment>
+      ) : (
+        <div>
+          <label>View to {options.mode === "show" ? "embed" : "show"}</label>
+          <select
+            value={view}
+            className="form-control form-select"
+            onChange={setAProp("view")}
+            onBlur={setAProp("view")}
           >
-            Configure this view
-          </a>
-        ) : null}
-      </div>
-    );
-  };
+            {views.map((f, ix) => (
+              <option key={ix} value={f.name}>
+                {f.label || f.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+      {options.mode === "page" && (
+        <Fragment>
+          <div>
+            <label>State</label>
+            <select
+              value={state}
+              className="form-control form-select"
+              onChange={setAProp("state")}
+              onBlur={setAProp("state")}
+            >
+              <option value="shared">Shared</option>
+              <option value="fixed">Fixed</option>
+            </select>
+          </div>
+          {state === "fixed" &&
+            fixed_state_fields &&
+            fixed_state_fields.length > 0 && (
+              <Fragment>
+                <h6>View state fields</h6>
+                <ConfigForm
+                  fields={fixed_state_fields}
+                  configuration={configuration || {}}
+                  setProp={setProp}
+                  node={node}
+                />
+              </Fragment>
+            )}
+        </Fragment>
+      )}
+      {(state === "shared" || options.mode === "page") && (
+        <Fragment>
+          {" "}
+          <label>
+            Extra state Formula <FormulaTooltip />
+          </label>
+          <input
+            type="text"
+            className="viewlink-label form-control"
+            value={extra_state_fml}
+            onChange={setAProp("extra_state_fml")}
+          />
+          {errorString ? (
+            <small className="text-danger font-monospace d-block">
+              {errorString}
+            </small>
+          ) : null}
+        </Fragment>
+      )}
+      {view ? (
+        <a
+          className="d-block mt-2"
+          target="_blank"
+          href={`/viewedit/config/${viewname}`}
+        >
+          Configure this view
+        </a>
+      ) : null}
+    </div>
+  );
+};
 
 /**
  * @type {object}

package/src/components/elements/ViewLink.js

@@ -8,7 +8,6 @@ import React, { useContext } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import {
-  blockProps,
   BlockSetting,
   MinRoleSettingRow,
   OrFormula,
@@ -18,6 +17,9 @@ import {
   FormulaTooltip,
 } from "./utils";
 
+import { RelationPicker } from "./RelationPicker";
+import { RelationBadges } from "./RelationBadges";
+
 export /**
  * @param {object} props
  * @param {string} props.name
@@ -91,6 +93,7 @@ export /**
 const ViewLinkSettings = () => {
   const node = useNode((node) => ({
     name: node.data.props.name,
+    relation: node.data.props.relation,
     block: node.data.props.block,
     minRole: node.data.props.minRole,
     isFormula: node.data.props.isFormula,
@@ -110,6 +113,7 @@ const ViewLinkSettings = () => {
   const {
     actions: { setProp },
     name,
+    relation,
     block,
     minRole,
     label,
@@ -138,10 +142,10 @@ const ViewLinkSettings = () => {
       const target_value = e.target.value;
       setProp((prop) => (prop.view_name = target_value));
       if (target_value !== use_view_name) {
-        setProp(
-          (prop) =>
-            (prop.name = options.view_relation_opts[target_value][0].value)
-        );
+        setProp((prop) => {
+          prop.name = options.view_relation_opts[target_value][0].value;
+          prop.relation = undefined;
+        });
       }
     }
   };
@@ -168,21 +172,29 @@ const ViewLinkSettings = () => {
           </tr>
           <tr>
             <td colSpan="2">
-              <label>Relation</label>
-              <select
-                value={name}
-                className="form-control form-select"
-                onChange={setAProp("name")}
-                onBlur={setAProp("name")}
-              >
-                {(options.view_relation_opts[use_view_name] || []).map(
-                  (f, ix) => (
-                    <option key={ix} value={f.value}>
-                      {f.label}
-                    </option>
-                  )
-                )}
-              </select>
+              <RelationPicker
+                options={options}
+                viewname={use_view_name}
+                update={(relPath) => {
+                  if (relPath.startsWith(".")) {
+                    setProp((prop) => {
+                      prop.name = use_view_name;
+                      prop.relation = relPath;
+                    });
+                  } else {
+                    setProp((prop) => {
+                      prop.name = relPath;
+                      prop.relation = undefined;
+                    });
+                  }
+                }}
+              />
+              <RelationBadges
+                view={name}
+                relation={relation}
+                parentTbl={options.tableName}
+                fk_options={options.fk_options}
+              />
             </td>
           </tr>
           <tr>
@@ -272,6 +284,7 @@ ViewLink.craft = {
     column_type: "ViewLink",
     fields: [
       { name: "name", segment_name: "view", column_name: "view" },
+      "relation",
       { name: "label", segment_name: "view_label", canBeFormula: true },
       "block",
       "textStyle",

package/src/components/elements/utils.js

@@ -471,11 +471,15 @@ export const fetchViewPreview =
     let viewname,
       body = configuration ? { ...configuration } : {};
     if (view.includes(":")) {
-      const [reltype, rest] = view.split(":");
-      const [vnm] = rest.split(".");
-      viewname = vnm;
-      body.reltype = reltype;
-      body.path = rest;
+      const [prefix, rest] = view.split(":");
+      const tokens = rest.split(".");
+      if (rest.startsWith(".")) {
+        viewname = prefix;
+      } else {
+        viewname = tokens[0];
+        body.reltype = prefix;
+        body.path = rest;
+      }
     } else viewname = view;
 
     fetchPreview({
@@ -1319,3 +1323,88 @@ const Tooltip = ({ children }) => {
     </Tippy>
   );
 };
+
+const getFkTarget = (field, options) => {
+  const option = options.find((fk) => fk.name === field);
+  return option ? option.reftable_name : null;
+};
+
+export const parseRelationPath = (path, fk_options) => {
+  const result = [];
+  const tokens = path.split(".");
+  if (tokens.length >= 3) {
+    let currentTbl = tokens[1];
+    for (const relation of tokens.slice(2)) {
+      if (relation.indexOf("$") > 0) {
+        const [inboundTbl, inboundKey] = relation.split("$");
+        result.push({ type: "Inbound", table: inboundTbl, key: inboundKey });
+        currentTbl = inboundTbl;
+      } else {
+        const targetTbl = getFkTarget(relation, fk_options[currentTbl]);
+        if (!targetTbl) {
+          console.log(`The foreign key '${relation}' is invalid`);
+          return [];
+        }
+        result.push({ type: "Foreign", table: targetTbl, key: relation });
+        currentTbl = targetTbl;
+      }
+    }
+  }
+  return result;
+};
+
+export const parseLegacyRelation = (type, rest, parentTbl) => {
+  switch (type) {
+    case "ChildList": {
+      const path = rest ? rest.split(".") : [];
+      if (path.length === 3) {
+        const [viewName, table, key] = path;
+        return [
+          {
+            type: "Inbound",
+            table,
+            key,
+          },
+        ];
+      } else if (path.length === 5) {
+        const [viewName, thrTbl, thrTblFkey, fromTbl, fromTblFkey] = path;
+        return [
+          {
+            type: "Inbound",
+            table: thrTbl,
+            key: thrTblFkey,
+          },
+          {
+            type: "Inbound",
+            table: fromTbl,
+            key: fromTblFkey,
+          },
+        ];
+      }
+      break;
+    }
+    case "Independent": {
+      return [{ type: "Independent", table: "None (no relation)" }];
+    }
+    case "Own": {
+      return [{ type: "Own", table: `${parentTbl} (same table)` }];
+    }
+    case "OneToOneShow": {
+      const tokens = rest ? rest.split(".") : [];
+      if (tokens.length !== 3) break;
+      const [viewname, relatedTbl, fkey] = tokens;
+      return [{ type: "Inbound", table: relatedTbl, key: fkey }];
+    }
+    case "ParentShow": {
+      const tokens = rest ? rest.split(".") : [];
+      if (tokens.length !== 3) break;
+      const [viewname, parentTbl, fkey] = tokens;
+      return [{ type: "Foreign", table: parentTbl, key: fkey }];
+    }
+  }
+  return [];
+};
+
+export const removeWhitespaces = (str) => {
+  return str.replace(/\s/g, "X");
+};

package/src/components/storage.js

@@ -142,6 +142,7 @@ export /**
           <View
             key={ix}
             view={segment.view}
+            relation={segment.relation}
             view_name={segment.view_name}
             name={segment.name}
             state={segment.state}
@@ -457,6 +458,7 @@ export /**
         return {
           type: "view",
           view: node.props.view,
+          relation: node.props.relation,
           name:
             node.props.name === "not_assigned" ? rand_ident() : node.props.name,
           state: node.props.state,