@saltcorn/builder 0.5.6-beta.3 → 0.6.0-beta.0

package/src/components/elements/DropDownFilter.js

@@ -28,11 +28,13 @@ export const DropDownFilterSettings = () => {
     block,
     neutral_label,
     full_width,
+    where,
   } = useNode((node) => ({
     name: node.data.props.name,
     block: node.data.props.block,
     neutral_label: node.data.props.neutral_label,
     full_width: node.data.props.full_width,
+    where: node.data.props.where,
   }));
   const options = useContext(optionsCtx);
   return (
@@ -70,12 +72,24 @@ export const DropDownFilterSettings = () => {
             />
           </td>
         </tr>
+        <tr>
+          <td>
+            <label>Where</label>
+          </td>
+          <td>
+            <input
+              value={where}
+              className="form-control"
+              onChange={(e) => setProp((prop) => (prop.where = e.target.value))}
+            />
+          </td>
+        </tr>
         <tr>
           <td></td>
           <td>
             <BlockSetting block={block} setProp={setProp} />
           </td>
-        </tr>{" "}
+        </tr>
         <tr>
           <td></td>
           <td>
@@ -108,6 +122,7 @@ DropDownFilter.craft = {
       { name: "name", segment_name: "field_name", column_name: "field_name" },
       "full_width",
       "neutral_label",
+      "where",
       "block",
     ],
   },

package/src/components/elements/Field.js

@@ -160,7 +160,7 @@ export const FieldSettings = () => {
             <TextStyleRow textStyle={textStyle} setProp={setProp} />
           )}
         </tbody>
-      </table>{" "}
+      </table>
       {cfgFields ? (
         <ConfigForm
           fields={cfgFields}

package/src/components/elements/Image.js

@@ -29,8 +29,10 @@ export const ImageSettings = () => {
     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.fieldview,
+    alt: node.data.props.alt,
+    uploadedFiles: node.data.props.uploadedFiles,
     block: node.data.props.block,
     isFormula: node.data.props.isFormula,
   }));
@@ -43,8 +45,47 @@ export const ImageSettings = () => {
     alt,
     block,
     isFormula,
+    filepath,
+    uploadedFiles,
   } = node;
   const options = useContext(optionsCtx);
