@saltcorn/builder 0.7.3-beta.7 → 0.7.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.7.3-beta.7",
+  "version": "0.7.4-beta.1",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -35,8 +35,10 @@
     "react-contenteditable": "3.3.5",
     "react-dom": "16.13.1",
     "react-transition-group": "4.4.1",
+    "@tippyjs/react": "4.2.6",
     "webpack": "4.43.0",
-    "webpack-cli": "3.3.11"
+    "webpack-cli": "3.3.11",
+    "lodash": "4.17.11"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Builder.js

@@ -49,6 +49,7 @@ import {
   faUndo,
   faRedo,
   faTrashAlt,
+  faSave,
 } from "@fortawesome/free-solid-svg-icons";
 import {
   Accordion,
@@ -387,6 +388,7 @@ const Builder = ({ options, layout, mode }) => {
   const [previews, setPreviews] = useState({});
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const nodekeys = useRef([]);
+  const [isSaving, setIsSaving] = useState(false);
 
   return (
     <ErrorBoundary>
@@ -398,7 +400,10 @@ const Builder = ({ options, layout, mode }) => {
             <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} />
+                  <InitNewElement
+                    nodekeys={nodekeys}
+                    setIsSaving={setIsSaving}
+                  />
                   <Accordion>
                     <div className="card mt-1" accordiontitle="Components">
                       {{
@@ -458,9 +463,13 @@ const Builder = ({ options, layout, mode }) => {
               </div>
               <div className="col-sm-auto builder-sidebar">
                 <div style={{ width: "16rem" }}>
-                  <SaveButton />
                   <NextButton layout={layout} />
                   <HistoryPanel />
+                  <FontAwesomeIcon
+                    icon={faSave}
+                    title={isSaving ? "Saving..." : "All changes saved"}
+                    className={isSaving ? "text-muted" : ""}
+                  />
                   <ViewPageLink />
                   <SettingsPanel />
                 </div>

package/src/components/Library.js

@@ -4,7 +4,13 @@
  * @subcategory components
  */
 
-import React, { useEffect, useContext, useState, Fragment } from "react";
+import React, {
+  useEffect,
+  useContext,
+  useState,
+  Fragment,
+  useRef,
+} from "react";
 import { useEditor, useNode } from "@craftjs/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
@@ -13,10 +19,11 @@ import faIcons from "./elements/faicons";
 import { craftToSaltcorn, layoutToNodes } from "./storage";
 import optionsCtx from "./context";
 import { WrapElem } from "./Toolbox";
+import { isEqual } from "lodash";
 
 /**
- * 
- * @param {object[]} xs 
+ *
+ * @param {object[]} xs
  * @returns {object[]}
  */
 const twoByTwos = (xs) => {
@@ -67,10 +74,38 @@ export /**
  * @subcategory components
  * @namespace
  */
-const InitNewElement = ({ nodekeys }) => {
+const InitNewElement = ({ nodekeys, setIsSaving }) => {
+  const [saveTimeout, setSaveTimeout] = useState(false);
+  const savedData = useRef(false);
   const { actions, query, connectors } = useEditor((state, query) => {
     return {};
   });
+  const options = useContext(optionsCtx);
+  const doSave = (query) => {
+    if (!query.serialize) return;
+
+    const data = craftToSaltcorn(JSON.parse(query.serialize()));
+    const urlroot = options.page_id ? "pageedit" : "viewedit";
+    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);
+
+    fetch(`/${urlroot}/savebuilder/${options.page_id || options.view_id}`, {
+      method: "POST", // or 'PUT'
+      headers: {
+        "Content-Type": "application/json",
+        "CSRF-Token": options.csrfToken,
+      },
+      body: JSON.stringify(data),
+    }).then(() => {
+      setIsSaving(false);
+    });
+  };
   const onNodesChange = (arg, arg1) => {
     const nodes = arg.getSerializedNodes();
     const newNodeIds = [];
@@ -98,6 +133,14 @@ const InitNewElement = ({ nodekeys }) => {
         actions.selectNode(id);
       }
     }
+    if (saveTimeout) clearTimeout(saveTimeout);
+    setIsSaving(true);
+    setSaveTimeout(
+      setTimeout(() => {
+        doSave(query);
+        setSaveTimeout(false);
+      }, 500)
+    );
   };
   useEffect(() => {
     const nodes = query.getSerializedNodes();
@@ -180,7 +223,7 @@ const Library = () => {
             type="text"
             className="form-control"
             value={newName}
-            onChange={(e) => setNewName(e.target.value)}
+            onChange={(e) => e?.target && setNewName(e.target.value)}
           />
           <br />
           <label>Icon</label>

package/src/components/elements/Action.js

@@ -16,6 +16,7 @@ import {
   setInitialConfig,
   ButtonOrLinkSettingsRows,
   DynamicFontAwesomeIcon,
+  setAPropGen,
 } from "./utils";
 
 export /**
@@ -110,6 +111,8 @@ const ActionSettings = () => {
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
   const cfgFields = getCfgFields(name);
+  const setAProp = setAPropGen(setProp);
+
   return (
     <div>
       <table className="w-100">
@@ -123,12 +126,10 @@ const ActionSettings = () => {
                 value={name}
                 className="form-control form-select"
                 onChange={(e) => {
-                  setProp((prop) => (prop.name = e.target.value));
-                  setInitialConfig(
-                    setProp,
-                    e.target.value,
-                    getCfgFields(e.target.value)
-                  );
+                  if (!e.target) return;
+                  const value = e.target.value;
+                  setProp((prop) => (prop.name = value));
+                  setInitialConfig(setProp, value, getCfgFields(value));
                 }}
               >
                 {options.actions.map((f, ix) => (
@@ -150,9 +151,7 @@ const ActionSettings = () => {
                   type="text"
                   className="form-control"
                   value={action_label}
-                  onChange={(e) =>
-                    setProp((prop) => (prop.action_label = e.target.value))
-                  }
+                  onChange={setAProp("action_label")}
                 />
               </OrFormula>
             </td>
@@ -172,9 +171,7 @@ const ActionSettings = () => {
             name="block"
             type="checkbox"
             checked={confirm}
-            onChange={(e) =>
-              setProp((prop) => (prop.confirm = e.target.checked))
-            }
+            onChange={setAProp("confirm", { checked: true })}
           />
           <label className="form-check-label">User confirmation?</label>
         </div>

package/src/components/elements/Aggregation.js

@@ -7,7 +7,7 @@
 import React, { useContext } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
-import { blockProps, BlockSetting, TextStyleRow } from "./utils";
+import { blockProps, BlockSetting, TextStyleRow, setAPropGen } from "./utils";
 
 export /**
  * @param {object} props
@@ -61,6 +61,8 @@ const AggregationSettings = () => {
     textStyle: node.data.props.textStyle,
   }));
   const options = useContext(optionsCtx);
+  const setAProp = setAPropGen(setProp);
+
   return (
     <table>
       <tbody>
@@ -72,13 +74,15 @@ const AggregationSettings = () => {
             <select
               className="form-control form-select"
               value={agg_relation}
-              onChange={(e) =>
+              onChange={(e) => {
+                if (!e.target) return;
+                const value = e.target.value;
                 setProp((prop) => {
-                  prop.agg_relation = e.target.value;
-                  const fs = options.agg_field_opts[e.target.value];
+                  prop.agg_relation = value;
+                  const fs = options.agg_field_opts[value];
                   if (fs && fs.length > 0) prop.agg_field = fs[0];
-                })
-              }
+                });
+              }}
             >
               {options.child_field_list.map((f, ix) => (
                 <option key={ix} value={f}>
@@ -96,9 +100,7 @@ const AggregationSettings = () => {
             <select
               className="form-control form-select"
               value={agg_field}
-              onChange={(e) =>
-                setProp((prop) => (prop.agg_field = e.target.value))
-              }
+              onChange={setAProp("agg_field")}
             >
               {(options.agg_field_opts[agg_relation] || []).map((f, ix) => (
                 <option key={ix} value={f}>
@@ -116,7 +118,7 @@ const AggregationSettings = () => {
             <select
               value={stat}
               className="form-control form-select"
-              onChange={(e) => setProp((prop) => (prop.stat = e.target.value))}
+              onChange={setAProp("stat")}
             >
               <option value={"Count"}>Count</option>
               <option value={"Avg"}>Avg</option>
@@ -141,9 +143,7 @@ const AggregationSettings = () => {
               type="text"
               className="form-control"
               value={aggwhere}
-              onChange={(e) =>
-                setProp((prop) => (prop.aggwhere = e.target.value))
-              }
+              onChange={setAProp("aggwhere")}
             />
           </td>
         </tr>

package/src/components/elements/Columns.js

@@ -118,12 +118,14 @@ const ColumnsSettings = () => {
                 step="1"
                 min="1"
                 max="4"
-                onChange={(e) =>
+                onChange={(e) => {
+                  if (!e.target) return;
+                  const value = e.target.value;
                   setProp((prop) => {
-                    prop.ncols = e.target.value;
-                    prop.widths = resetWidths(e.target.value);
-                  })
-                }
+                    prop.ncols = value;
+                    prop.widths = resetWidths(value);
+                  });
+                }}
               />
             </td>
           </tr>
@@ -148,9 +150,11 @@ const ColumnsSettings = () => {
                       step="1"
                       min="1"
                       max={12 - (sum(widths) - widths[ix]) - 1}
-                      onChange={(e) =>
-                        setProp((prop) => (prop.widths[ix] = +e.target.value))
-                      }
+                      onChange={(e) => {
+                        if (!e.target) return;
+                        const value = e.target.value;
+                        setProp((prop) => (prop.widths[ix] = +value));
+                      }}
                     />
                   ) : (
                     `${12 - sum(widths)}`
@@ -161,9 +165,11 @@ const ColumnsSettings = () => {
                   <select
                     className="form-control form-select"
                     value={breakpoints[ix]}
-                    onChange={(e) =>
-                      setProp((prop) => (prop.breakpoints[ix] = e.target.value))
-                    }
+                    onChange={(e) => {
+                      if (!e.target) return;
+                      const value = e.target.value;
+                      setProp((prop) => (prop.breakpoints[ix] = value));
+                    }}
                   >
                     <option disabled>Breakpoint</option>
                     <option value="">None</option>

package/src/components/elements/Container.js

@@ -18,6 +18,8 @@ import {
   SettingsRow,
   reactifyStyles,
   bstyleopt,
+  setAPropGen,
+  FormulaTooltip,
 } from "./utils";
 import {
   BorderOuter,
@@ -269,12 +271,7 @@ const ContainerSettings = () => {
    * @param {string} key
    * @returns {function}
    */
-  const setAProp = (key) => (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
-      setProp((prop) => (prop[key] = target_value));
-    }
-  };
+  const setAProp = setAPropGen(setProp);
   return (
     <Accordion>
       <div accordiontitle="Box" className="w-100">
@@ -350,9 +347,7 @@ const ContainerSettings = () => {
                   name="block"
                   type="checkbox"
                   checked={fullPageWidth}
-                  onChange={(e) =>
-                    setProp((prop) => (prop.fullPageWidth = e.target.checked))
-                  }
+                  onChange={setAProp("fullPageWidth", { checked: true })}
                 />
                 <label className="form-check-label">
                   Expand to full page width
@@ -536,8 +531,10 @@ const ContainerSettings = () => {
                       onChange={setAProp("imgResponsiveWidths")}
                     />
                     <small>
-                      <i>List of widths to serve resized images,
-                         e.g. 300, 400, 600</i>
+                      <i>
+                        List of widths to serve resized images, e.g. 300, 400,
+                        600
+                      </i>
                     </small>
                   </td>
                 </tr>
@@ -611,9 +608,7 @@ const ContainerSettings = () => {
                   name="setTextColor"
                   type="checkbox"
                   checked={setTextColor}
-                  onChange={(e) =>
-                    setProp((prop) => (prop.setTextColor = e.target.checked))
-                  }
+                  onChange={setAProp("setTextColor", { checked: true })}
                 />
               </label>
             </td>
@@ -763,7 +758,7 @@ const ContainerSettings = () => {
                   onChange={setAProp("showIfFormula")}
                 />
                 <div style={{ marginTop: "-5px" }}>
-                  <small className="text-muted font-monospace">FORMULA</small>
+                  <small className="text-muted font-monospace">FORMULA <FormulaTooltip /></small>
                 </div>
               </td>
             </tr>
@@ -782,15 +777,17 @@ const ContainerSettings = () => {
                         ? true
                         : showForRole[id]
                     }
-                    onChange={(e) =>
+                    onChange={(e) => {
+                      if (!e?.target) return;
+                      const checked = e.target.checked;
                       setProp((prop) => {
                         if (!prop.showForRole || prop.showForRole.length === 0)
                           options.roles.forEach(
                             (r) => (prop.showForRole[r.id] = true)
                           );
-                        prop.showForRole[id] = e.target.checked;
-                      })
-                    }
+                        prop.showForRole[id] = checked;
+                      });
+                    }}
                   />
                   <label className="form-check-label">{role}</label>
                 </div>
@@ -806,11 +803,7 @@ const ContainerSettings = () => {
                     name="block"
                     type="checkbox"
                     checked={show_for_owner}
-                    onChange={(e) =>
-                      setProp(
-                        (prop) => (prop.show_for_owner = e.target.checked)
-                      )
-                    }
+                    onChange={setAProp("show_for_owner", { checked: true })}
                   />
                   <label className="form-check-label">Owner</label>
                 </div>

package/src/components/elements/DropDownFilter.js

@@ -7,7 +7,7 @@
 import React, { useContext, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
-import { blockProps, BlockSetting, TextStyleRow } from "./utils";
+import { blockProps, BlockSetting, TextStyleRow, setAPropGen } from "./utils";
 
 export /**
  * @param {object} props
@@ -59,6 +59,8 @@ const DropDownFilterSettings = () => {
     where: node.data.props.where,
   }));
   const options = useContext(optionsCtx);
+  const setAProp = setAPropGen(setProp);
+
   return (
     <table className="w-100">
       <tbody>
@@ -70,13 +72,18 @@ const DropDownFilterSettings = () => {
             <select
               value={name}
               className="form-control form-select"
-              onChange={(e) => setProp((prop) => (prop.name = e.target.value))}
+              onChange={setAProp("name")}
             >
               {options.fields.map((f, ix) => (
                 <option key={ix} value={f.name}>
                   {f.label}
                 </option>
               ))}
+              {options.parent_field_list.map((f, ix) => (
+                <option key={ix} value={f}>
+                  {f}
+                </option>
+              ))}
             </select>
           </td>
         </tr>
@@ -88,9 +95,7 @@ const DropDownFilterSettings = () => {
             <input
               value={neutral_label}
               className="form-control"
-              onChange={(e) =>
-                setProp((prop) => (prop.neutral_label = e.target.value))
-              }
+              onChange={setAProp("neutral_label")}
             />
           </td>
         </tr>
@@ -102,7 +107,7 @@ const DropDownFilterSettings = () => {
             <input
               value={where}
               className="form-control"
-              onChange={(e) => setProp((prop) => (prop.where = e.target.value))}
+              onChange={setAProp("where")}
             />
           </td>
         </tr>
@@ -121,9 +126,7 @@ const DropDownFilterSettings = () => {
                 name="block"
                 type="checkbox"
                 checked={full_width}
-                onChange={(e) =>
-                  setProp((prop) => (prop.full_width = e.target.checked))
-                }
+                onChange={setAProp("full_width", { checked: true })}
               />
               <label className="form-check-label">Full width</label>
             </div>
@@ -134,8 +137,8 @@ const DropDownFilterSettings = () => {
   );
 };
 
-/** 
- * @type {object} 
+/**
+ * @type {object}
  */
 DropDownFilter.craft = {
   displayName: "DropDownFilter",

package/src/components/elements/Field.js

@@ -140,15 +140,17 @@ const FieldSettings = () => {
                 value={name}
                 className="form-control form-select"
                 onChange={(e) => {
-                  setProp((prop) => (prop.name = e.target.value));
-                  const newfvs = options.field_view_options[e.target.value];
+                  if (!e.target) return;
+                  const value = e.target.value;
+                  setProp((prop) => (prop.name = value));
+                  const newfvs = options.field_view_options[value];
                   if (newfvs && newfvs.length > 0) {
                     setProp((prop) => (prop.fieldview = newfvs[0]));
                     refetchPreview({
-                      name: e.target.value,
+                      name: value,
                       fieldview: newfvs[0],
                     });
-                  } else refetchPreview({ name: e.target.value });
+                  } else refetchPreview({ name: value });
                 }}
               >
                 {options.fields.map((f, ix) => (
@@ -170,13 +172,12 @@ const FieldSettings = () => {
                   value={fieldview}
                   className="form-control form-select"
                   onChange={(e) => {
-                    setProp((prop) => (prop.fieldview = e.target.value));
-                    setInitialConfig(
-                      setProp,
-                      e.target.value,
-                      getCfgFields(e.target.value)
-                    );
-                    refetchPreview({ fieldview: e.target.value });
+                    if (!e.target) return;
+                    const value = e.target.value;
+
+                    setProp((prop) => (prop.fieldview = value));
+                    setInitialConfig(setProp, value, getCfgFields(value));
+                    refetchPreview({ fieldview: value });
                   }}
                 >
                   {(fvs || []).map((fvnm, ix) => (

package/src/components/elements/Image.js

@@ -16,6 +16,7 @@ import {
   reactifyStyles,
   Accordion,
   OrFormula,
+  setAPropGen,
 } from "./utils";
 
 export /**
@@ -120,12 +121,7 @@ const ImageSettings = () => {
         });
     }
   };
-  const setAProp = (key) => (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
-      setProp((prop) => (prop[key] = target_value));
-    }
-  };
+  const setAProp = setAPropGen(setProp);
   return (
     <Accordion>
       <table accordiontitle="Select image">
@@ -256,7 +252,7 @@ const ImageSettings = () => {
           )}
           {srctype !== "Upload" && (
             <tr>
-              <td>
+              <td style={{ verticalAlign: "top" }}>
                 <label>Responsive widths</label>
               </td>
 

package/src/components/elements/JoinField.js

@@ -122,15 +122,17 @@ const JoinFieldSettings = () => {
                 value={name}
                 className="form-control form-select"
                 onChange={(e) => {
-                  setProp((prop) => (prop.name = e.target.value));
-                  const newfvs = options.field_view_options[e.target.value];
+                  if (!e.target) return;
+                  const value = e.target.value;
+                  setProp((prop) => (prop.name = value));
+                  const newfvs = options.field_view_options[value];
                   if (newfvs && newfvs.length > 0) {
                     setProp((prop) => (prop.fieldview = newfvs[0]));
                     refetchPreview({
-                      name: e.target.value,
+                      name: value,
                       fieldview: newfvs[0],
                     });
-                  } else refetchPreview({ name: e.target.value });
+                  } else refetchPreview({ name: value });
                 }}
               >
                 {options.parent_field_list.map((f, ix) => (
@@ -152,8 +154,10 @@ const JoinFieldSettings = () => {
                   value={fieldview}
                   className="form-control form-select"
                   onChange={(e) => {
-                    setProp((prop) => (prop.fieldview = e.target.value));
-                    refetchPreview({ fieldview: e.target.value });
+                    if (!e.target) return;
+                    const value = e.target.value;
+                    setProp((prop) => (prop.fieldview = value));
+                    refetchPreview({ fieldview: value });
                   }}
                 >
                   {(fvs || []).map((fvnm, ix) => (