@saltcorn/builder 0.9.3-beta.8 → 0.9.3

package/src/components/elements/Image.js

@@ -32,28 +32,29 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-  const Image = ({ fileid, block, srctype, url, alt, style }) => {
-    const {
-      selected,
-      connectors: { connect, drag },
-    } = useNode((node) => ({ selected: node.events.selected }));
-    const theurl = srctype === "File" ? `/files/serve/${fileid}` : url;
-    return (
-      <span {...blockProps(block)} ref={(dom) => connect(drag(dom))}>
-        {fileid === 0 ? (
-          "No images Available"
-        ) : (
-          <img
-            className={`${style && style.width ? "" : "w-100"} image-widget ${selected ? "selected-node" : ""
-              }`}
-            style={reactifyStyles(style || {})}
-            src={theurl}
-            alt={alt}
-          ></img>
-        )}
-      </span>
-    );
-  };
+const Image = ({ fileid, block, srctype, url, alt, style }) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  const theurl = srctype === "File" ? `/files/serve/${fileid}` : url;
+  return (
+    <span {...blockProps(block)} ref={(dom) => connect(drag(dom))}>
+      {fileid === 0 ? (
+        "No images Available"
+      ) : (
+        <img
+          className={`${style && style.width ? "" : "w-100"} image-widget ${
+            selected ? "selected-node" : ""
+          }`}
+          style={reactifyStyles(style || {})}
+          src={theurl}
+          alt={alt}
+        ></img>
+      )}
+    </span>
+  );
+};
 
 export /**
  * @returns {table}
@@ -61,232 +62,233 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-  const ImageSettings = () => {
-    const node = useNode((node) => ({
-      fileid: node.data.props.fileid,
-      field: node.data.props.field,
-      url: node.data.props.url,
-      filepath: node.data.props.filepath,
-      srctype: node.data.props.srctype,
-      alt: node.data.props.alt,
-      block: node.data.props.block,
-      style: node.data.props.style,
-      isFormula: node.data.props.isFormula,
-      imgResponsiveWidths: node.data.props.imgResponsiveWidths,
-    }));
-    const {
-      actions: { setProp },
-      fileid,
-      srctype,
-      field,
-      url,
-      alt,
-      block,
-      isFormula,
-      filepath,
-      imgResponsiveWidths,
-      style,
-    } = node;
-    const options = useContext(optionsCtx);
-    const { uploadedFiles, setUploadedFiles } = useContext(previewCtx);
+const ImageSettings = () => {
+  const node = useNode((node) => ({
+    fileid: node.data.props.fileid,
+    field: node.data.props.field,
+    url: node.data.props.url,
+    filepath: node.data.props.filepath,
+    srctype: node.data.props.srctype,
+    alt: node.data.props.alt,
+    block: node.data.props.block,
+    style: node.data.props.style,
+    isFormula: node.data.props.isFormula,
+    imgResponsiveWidths: node.data.props.imgResponsiveWidths,
+  }));
+  const {
+    actions: { setProp },
+    fileid,
+    srctype,
+    field,
+    url,
+    alt,
+    block,
+    isFormula,
+    filepath,
+    imgResponsiveWidths,
+    style,
+  } = node;
+  const options = useContext(optionsCtx);
+  const { uploadedFiles, setUploadedFiles } = useContext(previewCtx);
 
-    const handleUpload = (e) => {
-      if (e.target.files && e.target.files.length > 0) {
-        const formData = new FormData();
+  const handleUpload = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const formData = new FormData();
 
-        formData.append("file", e.target.files[0]);
-        formData.append("min_role_read", options.min_role || 1);
+      formData.append("file", e.target.files[0]);
+      formData.append("min_role_read", options.min_role || 1);
 
-        fetch("/files/upload", {
-          method: "POST",
-          body: formData,
-          headers: {
-            "X-Requested-With": "XMLHttpRequest",
-            "CSRF-Token": options.csrfToken,
-          },
-        })
-          .then((response) => response.json())
-          .then((result) => {
-            setUploadedFiles((upFls) => [
-              ...upFls,
-              { id: result.success.location, filename: result.success.filename },
-            ]);
-            setProp((prop) => {
-              prop.fileid = result.success.location;
-              prop.srctype = "File";
-            });
-          })
-          .catch((error) => {
-            console.error("Error:", error);
+      fetch("/files/upload", {
+        method: "POST",
+        body: formData,
+        headers: {
+          "X-Requested-With": "XMLHttpRequest",
+          "CSRF-Token": options.csrfToken,
+        },
+      })
+        .then((response) => response.json())
+        .then((result) => {
+          setUploadedFiles((upFls) => [
+            ...upFls,
+            { id: result.success.location, filename: result.success.filename },
+          ]);
+          setProp((prop) => {
+            prop.fileid = result.success.location;
+            prop.srctype = "File";
           });
-      }
-    };
-    const setAProp = setAPropGen(setProp);
-    const sourceOpts = ["File", "URL", "Upload"];
-    if (options.mode === "show") sourceOpts.push("Field");
-    return (
-      <Accordion>
-        <table accordiontitle="Select image">
-          <tbody>
-            <tr>
-              <td colSpan="2">
-                <i>
-                  <small>Preview shown in canvas is indicative</small>
-                </i>
-              </td>
-            </tr>
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+        });
+    }
+  };
+  const setAProp = setAPropGen(setProp);
+  const sourceOpts = ["File", "URL", "Upload"];
+  if (options.mode === "show") sourceOpts.push("Field");
+  return (
+    <Accordion>
+      <table accordiontitle="Select image">
+        <tbody>
+          <tr>
+            <td colSpan="2">
+              <i>
+                <small>Preview shown in canvas is indicative</small>
+              </i>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label>Source</label>
+            </td>
+            <td>
+              <select
+                value={srctype}
+                className="form-control form-select"
+                onChange={setAProp("srctype")}
+              >
+                {buildOptions(sourceOpts)}
+              </select>
+            </td>
+          </tr>
+          {srctype === "File" && (
             <tr>
               <td>
-                <label>Source</label>
+                <label>File</label>
               </td>
               <td>
                 <select
-                  value={srctype}
+                  value={fileid}
                   className="form-control form-select"
-                  onChange={setAProp("srctype")}
+                  onChange={setAProp("fileid")}
+                  onBlur={setAProp("fileid")}
                 >
-                  {buildOptions(sourceOpts)}
+                  {options.images.map((f, ix) => (
+                    <option key={ix} value={f.id}>
+                      {f.filename}
+                    </option>
+                  ))}
+                  {(uploadedFiles || []).map((uf, ix) => (
+                    <option key={ix} value={uf.id}>
+                      {uf.filename}
+                    </option>
+                  ))}
                 </select>
               </td>
             </tr>
-            {srctype === "File" && (
-              <tr>
-                <td>
-                  <label>File</label>
-                </td>
-                <td>
-                  <select
-                    value={fileid}
-                    className="form-control form-select"
-                    onChange={setAProp("fileid")}
-                    onBlur={setAProp("fileid")}
-                  >
-                    {options.images.map((f, ix) => (
-                      <option key={ix} value={f.id}>
-                        {f.filename}
-                      </option>
-                    ))}
-                    {(uploadedFiles || []).map((uf, ix) => (
-                      <option key={ix} value={uf.id}>
-                        {uf.filename}
-                      </option>
-                    ))}
-                  </select>
-                </td>
-              </tr>
-            )}
-            {srctype === "URL" && (
-              <tr>
-                <td>
-                  <label>URL</label>
-                </td>
-                <td>
-                  <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
-                    <input
-                      type="text"
-                      className="form-control"
-                      value={url}
-                      onChange={setAProp("url")}
-                    />
-                  </OrFormula>
-                </td>
-              </tr>
-            )}
-            {srctype === "Upload" && (
-              <tr>
-                <td>
-                  <label>File</label>
-                </td>
-                <td>
+          )}
+          {srctype === "URL" && (
+            <tr>
+              <td>
+                <label>URL</label>
+              </td>
+              <td>
+                <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
                   <input
-                    type="file"
+                    type="text"
                     className="form-control"
-                    value={filepath}
-                    onChange={handleUpload}
+                    value={url}
+                    onChange={setAProp("url")}
                   />
-                </td>
-              </tr>
-            )}
-            {srctype === "Field" && (
-              <tr>
-                <td>
-                  <label>Field</label>
-                </td>
-                <td>
-                  <select
-                    value={field}
-                    className="form-control form-select"
-                    onChange={setAProp("field")}
-                  >
-                    <option value=""></option>
-                    {options.fields
-                      .filter(
-                        (f) =>
-                          (f.type && f.type.name === "String") ||
-                          (f.type && f.type === "File")
-                      )
-                      .map((f, ix) => (
-                        <option key={ix} value={f.name}>
-                          {f.label}
-                        </option>
-                      ))}
-                  </select>
-                </td>
-              </tr>
-            )}
-            {srctype !== "Upload" && (
-              <tr>
-                <td>
-                  <label>Alt text</label>
-                </td>
-                <td>
-                  <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
-                    <input
-                      type="text"
-                      className="form-control"
-                      value={alt}
-                      onChange={setAProp("alt")}
-                    />
-                  </OrFormula>
-                </td>
-              </tr>
-            )}
-            {srctype !== "Upload" && (
-              <tr>
-                <td style={{ verticalAlign: "top" }}>
-                  <label>Responsive widths</label>
-                </td>
-
-                <td>
+                </OrFormula>
+              </td>
+            </tr>
+          )}
+          {srctype === "Upload" && (
+            <tr>
+              <td>
+                <label>File</label>
+              </td>
+              <td>
+                <input
+                  type="file"
+                  className="form-control"
+                  value={filepath}
+                  onChange={handleUpload}
+                />
+              </td>
+            </tr>
+          )}
+          {srctype === "Field" && (
+            <tr>
+              <td>
+                <label>Field</label>
+              </td>
+              <td>
+                <select
+                  value={field}
+                  className="form-control form-select"
+                  onChange={setAProp("field")}
+                >
+                  <option value=""></option>
+                  {options.fields
+                    .filter(
+                      (f) =>
+                        f.type === "String" ||
+                        (f.type && f.type.name === "String") ||
+                        (f.type && f.type === "File")
+                    )
+                    .map((f, ix) => (
+                      <option key={ix} value={f.name}>
+                        {f.label}
+                      </option>
+                    ))}
+                </select>
+              </td>
+            </tr>
+          )}
+          {srctype !== "Upload" && (
+            <tr>
+              <td>
+                <label>Alt text</label>
+              </td>
+              <td>
+                <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
                   <input
                     type="text"
-                    value={imgResponsiveWidths}
                     className="form-control"
-                    onChange={setAProp("imgResponsiveWidths")}
+                    value={alt}
+                    onChange={setAProp("alt")}
                   />
-                  <small>
-                    <i>
-                      List of widths to serve resized images, e.g. 300, 400, 600
-                    </i>
-                  </small>
-                </td>
-              </tr>
-            )}
-            {srctype !== "Upload" && (
-              <tr>
-                <td colSpan="2">
-                  <BlockSetting block={block} setProp={setProp} />
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-        <div accordiontitle="Box" className="w-100">
-          <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
-        </div>
-      </Accordion>
-    );
-  };
+                </OrFormula>
+              </td>
+            </tr>
+          )}
+          {srctype !== "Upload" && (
+            <tr>
+              <td style={{ verticalAlign: "top" }}>
+                <label>Responsive widths</label>
+              </td>
+
+              <td>
+                <input
+                  type="text"
+                  value={imgResponsiveWidths}
+                  className="form-control"
+                  onChange={setAProp("imgResponsiveWidths")}
+                />
+                <small>
+                  <i>
+                    List of widths to serve resized images, e.g. 300, 400, 600
+                  </i>
+                </small>
+              </td>
+            </tr>
+          )}
+          {srctype !== "Upload" && (
+            <tr>
+              <td colSpan="2">
+                <BlockSetting block={block} setProp={setProp} />
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+      <div accordiontitle="Box" className="w-100">
+        <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
+      </div>
+    </Accordion>
+  );
+};
 
 /**
  * @type {object}

package/src/components/elements/JoinField.js

@@ -5,7 +5,7 @@
  */
 /* eslint-env jquery */
 
