@saltcorn/builder 0.9.4-beta.2 → 0.9.4-beta.21

package/src/components/elements/Aggregation.js

@@ -4,7 +4,7 @@
  * @subcategory components / elements
  */
 
-import React, { useContext } from "react";
+import React, { useContext, useState, useEffect, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import {
@@ -13,6 +13,7 @@ import {
   TextStyleRow,
   setAPropGen,
   buildOptions,
+  ConfigForm,
 } from "./utils";
 
 export /**
@@ -58,123 +59,209 @@ const AggregationSettings = () => {
     aggwhere,
     block,
     textStyle,
+    agg_fieldview,
+    configuration,
   } = useNode((node) => ({
     agg_relation: node.data.props.agg_relation,
     agg_field: node.data.props.agg_field,
     aggwhere: node.data.props.aggwhere,
     stat: node.data.props.stat,
     block: node.data.props.block,
+    agg_fieldview: node.data.props.agg_fieldview,
+    configuration: node.data.props.configuration,
     textStyle: node.data.props.textStyle,
   }));
   const options = useContext(optionsCtx);
   const setAProp = setAPropGen(setProp);
 
+  const targetField = options.agg_field_opts[agg_relation]?.find?.(
+    (f) => f.name === agg_field
+  );
+  const targetFieldType = targetField?.ftype;
+  const outcomeType =
+    stat === "Count" || stat === "CountUnique"
+      ? "Integer"
+      : stat === "Array_Agg"
+      ? "Array"
+      : targetFieldType;
+  const fvs = options.agg_fieldview_options[outcomeType];
+
+  const [fetchedCfgFields, setFetchedCfgFields] = useState([]);
+  const cfgFields = fetchedCfgFields;
+  useEffect(() => {
+    fetch(
+      `/field/fieldviewcfgform/${
+        targetField?.table_name || options.tableName
+      }?accept=json`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "CSRF-Token": options.csrfToken,
+          "X-Requested-With": "XMLHttpRequest",
+        },
+        body: JSON.stringify({
+          agg_outcome_type: outcomeType,
+          agg_fieldview,
+          agg_field: targetField?.name,
+        }),
+      }
+    )
+      .then(function (response) {
+        if (response.status < 399) return response.json();
+        else return [];
+      })
+      .then(setFetchedCfgFields);
+  }, [outcomeType, agg_fieldview]);
+
   return (
-    <table>
-      <tbody>
-        <tr>
-          <td>
-            <label>Relation</label>
-          </td>
-          <td>
-            <select
-              className="form-control form-select"
-              value={agg_relation}
-              onChange={(e) => {
-                if (!e.target) return;
-                const value = e.target.value;
-                setProp((prop) => {
-                  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}>
-                  {f}
-                </option>
-              ))}
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label>Child table field</label>
-          </td>
-          <td>
-            <select
-              className="form-control form-select"
-              value={agg_field}
-              onChange={setAProp("agg_field")}
-            >
-              {(options.agg_field_opts[agg_relation] || []).map((f, ix) => (
-                <option key={ix} value={f}>
-                  {f}
-                </option>
-              ))}
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label>Statistic</label>
-          </td>
-          <td>
-            <select
-              value={stat}
-              className="form-control form-select"
-              onChange={setAProp("stat")}
-              onBlur={setAProp("stat")}
-            >
-              {buildOptions(
-                [
-                  "Count",
-                  "CountUnique",
-                  "Avg",
-                  "Sum",
-                  "Max",
-                  "Min",
-                  "Array_Agg",
-                ],
-                { valAttr: true }
-              )}
-              {options.fields
-                .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 === "Date" || f.type.name === "Date")
-                .map((f) => (
-                  <option value={`Earliest ${f.name}`}>
-                    Earliest {f.name}
+    <Fragment>
+      <table>
+        <tbody>
+          {options.mode === "filter" ? null : (
+            <tr>
+              <td>
+                <label>Relation</label>
+              </td>
+              <td>
+                <select
+                  className="form-control form-select"
+                  value={agg_relation}
+                  onChange={(e) => {
+                    if (!e.target) return;
+                    const value = e.target.value;
+                    setProp((prop) => {
+                      prop.agg_relation = value;
+                      const fs = options.agg_field_opts[value];
+                      if (fs && fs.length > 0) prop.agg_field = fs[0]?.name;
+                    });
+                  }}
+                >
+                  {options.child_field_list.map((f, ix) => (
+                    <option key={ix} value={f}>
+                      {f}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+          )}
+          <tr>
+            <td>
+              <label>
+                {options.mode === "filter" ? "Field" : "Child table field"}
+              </label>
+            </td>
+            <td>
+              <select
+                className="form-control form-select"
+                value={agg_field}
+                onChange={setAProp("agg_field")}
+              >
+                {(options.agg_field_opts[agg_relation] || []).map((f, ix) => (
+                  <option key={ix} value={f.name}>
+                    {f.label}
                   </option>
                 ))}
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label>Where</label>
-          </td>
-          <td>
-            <input
-              type="text"
-              className="form-control"
-              value={aggwhere}
-              onChange={setAProp("aggwhere")}
-            />
-          </td>
-        </tr>
-        <TextStyleRow textStyle={textStyle} setProp={setProp} />
-        <tr>
-          <td colSpan="2">
-            <BlockSetting block={block} setProp={setProp} />
-          </td>
-        </tr>
-      </tbody>
-    </table>
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label>Statistic</label>
+            </td>
+            <td>
+              <select
+                value={stat}
+                className="form-control form-select"
+                onChange={setAProp("stat")}
+                onBlur={setAProp("stat")}
+              >
+                {buildOptions(
+                  [
+                    "Count",
+                    "CountUnique",
+                    "Avg",
+                    "Sum",
+                    "Max",
+                    "Min",
+                    "Array_Agg",
+                  ],
+                  { valAttr: true }
+                )}
+                {options.fields
+                  .filter((f) => f.type === "Date" || f.type.name === "Date")
+                  .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, ix) => (
+                    <option key={ix} value={`Earliest ${f.name}`}>
+                      Earliest {f.name}
+                    </option>
+                  ))}
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label>Where</label>
+            </td>
+            <td>
+              <input
+                type="text"
+                className="form-control"
+                value={aggwhere}
+                onChange={setAProp("aggwhere")}
+              />
+            </td>
+          </tr>
+          {fvs && (
+            <tr>
+              <td>
+                <label>Field view</label>
+              </td>
+
+              <td>
+                <select
+                  value={agg_fieldview}
+                  className="form-control form-select"
+                  onChange={(e) => {
+                    if (!e.target) return;
+                    const value = e.target.value;
+                    setProp((prop) => (prop.agg_fieldview = value));
+                    //refetchPreview({ fieldview: value });
+                  }}
+                >
+                  {(fvs || []).map((fvnm, ix) => (
+                    <option key={ix} value={fvnm}>
+                      {fvnm}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+          )}
+
+          <TextStyleRow textStyle={textStyle} setProp={setProp} />
+          <tr>
+            <td colSpan="2">
+              <BlockSetting block={block} setProp={setProp} />
+            </td>
+          </tr>
+        </tbody>
+      </table>{" "}
+      {cfgFields ? (
+        <ConfigForm
+          fields={cfgFields}
+          configuration={configuration || {}}
+          setProp={setProp}
+        />
+      ) : null}
+    </Fragment>
   );
 };
 
@@ -194,6 +281,8 @@ Aggregation.craft = {
       "agg_field",
       "aggwhere",
       "stat",
+      "agg_fieldview",
+      { name: "configuration", default: {} },
     ],
   },
 };

package/src/components/elements/BoxModelEditor.js

@@ -61,7 +61,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                   onClick={() => setCatAndDir("margin", "top")}
                 >
                   <input
-                    disabled
+                    readOnly={true}
                     type="text"
                     autoComplete="off"
                     name="boxmodel-ex-1_top_margin"
@@ -92,7 +92,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                       onClick={() => setCatAndDir("border", "top")}
                     >
                       <input
-                        disabled
+                        readOnly={true}
                         type="text"
                         autoComplete="off"
                         name="boxmodel-ex-1_top_border"
@@ -125,7 +125,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                           onClick={() => setCatAndDir("padding", "top")}
                         >
                           <input
-                            disabled
+                            readOnly={true}
                             type="text"
                             autoComplete="off"
                             name="boxmodel-ex-1_top_padding"
@@ -140,7 +140,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                           onClick={() => setSelectedCategory("size")}
                         >
                           <input
-                            disabled
+                            readOnly={true}
                             type="text"
                             autoComplete="off"
                             name="boxmodel-ex-1_width"
@@ -155,7 +155,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                           />
                           x
                           <input
-                            disabled
+                            readOnly={true}
                             type="text"
                             autoComplete="off"
                             name="boxmodel-ex-1_height"
@@ -174,7 +174,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                           onClick={() => setCatAndDir("padding", "bottom")}
                         >
                           <input
-                            disabled
+                            readOnly={true}
                             type="text"
                             autoComplete="off"
                             name="boxmodel-ex-1_bottom_padding"
@@ -199,7 +199,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                       onClick={() => setCatAndDir("border", "bottom")}
                     >
                       <input
-                        disabled
+                        readOnly={true}
                         type="text"
                         autoComplete="off"
                         name="boxmodel-ex-1_bottom_border"
@@ -228,7 +228,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                   onClick={() => setCatAndDir("margin", "bottom")}
                 >
                   <input
-                    disabled
+                    readOnly={true}
                     type="text"
                     autoComplete="off"
                     name="boxmodel-ex-1_bottom_margin"

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/Columns.js

@@ -250,7 +250,7 @@ const ColumnsSettings = () => {
           setProp={setProp}
           props={node}
         ></ConfigField>
-        <table>
+        <table className="w-100">
           <tbody>
             <SettingsSectionHeaderRow title="Align" />
             <SettingsRow
@@ -259,9 +259,9 @@ const ColumnsSettings = () => {
                 label: "Vertical",
                 type: "btn_select",
                 options: [
-                  { value: "start", title: "All", label: <AlignTop /> },
-                  { value: "center", title: "All", label: <AlignMiddle /> },
-                  { value: "end", title: "All", label: <AlignBottom /> },
+                  { value: "start", title: "Start", label: <AlignTop /> },
+                  { value: "center", title: "Center", label: <AlignMiddle /> },
+                  { value: "end", title: "End", label: <AlignBottom /> },
                 ],
               }}
               node={colSetsNode}

package/src/components/elements/Container.js

@@ -222,6 +222,7 @@ const ContainerSettings = () => {
     display: node.data.props.display,
     style: node.data.props.style,
     imgResponsiveWidths: node.data.props.imgResponsiveWidths,
+    click_action: node.data.props.click_action,
   }));
   const {
     actions: { setProp },
@@ -251,6 +252,7 @@ const ContainerSettings = () => {
     overflow,
     htmlElement,
     imgResponsiveWidths,
+    click_action,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles } = useContext(previewCtx);
@@ -738,7 +740,7 @@ const ContainerSettings = () => {
           )}
           {["show", "edit", "filter"].includes(options.mode) && (
             <tr>
-              <td>
+              <td colSpan={2}>
                 <input
                   type="text"
                   className="form-control text-to-display"
@@ -844,7 +846,29 @@ const ContainerSettings = () => {
             onChange={setAProp("url")}
           />
         </OrFormula>
-
+        {options.triggerActions ? (
+          <Fragment>
+            <label>Click action</label>
+            <select
+              value={click_action}
+              className="form-control form-select"
+              onChange={(e) => {
+                if (!e.target) return;
+                const value = e.target.value;
+                setProp((prop) => {
+                  prop.click_action = value;
+                });
+              }}
+            >
+              <option value="">None</option>
+              {options.triggerActions.map((f, ix) => (
+                <option key={ix} value={f}>
+                  {f}
+                </option>
+              ))}
+            </select>
+          </Fragment>
+        ) : null}
         <label>Hover color</label>
         <select
           value={hoverColor}

package/src/components/elements/DropMenu.js

@@ -8,7 +8,11 @@ import React, { Fragment, useState } from "react";
 import { Element, useNode } from "@craftjs/core";
 import { Column } from "./Column";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCaretDown,
+  faCaretSquareLeft,
+  faCaretSquareRight,
+} from "@fortawesome/free-solid-svg-icons";
 import {
   SettingsRow,
   BlockSetting,
@@ -36,6 +40,7 @@ const DropMenu = ({
   action_textcol,
   block,
   label,
+  menu_direction,
 }) => {
   const {
     selected,
@@ -72,7 +77,7 @@ const DropMenu = ({
       <div
         className={`dropdown-menu dropmenu-dropdown ${
           showDropdown ? "show" : ""
-        }`}
+        } ${menu_direction === "end" ? "dropdown-menu-end" : ""}`}
       >
         <div className="canvas d-flex flex-column">{children}</div>
       </div>
@@ -96,6 +101,7 @@ const DropMenuSettings = () => {
     action_bgcol: node.data.props.action_bgcol,
     action_bordercol: node.data.props.action_bordercol,
     action_textcol: node.data.props.action_textcol,
+    menu_direction: node.data.props.menu_direction,
   }));
   const {
     actions: { setProp },
@@ -118,12 +124,34 @@ const DropMenuSettings = () => {
           setProp={setProp}
           keyPrefix="action_"
           values={node}
+          allowRunOnLoad={false}
         />
         <tr>
           <td colSpan="2">
             <BlockSetting block={block} setProp={setProp} />
           </td>
         </tr>
+        <SettingsRow
+          field={{
+            label: "Drop direction",
+            name: "menu_direction",
+            type: "btn_select",
+            options: [
+              {
+                value: "end",
+                title: "End",
+                label: <FontAwesomeIcon icon={faCaretSquareLeft} />,
+              },
+              {
+                value: "start",
+                title: "Start",
+                label: <FontAwesomeIcon icon={faCaretSquareRight} />,
+              },
+            ],
+          }}
+          node={node}
+          setProp={setProp}
+        />
       </tbody>
     </table>
   );
@@ -151,6 +179,7 @@ DropMenu.craft = {
       "action_bgcol",
       "action_bordercol",
       "action_textcol",
+      "menu_direction",
     ],
   },
 };

package/src/components/elements/Field.js

@@ -219,26 +219,28 @@ const FieldSettings = () => {
               </td>
             </tr>
           )}
-          <tr>
-            <td></td>
-            <td>
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  name="inline"
-                  type="checkbox"
-                  checked={click_to_edit}
-                  onChange={(e) => {
-                    if (e && e.target) {
-                      const target_value = e.target.checked;
-                      setProp((prop) => (prop.click_to_edit = target_value));
-                    }
-                  }}
-                />
-                <label className="form-check-label">Click to edit?</label>
-              </div>
-            </td>
-          </tr>
+          {options.mode === "show" || options.mode === "list" ? (
+            <tr>
+              <td></td>
+              <td>
+                <div className="form-check">
+                  <input
+                    className="form-check-input"
+                    name="inline"
+                    type="checkbox"
+                    checked={click_to_edit}
+                    onChange={(e) => {
+                      if (e && e.target) {
+                        const target_value = e.target.checked;
+                        setProp((prop) => (prop.click_to_edit = target_value));
+                      }
+                    }}
+                  />
+                  <label className="form-check-label">Click to edit?</label>
+                </div>
+              </td>
+            </tr>
+          ) : null}
 
           {!(blockDisplay && blockDisplay.includes(fieldview)) && (
             <tr>

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