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

package/package.json

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

package/src/components/Builder.js

@@ -31,6 +31,7 @@ import { DropMenu } from "./elements/DropMenu";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import optionsCtx from "./context";
 import PreviewCtx from "./preview_context";
+import RelationsCtx from "./relations_context";
 import {
   ToolboxShow,
   ToolboxEdit,
@@ -390,6 +391,7 @@ const Builder = ({ options, layout, mode }) => {
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const nodekeys = useRef([]);
   const [isSaving, setIsSaving] = useState(false);
+  const [relationsCache, setRelationsCache] = useState({});
 
   return (
     <ErrorBoundary>
@@ -398,83 +400,90 @@ const Builder = ({ options, layout, mode }) => {
           <PreviewCtx.Provider
             value={{ previews, setPreviews, uploadedFiles, setUploadedFiles }}
           >
-            <div className="row" style={{ marginTop: "-5px" }}>
-              <div className="col-sm-auto left-builder-col">
-                <div className="componets-and-library-accordion toolbox-card">
-                  <InitNewElement
-                    nodekeys={nodekeys}
-                    setIsSaving={setIsSaving}
-                  />
-                  <Accordion>
-                    <div className="card mt-1" accordiontitle="Components">
-                      {{
-                        show: <ToolboxShow />,
-                        edit: <ToolboxEdit />,
-                        page: <ToolboxPage />,
-                        filter: <ToolboxFilter />,
-                      }[mode] || <div>Missing mode</div>}
-                    </div>
-                    <div accordiontitle="Library">
-                      <Library />
-                    </div>
-                  </Accordion>
+            <RelationsCtx.Provider
+              value={{
+                relationsCache,
+                setRelationsCache,
+              }}
+            >
+              <div className="row" style={{ marginTop: "-5px" }}>
+                <div className="col-sm-auto left-builder-col">
+                  <div className="componets-and-library-accordion toolbox-card">
+                    <InitNewElement
+                      nodekeys={nodekeys}
+                      setIsSaving={setIsSaving}
+                    />
+                    <Accordion>
+                      <div className="card mt-1" accordiontitle="Components">
+                        {{
+                          show: <ToolboxShow />,
+                          edit: <ToolboxEdit />,
+                          page: <ToolboxPage />,
+                          filter: <ToolboxFilter />,
+                        }[mode] || <div>Missing mode</div>}
+                      </div>
+                      <div accordiontitle="Library">
+                        <Library />
+                      </div>
+                    </Accordion>
+                  </div>
+                  <div className="card toolbox-card pe-0">
+                    <div className="card-header">Layers</div>
+                    {showLayers && (
+                      <div className="card-body p-0 builder-layers">
+                        <Layers expandRootOnLoad={true} />
+                      </div>
+                    )}
+                  </div>
                 </div>
-                <div className="card toolbox-card pe-0">
-                  <div className="card-header">Layers</div>
-                  {showLayers && (
-                    <div className="card-body p-0 builder-layers">
-                      <Layers expandRootOnLoad={true} />
-                    </div>
-                  )}
+                <div
+                  id="builder-main-canvas"
+                  className={`col builder-mode-${options.mode}`}
+                >
+                  <div>
+                    <Frame
+                      resolver={{
+                        Text,
+                        Empty,
+                        Columns,
+                        JoinField,
+                        Field,
+                        ViewLink,
+                        Action,
+                        HTMLCode,
+                        LineBreak,
+                        Aggregation,
+                        Card,
+                        Image,
+                        Link,
+                        View,
+                        SearchBar,
+                        Container,
+                        Column,
+                        DropDownFilter,
+                        DropMenu,
+                        Tabs,
+                        Table,
+                        ToggleFilter,
+                      }}
+                    >
+                      <Element canvas is={Column}></Element>
+                    </Frame>
+                  </div>
                 </div>
-              </div>
-              <div
-                id="builder-main-canvas"
-                className={`col builder-mode-${options.mode}`}
-              >
-                <div>
-                  <Frame
-                    resolver={{
-                      Text,
-                      Empty,
-                      Columns,
-                      JoinField,
-                      Field,
-                      ViewLink,
-                      Action,
-                      HTMLCode,
-                      LineBreak,
-                      Aggregation,
-                      Card,
-                      Image,
-                      Link,
-                      View,
-                      SearchBar,
-                      Container,
-                      Column,
-                      DropDownFilter,
-                      DropMenu,
-                      Tabs,
-                      Table,
-                      ToggleFilter,
-                    }}
-                  >
-                    <Element canvas is={Column}></Element>
-                  </Frame>
-                </div>
-              </div>
-              <div className="col-sm-auto builder-sidebar">
-                <div style={{ width: "16rem" }}>
-                  <NextButton layout={layout} />
-                  <HistoryPanel />
-                  <FontAwesomeIcon
-                    icon={faSave}
-                    className={isSaving ? "d-inline" : "d-none"}
-                  />
-                  <SettingsPanel />
+                <div className="col-sm-auto builder-sidebar">
+                  <div style={{ width: "16rem" }}>
+                    <NextButton layout={layout} />
+                    <HistoryPanel />
+                    <FontAwesomeIcon
+                      icon={faSave}
+                      className={isSaving ? "d-inline" : "d-none"}
+                    />
+                    <SettingsPanel />
+                  </div>
                 </div>
               </div>
-            </div>
+            </RelationsCtx.Provider>
           </PreviewCtx.Provider>
         </Provider>
         <div className="d-none preview-scratchpad"></div>

package/src/components/Library.js

@@ -10,6 +10,7 @@ import React, {
   useState,
   Fragment,
   useRef,
+  useMemo,
 } from "react";
 import { useEditor, useNode } from "@craftjs/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -19,7 +20,7 @@ import faIcons from "./elements/faicons";
 import { craftToSaltcorn, layoutToNodes } from "./storage";
 import optionsCtx from "./context";
 import { WrapElem } from "./Toolbox";
-import { isEqual } from "lodash";
+import { isEqual, throttle } from "lodash";
 
 /**
  *
@@ -66,6 +67,25 @@ LibraryElem.craft = {
   displayName: "LibraryElem",
 };
 
+// https://www.developerway.com/posts/debouncing-in-react
+const useThrottle = (callback) => {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = callback;
+  }, [callback]);
+
+  const debouncedCallback = useMemo(() => {
+    const func = () => {
+      ref.current?.();
+    };
+
+    return throttle(func, 3000);
+  }, []);
+
+  return debouncedCallback;
+};
+
 export /**
  * @param {object} props
  * @param {object} props.nodekeys
@@ -89,11 +109,12 @@ const InitNewElement = ({ nodekeys, setIsSaving }) => {
     if (savedData.current === false) {
       //do not save on first call
       savedData.current = JSON.stringify(data.layout);
-      setIsSaving(false);
+
       return;
     }
     if (isEqual(savedData.current, JSON.stringify(data.layout))) return;
     savedData.current = JSON.stringify(data.layout);
+    setIsSaving(true);
 
     fetch(`/${urlroot}/savebuilder/${options.page_id || options.view_id}`, {
       method: "POST", // or 'PUT'
@@ -106,6 +127,9 @@ const InitNewElement = ({ nodekeys, setIsSaving }) => {
       setIsSaving(false);
     });
   };
+  const throttledSave = useThrottle(() => {
+    doSave(query);
+  });
   const onNodesChange = (arg, arg1) => {
     const nodes = arg.getSerializedNodes();
     const newNodeIds = [];
@@ -133,14 +157,8 @@ const InitNewElement = ({ nodekeys, setIsSaving }) => {
         actions.selectNode(id);
       }
     }
-    if (saveTimeout) clearTimeout(saveTimeout);
-    setIsSaving(true);
-    setSaveTimeout(
-      setTimeout(() => {
-        doSave(query);
-        setSaveTimeout(false);
-      }, 500)
-    );
+
+    throttledSave();
   };
   useEffect(() => {
     const nodes = query.getSerializedNodes();

package/src/components/elements/Aggregation.js

@@ -140,12 +140,12 @@ const AggregationSettings = () => {
                 { valAttr: true }
               )}
               {options.fields
-                .filter((f) => f.type.name === "Date")
+                .filter((f) => f.type === "Date" || f.type.name === "Date")
                 .map((f) => (
                   <option value={`Latest ${f.name}`}>Latest {f.name}</option>
                 ))}
               {options.fields
-                .filter((f) => f.type.name === "Date")
+                .filter((f) => f.type === "Date" || f.type.name === "Date")
                 .map((f) => (
                   <option value={`Earliest ${f.name}`}>
                     Earliest {f.name}

package/src/components/elements/Field.js

@@ -4,7 +4,7 @@
  * @subcategory components / elements
  */
 
-import React, { useContext, useEffect, Fragment } from "react";
+import React, { useContext, useEffect, useState, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
@@ -115,9 +115,26 @@ const FieldSettings = () => {
   const fvs = options.field_view_options[name];
   const handlesTextStyle = (options.handlesTextStyle || {})[name];
   const blockDisplay = (options.blockDisplay || {})[name];
-  const getCfgFields = (fv) =>
-    ((options.fieldViewConfigForms || {})[name] || {})[fv];
-  const cfgFields = getCfgFields(fieldview);
+
+  const [fetchedCfgFields, setFetchedCfgFields] = useState([]);
+  const cfgFields = fetchedCfgFields;
+  useEffect(() => {
+    fetch(`/field/fieldviewcfgform/${options.tableName}?accept=json`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "CSRF-Token": options.csrfToken,
+        "X-Requested-With": "XMLHttpRequest",
+      },
+      body: JSON.stringify({ field_name: name, fieldview, type: "Field" }),
+    })
+      .then(function (response) {
+        if (response.status < 399) return response.json();
+        else return [];
+      })
+      .then(setFetchedCfgFields);
+  }, [name, fieldview]);
+
   const refetchPreview = fetchFieldPreview({
     options,
     name,
@@ -189,7 +206,7 @@ const FieldSettings = () => {
                     const value = e.target.value;
 
                     setProp((prop) => (prop.fieldview = value));
-                    setInitialConfig(setProp, value, getCfgFields(value));
+                    //setInitialConfig(setProp, value, getCfgFields(value));
                     refetchPreview({ fieldview: value });
                   }}
                 >