@saltcorn/builder 0.9.4-beta.19 → 0.9.4-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.4-beta.19",
+  "version": "0.9.4-beta.20",
   "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.19",
+    "@saltcorn/common-code": "0.9.4-beta.20",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",

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={""}
@@ -628,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} />,
@@ -643,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}

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,125 +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, ix) => (
-                  <option key={ix} value={`Latest ${f.name}`}>
-                    Latest {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>
                 ))}
-              {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>
-        <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>
   );
 };
 
@@ -196,6 +281,8 @@ Aggregation.craft = {
       "agg_field",
       "aggwhere",
       "stat",
+      "agg_fieldview",
+      { name: "configuration", default: {} },
     ],
   },
 };

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

@@ -376,6 +376,7 @@ const JoinFieldSettings = () => {
     textStyle,
     configuration,
     fieldview,
+    click_to_edit,
     node_id,
   } = useNode((node) => ({
     name: node.data.props.name,
@@ -383,7 +384,7 @@ const JoinFieldSettings = () => {
     textStyle: node.data.props.textStyle,
     fieldview: node.data.props.fieldview,
     configuration: node.data.props.configuration,
-
+    click_to_edit: node.data.props.click_to_edit,
     node_id: node.id,
   }));
   const options = useContext(optionsCtx);
@@ -493,6 +494,28 @@ const JoinFieldSettings = () => {
               </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}
           <tr>
             <td></td>
             <td>
@@ -527,6 +550,7 @@ JoinField.craft = {
       { name: "name", segment_name: "join_field", column_name: "join_field" },
       "fieldview",
       "textStyle",
+      "click_to_edit",
       "block",
       { name: "configuration", default: {} },
     ],

package/src/components/elements/View.js

@@ -152,7 +152,7 @@ const ViewSettings = () => {
     if (rest.startsWith(".")) viewname = prefix;
     else viewname = rest;
   }
-  if (viewname.includes(".")) viewname = viewname.split(".")[0];
+  if (viewname && viewname.includes(".")) viewname = viewname.split(".")[0];
 
   if (
     finder &&
@@ -177,7 +177,7 @@ const ViewSettings = () => {
     : [undefined, undefined];
   let safeRelation = null;
   const subView = views.find((view) => view.name === viewname);
-  if (relation) {
+  if (relation && subView) {
     const subTbl = tables.find((tbl) => tbl.id === subView.table_id);
     safeRelation = new Relation(
       relation,
@@ -187,7 +187,7 @@ const ViewSettings = () => {
   }
   if (
     options.mode !== "filter" &&
-    subView.table_id &&
+    subView?.table_id &&
     !safeRelation &&
     !hasLegacyRelation &&
     relationsData?.relations.length > 0
@@ -290,18 +290,26 @@ const ViewSettings = () => {
       ) : (
         <div>
           <label>View to {options.mode === "show" ? "embed" : "show"}</label>
-          <select
-            value={view}
-            className="form-control form-select"
-            onChange={setAProp("view")}
-            onBlur={setAProp("view")}
-          >
-            {options.views.map((f, ix) => (
-              <option key={ix} value={f.name}>
-                {f.label || f.name}
-              </option>
-            ))}
-          </select>
+          {options.inJestTestingMode ? null : (
+            <Select
+              options={viewOptions}
+              value={selectedView}
+              onChange={(e) => {
+                const target_value = e?.target?.value || e?.value;
+                setProp((prop) => {
+                  prop.view = target_value;
+                });
+              }}
+              onBlur={(e) => {
+                const target_value = e?.target?.value || e?.value;
+                setProp((prop) => {
+                  prop.view = target_value;
+                });
+              }}
+              menuPortalTarget={document.body}
+              styles={{ menuPortal: (base) => ({ ...base, zIndex: 19999 }) }}
+            ></Select>
+          )}
         </div>
       )}
       {options.mode !== "edit" && (

package/src/components/elements/utils.js

@@ -493,6 +493,7 @@ export const fetchViewPreview =
     };
     let viewname,
       body = configuration ? { ...configuration } : {};
+    if (!view) return "";
     if (view.includes(":")) {
       const [prefix, rest] = view.split(":");
       const tokens = rest.split(".");

package/src/components/storage.js

@@ -180,6 +180,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
           step_only_ifs={segment.step_only_ifs || ""}
           step_action_names={segment.step_action_names || ""}
           confirm={segment.confirm}
+          spinner={segment.spinner}
           configuration={segment.configuration || {}}
           block={segment.block || false}
           minRole={segment.minRole || 10}
@@ -632,6 +633,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         action_textcol: node.props.action_textcol,
         minRole: node.props.minRole,
         confirm: node.props.confirm,
+        spinner: node.props.spinner,
         nsteps: node.props.nsteps,
         step_only_ifs: node.props.step_only_ifs,
         step_action_names: node.props.step_action_names,
@@ -644,6 +646,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         block: node.props.block,
         configuration: node.props.configuration,
         confirm: node.props.confirm,
+        spinner: node.props.spinner,
         action_name: node.props.name,
         ...(node.props.name !== "Clear" && node.props.action_row_variable
           ? {