+  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);
+
+      fetch("/files/upload", {
+        method: "POST",
+        body: formData,
+        headers: {
+          "X-Requested-With": "XMLHttpRequest",
+          "CSRF-Token": options.csrfToken,
+        },
+      })
+        .then((response) => response.json())
+        .then((result) => {
+          setProp((prop) => {
+            prop.fileid = result.success.id;
+            prop.srctype = "File";
+            prop.uploadedFiles = [
+              ...prop.uploadedFiles,
+              { id: result.success.id, filename: result.success.filename },
+            ];
+          });
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+        });
+    }
+  };
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
   return (
     <table>
       <tbody>
@@ -63,12 +104,11 @@ export const ImageSettings = () => {
             <select
               value={srctype}
               className="form-control"
-              onChange={(e) =>
-                setProp((prop) => (prop.srctype = e.target.value))
-              }
+              onChange={setAProp("srctype")}
             >
               <option>File</option>
               <option>URL</option>
+              <option>Upload</option>
               {options.mode === "show" && <option>Field</option>}
             </select>
           </td>
@@ -82,15 +122,18 @@ export const ImageSettings = () => {
               <select
                 value={fileid}
                 className="form-control"
-                onChange={(e) =>
-                  setProp((prop) => (prop.fileid = e.target.value))
-                }
+                onChange={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>
@@ -106,14 +149,27 @@ export const ImageSettings = () => {
                   type="text"
                   className="form-control"
                   value={url}
-                  onChange={(e) =>
-                    setProp((prop) => (prop.url = e.target.value))
-                  }
+                  onChange={setAProp("url")}
                 />
               </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>
@@ -123,9 +179,7 @@ export const ImageSettings = () => {
               <select
                 value={field}
                 className="form-control"
-                onChange={(e) =>
-                  setProp((prop) => (prop.field = e.target.value))
-                }
+                onChange={setAProp("field")}
               >
                 {options.fields
                   .filter(
@@ -142,26 +196,30 @@ export const ImageSettings = () => {
             </td>
           </tr>
         )}
-        <tr>
-          <td>
-            <label>Alt text</label>
-          </td>
-          <td>
-            <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
-              <input
-                type="text"
-                className="form-control"
-                value={alt}
-                onChange={(e) => setProp((prop) => (prop.alt = e.target.value))}
-              />
-            </OrFormula>
-          </td>
-        </tr>
-        <tr>
-          <td colSpan="2">
-            <BlockSetting block={block} setProp={setProp} />
-          </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 colSpan="2">
+              <BlockSetting block={block} setProp={setProp} />
+            </td>
+          </tr>
+        )}
       </tbody>
     </table>
   );
@@ -173,6 +231,7 @@ Image.craft = {
     alt: "",
     block: false,
     isFormula: {},
+    uploadedFiles: [],
     srctype: "File",
   },
   related: {

package/src/components/elements/Link.js

@@ -1,9 +1,13 @@
 import React, { Fragment, useContext } from "react";
 import { useNode } from "@craftjs/core";
-import { blockProps, BlockSetting, TextStyleSetting, OrFormula } from "./utils";
+import {
+  blockProps,
+  BlockSetting,
+  TextStyleSetting,
+  OrFormula,
+  ButtonOrLinkSettingsRows,
+} from "./utils";
 import optionsCtx from "../context";
-import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
-import faIcons from "./faicons";
 
 export const Link = ({
   text,
@@ -13,6 +17,9 @@ export const Link = ({
   link_style,
   link_size,
   link_icon,
+  link_bgcol,
+  link_bordercol,
+  link_textcol,
 }) => {
   const {
     selected,
@@ -25,6 +32,15 @@ export const Link = ({
       } ${isFormula.text ? "text-monospace" : ""} ${link_style} ${link_size}`}
       {...blockProps(block)}
       ref={(dom) => connect(drag(dom))}
+      style={
+        link_style === "btn btn-custom-color"
+          ? {
+              backgroundColor: link_bgcol || "#000000",
+              borderColor: link_bordercol || "#000000",
+              color: link_textcol || "#000000",
+            }
+          : {}
+      }
     >
       {link_icon ? <i className={`${link_icon} mr-1`}></i> : ""}
       {isFormula.text ? `=${text}` : text}
@@ -45,6 +61,9 @@ export const LinkSettings = () => {
     link_style: node.data.props.link_style,
     link_size: node.data.props.link_size,
     link_icon: node.data.props.link_icon,
+    link_bgcol: node.data.props.link_bgcol,
+    link_bordercol: node.data.props.link_bordercol,
+    link_textcol: node.data.props.link_textcol,
   }));
   const {
     actions: { setProp },
@@ -56,140 +75,124 @@ export const LinkSettings = () => {
     nofollow,
     target_blank,
     link_src,
-    link_style,
-    link_size,
-    link_icon,
   } = node;
   const options = useContext(optionsCtx);
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
   return (
     <div>
-      <label>Text to display</label>
-      <OrFormula nodekey="text" {...{ setProp, isFormula, node }}>
-        <input
-          type="text"
-          className="form-control text-to-display"
-          value={text}
-          onChange={(e) => setProp((prop) => (prop.text = e.target.value))}
-        />
-      </OrFormula>
-      <label>Link source</label>
-      <select
-        value={link_src}
-        className="form-control"
-        onChange={(e) =>
-          setProp((prop) => {
-            prop.link_src = e.target.value;
-            if (e.target.value !== "URL") {
-              prop.isFormula.url = false;
-            }
-          })
-        }
-      >
-        <option>URL</option>
-        {(options.pages || []).length > 0 && <option>Page</option>}
-        {(options.views || []).length > 0 && options.mode === "page" && (
-          <option>View</option>
-        )}
-      </select>
-      {link_src === "URL" && (
-        <Fragment>
-          {" "}
-          <label>URL</label>
-          <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
-            <input
-              type="text"
-              className="form-control "
-              value={url}
-              onChange={(e) => setProp((prop) => (prop.url = e.target.value))}
-            />
-          </OrFormula>
-        </Fragment>
-      )}
-      {link_src === "Page" && (
-        <Fragment>
-          {" "}
-          <label>Page</label>
-          <select
-            value={url}
-            className="form-control"
-            onChange={(e) =>
-              setProp((prop) => {
-                prop.url = e.target.value;
-              })
-            }
-          >
-            <option></option>
-            {(options.pages || []).map((p) => (
-              <option value={`/page/${p.name}`}>{p.name}</option>
-            ))}
-          </select>
-        </Fragment>
-      )}
-      {link_src === "View" && (
-        <Fragment>
-          {" "}
-          <label>View</label>
-          <select
-            value={url}
-            className="form-control"
-            onChange={(e) =>
-              setProp((prop) => {
-                prop.url = e.target.value;
-              })
-            }
-          >
-            <option></option>
-            {(options.views || []).map((p) => (
-              <option value={`/view/${p.name}`}>
-                {p.name} [{p.viewtemplate}]
-              </option>
-            ))}
-          </select>
-        </Fragment>
-      )}
-      <div>
-        <label>Link style</label>
-        <select
-          className="form-control"
-          value={link_style}
-          onChange={(e) =>
-            setProp((prop) => (prop.link_style = e.target.value))
-          }
-        >
-          <option value="">Link</option>
-          <option value="btn btn-primary">Primary button</option>
-          <option value="btn btn-secondary">Secondary button</option>
-          <option value="btn btn-success">Success button</option>
-          <option value="btn btn-danger">Danger button</option>
-          <option value="btn btn-outline-primary">
-            Primary outline button
-          </option>
-          <option value="btn btn-outline-secondary">
-            Secondary outline button
-          </option>
-        </select>
-      </div>
-      <div>
-        <label>Link size</label>
-        <select
-          className="form-control"
-          value={link_size}
-          onChange={(e) => setProp((prop) => (prop.link_size = e.target.value))}
-        >
-          <option value="">Standard</option>
-          <option value="btn-lg">Large</option>
-          <option value="btn-sm">Small</option>
-          <option value="btn-block">Block</option>
-          <option value="btn-block btn-lg">Large block</option>
-        </select>
-      </div>
-      <label className="mr-2">Icon</label>
-      <FontIconPicker
-        value={link_icon}
-        icons={faIcons}
-        onChange={(value) => setProp((prop) => (prop.link_icon = value))}
-        isMulti={false}
-      />
+      <table className="w-100">
+        <tbody>
+          <tr>
+            <td>
+              <label>Text to display</label>
+            </td>
+            <td>
+              <OrFormula nodekey="text" {...{ setProp, isFormula, node }}>
+                <input
+                  type="text"
+                  className="form-control text-to-display"
+                  value={text}
+                  onChange={setAProp("text")}
+                />
+              </OrFormula>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label>Link source</label>
+            </td>
+            <td>
+              <select
+                value={link_src}
+                className="form-control"
+                onChange={(e) =>
+                  setProp((prop) => {
+                    prop.link_src = e.target.value;
+                    if (e.target.value !== "URL") {
+                      prop.isFormula.url = false;
+                    }
+                  })
+                }
+              >
+                <option>URL</option>
+                {(options.pages || []).length > 0 && <option>Page</option>}
+                {(options.views || []).length > 0 &&
+                  options.mode === "page" && <option>View</option>}
+              </select>
+            </td>
+          </tr>
+          {link_src === "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>
+          )}
+          {link_src === "Page" && (
+            <tr>
+              <td>
+                <label>Page</label>
+              </td>
+              <td>
+                <select
+                  value={url}
+                  className="form-control"
+                  onChange={setAProp("url")}
+                >
+                  <option></option>
+                  {(options.pages || []).map((p) => (
+                    <option value={`/page/${p.name}`}>{p.name}</option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+          )}
+          {link_src === "View" && (
+            <tr>
+              <td>
+                <label>View</label>
+              </td>
+              <td>
+                <select
+                  value={url}
+                  className="form-control"
+                  onChange={setAProp("url")}
+                >
+                  <option></option>
+                  {(options.views || []).map((p) => (
+                    <option value={`/view/${p.name}`}>
+                      {p.name} [{p.viewtemplate}]
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+          )}
+          <ButtonOrLinkSettingsRows
+            setProp={setProp}
+            keyPrefix="link_"
+            btnClass="btn"
+            values={node}
+            linkFirst={true}
+          />
+        </tbody>
+      </table>
+
       <div className="form-check">
         <input
           className="form-check-input"
@@ -246,6 +249,9 @@ Link.craft = {
       "link_size",
       "link_icon",
       "link_style",
+      "link_bgcol",
+      "link_bordercol",
+      "link_textcol",
     ],
   },
 };

package/src/components/elements/SearchBar.js

@@ -25,7 +25,7 @@ export const SearchBar = ({ has_dropdown, contents, show_badges }) => {
     >
       <div className="input-group-prepend">
         <button className="btn btn-outline-secondary" disabled>
-          <i class="fas fa-search"></i>
+          <i className="fas fa-search"></i>
         </button>
       </div>
       <input