@saltcorn/builder 0.9.4-beta.8 → 0.9.4-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.4-beta.8",
+  "version": "0.9.4-beta.9",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,6 +20,7 @@
     "@babel/preset-react": "7.9.4",
     "@craftjs/core": "0.1.0-beta.20",
     "@craftjs/utils": "0.1.0-beta.20",
+    "@saltcorn/common-code": "0.9.4-beta.8",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",

package/src/components/Builder.js

@@ -52,6 +52,7 @@ import {
   faRedo,
   faTrashAlt,
   faSave,
+  faExclamationTriangle,
 } from "@fortawesome/free-solid-svg-icons";
 import {
   faCaretSquareLeft,
@@ -394,7 +395,7 @@ const Builder = ({ options, layout, mode }) => {
   const [previews, setPreviews] = useState({});
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const nodekeys = useRef([]);
-  const [isSaving, setIsSaving] = useState(false);
+  const [savingState, setSavingState] = useState({ isSaving: false });
   const [isEnlarged, setIsEnlarged] = useState(false);
   const [isLeftEnlarged, setIsLeftEnlarged] = useState(false);
   const [relationsCache, setRelationsCache] = useState({});
@@ -422,7 +423,8 @@ const Builder = ({ options, layout, mode }) => {
                   <div className="componets-and-library-accordion toolbox-card">
                     <InitNewElement
                       nodekeys={nodekeys}
-                      setIsSaving={setIsSaving}
+                      setSavingState={setSavingState}
+                      savingState={savingState}
                     />
                     <Accordion>
                       <div className="card mt-1" accordiontitle="Components">
@@ -503,7 +505,12 @@ const Builder = ({ options, layout, mode }) => {
                     <HistoryPanel />
                     <FontAwesomeIcon
                       icon={faSave}
-                      className={isSaving ? "d-inline" : "d-none"}
+                      className={savingState.isSaving ? "d-inline" : "d-none"}
+                    />
+                    <FontAwesomeIcon
+                      icon={faExclamationTriangle}
+                      color="#ff0033"
+                      className={savingState.error ? "d-inline" : "d-none"}
                     />
                     <FontAwesomeIcon
                       icon={isEnlarged ? faCaretSquareRight : faCaretSquareLeft}
@@ -511,7 +518,13 @@ const Builder = ({ options, layout, mode }) => {
                       onClick={() => setIsEnlarged(!isEnlarged)}
                       title={isEnlarged ? "Shrink" : "Enlarge"}
                     />
-
+                    <div
+                      className={` ${
+                        savingState.error ? "d-block" : "d-none"
+                      } my-2 fw-bold`}
+                    >
+                      your work is not being saved
+                    </div>
                     <SettingsPanel />
                   </div>
                 </div>

package/src/components/Library.js

@@ -83,7 +83,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const InitNewElement = ({ nodekeys, setIsSaving }) => {
+const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
   const [saveTimeout, setSaveTimeout] = useState(false);
   const savedData = useRef(false);
   const { actions, query, connectors } = useEditor((state, query) => {
@@ -103,7 +103,7 @@ const InitNewElement = ({ nodekeys, setIsSaving }) => {
     }
     if (isEqual(savedData.current, JSON.stringify(data.layout))) return;
     savedData.current = JSON.stringify(data.layout);
-    setIsSaving(true);
+    setSavingState({ isSaving: true });
 
     fetch(`/${urlroot}/savebuilder/${options.page_id || options.view_id}`, {
       method: "POST", // or 'PUT'
@@ -112,9 +112,29 @@ const InitNewElement = ({ nodekeys, setIsSaving }) => {
         "CSRF-Token": options.csrfToken,
       },
       body: JSON.stringify(data),
-    }).then(() => {
-      setIsSaving(false);
-    });
+    })
+      .then((response) => {
+        response.json().then((data) => {
+          if (typeof data?.error === "string") {
+            // don't log duplicates
+            if (!savingState.error)
+              window.notifyAlert({ type: "danger", text: data.error });
+            setSavingState({ isSaving: false, error: data.error });
+          } else setSavingState({ isSaving: false });
+        });
+      })
+      .catch((e) => {
+        const text = e || "Unable to save";
+        // don't log duplicates
+        if (savingState.error) setSavingState({ isSaving: false, error: text });
+        else {
+          window.notifyAlert({ type: "danger", text: text });
+          setSavingState({
+            isSaving: false,
+            error: text,
+          });
+        }
+      });
   };
   const throttledSave = useThrottle(() => {
     doSave(query);

package/src/components/elements/RelationBadges.js

@@ -1,33 +1,49 @@
 import React from "react";
 import { removeWhitespaces } from "./utils";
+import { parseLegacyRelation, RelationType } from "@saltcorn/common-code";
 
-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 && key) result.push({ down: key, table: parentTbl });
-      else if (currentCfg) {
-        currentCfg.down = key;
-        result.push(currentCfg);
+const buildBadgeCfgs = (sourceTblName, type, path, caches) => {
+  if (type === RelationType.OWN)
+    return [{ table: `${sourceTblName} (same table)` }];
+  else if (type === RelationType.INDEPENDENT)
+    return [{ table: "None (no relation)" }];
+  else if (path.length === 0) return [{ table: "invalid relation" }];
+  else {
+    const result = [];
+    let currentCfg = null;
+    let currentTbl = sourceTblName;
+    for (const pathElement of path) {
+      if (pathElement.inboundKey) {
+        if (currentCfg) result.push(currentCfg);
+        currentTbl = pathElement.table;
+        currentCfg = { up: pathElement.inboundKey, table: currentTbl };
+      } else if (pathElement.fkey) {
+        if (!currentCfg)
+          result.push({ down: pathElement.fkey, table: currentTbl });
+        else {
+          currentCfg.down = pathElement.fkey;
+          result.push(currentCfg);
+        }
+        const tblObj = caches.tableNameCache[currentTbl];
+        const fkey = tblObj.foreign_keys.find(
+          (key) => key.name === pathElement.fkey
+        );
+        currentTbl = fkey.reftable_name;
+        currentCfg = { table: currentTbl };
       }
-      currentCfg = { table };
     }
-  }
-  if (
-    currentCfg &&
-    !result.find(
-      ({ down, table, up }) =>
-        down === currentCfg.down &&
-        table === currentCfg.table &&
-        up === currentCfg.up
+    if (
+      currentCfg &&
+      !result.find(
+        ({ down, table, up }) =>
+          down === currentCfg.down &&
+          table === currentCfg.table &&
+          up === currentCfg.up
+      )
     )
-  )
-    result.push(currentCfg);
-  return result;
+      result.push(currentCfg);
+    return result;
+  }
 };
 
 const buildBadge = ({ up, table, down }, index) => {
@@ -59,41 +75,34 @@ const buildBadge = ({ up, table, down }, index) => {
   );
 };
 
-export const RelationBadges = ({
-  view,
-  relation,
-  parentTbl,
-  tableNameCache,
-}) => {
+export const RelationBadges = ({ view, relation, parentTbl, caches }) => {
   if (relation) {
-    const parsed = relationHelpers.parseRelationPath(relation, tableNameCache);
-
     return (
       <div className="overflow-scroll">
-        {parsed.length > 0
-          ? buildBadgeCfgs(parsed, parentTbl).map(buildBadge)
-          : buildBadge({ table: "invalid relation" }, 0)}
+        {buildBadgeCfgs(
+          relation.sourceTblName,
+          relation.type,
+          relation.path,
+          caches
+        ).map(buildBadge)}
       </div>
     );
   } else {
     if (!view) return buildBadge({ table: "invalid relation" }, 0);
     const [prefix, rest] = view.split(":");
-    const parsed = relationHelpers.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")
-    )
+    if (!rest) return buildBadge({ table: "invalid relation" }, 0);
+    const { type, path } = parseLegacyRelation(prefix, rest, parentTbl);
+    if (path.length === 0) return buildBadge({ table: "invalid relation" }, 0);
+    else if (path.length === 1 && (type === "Independent" || type === "Own"))
       return (
         <div className="overflow-scroll">
-          {buildBadge({ table: parsed[0].table }, 0)}
+          {buildBadge({ table: path[0].table }, 0)}
         </div>
       );
     else
       return (
         <div className="overflow-scroll">
-          {buildBadgeCfgs(parsed, parentTbl).map(buildBadge)}
+          {buildBadgeCfgs(parentTbl, type, path, caches).map(buildBadge)}
         </div>
       );
   }

package/src/components/elements/Tabs.js

@@ -424,7 +424,9 @@ const TabsSettings = () => {
                 />
               </td>
             </tr>
-            {options.mode === "show" || options.mode === "edit" ? (
+            {options.mode === "show" ||
+            options.mode === "edit" ||
+            options.mode === "filter" ? (
               <Fragment>
                 <tr>
                   <th colSpan="2">Show if formula</th>

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 [relations, setRelations] = finder
-    ? React.useState(relationsCache[options.tableName][viewname])
+    const layers = buildLayers(
+      relations,
+      tableName,
+      tableCaches.tableNameCache
+    );
+    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>
           )}

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>