@saltcorn/builder 0.9.4-beta.14 → 0.9.4-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.4-beta.14",
+  "version": "0.9.4-beta.16",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,7 +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.14",
+    "@saltcorn/common-code": "0.9.4-beta.16",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
@@ -39,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";
@@ -53,6 +54,7 @@ import {
   faTrashAlt,
   faSave,
   faExclamationTriangle,
+  faPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import {
   faCaretSquareLeft,
@@ -65,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;
 
 /**
@@ -253,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>
-  ) : (
-    ""
   );
 };
 
@@ -357,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)));
@@ -430,6 +400,7 @@ const Builder = ({ options, layout, mode }) => {
                       <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} />,
@@ -442,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>
@@ -466,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
@@ -493,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">

package/src/components/Library.js

@@ -93,7 +93,11 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
   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
@@ -160,7 +164,8 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
           layout.layout ? layout.layout : layout,
           query,
           actions,
-          node.parent
+          node.parent,
+          options
         );
         setTimeout(() => {
           actions.delete(id);
@@ -212,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

@@ -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}

package/src/components/elements/Aggregation.js

@@ -141,13 +141,15 @@ const AggregationSettings = () => {
               )}
               {options.fields
                 .filter((f) => f.type === "Date" || f.type.name === "Date")
-                .map((f) => (
-                  <option value={`Latest ${f.name}`}>Latest {f.name}</option>
+                .map((f, ix) => (
+                  <option key={ix} value={`Latest ${f.name}`}>
+                    Latest {f.name}
+                  </option>
                 ))}
               {options.fields
                 .filter((f) => f.type === "Date" || f.type.name === "Date")
-                .map((f) => (
-                  <option value={`Earliest ${f.name}`}>
+                .map((f, ix) => (
+                  <option key={ix} value={`Earliest ${f.name}`}>
                     Earliest {f.name}
                   </option>
                 ))}

package/src/components/elements/Column.js

@@ -25,12 +25,20 @@ const Column = ({ children, align }) => {
     id,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
+  const options = useContext(optionsCtx);
+
   return (
     <div
-      className={selected ? "selected-node" : ""}
+      className={`${selected ? "selected-node" : ""} ${
+        options.mode === "list" ? "flex-50 list-col-contents" : ""
+      }`}
       ref={(dom) => connect(drag(dom))}
     >
-      <div className={`canvas ${id === "ROOT" ? "root-canvas" : ""}`}>
+      <div
+        className={`canvas ${id === "ROOT" ? "root-canvas" : ""} ${
+          options.mode === "list" ? "list-empty-msg list-col-canvas" : ""
+        }`}
+      >
         {children}
       </div>
     </div>
@@ -56,6 +64,12 @@ Column.craft = {
   props: {},
   rules: {
     canDrag: () => true,
+    canMoveIn: (incomming, current) => {
+      if (current?.data?.props?.singleOccupancy && current.data.nodes?.length)
+        return false;
+
+      return true;
+    },
   },
   related: {
     settings: ColumnSettings,

package/src/components/elements/HTMLCode.js

@@ -46,7 +46,7 @@ const fields = (mode) => {
       type: "textarea",
       segment_name: "contents",
       sublabel:
-        mode === "show"
+        mode === "show" || mode === "list"
           ? "Access fields with <code>{{ var_name }}</code>"
           : undefined,
     },

package/src/components/elements/ListColumn.js

@@ -0,0 +1,177 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Column
+ * @subcategory components / elements
+ */
+
+import React, {
+  useContext,
+  Fragment,
+  useRef,
+  useEffect,
+  useState,
+} from "react";
+
+import { Element, useNode, useEditor } from "@craftjs/core";
+import { setAPropGen, SettingsFromFields } from "./utils";
+import { Column } from "./Column";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowUp, faArrowDown } from "@fortawesome/free-solid-svg-icons";
+import optionsCtx from "../context";
+
+export /**
+ *
+ * @param {object} props
+ * @param {string} props.children
+ * @param {*} props.align
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const ListColumn = ({
+  alignment,
+  colIndex,
+  contents,
+  header_label,
+  showif,
+  col_width,
+  col_width_units,
+}) => {
+  const {
+    selected,
+    id,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  const { actions, query, isActve } = useEditor((state) => ({}));
+  const options = useContext(optionsCtx);
+
+  const {
+    data: { parent },
+  } = query.node(id).get();
+  const siblings = query.node(parent).childNodes();
+  const nChildren = siblings.length;
+  const childIx = siblings.findIndex((sib) => sib === id);
+
+  const moveDown = () => {
+    const {
+      data: { parent },
+    } = query.node(id).get();
+    actions.move(id, parent, childIx + 2);
+  };
+  const moveUp = () => {
+    const {
+      data: { parent },
+    } = query.node(id).get();
+    actions.move(id, parent, childIx - 1);
+  };
+  return (
+    <div
+      className={`${
+        selected ? "selected-node" : ""
+      } d-flex w-100 list-column-outer`}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <div className={`list-column flex-50 p-2`}>
+        <div className="d-flex justify-content-between h-100">
+          <div className="">
+            Column {childIx}
+            {header_label ? `: ${header_label}` : ""}
+            <br />
+            {showif ? (
+              <span className="badge bg-secondary me-2">showif</span>
+            ) : (
+              ""
+            )}
+            {alignment && alignment !== "Default" ? (
+              <span className="badge bg-secondary me-2">Align {alignment}</span>
+            ) : (
+              ""
+            )}
+            {col_width ? (
+              <span className="badge bg-secondary me-2">
+                {col_width}
+                {col_width_units}
+              </span>
+            ) : (
+              ""
+            )}
+          </div>
+          <div className="d-flex flex-column h-100 justify-content-between">
+            {childIx !== null && childIx > 0 ? (
+              <FontAwesomeIcon icon={faArrowUp} onClick={moveUp} />
+            ) : (
+              <span></span>
+            )}
+            {childIx !== null && childIx < nChildren - 1 ? (
+              <FontAwesomeIcon icon={faArrowDown} onClick={moveDown} />
+            ) : (
+              <span></span>
+            )}
+          </div>
+        </div>
+      </div>
+      <Element
+        canvas
+        id={`listcol`}
+        is={Column}
+        singleOccupancy={!options.allowMultipleElementsPerColumn}
+      >
+        {contents}
+      </Element>
+    </div>
+  );
+};
+
+const fields = [
+  {
+    name: "header_label",
+    label: "Header label",
+    type: "String",
+  },
+  {
+    name: "showif",
+    label: "Show if true",
+    sublabel: "Formula. Leave blank to always show",
+    class: "validate-expression",
+    type: "String",
+    required: false,
+  },
+  {
+    name: "col_width",
+    label: "Column width",
+    type: "Integer",
+    attributes: { asideNext: true },
+  },
+  {
+    name: "col_width_units",
+    label: "Units",
+    type: "String",
+    required: true,
+    attributes: {
+      inline: true,
+      options: ["px", "%", "vw", "em", "rem"],
+    },
+  },
+  {
+    name: "alignment",
+    label: "Alignment",
+    input_type: "select",
+    options: ["Default", "Left", "Center", "Right"],
+  },
+];
+ListColumn.craft = {
+  displayName: "ListColumn",
+  props: {},
+  rules: {
+    canDrag: () => true,
+  },
+  related: {
+    settings: SettingsFromFields(fields, {
+      additionalFieldsOptionKey: "additionalColumnFields",
+    }),
+    segment_type: "list_column",
+    hasContents: true,
+    colFields: fields,
+  },
+};

package/src/components/elements/ListColumns.js

@@ -0,0 +1,62 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/ListColumns
+ * @subcategory components / elements
+ */
+
+import React, { useContext, Fragment } from "react";
+
+import { Element, useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+
+export /**
+ *
+ * @param {object} props
+ * @param {string} props.children
+ * @param {*} props.align
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const ListColumns = ({ children, align }) => {
+  const {
+    selected,
+    id,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <div className={selected ? "selected-node" : ""}>
+      <div className={` ${id === "ROOT" ? "root-canvas" : ""}`}>{children}</div>
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const ListColumnsSettings = () => {
+  useNode((node) => ({}));
+  return <div></div>;
+};
+
+/**
+ * @type {object}
+ */
+ListColumns.craft = {
+  displayName: "ListColumns",
+  props: {},
+  rules: {
+    canDrag: () => false,
+    canDrop: () => false,
+    canMoveIn: (incoming) => {
+      return incoming?.data?.displayName === "ListColumn";
+    },
+  },
+  related: {
+    settings: ListColumnsSettings,
+  },
+};

package/src/components/elements/Text.js

@@ -179,9 +179,11 @@ const TextSettings = () => {
   } = node;
   const { mode, fields } = useContext(optionsCtx);
   const setAProp = setAPropGen(setProp);
+  const allowFormula = mode === "show" || mode === "list";
+
   return (
     <div>
-      {mode === "show" && (
+      {allowFormula && (
         <div className="form-check">
           <input
             type="checkbox"
@@ -197,7 +199,7 @@ const TextSettings = () => {
         </div>
       )}
       <label>Text to display</label>
-      {mode === "show" && isFormula.text ? (
+      {allowFormula && isFormula.text ? (
         <input
           type="text"
           className="text-to-display form-control"

package/src/components/elements/View.js

@@ -9,6 +9,7 @@ import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
 import relationsCtx from "../relations_context";
+import Select from "react-select";
 
 import {
   fetchViewPreview,
@@ -199,8 +200,8 @@ const ViewSettings = () => {
   const helpContext = { view_name: viewname };
   if (options.tableName) helpContext.srcTable = options.tableName;
   const set_view_name = (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
+    if (e?.target?.value || e?.value) {
+      const target_value = e.target?.value || e.value;
       if (target_value !== viewname) {
         if (options.mode === "filter") {
           setProp((prop) => {
@@ -237,25 +238,27 @@ const ViewSettings = () => {
       }
     }
   };
-
+  const viewOptions = options.views.map(({ name, label }) => ({
+    label,
+    value: name,
+  }));
+  const selectedView = viewOptions.find((v) => v.value === viewname);
   return (
     <div>
       {relationsData ? (
         <Fragment>
           <div>
             <label>View to {options.mode === "show" ? "embed" : "show"}</label>
-            <select
-              value={viewname}
-              className="form-control form-select"
-              onChange={set_view_name}
-              onBlur={set_view_name}
-            >
-              {options.views.map((v, ix) => (
-                <option key={ix} value={v.name}>
-                  {v.label}
-                </option>
-              ))}
-            </select>
+            {options.inJestTestingMode ? null : (
+              <Select
+                options={viewOptions}
+                value={selectedView}
+                onChange={set_view_name}
+                onBlur={set_view_name}
+                menuPortalTarget={document.body}
+                styles={{ menuPortal: (base) => ({ ...base, zIndex: 19999 }) }}
+              ></Select>
+            )}
           </div>
           {options.mode !== "filter" && (
             <div>