@saltcorn/builder 0.9.4-beta.1 → 0.9.4-beta.11

package/src/components/elements/View.js

@@ -17,13 +17,18 @@ import {
   buildOptions,
   HelpTopicLink,
   initialRelation,
-  prepCacheAndFinder,
-  updateRelationsCache,
+  buildLayers,
 } from "./utils";
 
 import { RelationBadges } from "./RelationBadges";
 import { RelationOnDemandPicker } from "./RelationOnDemandPicker";
 
+import {
+  RelationsFinder,
+  Relation,
+  buildTableCaches,
+} from "@saltcorn/common-code";
+
 export /**
  * @param {object} props
  * @param {*} props.name
@@ -48,7 +53,6 @@ const View = ({ name, view, configuration, state }) => {
     if (rest.startsWith(".")) viewname = prefix;
     else viewname = rest;
   }
-
   const theview = options.views.find((v) => v.name === viewname);
   const label = theview ? theview.label : view;
   const { previews, setPreviews } = React.useContext(previewCtx);
@@ -109,10 +113,23 @@ const ViewSettings = () => {
     extra_state_fml,
   } = node;
   const options = React.useContext(optionsCtx);
-  const { caches, finder } = useMemo(
-    () => prepCacheAndFinder(options),
-    [undefined]
-  );
+  const {
+    tables,
+    views,
+    max_relations_layer_depth,
+    tableName,
+    excluded_subview_templates,
+  } = options;
+  // not needed in page editor
+  let finder = null;
+  let tableCaches = null;
+  if (tables && views) {
+    finder = useMemo(
+      () => new RelationsFinder(tables, views, max_relations_layer_depth),
+      [undefined]
+    );
+    tableCaches = useMemo(() => buildTableCaches(tables), [undefined]);
+  }
   const fixed_state_fields =
     options.fixed_state_fields && options.fixed_state_fields[view];
   const { setPreviews } = React.useContext(previewCtx);
@@ -135,27 +152,48 @@ const ViewSettings = () => {
     else viewname = rest;
   }
   if (viewname.includes(".")) viewname = viewname.split(".")[0];
-  if (finder)
-    updateRelationsCache(
-      relationsCache,
-      setRelationsCache,
-      options,
-      finder,
-      viewname
+
+  if (
+    finder &&
+    !(relationsCache[tableName] && relationsCache[tableName][viewname])
+  ) {
+    const relations = finder.findRelations(
+      tableName,
+      viewname,
+      excluded_subview_templates
+    );
+    const layers = buildLayers(
+      relations,
+      tableName,
+      tableCaches.tableNameCache
     );
-  const [relations, setRelations] = finder
-    ? React.useState(relationsCache[options.tableName][viewname])
+    relationsCache[tableName] = relationsCache[tableName] || {};
+    relationsCache[tableName][viewname] = { relations, layers };
+    setRelationsCache({ ...relationsCache });
+  }
+  const [relationsData, setRelationsData] = finder
+    ? React.useState(relationsCache[tableName][viewname])
     : [undefined, undefined];
-  let safeRelation = relation;
+  let safeRelation = null;
+  const subView = views.find((view) => view.name === viewname);
+  if (relation) {
+    const subTbl = tables.find((tbl) => tbl.id === subView.table_id);
+    safeRelation = new Relation(
+      relation,
+      subTbl ? subTbl.name : "",
+      subView.display_type
+    );
+  }
   if (
     options.mode !== "filter" &&
+    subView.table_id &&
     !safeRelation &&
     !hasLegacyRelation &&
-    relations?.paths.length > 0
+    relationsData?.relations.length > 0
   ) {
-    safeRelation = initialRelation(relations.paths, options.tableName);
+    safeRelation = initialRelation(relationsData.relations);
     setProp((prop) => {
-      prop.relation = safeRelation;
+      prop.relation = safeRelation.relationString;
     });
   }
   const helpContext = { view_name: viewname };
@@ -169,24 +207,32 @@ const ViewSettings = () => {
             prop.view = target_value;
           });
         } else {
-          updateRelationsCache(
-            relationsCache,
-            setRelationsCache,
-            options,
-            finder,
-            target_value
+          const newRelations = finder.findRelations(
+            tableName,
+            target_value,
+            excluded_subview_templates
           );
-          const newRelations = relationsCache[options.tableName][target_value];
-          if (newRelations.paths.length > 0) {
+          const layers = buildLayers(
+            newRelations,
+            tableName,
+            tableCaches.tableNameCache
+          );
+          relationsCache[tableName] = relationsCache[tableName] || {};
+          relationsCache[tableName][target_value] = {
+            relations: newRelations,
+            layers,
+          };
+          if (newRelations.length > 0) {
             setProp((prop) => {
               prop.view = target_value;
-              prop.relation = initialRelation(
-                newRelations.paths,
-                options.tableName
-              );
+              prop.relation = initialRelation(newRelations).relationString;
+            });
+            setRelationsData({ relations: newRelations, layers });
+          } else
+            window.notifyAlert({
+              type: "warning",
+              text: `${target_value} has no relations`,
             });
-            setRelations(newRelations);
-          }
         }
       }
     }
@@ -194,7 +240,7 @@ const ViewSettings = () => {
 
   return (
     <div>
-      {relations ? (
+      {relationsData ? (
         <Fragment>
           <div>
             <label>View to {options.mode === "show" ? "embed" : "show"}</label>
@@ -214,7 +260,7 @@ const ViewSettings = () => {
           {options.mode !== "filter" && (
             <div>
               <RelationOnDemandPicker
-                relations={relations.layers}
+                relations={relationsData.layers}
                 update={(relPath) => {
                   if (relPath.startsWith(".")) {
                     setProp((prop) => {
@@ -232,8 +278,8 @@ const ViewSettings = () => {
               <RelationBadges
                 view={view}
                 relation={safeRelation}
-                parentTbl={options.tableName}
-                tableNameCache={caches.tableNameCache}
+                parentTbl={tableName}
+                caches={tableCaches}
               />
             </div>
           )}
@@ -293,7 +339,7 @@ const ViewSettings = () => {
             )}
         </Fragment>
       )}
-      {(state === "shared" || options.mode === "page") && (
+      {
         <Fragment>
           <label>
             Extra state Formula
@@ -311,7 +357,7 @@ const ViewSettings = () => {
             </small>
           ) : null}
         </Fragment>
-      )}
+      }
       {view ? (
         <a
           className="d-block mt-2"

package/src/components/elements/ViewLink.js

@@ -18,14 +18,19 @@ import {
   setAPropGen,
   FormulaTooltip,
   HelpTopicLink,
-  prepCacheAndFinder,
   initialRelation,
-  updateRelationsCache,
+  buildLayers,
 } from "./utils";
 
 import { RelationBadges } from "./RelationBadges";
 import { RelationOnDemandPicker } from "./RelationOnDemandPicker";
 
+import {
+  RelationsFinder,
+  Relation,
+  buildTableCaches,
+} from "@saltcorn/common-code";
+
 export /**
  * @param {object} props
  * @param {string} props.name
@@ -127,10 +132,18 @@ const ViewLinkSettings = () => {
     link_target_blank,
   } = node;
   const options = React.useContext(optionsCtx);
-  const { caches, finder } = useMemo(
-    () => prepCacheAndFinder(options),
+  const {
+    tables,
+    views,
+    tableName,
+    excluded_subview_templates,
+    max_relations_layer_depth,
+  } = options;
+  const finder = useMemo(
+    () => new RelationsFinder(tables, views, max_relations_layer_depth),
     [undefined]
   );
+  const tableCaches = useMemo(() => buildTableCaches(tables), [undefined]);
   const { relationsCache, setRelationsCache } = React.useContext(relationsCtx);
   let errorString = false;
   try {
@@ -147,50 +160,82 @@ const ViewLinkSettings = () => {
   const safeViewName = use_view_name?.includes(".")
     ? use_view_name.split(".")[0]
     : use_view_name;
-  updateRelationsCache(
-    relationsCache,
-    setRelationsCache,
-    options,
-    finder,
-    safeViewName
-  );
-  const [relations, setRelations] = React.useState(
+  const subView = views.find((view) => view.name === safeViewName);
+  const hasTableId = subView?.table_id !== undefined;
+  if (!(relationsCache[tableName] && relationsCache[tableName][safeViewName])) {
+    const relations = finder.findRelations(
+      tableName,
+      safeViewName,
+      excluded_subview_templates
+    );
+    const layers = buildLayers(
+      relations,
+      tableName,
+      tableCaches.tableNameCache
+    );
+    relationsCache[tableName] = relationsCache[tableName] || {};
+    relationsCache[tableName][safeViewName] = { relations, layers };
+    setRelationsCache({ ...relationsCache });
+  }
+  const [relationsData, setRelationsData] = React.useState(
     relationsCache[options.tableName][safeViewName]
   );
-  let safeRelation = relation;
-  if (!safeRelation && !hasLegacyRelation && relations?.paths.length > 0) {
-    safeRelation = initialRelation(relations.paths, options.tableName);
+  let safeRelation = null;
+  if (relation) {
+    const subView = views.find((view) => view.name === safeViewName);
+    const subTbl = tables.find((tbl) => tbl.id === subView.table_id);
+    safeRelation = new Relation(
+      relation,
+      subTbl ? subTbl.name : "",
+      subView.display_type
+    );
+  }
+  if (
+    !safeRelation &&
+    !hasLegacyRelation &&
+    relationsData?.relations.length > 0
+  ) {
+    safeRelation = initialRelation(relationsData.relations);
     setProp((prop) => {
-      prop.relation = safeRelation;
+      prop.relation = safeRelation.relationString;
     });
   }
   const set_view_name = (e) => {
     if (e.target) {
       const target_value = e.target.value;
       if (target_value !== use_view_name) {
-        updateRelationsCache(
-          relationsCache,
-          setRelationsCache,
-          options,
-          finder,
-          target_value
+        const newRelations = finder.findRelations(
+          tableName,
+          target_value,
+          excluded_subview_templates
+        );
+        const layers = buildLayers(
+          newRelations,
+          tableName,
+          tableCaches.tableNameCache
         );
-        const newRelations = relationsCache[options.tableName][target_value];
-        if (newRelations.paths.length > 0) {
+
+        relationsCache[tableName] = relationsCache[tableName] || {};
+        relationsCache[tableName][target_value] = {
+          relations: newRelations,
+          layers,
+        };
+        if (newRelations.length > 0) {
           setProp((prop) => {
             prop.name = target_value;
-            prop.relation = initialRelation(
-              newRelations.paths,
-              options.tableName
-            );
+            prop.relation = initialRelation(newRelations).relationString;
+          });
+          setRelationsData({ relations: newRelations, layers });
+        } else
+          window.notifyAlert({
+            type: "warning",
+            text: `${target_value} has no relations`,
           });
-          setRelations(newRelations);
-        }
       }
     }
   };
   const helpContext = { view_name: use_view_name };
-  if (options.tableName) helpContext.srcTable = options.tableName;
+  if (tableName) helpContext.srcTable = tableName;
   return (
     <div>
       <table className="w-100">
@@ -215,7 +260,7 @@ const ViewLinkSettings = () => {
           <tr>
             <td colSpan="2">
               <RelationOnDemandPicker
-                relations={relations.layers}
+                relations={relationsData.layers}
                 update={(relPath) => {
                   if (relPath.startsWith(".")) {
                     setProp((prop) => {
@@ -233,8 +278,8 @@ const ViewLinkSettings = () => {
               <RelationBadges
                 view={name}
                 relation={safeRelation}
-                parentTbl={options.tableName}
-                tableNameCache={caches.tableNameCache}
+                parentTbl={tableName}
+                caches={tableCaches}
               />
             </td>
           </tr>
@@ -278,6 +323,7 @@ const ViewLinkSettings = () => {
             values={node}
             linkFirst={true}
             linkIsBlank={true}
+            allowRunOnLoad={false}
           />
         </tbody>
       </table>

package/src/components/elements/utils.js

@@ -18,6 +18,7 @@ import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
 import faIcons from "./faicons";
 import { Columns, ntimes } from "./Columns";
 import Tippy from "@tippyjs/react";
+import { RelationType } from "@saltcorn/common-code";
 
 export const DynamicFontAwesomeIcon = ({ icon, className }) => {
   if (!icon) return null;
@@ -445,6 +446,10 @@ const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
       }
       const newHtml = $(".preview-scratchpad").html();
       setPreviews((prevState) => ({ ...prevState, [node_id]: newHtml }));
+    })
+    .catch((e) => {
+      console.log("Unable to fetch the preview:");
+      console.log(e);
     });
 };
 
@@ -1245,19 +1250,27 @@ const ButtonOrLinkSettingsRows = ({
           <option value={addBtnClass("btn-secondary")}>Secondary button</option>
           <option value={addBtnClass("btn-success")}>Success button</option>
           <option value={addBtnClass("btn-danger")}>Danger button</option>
+          <option value={addBtnClass("btn-warning")}>Warning button</option>
+          <option value={addBtnClass("btn-info")}>Info button</option>
           <option value={addBtnClass("btn-outline-primary")}>
             Primary outline button
           </option>
           <option value={addBtnClass("btn-outline-secondary")}>
             Secondary outline button
           </option>
+          <option value={addBtnClass("btn-outline-warning")}>
+            Warning outline button
+          </option>{" "}
+          <option value={addBtnClass("btn-outline-info")}>
+            Info outline button
+          </option>
           <option value={addBtnClass("btn-custom-color")}>
             Button custom color
           </option>
           {!linkFirst ? (
             <option value={addBtnClass("btn-link")}>Link</option>
           ) : null}
-          {!linkFirst ? (
+          {!linkFirst && allowRunOnLoad ? (
             <option value="on_page_load">Run on Page Load</option>
           ) : null}
         </select>
@@ -1439,22 +1452,6 @@ const Tooltip = ({ children }) => {
   );
 };
 
-export const buildTableCaches = (allTables) => {
-  const tableIdCache = {};
-  const tableNameCache = {};
-  const fieldCache = {};
-  for (const table of allTables) {
-    tableIdCache[table.id] = table;
-    tableNameCache[table.name] = table;
-    for (const field of table.foreign_keys) {
-      if (!fieldCache[field.reftable_name])
-        fieldCache[field.reftable_name] = [];
-      fieldCache[field.reftable_name].push(field);
-    }
-  }
-  return { tableIdCache, tableNameCache, fieldCache };
-};
-
 export const removeWhitespaces = (str) => {
   return str.replace(/\s/g, "X");
 };
@@ -1497,79 +1494,145 @@ export const buildBootstrapOptions = (values) => {
   ));
 };
 
-export const prepCacheAndFinder = ({
-  tables,
-  views,
-  max_relations_layer_depth,
-}) => {
-  if (tables && views) {
-    const caches = buildTableCaches(tables);
-    const finder = new relationHelpers.RelationsFinder(
-      caches,
-      views,
-      max_relations_layer_depth || 6
-    );
-    return { caches, finder };
-  } else return { caches: null, finder: null };
+export const arrayChunks = (xs, n) => {
+  const arrayOfArrays = [];
+  for (var i = 0; i < bigarray.length; i += n) {
+    arrayOfArrays.push(bigarray.slice(i, i + n));
+  }
+  return arrayOfArrays;
 };
 
 /**
- * @param {string[]} paths
+ * @param {string[]} relations
  * @param {string} sourceTbl name of the topview table
  * @returns either a same table relation, a parent relation, a child relation, or the first relation
  */
