@saltcorn/builder 0.9.4-beta.8 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.4-beta.8",
+  "version": "0.9.4",
   "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",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
@@ -38,6 +39,7 @@
     "react-bootstrap-icons": "1.5.0",
     "react-contenteditable": "3.3.5",
     "react-dom": "16.13.1",
+    "react-select": "4.3.1",
     "react-test-renderer": "16.13.1",
     "react-transition-group": "4.4.1",
     "@tippyjs/react": "4.2.6",

package/src/components/Builder.js

@@ -18,7 +18,7 @@ import { JoinField } from "./elements/JoinField";
 import { Aggregation } from "./elements/Aggregation";
 import { LineBreak } from "./elements/LineBreak";
 import { ViewLink } from "./elements/ViewLink";
-import { Columns } from "./elements/Columns";
+import { Columns, ntimes } from "./elements/Columns";
 import { SearchBar } from "./elements/SearchBar";
 import { HTMLCode } from "./elements/HTMLCode";
 import { Action } from "./elements/Action";
@@ -37,6 +37,7 @@ import {
   ToolboxEdit,
   ToolboxPage,
   ToolboxFilter,
+  ToolboxList,
 } from "./Toolbox";
 import { craftToSaltcorn, layoutToNodes } from "./storage";
 import { Card } from "./elements/Card";
