@saltcorn/builder 0.9.3-beta.8 → 0.9.3-rc.1

package/src/components/elements/View.js

@@ -8,6 +8,7 @@ import React, { Fragment, useEffect, useMemo } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
+import relationsCtx from "../relations_context";
 
 import {
   fetchViewPreview,
@@ -15,7 +16,9 @@ import {
   setAPropGen,
   buildOptions,
   HelpTopicLink,
+  initialRelation,
   prepCacheAndFinder,
+  updateRelationsCache,
 } from "./utils";
 
 import { RelationBadges } from "./RelationBadges";
@@ -113,6 +116,7 @@ const ViewSettings = () => {
   const fixed_state_fields =
     options.fixed_state_fields && options.fixed_state_fields[view];
   const { setPreviews } = React.useContext(previewCtx);
+  const { relationsCache, setRelationsCache } = React.useContext(relationsCtx);
 
   const setAProp = setAPropGen(setProp);
   let errorString = false;
@@ -131,18 +135,25 @@ const ViewSettings = () => {
     else viewname = rest;
   }
   if (viewname.includes(".")) viewname = viewname.split(".")[0];
+  if (finder)
+    updateRelationsCache(
+      relationsCache,
+      setRelationsCache,
+      options,
+      finder,
+      viewname
+    );
   const [relations, setRelations] = finder
-    ? React.useState(
-        finder.findRelations(
-          options.tableName,
-          viewname,
-          options.excluded_subview_templates
-        )
-      )
+    ? React.useState(relationsCache[options.tableName][viewname])
     : [undefined, undefined];
   let safeRelation = relation;
-  if (!safeRelation && !hasLegacyRelation && relations?.paths.length > 0) {
-    safeRelation = relations.paths[0];
+  if (
+    options.mode !== "filter" &&
+    !safeRelation &&
+    !hasLegacyRelation &&
+    relations?.paths.length > 0
+  ) {
+    safeRelation = initialRelation(relations.paths, options.tableName);
     setProp((prop) => {
       prop.relation = safeRelation;
     });
@@ -153,17 +164,29 @@ const ViewSettings = () => {
     if (e.target) {
       const target_value = e.target.value;
       if (target_value !== viewname) {
-        const newRelations = finder.findRelations(
-          options.tableName,
-          target_value,
-          options.excluded_subview_templates
-        );
-        if (newRelations.paths.length > 0) {
+        if (options.mode === "filter") {
           setProp((prop) => {
             prop.view = target_value;
-            prop.relation = newRelations.paths[0];
           });
-          setRelations(newRelations);
+        } else {
+          updateRelationsCache(
+            relationsCache,
+            setRelationsCache,
+            options,
+            finder,
+            target_value
+          );
+          const newRelations = relationsCache[options.tableName][target_value];
+          if (newRelations.paths.length > 0) {
+            setProp((prop) => {
+              prop.view = target_value;
+              prop.relation = initialRelation(
+                newRelations.paths,
+                options.tableName
+              );
+            });
+            setRelations(newRelations);
+          }
         }
       }
     }
@@ -188,7 +211,7 @@ const ViewSettings = () => {
               ))}
             </select>
           </div>
-          {
+          {options.mode !== "filter" && (
             <div>
               <RelationOnDemandPicker
                 relations={relations.layers}
@@ -213,7 +236,7 @@ const ViewSettings = () => {
                 tableNameCache={caches.tableNameCache}
               />
             </div>
-          }
+          )}
         </Fragment>
       ) : (
         <div>

package/src/components/elements/ViewLink.js

@@ -7,6 +7,8 @@
 import React, { useMemo } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
+import relationsCtx from "../relations_context";
+
 import {
   BlockSetting,
   MinRoleSettingRow,
@@ -17,6 +19,8 @@ import {
   FormulaTooltip,
   HelpTopicLink,
   prepCacheAndFinder,
+  initialRelation,
+  updateRelationsCache,
 } from "./utils";
 
 import { RelationBadges } from "./RelationBadges";
@@ -127,6 +131,7 @@ const ViewLinkSettings = () => {
     () => prepCacheAndFinder(options),
     [undefined]
   );
+  const { relationsCache, setRelationsCache } = React.useContext(relationsCtx);
   let errorString = false;
   try {
     Function("return " + extra_state_fml);
@@ -142,16 +147,19 @@ 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(
-    finder.findRelations(
-      options.tableName,
-      safeViewName,
-      options.excluded_subview_templates
-    )
+    relationsCache[options.tableName][safeViewName]
   );
   let safeRelation = relation;
   if (!safeRelation && !hasLegacyRelation && relations?.paths.length > 0) {
-    safeRelation = relations.paths[0];
+    safeRelation = initialRelation(relations.paths, options.tableName);
     setProp((prop) => {
       prop.relation = safeRelation;
     });
@@ -160,15 +168,21 @@ const ViewLinkSettings = () => {
     if (e.target) {
       const target_value = e.target.value;
       if (target_value !== use_view_name) {
-        const newRelations = finder.findRelations(
-          options.tableName,
-          target_value,
-          options.excluded_subview_templates
+        updateRelationsCache(
+          relationsCache,
+          setRelationsCache,
+          options,
+          finder,
+          target_value
         );
+        const newRelations = relationsCache[options.tableName][target_value];
         if (newRelations.paths.length > 0) {
           setProp((prop) => {
             prop.name = target_value;
-            prop.relation = newRelations.paths[0];
+            prop.relation = initialRelation(
+              newRelations.paths,
+              options.tableName
+            );
           });
           setRelations(newRelations);
         }

package/src/components/elements/utils.js

@@ -767,12 +767,16 @@ const ConfigField = ({
     field.default
   );
   if (field.input_type === "fromtype") field.input_type = null;
-  if (field.type && field.type.name === "String" && field.attributes.options) {
+  if (
+    field.type &&
+    (field.type.name === "String" || field.type === "String") &&
+    field.attributes?.options
+  ) {
     field.input_type = "select";
     field.options =
-      typeof field.attributes.options === "string"
-        ? field.attributes.options.split(",").map((s) => s.trim())
-        : field.attributes.options;
+      typeof field.attributes?.options === "string"
+        ? field.attributes?.options.split(",").map((s) => s.trim())
+        : field.attributes?.options;
     if (!field.required && field.options) field.options.unshift("");
   }
   const field_type = field.input_type || field.type.name || field.type;
@@ -781,7 +785,7 @@ const ConfigField = ({
     field_type === "select";
   const getOptions = () =>
     typeof field?.attributes?.options === "string"
-      ? field.attributes.options.split(",").map((s) => s.trim())
+      ? field.attributes?.options.split(",").map((s) => s.trim())
       : field?.attributes?.options || field.options;
 
   if (hasSelect && typeof value === "undefined") {
@@ -890,6 +894,7 @@ const ConfigField = ({
         className="form-control"
         value={value}
         onChange={(e) => e.target && myOnChange(e.target.value)}
+        spellCheck={false}
       />
     ),
     select: () => (
@@ -1501,3 +1506,64 @@ export const prepCacheAndFinder = ({
     return { caches, finder };
   } else return { caches: null, finder: null };
 };
+
+/**
+ * @param {string[]} paths
+ * @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) => {
+  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;
+      }
+    }
+  }
+  return sameTblRel || parentRel || childRel || paths[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
+ */
+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 });
+  }
+};

package/src/components/relations_context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export default createContext({});

package/tests/relations_finder.test.js

@@ -38,14 +38,22 @@ const doTest = (
     name: view || viewName,
   });
   require("@craftjs/core").useNode.mockImplementation(useNodeMock);
+  let relationsCache = {};
+  const setRelationsCache = (newVal) => {
+    relationsCache = newVal;
+  };
   // mock react context
   const useContextMock = (React.useContext = jest.fn());
   useContextMock.mockReturnValue({
+    // optionsCtx part
     tables: tables,
     views: views,
     tableName: tableName,
     roles: [],
     excluded_subview_templates: excludedTemplates,
+    // relationsCtx part
+    relationsCache: relationsCache,
+    setRelationsCache: setRelationsCache,
   });
   // spy on useState and extract the relations (first call)
   const spy = jest.spyOn(React, "useState");