-import React, { useContext, useEffect, Fragment } from "react";
+import React, { useContext, useEffect, useState, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import {
@@ -390,9 +390,30 @@ const JoinFieldSettings = () => {
   const { setPreviews } = useContext(previewCtx);
 
   const fvs = options.field_view_options[name];
-  const getCfgFields = (fv) =>
-    ((options.fieldViewConfigForms || {})[name] || {})[fv];
-  const cfgFields = getCfgFields(fieldview);
+
+  const [fetchedCfgFields, setFetchedCfgFields] = useState([]);
+  const cfgFields = fetchedCfgFields;
+  useEffect(() => {
+    fetch(`/field/fieldviewcfgform/${options.tableName}?accept=json`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "CSRF-Token": options.csrfToken,
+        "X-Requested-With": "XMLHttpRequest",
+      },
+      body: JSON.stringify({
+        join_field: name,
+        join_fieldview: fieldview,
+        type: "JoinField",
+      }),
+    })
+      .then(function (response) {
+        if (response.status < 399) return response.json();
+        else return [];
+      })
+      .then(setFetchedCfgFields);
+  }, [name, fieldview]);
+
   const refetchPreview = fetchFieldPreview({
     options,
     name,

package/src/components/elements/ToggleFilter.js

@@ -7,12 +7,7 @@
 import React, { useContext, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
-import {
-  blockProps,
-  BlockSetting,
-  setAPropGen,
-  buildOptions,
-} from "./utils";
+import { blockProps, BlockSetting, setAPropGen, buildOptions } from "./utils";
 
 export /**
  * @param {object} props
@@ -82,7 +77,8 @@ const ToggleFilterSettings = () => {
   const options = useContext(optionsCtx);
   const field = options.fields.find((f) => f.name === name);
   const preset_options = field.preset_options;
-  const isBool = field && field.type.name === "Bool";
+  const isBool =
+    field && (field.type?.name === "Bool" || field.type === "Bool");
   const setAProp = setAPropGen(setProp);
   return (
     <table className="w-100">
@@ -101,7 +97,9 @@ const ToggleFilterSettings = () => {
                   const value = e.target.value;
                   setProp((prop) => (prop.name = value));
                   const field = options.fields.find((f) => f.name === value);
-                  const isBool = field && field.type.name === "Bool";
+                  const isBool =
+                    field &&
+                    (field.type?.name === "Bool" || field.type === "Bool");
                   if (isBool) setProp((prop) => (prop.value = "on"));
                   setProp((prop) => (prop.preset_value = ""));
                 }