@saltcorn/builder 0.5.6-beta.2 → 0.6.0-alpha.0

package/src/components/elements/Container.js

@@ -34,6 +34,11 @@ import {
 } from "react-bootstrap-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faScroll, faRobot } from "@fortawesome/free-solid-svg-icons";
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
 export const Container = ({
   children,
   borderWidth,
@@ -65,6 +70,7 @@ export const Container = ({
   gradStartColor,
   gradEndColor,
   gradDirection,
+  rotate,
 }) => {
   const {
     selected,
@@ -84,7 +90,7 @@ export const Container = ({
         margin: margin.map((p) => p + "px").join(" "),
         minHeight: `${Math.max(minHeight, 15)}${minHeightUnit || "px"}`,
         [`border${
-          borderDirection ? `-${borderDirection}` : ""
+          borderDirection ? `${capitalizeFirstLetter(borderDirection)}` : ""
         }`]: `${borderWidth}px ${borderStyle} ${borderColor || "black"}`,
         ...(block === false ? { display: "inline-block" } : {}),
         ...(bgType === "Image" && bgFileId && +bgFileId
@@ -126,6 +132,11 @@ export const Container = ({
               width: `${width}${widthUnit || "px"}`,
             }
           : {}),
+        ...(rotate
+          ? {
+              transform: `rotate(${rotate}deg)`,
+            }
+          : {}),
       }}
     >
       <div className="canvas">{children}</div>
@@ -173,23 +184,12 @@ export const ContainerSettings = () => {
     gradEndColor: node.data.props.gradEndColor,
     gradDirection: node.data.props.gradDirection,
     overflow: node.data.props.overflow,
+    rotate: node.data.props.rotate,
   }));
   const {
     actions: { setProp },
     borderWidth,
-    borderStyle,
-    borderDirection,
-    borderRadius,
-    borderRadiusUnit,
     borderColor,
-    minHeight,
-    height,
-    width,
-    minHeightUnit,
-    heightUnit,
-    widthUnit,
-    vAlign,
-    hAlign,
     bgFileId,
     imageSize,
     bgType,
@@ -231,6 +231,12 @@ export const ContainerSettings = () => {
       ></div>
     ),
   });
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
   return (
     <Accordion>
       <table className="w-100" accordiontitle="Placement">
@@ -249,14 +255,10 @@ export const ContainerSettings = () => {
                   className="form-control w-50"
                   min="0"
                   max="20"
-                  onChange={(e) =>
-                    setProp((prop) => {
-                      prop.borderWidth = e.target.value;
-                    })
-                  }
+                  onChange={setAProp("borderWidth")}
                 />
-                <div class="input-group-append w-50 d-inline">
-                  <span class="input-group-text">px</span>
+                <div className="input-group-append w-50 d-inline">
+                  <span className="input-group-text">px</span>
                 </div>
               </div>
             </td>
@@ -308,11 +310,7 @@ export const ContainerSettings = () => {
                 type="color"
                 value={borderColor}
                 className="form-control-sm w-50 mr-2"
-                onChange={(e) =>
-                  setProp((prop) => {
-                    prop.borderColor = e.target.value;
-                  })
-                }
+                onChange={setAProp("borderColor")}
               />
               <small>{borderColor}</small>
             </td>
@@ -406,6 +404,15 @@ export const ContainerSettings = () => {
       </table>
       <table className="w-100" accordiontitle="Contents">
         <tbody>
+          <SettingsRow
+            field={{
+              name: "rotate",
+              label: "Rotate °",
+              type: "Integer",
+            }}
+            node={node}
+            setProp={setProp}
+          />
           <SettingsSectionHeaderRow title="Align" />
           <SettingsRow
             field={{
@@ -495,11 +502,7 @@ export const ContainerSettings = () => {
                       type="color"
                       value={gradStartColor}
                       className="form-control-sm w-50"
-                      onChange={(e) =>
-                        setProp((prop) => {
-                          prop.gradStartColor = e.target.value;
-                        })
-                      }
+                      onChange={setAProp("gradStartColor")}
                     />
                   </OrFormula>
                 </td>
@@ -515,11 +518,7 @@ export const ContainerSettings = () => {
                       type="color"
                       value={gradEndColor}
                       className="form-control-sm w-50"
-                      onChange={(e) =>
-                        setProp((prop) => {
-                          prop.gradEndColor = e.target.value;
-                        })
-                      }
+                      onChange={setAProp("gradEndColor")}
                     />
                   </OrFormula>
                 </td>
@@ -537,11 +536,7 @@ export const ContainerSettings = () => {
                       max="360"
                       value={gradDirection}
                       className="form-control-sm w-50"
-                      onChange={(e) =>
-                        setProp((prop) => {
-                          prop.gradDirection = e.target.value;
-                        })
-                      }
+                      onChange={setAProp("gradDirection")}
                     />
                   </OrFormula>
                 </td>
@@ -558,9 +553,7 @@ export const ContainerSettings = () => {
                   <select
                     value={bgFileId}
                     className="form-control-sm w-100"
-                    onChange={(e) =>
-                      setProp((prop) => (prop.bgFileId = e.target.value))
-                    }
+                    onChange={setAProp("bgFileId")}
                   >
                     {options.images.map((f, ix) => (
                       <option key={ix} value={f.id}>
@@ -579,11 +572,7 @@ export const ContainerSettings = () => {
                   <select
                     value={imageSize}
                     className="form-control-sm"
-                    onChange={(e) =>
-                      setProp((prop) => {
-                        prop.imageSize = e.target.value;
-                      })
-                    }
+                    onChange={setAProp("imageSize")}
                   >
                     <option>contain</option>
                     <option>cover</option>
@@ -601,11 +590,7 @@ export const ContainerSettings = () => {
                     type="color"
                     value={bgColor}
                     className="form-control-sm w-50"
-                    onChange={(e) =>
-                      setProp((prop) => {
-                        prop.bgColor = e.target.value;
-                      })
-                    }
+                    onChange={setAProp("bgColor")}
                   />
                 </OrFormula>
               </td>
@@ -614,7 +599,7 @@ export const ContainerSettings = () => {
           <tr>
             <td colSpan="2">
               <label>
-                Set text color{" "}
+                Set text color
                 <input
                   name="setTextColor"
                   type="checkbox"
@@ -622,10 +607,10 @@ export const ContainerSettings = () => {
                   onChange={(e) =>
                     setProp((prop) => (prop.setTextColor = e.target.checked))
                   }
-                />{" "}
+                />
               </label>
             </td>
-          </tr>{" "}
+          </tr>
           {setTextColor && (
             <tr>
               <td>
@@ -636,11 +621,7 @@ export const ContainerSettings = () => {
                   type="color"
                   value={textColor}
                   className="form-control-sm"
-                  onChange={(e) =>
-                    setProp((prop) => {
-                      prop.textColor = e.target.value;
-                    })
-                  }
+                  onChange={setAProp("textColor")}
                 />
               </td>
             </tr>
@@ -659,9 +640,7 @@ export const ContainerSettings = () => {
                   type="text"
                   className="form-control text-to-display"
                   value={showIfFormula}
-                  onChange={(e) =>
-                    setProp((prop) => (prop.showIfFormula = e.target.value))
-                  }
+                  onChange={setAProp("showIfFormula")}
                 />
                 <div style={{ marginTop: "-5px" }}>
                   <small className="text-muted text-monospace">FORMULA</small>
@@ -722,11 +701,7 @@ export const ContainerSettings = () => {
               <select
                 value={minScreenWidth}
                 className="form-control"
-                onChange={(e) =>
-                  setProp((prop) => {
-                    prop.minScreenWidth = e.target.value;
-                  })
-                }
+                onChange={setAProp("minScreenWidth")}
               >
                 <option value="">all</option>
                 <option value="sm">small</option>
@@ -744,11 +719,7 @@ export const ContainerSettings = () => {
               <select
                 value={maxScreenWidth}
                 className="form-control"
-                onChange={(e) =>
-                  setProp((prop) => {
-                    prop.maxScreenWidth = e.target.value;
-                  })
-                }
+                onChange={setAProp("maxScreenWidth")}
               >
                 <option value="">all</option>
                 <option value="md">small</option>
@@ -766,7 +737,7 @@ export const ContainerSettings = () => {
             type="text"
             className="form-control"
             value={url}
-            onChange={(e) => setProp((prop) => (prop.url = e.target.value))}
+            onChange={setAProp("url")}
           />
         </OrFormula>
 
@@ -774,11 +745,7 @@ export const ContainerSettings = () => {
         <select
           value={hoverColor}
           className="form-control"
-          onChange={(e) =>
-            setProp((prop) => {
-              prop.hoverColor = e.target.value;
-            })
-          }
+          onChange={setAProp("hoverColor")}
         >
           <option value="">None</option>
           <option value="gray">gray</option>
@@ -797,9 +764,7 @@ export const ContainerSettings = () => {
             type="text"
             className="form-control text-to-display"
             value={customClass}
-            onChange={(e) =>
-              setProp((prop) => (prop.customClass = e.target.value))
-            }
+            onChange={setAProp("customClass")}
           />
         </OrFormula>
         <div>
@@ -810,7 +775,7 @@ export const ContainerSettings = () => {
           type="text"
           className="text-to-display form-control"
           value={customCSS}
-          onChange={(e) => setProp((prop) => (prop.customCSS = e.target.value))}
+          onChange={setAProp("customCSS")}
         ></textarea>
       </div>
     </Accordion>
@@ -825,6 +790,7 @@ Container.craft = {
     vAlign: "top",
     hAlign: "left",
     bgFileId: 0,
+    rotate: 0,
     isFormula: {},
     bgType: "None",
     block: true,

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: {