-export const initialRelation = (paths, sourceTbl) => {
+export const initialRelation = (relations) => {
   let sameTblRel = null;
   let parentRel = null;
   let childRel = null;
-  for (const path of paths) {
-    if (!sameTblRel && path === `.${sourceTbl}`) sameTblRel = path;
-    else {
-      const tokens = path.split(".");
-      if (
-        !parentRel &&
-        tokens.length === 3 &&
-        tokens[1] === sourceTbl &&
-        tokens[2].indexOf("$") === -1
-      )
-        parentRel = path;
-      else {
-        const lastToken = tokens[tokens.length - 1];
-        if (
-          lastToken.indexOf("$") > 0 &&
-          (!childRel || childRel.split(".").length > tokens.length)
-        )
-          childRel = path;
-      }
+  for (const relation of relations) {
+    switch (relation.type) {
+      case RelationType.OWN:
+        sameTblRel = relation;
+        break;
+      case RelationType.PARENT_SHOW:
+        parentRel = relation;
+        break;
+      case RelationType.CHILD_LIST:
+      case RelationType.ONE_TO_ONE_SHOW:
+        childRel = relation;
+        break;
     }
   }
-  return sameTblRel || parentRel || childRel || paths[0];
+  return sameTblRel || parentRel || childRel || relations[0];
 };
 
 /**
- * update the builder wide relations cache relations cache
- * if there is no entry for the given tableName and viewname
- * @param {any} relationsCache cache from the context
- * @param {Function} setRelationsCache set cache in context
- * @param {any} options builder options
- * @param {RelationsFinder} finder
- * @param {string} viewname subview name
+ * builder intern path method
+ * @param path
+ * @param tableNameCache
+ * @returns
  */
-export const updateRelationsCache = (
-  relationsCache,
-  setRelationsCache,
-  options,
-  finder,
-  viewname
-) => {
-  if (!relationsCache[options.tableName])
-    relationsCache[options.tableName] = {};
-  if (!relationsCache[options.tableName][viewname]) {
-    relationsCache[options.tableName][viewname] = finder.findRelations(
-      options.tableName,
-      viewname,
-      options.excluded_subview_templates
-    );
-    setRelationsCache({ ...relationsCache });
+export const buildRelationArray = (path, tableNameCache) => {
+  if (path === ".")
+    return [{ type: "Independent", table: "None (no relation)" }];
+  const tokens = path.split(".");
+  if (tokens.length === 2)
+    return [{ type: "Own", table: `${tokens[1]} (same table)` }];
+  else if (tokens.length >= 3) {
+    const result = [];
+    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 srcTbl = tableNameCache[currentTbl];
+        const fk = srcTbl.foreign_keys.find((fk) => fk.name === relation);
+        if (fk) {
+          const targetTbl = tableNameCache[fk.reftable_name];
+          result.push({
+            type: "Foreign",
+            table: targetTbl.name,
+            key: relation,
+          });
+          currentTbl = targetTbl.name;
+        }
+      }
+    }
+    return result;
+  }
+};
+
+export const buildLayers = (relations, tableName, tableNameCache) => {
+  const result = { table: tableName, inboundKeys: [], fkeys: [] };
+  for (const relation of relations) {
+    const relType = relation.type;
+    let currentLevel = result;
+    if (relType === RelationType.INDEPENDENT) {
+      currentLevel.fkeys.push({
+        name: "none (no relation)",
+        table: "",
+        inboundKeys: [],
+        fkeys: [],
+        relPath: relation.relationString,
+      });
+    } else if (relType === RelationType.OWN) {
+      currentLevel.fkeys.push({
+        name: "same table",
+        table: relation.targetTblName,
+        inboundKeys: [],
+        fkeys: [],
+        relPath: relation.relationString,
+      });
+    } else {
+      let currentTbl = relation.sourceTblName;
+      for (const pathElement of relation.path) {
+        if (pathElement.inboundKey) {
+          currentTbl = pathElement.table;
+          const existing = currentLevel.inboundKeys.find(
+            (key) =>
+              key.name === pathElement.inboundKey && key.table === currentTbl
+          );
+          if (existing) {
+            currentLevel = existing;
+          } else {
+            const nextLevel = {
+              name: pathElement.inboundKey,
+              table: currentTbl,
+              inboundKeys: [],
+              fkeys: [],
+            };
+            currentLevel.inboundKeys.push(nextLevel);
+            currentLevel = nextLevel;
+          }
+        } else if (pathElement.fkey) {
+          const tblObj = tableNameCache[currentTbl];
+          const fkey = tblObj.foreign_keys.find(
+            (key) => key.name === pathElement.fkey
+          );
+          currentTbl = fkey.reftable_name;
+          const existing = currentLevel.fkeys.find(
+            (key) => key.name === pathElement.fkey
+          );
+          if (existing) {
+            currentLevel = existing;
+          } else {
+            const nextLevel = {
+              name: pathElement.fkey,
+              table: currentTbl,
+              inboundKeys: [],
+              fkeys: [],
+            };
+            currentLevel.fkeys.push(nextLevel);
+            currentLevel = nextLevel;
+          }
+        }
+      }
+    }
+    currentLevel.relPath = relation.relationString;
   }
+  return result;
 };