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

package/package.json

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

package/src/components/elements/RelationBadges.js

@@ -0,0 +1,97 @@
+import React, { Fragment, useContext, useState } from "react";
+import {
+  parseRelationPath,
+  parseLegacyRelation,
+  removeWhitespaces,
+} from "./utils";
+
+const buildBadgeCfgs = (parsed, parentTbl) => {
+  const result = [];
+  let currentCfg = null;
+  for (const { type, table, key } of parsed) {
+    if (type === "Inbound") {
+      if (currentCfg) result.push(currentCfg);
+      currentCfg = { up: key, table };
+    } else {
+      if (!currentCfg) result.push({ down: key, table: parentTbl });
+      else {
+        currentCfg.down = key;
+        result.push(currentCfg);
+      }
+      currentCfg = { table };
+    }
+  }
+  if (
+    currentCfg &&
+    !result.find(
+      ({ down, table, up }) =>
+        down === currentCfg.down &&
+        table === currentCfg.table &&
+        up === currentCfg.up
+    )
+  )
+    result.push(currentCfg);
+  return result;
+};
+
+const buildBadge = ({ up, table, down }, index) => {
+  return (
+    <div
+      key={removeWhitespaces(`badge_${table}_${index}`)}
+      className="my-1 d-flex"
+    >
+      <div className="m-auto badge bg-primary">
+        {up ? (
+          <div className="mt-1 d-flex justify-content-center">
+            <span className="pe-2">{up}</span>
+            <i className="fas fa-arrow-up"></i>
+          </div>
+        ) : (
+          ""
+        )}
+        <div className="m-1 fw-bolder">{table}</div>
+        {down ? (
+          <div className="mb-1 d-flex justify-content-center">
+            <span className="pe-2">{down}</span>
+            <i className="fas fa-arrow-down" style={{ marginTop: "-1px" }}></i>
+          </div>
+        ) : (
+          ""
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const RelationBadges = ({ view, relation, parentTbl, fk_options }) => {
+  if (relation) {
+    const parsed = parseRelationPath(relation, fk_options);
+    return (
+      <div className="overflow-scroll">
+        {parsed.length > 0
+          ? buildBadgeCfgs(parsed, parentTbl).map(buildBadge)
+          : buildBadge({ table: "invalid relation" }, 0)}
+      </div>
+    );
+  } else {
+    const [prefix, rest] = view.split(":");
+    const parsed = parseLegacyRelation(prefix, rest, parentTbl);
+    if (parsed.length === 0)
+      return buildBadge({ table: "invalid relation" }, 0);
+    else if (
+      parsed.length === 1 &&
+      (parsed[0].type === "Independent" || parsed[0].type === "Own")
+    )
+      return (
+        <div className="overflow-scroll">
+          {buildBadge({ table: parsed[0].table }, 0)}
+        </div>
+      );
+    else
+      return (
+        <div className="overflow-scroll">
+          {buildBadgeCfgs(parsed, parentTbl).map(buildBadge)}
+        </div>
+      );
+  }
+};

package/src/components/elements/RelationPicker.js

@@ -0,0 +1,251 @@
+/*global $ */
+import React, { Fragment, useContext, useState } from "react";
+import {
+  parseRelationPath,
+  parseLegacyRelation,
+  removeWhitespaces,
+} from "./utils";
+
+const parseRelations = (allOptions, viewname, parentTbl) => {
+  const viewtable = allOptions.view_name_opts
+    ? allOptions.view_name_opts.find((opt) => opt.name === viewname)?.table
+    : undefined;
+  const options = allOptions.view_relation_opts[viewname] || [];
+  const result = { table: parentTbl, inboundKeys: [], fkeys: [] };
+  if (!viewtable) return result;
+  for (const { value } of options) {
+    let path = null;
+    if (value.startsWith(".")) {
+      path = parseRelationPath(value, allOptions.fk_options);
+    } else {
+      const [prefix, rest] = value.split(":");
+      path = parseLegacyRelation(prefix, rest, parentTbl);
+    }
+    if (path.length > 0) buildLevels(value, path, result, parentTbl);
+    else console.log(`The relation path '${value}' is invalid`);
+  }
+  return result;
+};
+
+const buildLevels = (path, parsed, result, parentTbl) => {
+  let currentLevel = result;
+  for (const relation of parsed) {
+    if (relation.type === "Inbound") {
+      const existing = currentLevel.inboundKeys.find(
+        (key) => key.name === relation.key && key.table === relation.table
+      );
+      if (existing) {
+        currentLevel = existing;
+      } else {
+        const nextLevel = {
+          name: relation.key,
+          table: relation.table,
+          inboundKeys: [],
+          fkeys: [],
+        };
+        currentLevel.inboundKeys.push(nextLevel);
+        currentLevel = nextLevel;
+      }
+    } else if (relation.type === "Foreign") {
+      const existing = currentLevel.fkeys.find(
+        (key) => key.name === relation.key
+      );
+      if (existing) {
+        currentLevel = existing;
+      } else {
+        const nextLevel = {
+          name: relation.key,
+          table: relation.table,
+          inboundKeys: [],
+          fkeys: [],
+        };
+        currentLevel.fkeys.push(nextLevel);
+        currentLevel = nextLevel;
+      }
+    } else if (relation.type === "Independent") {
+      result.fkeys.push({
+        name: "None (no relation)",
+        table: "",
+        inboundKeys: [],
+        fkeys: [],
+        relPath: path,
+      });
+    } else if (relation.type === "Own") {
+      result.fkeys.push({
+        name: `${parentTbl} (same table)`,
+        table: "",
+        inboundKeys: [],
+        fkeys: [],
+        relPath: path,
+      });
+    } else if (relation.type === "OneToOneShow") {
+      result.inboundKeys.push({
+        name: relation.key,
+        table: relation.table,
+        inboundKeys: [],
+        fkeys: [],
+        relPath: path,
+      });
+    }
+  }
+  currentLevel.relPath = path;
+};
+
+export const RelationPicker = ({ options, viewname, update }) => {
+  const maxRecLevelDefault = 10;
+  const [maxRecLevel, setMaxRecLevel] = useState(maxRecLevelDefault);
+  const relationLevels = parseRelations(options, viewname, options.tableName);
+
+  const levelClasses = (level) => {
+    const classes = [];
+    for (let i = level; i < maxRecLevel; i++) {
+      classes.push(`.dropdown_level_${i}.show`);
+    }
+    return classes.join(",");
+  };
+
+  const activeClasses = (level) => {
+    const classes = [];
+    for (let i = level; i < maxRecLevel; i++) {
+      classes.push(`.item_level_${i}.active`);
+    }
+    return classes.join(",");
+  };
+
+  const buildPicker = (level, reclevel) => {
+    return (
+      <div className="dropdown-menu">
+        <h5 className="join-table-header text-center">{level.table}</h5>
+        <ul className="ps-0 mb-0">
+          {
+            // foreign keys
+            level.fkeys.map((fkey) => {
+              const hasSubLevels =
+                fkey.fkeys.length > 0 || fkey.inboundKeys.length > 0;
+              const identifier = removeWhitespaces(
+                `${fkey.name}_${fkey.table}_${level.table}_${reclevel}`
+              );
+
+              return hasSubLevels ? (
+                <li
+                  key={`${identifier}_fkey_key`}
+                  className={`dropdown-item ${identifier}_fkey_item item_level_${reclevel} ${
+                    reclevel < 5 ? "dropstart" : "dropdown"
+                  }`}
+                  role="button"
+                >
+                  <div
+                    className={`dropdown-toggle ${identifier}_fkey_toggle dropdown_level_${reclevel}`}
+                    role="button"
+                    aria-expanded="false"
+                    onClick={() => {
+                      $(
+                        `.${identifier}_fkey_toggle,${levelClasses(reclevel)}`
+                      ).dropdown("toggle");
+                      if (reclevel > maxRecLevel) setMaxRecLevel(reclevel);
+                      $(activeClasses(reclevel)).removeClass("active");
+                      $(`.${identifier}_fkey_item`).addClass(() => "active");
+                    }}
+                  >
+                    {fkey.name}
+                  </div>
+                  {buildPicker(fkey, reclevel + 1)}
+                </li>
+              ) : (
+                <li
+                  key={`${identifier}_fkey_key`}
+                  className="dropdown-item"
+                  role="button"
+                  onClick={() => {
+                    update(fkey.relPath);
+                    $(".dropdown-item.active").removeClass("active");
+                    $(`${levelClasses(0)}`).dropdown("toggle");
+                    setMaxRecLevel(maxRecLevelDefault);
+                  }}
+                >
+                  {fkey.name}
+                </li>
+              );
+            })
+          }
+          {
+            // inbound keys
+            level.inboundKeys.map((inboundKey) => {
+              const hasSubLevels =
+                inboundKey.fkeys.length > 0 ||
+                inboundKey.inboundKeys.length > 0;
+              const identifier = removeWhitespaces(
+                `${inboundKey.name}_${inboundKey.table}_${level.table}_${reclevel}`
+              );
+              return hasSubLevels ? (
+                <li
+                  key={`${identifier}_inboundkey_key`}
+                  className={`dropdown-item ${identifier}_inbound_item item_level_${reclevel} ${
+                    reclevel < 5 ? "dropstart" : "dropdown"
+                  }`}
+                  role="button"
+                >
+                  <div
+                    className={`dropdown-toggle ${identifier}_inbound_toggle dropdown_level_${reclevel}`}
+                    role="button"
+                    aria-expanded="false"
+                    onClick={() => {
+                      $(
+                        `.${identifier}_inbound_toggle,${levelClasses(
+                          reclevel
+                        )}`
+                      ).dropdown("toggle");
+                      if (reclevel > maxRecLevel) setMaxRecLevel(reclevel);
+                      $(activeClasses(reclevel)).removeClass("active");
+                      $(`.${identifier}_inbound_item`).addClass(() => "active");
+                    }}
+                  >
+                    {inboundKey.name} (from {inboundKey.table})
+                  </div>
+                  {buildPicker(inboundKey, reclevel + 1)}
+                </li>
+              ) : (
+                <li
+                  key={`${identifier}_inboundkey_key`}
+                  className="dropdown-item"
+                  role="button"
+                  onClick={() => {
+                    update(inboundKey.relPath);
+                    $(".dropdown-item.active").removeClass("active");
+                    $(`${levelClasses(0)}`).dropdown("toggle");
+                    setMaxRecLevel(maxRecLevelDefault);
+                  }}
+                >
+                  {inboundKey.name} (from {inboundKey.table})
+                </li>
+              );
+            })
+          }
+        </ul>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <label>Relation</label>
+      <div style={{ zIndex: 10000 }} className="dropstart">
+        <button
+          id="_relation_picker_toggle_"
+          className="btn btn-outline-primary dropdown-toggle dropdown_level_0 mb-1"
+          aria-expanded="false"
+          onClick={() => {
+            $(".dropdown-item.active").removeClass("active");
+            $(`#_relation_picker_toggle_,${levelClasses(0)}`).dropdown(
+              "toggle"
+            );
+            setMaxRecLevel(maxRecLevelDefault);
+          }}
+        >
+          Select
+        </button>
+        {buildPicker(relationLevels, 1)}
+      </div>
+    </div>
+  );
+};