@@ -52,6 +53,8 @@ import {
   faRedo,
   faTrashAlt,
   faSave,
+  faExclamationTriangle,
+  faPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import {
   faCaretSquareLeft,
@@ -64,6 +67,8 @@ import {
 } from "./elements/utils";
 import { InitNewElement, Library } from "./Library";
 import { RenderNode } from "./RenderNode";
+import { ListColumn } from "./elements/ListColumn";
+import { ListColumns } from "./elements/ListColumns";
 const { Provider } = optionsCtx;
 
 /**
@@ -252,58 +257,20 @@ const SettingsPanel = () => {
   );
 };
 
-/**
- * @returns {button}
- * @category saltcorn-builder
- * @subcategory components
- * @namespace
- */
-const SaveButton = () => {
+const AddColumnButton = () => {
   const { query, actions } = useEditor(() => {});
   const options = useContext(optionsCtx);
-
-  /**
-   * @returns {void}
-   */
-  const onClick = () => {
-    const data = craftToSaltcorn(JSON.parse(query.serialize()));
-    const urlroot = options.page_id ? "pageedit" : "viewedit";
-    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),
-    });
+  const addColumn = () => {
+    actions.addNodeTree(
+      query.parseReactElement(<ListColumn />).toNodeTree(),
+      "ROOT"
+    );
   };
-  return options.page_id || options.view_id ? (
-    <button
-      className="btn btn-sm btn-outline-secondary me-2 builder-save-ajax"
-      onClick={onClick}
-    >
-      Save
+  return (
+    <button className="btn btn-primary mt-2" onClick={addColumn}>
+      <FontAwesomeIcon icon={faPlus} className="me-2" />
+      Add column
     </button>
-  ) : (
-    ""
-  );
-};
-
-/**
- * @returns {a|""}
- * @category saltcorn-builder
- * @subcategory components
- * @namespace
- */
-const ViewPageLink = () => {
-  const { query, actions } = useEditor(() => {});
-  const options = useContext(optionsCtx);
-  return options.page_id ? (
-    <a target="_blank" className="d-block" href={`/page/${options.page_name}`}>
-      View page in new tab &raquo;
-    </a>
-  ) : (
-    ""
   );
 };
 
@@ -356,14 +323,18 @@ const NextButton = ({ layout }) => {
   const options = useContext(optionsCtx);
 
   useEffect(() => {
-    layoutToNodes(layout, query, actions);
+    layoutToNodes(layout, query, actions, "ROOT", options);
   }, []);
 
   /**
    * @returns {void}
    */
   const onClick = () => {
-    const { columns, layout } = craftToSaltcorn(JSON.parse(query.serialize()));
+    const { columns, layout } = craftToSaltcorn(
+      JSON.parse(query.serialize()),
+      "ROOT",
+      options
+    );
     document
       .querySelector("form#scbuildform input[name=columns]")
       .setAttribute("value", encodeURIComponent(JSON.stringify(columns)));
@@ -394,7 +365,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,12 +393,14 @@ 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">
                         {{
                           show: <ToolboxShow expanded={isLeftEnlarged} />,
+                          list: <ToolboxList expanded={isLeftEnlarged} />,
                           edit: <ToolboxEdit expanded={isLeftEnlarged} />,
                           page: <ToolboxPage expanded={isLeftEnlarged} />,
                           filter: <ToolboxFilter expanded={isLeftEnlarged} />,
@@ -440,7 +413,7 @@ const Builder = ({ options, layout, mode }) => {
                   </div>
                   <div
                     className="card toolbox-card pe-0"
-                    style={isLeftEnlarged ? { width: "12.35rem" } : {}}
+                    style={isLeftEnlarged ? { width: "13.4rem" } : {}}
                   >
                     <div className="card-header p-2 d-flex justify-content-between">
                       <div>Layers</div>
@@ -464,7 +437,9 @@ const Builder = ({ options, layout, mode }) => {
                 </div>
                 <div
                   id="builder-main-canvas"
-                  className={`col builder-mode-${options.mode}`}
+                  className={`col builder-mode-${options.mode} ${
+                    options.mode !== "list" ? "emptymsg" : ""
+                  }`}
                 >
                   <div>
                     <Frame
@@ -491,10 +466,17 @@ const Builder = ({ options, layout, mode }) => {
                         Tabs,
                         Table,
                         ToggleFilter,
+                        ListColumn,
+                        ListColumns,
                       }}
                     >
-                      <Element canvas is={Column}></Element>
+                      {options.mode === "list" ? (
+                        <Element canvas is={ListColumns}></Element>
+                      ) : (
+                        <Element canvas is={Column}></Element>
+                      )}
                     </Frame>
+                    {options.mode === "list" ? <AddColumnButton /> : null}
                   </div>
                 </div>
                 <div className="col-sm-auto builder-sidebar">
@@ -503,7 +485,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 +498,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) => {
@@ -93,7 +93,11 @@ const InitNewElement = ({ nodekeys, setIsSaving }) => {
   const doSave = (query) => {
     if (!query.serialize) return;
 
-    const data = craftToSaltcorn(JSON.parse(query.serialize()));
+    const data = craftToSaltcorn(
+      JSON.parse(query.serialize()),
+      "ROOT",
+      options
+    );
     const urlroot = options.page_id ? "pageedit" : "viewedit";
     if (savedData.current === false) {
       //do not save on first call
@@ -103,7 +107,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 +116,32 @@ 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.message === "Failed to fetch"
+            ? "Network connection lost"
+            : 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);
@@ -137,7 +164,8 @@ const InitNewElement = ({ nodekeys, setIsSaving }) => {
           layout.layout ? layout.layout : layout,
           query,
           actions,
-          node.parent
+          node.parent,
+          options
         );
         setTimeout(() => {
           actions.delete(id);
@@ -189,7 +217,11 @@ const Library = ({ expanded }) => {
    * @returns {void}
    */
   const addSelected = () => {
-    const layout = craftToSaltcorn(JSON.parse(query.serialize()), selected);
+    const layout = craftToSaltcorn(
+      JSON.parse(query.serialize()),
+      selected,
+      options
+    );
     const data = { layout, icon, name: newName };
     fetch(`/library/savefrombuilder`, {
       method: "POST", // or 'PUT'

package/src/components/RenderNode.js

@@ -80,6 +80,11 @@ const RenderNode = ({ render }) => {
     currentDOM.style.left = left;
   }, [dom, getPos]);
 
+  useEffect(() => {
+    if (name === "Column" && parent && parent !== "ROOT")
+      actions.selectNode(parent);
+  }, [isActive]);
+
   useEffect(() => {
     document
       .getElementById("builder-main-canvas")

package/src/components/Toolbox.js

@@ -490,7 +490,7 @@ const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => (
   >
     <Aggregation
       agg_relation={child_field_list[0]}
-      agg_field={headOr(agg_field_opts[child_field_list[0]], "")}
+      agg_field={headOr(agg_field_opts[child_field_list[0]], "")?.name}
       stat={"Count"}
       textStyle={""}
       aggwhere={""}
@@ -570,6 +570,54 @@ const ToolboxShow = ({ expanded }) => {
     expanded
   );
 };
+export /**
+ * @returns {Fragment}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
+const ToolboxList = ({ expanded }) => {
+  const { connectors, query } = useEditor();
+  const options = useContext(optionsCtx);
+  const {
+    fields,
+    field_view_options,
+    child_field_list,
+    agg_field_opts,
+    views,
+    images,
+  } = options;
+  return chunkToolBox(
+    [
+      <TextElem connectors={connectors} />,
+      <FieldElem
+        connectors={connectors}
+        fields={fields}
+        field_view_options={field_view_options}
+      />,
+      <JoinFieldElem connectors={connectors} options={options} />,
+      <ViewLinkElem connectors={connectors} options={options} />,
+      <ActionElem connectors={connectors} options={options} />,
+      <LinkElem connectors={connectors} />,
+      <AggregationElem
+        connectors={connectors}
+        child_field_list={child_field_list}
+        agg_field_opts={agg_field_opts}
+      />,
+      // <ViewElem connectors={connectors} views={views} />,
+      // <ContainerElem connectors={connectors} />,
+      // <CardElem connectors={connectors} />,
+      //  <TabsElem connectors={connectors} />,
+      <HTMLElem connectors={connectors} />,
+      <DropMenuElem connectors={connectors} />,
+      //  <TableElem connectors={connectors} />,
+      ...(options.allowMultipleElementsPerColumn
+        ? [<LineBreakElem connectors={connectors} />]
+        : []),
+    ],
+    expanded
+  );
+};
 
 export /**
  * @returns {Fragment}
@@ -580,7 +628,13 @@ export /**
 const ToolboxFilter = ({ expanded }) => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
-  const { fields, views, field_view_options } = options;
+  const {
+    fields,
+    views,
+    field_view_options,
+    child_field_list,
+    agg_field_opts,
+  } = options;
   return chunkToolBox(
     [
       <TextElem connectors={connectors} />,
@@ -595,6 +649,11 @@ const ToolboxFilter = ({ expanded }) => {
       <ToggleFilterElem connectors={connectors} fields={fields} />,
       <SearchElem connectors={connectors} />,
       <ActionElem connectors={connectors} options={options} />,
+      <AggregationElem
+        connectors={connectors}
+        child_field_list={child_field_list}
+        agg_field_opts={agg_field_opts}
+      />,
       <ContainerElem connectors={connectors} />,
       <CardElem connectors={connectors} />,
       <TabsElem connectors={connectors} />,

package/src/components/elements/Action.js

@@ -110,6 +110,7 @@ const ActionSettings = () => {
     step_only_ifs: node.data.props.step_only_ifs,
     step_action_names: node.data.props.step_action_names,
     setting_action_n: node.data.props.setting_action_n,
+    spinner: node.data.props.spinner,
   }));
   const {
     actions: { setProp },
@@ -127,6 +128,7 @@ const ActionSettings = () => {
     setting_action_n,
     step_only_ifs,
     step_action_names,
+    spinner,
   } = node;
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
@@ -278,6 +280,16 @@ const ActionSettings = () => {
         />
         <label className="form-check-label">User confirmation?</label>
       </div>
+      <div className="form-check">
+        <input
+          className="form-check-input"
+          name="block"
+          type="checkbox"
+          checked={spinner}
+          onChange={setAProp("spinner", { checked: true })}
+        />
+        <label className="form-check-label">Spinner on click</label>
+      </div>
       {action_style !== "on_page_load" ? (
         <BlockSetting block={block} setProp={setProp} />
       ) : null}