@saltcorn/builder 0.7.0-beta.0 → 0.7.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.7.0-beta.0",
+  "version": "0.7.0-beta.3",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/Builder.js

@@ -26,6 +26,7 @@ import { Image } from "./elements/Image";
 import { Tabs } from "./elements/Tabs";
 import { Empty } from "./elements/Empty";
 import { DropDownFilter } from "./elements/DropDownFilter";
+import { DropMenu } from "./elements/DropMenu";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import optionsCtx from "./context";
 import PreviewCtx from "./preview_context";
@@ -446,6 +447,7 @@ const Builder = ({ options, layout, mode }) => {
                       Container,
                       Column,
                       DropDownFilter,
+                      DropMenu,
                       Tabs,
                       ToggleFilter,
                     }}

package/src/components/Toolbox.js

@@ -16,6 +16,7 @@ import { ViewLink } from "./elements/ViewLink";
 import { Columns } from "./elements/Columns";
 import { Action } from "./elements/Action";
 import { DropDownFilter } from "./elements/DropDownFilter";
+import { DropMenu } from "./elements/DropMenu";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import { Empty } from "./elements/Empty";
 import { Card } from "./elements/Card";
@@ -336,7 +337,7 @@ const DropDownFilterElem = ({ connectors, fields }) => (
     connectors={connectors}
     icon="far fa-caret-square-down"
     title="Dropdown filter"
-    label="Dropdown"
+    label="Select"
   >
     <DropDownFilter
       name={fields[0].name}
@@ -346,6 +347,18 @@ const DropDownFilterElem = ({ connectors, fields }) => (
     />
   </WrapElem>
 );
+
+const DropMenuElem = ({ connectors }) => (
+  <WrapElem
+    connectors={connectors}
+    icon="far fa-caret-square-down"
+    title="Dropdown menu"
+    label="DropMenu"
+  >
+    <Element canvas is={DropMenu}></Element>
+  </WrapElem>
+);
+
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -456,7 +469,7 @@ const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => (
     connectors={connectors}
     text="∑"
     title="Aggregation"
-    label="Calc"
+    label="Aggreg8"
     bold
     fontSize="16px"
     disable={child_field_list.length === 0}
@@ -529,6 +542,7 @@ const ToolboxShow = () => {
       </div>
       <div className="toolbar-row">
         <HTMLElem connectors={connectors} />
+        <DropMenuElem connectors={connectors} />
       </div>
     </Fragment>
   );
@@ -624,6 +638,7 @@ const ToolboxEdit = () => {
       </div>
       <div className="toolbar-row">
         <JoinFieldElem connectors={connectors} options={options} />
+        <DropMenuElem connectors={connectors} />
       </div>
     </Fragment>
   );
@@ -665,6 +680,9 @@ const ToolboxPage = () => {
         <ContainerElem connectors={connectors} />
         <TabsElem connectors={connectors} />
       </div>
+      <div className="toolbar-row">
+        <DropMenuElem connectors={connectors} />
+      </div>
     </Fragment>
   );
 };

package/src/components/elements/Aggregation.js

@@ -10,7 +10,7 @@ import optionsCtx from "../context";
 import { blockProps, BlockSetting, TextStyleRow } from "./utils";
 
 export /**
- * @param {object} props 
+ * @param {object} props
  * @param {string} props.agg_relation
  * @param {string} props.agg_field
  * @param {string} props.stat
@@ -21,13 +21,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const Aggregation = ({
-  agg_relation,
-  agg_field,
-  stat,
-  block,
-  textStyle,
-}) => {
+const Aggregation = ({ agg_relation, agg_field, stat, block, textStyle }) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -129,6 +123,7 @@ const AggregationSettings = () => {
               <option value={"Sum"}>Sum</option>
               <option value={"Max"}>Max</option>
               <option value={"Min"}>Min</option>
+              <option value={"Array_Agg"}>Array_Agg</option>
               {options.fields
                 .filter((f) => f.type.name === "Date")
                 .map((f) => (
@@ -163,8 +158,8 @@ const AggregationSettings = () => {
   );
 };
 
-/** 
- * @type {object} 
+/**
+ * @type {object}
  */
 Aggregation.craft = {
   displayName: "Aggregation",

package/src/components/elements/DropMenu.js

@@ -0,0 +1,156 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/DropMenu
+ * @subcategory components / elements
+ */
+
+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 {
+  SettingsRow,
+  BlockSetting,
+  ButtonOrLinkSettingsRows,
+  DynamicFontAwesomeIcon,
+} from "./utils";
+
+export /**
+ * @param {object} props
+ * @param {boolean} props.has_dropdown
+ * @param {string} props.children
+ * @param {boolean} props.show_badges
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const DropMenu = ({
+  children,
+  action_style,
+  action_size,
+  action_icon,
+  action_bgcol,
+  action_bordercol,
+  action_textcol,
+  block,
+  label,
+}) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  const [showDropdown, setDropdown] = useState(false);
+  //const [dropWidth, setDropWidth] = useState(200);
+  return (
+    <div
+      className={`${selected ? "selected-node" : ""} ${block ? "d-block" : ""}`}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <button
+        className={`btn ${action_style || "btn-primary"} ${action_size || ""} `}
+        style={
+          action_style === "btn-custom-color"
+            ? {
+                backgroundColor: action_bgcol || "#000000",
+                borderColor: action_bordercol || "#000000",
+                color: action_textcol || "#000000",
+              }
+            : {}
+        }
+      >
+        <DynamicFontAwesomeIcon icon={action_icon} className="me-1" />
+
+        {label}
+        <FontAwesomeIcon
+          icon={faCaretDown}
+          className="ms-1"
+          onClick={() => setDropdown(!showDropdown)}
+        />
+      </button>
+      <div
+        className={`dropdown-menu dropmenu-dropdown ${
+          showDropdown ? "show" : ""
+        }`}
+      >
+        <div className="canvas d-flex flex-column">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const DropMenuSettings = () => {
+  const node = useNode((node) => ({
+    label: node.data.props.label,
+    block: node.data.props.block,
+    action_style: node.data.props.action_style,
+    action_size: node.data.props.action_size,
+    action_icon: node.data.props.action_icon,
+    action_bgcol: node.data.props.action_bgcol,
+    action_bordercol: node.data.props.action_bordercol,
+    action_textcol: node.data.props.action_textcol,
+  }));
+  const {
+    actions: { setProp },
+    label,
+    block,
+  } = node;
+  return (
+    <table className="w-100">
+      <tbody>
+        <SettingsRow
+          field={{
+            label: "Label",
+            name: "label",
+            type: "String",
+          }}
+          node={node}
+          setProp={setProp}
+        />
+        <ButtonOrLinkSettingsRows
+          setProp={setProp}
+          keyPrefix="action_"
+          values={node}
+        />
+        <tr>
+          <td colSpan="2">
+            <BlockSetting block={block} setProp={setProp} />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+/**
+ * @type {object}
+ */
+DropMenu.craft = {
+  displayName: "DropMenu",
+  props: {
+    label: "Menu",
+    block: false,
+  },
+  related: {
+    settings: DropMenuSettings,
+    segment_type: "dropdown_menu",
+    hasContents: true,
+    fields: [
+      "label",
+      "block",
+      "action_style",
+      "action_size",
+      "action_icon",
+      "action_bgcol",
+      "action_bordercol",
+      "action_textcol",
+    ],
+  },
+};

package/src/components/elements/Tabs.js

@@ -4,9 +4,10 @@
  * @subcategory components / elements
  */
 
-import React, { Fragment, useState } from "react";
+import React, { Fragment, useState, useContext, useEffect } from "react";
 import { ntimes } from "./Columns";
 import { Column } from "./Column";
+import optionsCtx from "../context";
 
 import { Element, useNode } from "@craftjs/core";
 
@@ -21,14 +22,13 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Tabs = ({ contents, titles, tabsStyle, ntabs, independent }) => {
+const Tabs = ({ contents, titles, tabsStyle, ntabs, independent, field }) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
   const [showTab, setShowTab] = useState(0);
   const [showTabs, setShowTabs] = useState([true]);
-
   if (tabsStyle === "Accordion")
     return (
       <div className="accordion">
@@ -94,7 +94,12 @@ const Tabs = ({ contents, titles, tabsStyle, ntabs, independent }) => {
                 className={`nav-link ${ix === showTab ? `active` : ""}`}
                 onClick={() => setShowTab(ix)}
               >
-                {titles[ix]}
+                {titles[ix] &&
+                  (typeof titles[ix].label === "undefined"
+                    ? titles[ix]
+                    : titles[ix].label === ""
+                    ? "(empty)"
+                    : titles[ix].label)}
               </a>
             </li>
           ))}
@@ -130,6 +135,7 @@ const TabsSettings = () => {
     independent: node.data.props.independent,
     deeplink: node.data.props.deeplink,
     titles: node.data.props.titles,
+    field: node.data.props.field,
   }));
   const {
     actions: { setProp },
@@ -138,7 +144,30 @@ const TabsSettings = () => {
     deeplink,
     independent,
     ntabs,
+    field,
   } = node;
+  const options = useContext(optionsCtx);
+  useEffect(() => {
+    if (field)
+      fetch(`/api/${options.tableName}/distinct/${field}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "CSRF-Token": options.csrfToken,
+        },
+      })
+        .then(function (response) {
+          if (response.status < 399) return response.json();
+          else return "";
+        })
+        .then(function (data) {
+          if (data.success) {
+            const len = data.success.length;
+            setProp((prop) => (prop.ntabs = len));
+            setProp((prop) => (prop.titles = data.success));
+          }
+        });
+  }, [field]);
   return (
     <table className="w-100" accordiontitle="Placement">
       <tbody>
@@ -159,81 +188,115 @@ const TabsSettings = () => {
               <option>Tabs</option>
               <option>Pills</option>
               <option>Accordion</option>
+              {["show", "edit"].includes(options.mode) && (
+                <option>Value switch</option>
+              )}
             </select>
           </td>
         </tr>
-        <tr>
-          <th>
-            <label>Number of sections</label>
-          </th>
-          <td>
-            <input
-              type="number"
-              className="form-control"
-              value={ntabs}
-              step="1"
-              min="0"
-              max="20"
-              onChange={(e) => setProp((prop) => (prop.ntabs = e.target.value))}
-            />
-          </td>
-        </tr>
-        <tr>
-          <th colSpan="2">Titles</th>
-        </tr>
-        {ntimes(ntabs, (ix) => (
-          <tr key={ix}>
-            <th>{ix + 1}</th>
+        {tabsStyle === "Value switch" ? (
+          <tr>
             <td>
-              <input
-                type="text"
-                className="form-control text-to-display"
-                value={titles[ix]}
-                onChange={(e) =>
-                  setProp((prop) => (prop.titles[ix] = e.target.value))
-                }
-              />
+              <label>Field</label>
             </td>
-          </tr>
-        ))}
-        {tabsStyle === "Accordion" ? (
-          <tr>
-            <td colSpan="2">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  name="block"
-                  type="checkbox"
-                  checked={independent}
-                  onChange={(e) => {
-                    if (e.target) {
-                      setProp((prop) => (prop.independent = e.target.checked));
-                    }
-                  }}
-                />
-                <label className="form-check-label">Open independently</label>
-              </div>
+            <td>
+              <select
+                value={field}
+                className="form-control form-select"
+                onChange={(e) => {
+                  setProp((prop) => (prop.field = e.target.value));
+                }}
+              >
+                {options.fields.map((f, ix) => (
+                  <option key={ix} value={f.name}>
+                    {f.label}
+                  </option>
+                ))}
+              </select>
             </td>
           </tr>
         ) : (
-          <tr>
-            <td colSpan="2">
-              <div className="form-check">
+          <Fragment>
+            <tr>
+              <th>
+                <label>Number of sections</label>
+              </th>
+              <td>
                 <input
-                  className="form-check-input"
-                  name="block"
-                  type="checkbox"
-                  checked={deeplink}
-                  onChange={(e) => {
-                    if (e.target) {
-                      setProp((prop) => (prop.deeplink = e.target.checked));
-                    }
-                  }}
+                  type="number"
+                  className="form-control"
+                  value={ntabs}
+                  step="1"
+                  min="0"
+                  max="20"
+                  onChange={(e) =>
+                    setProp((prop) => (prop.ntabs = e.target.value))
+                  }
                 />
-                <label className="form-check-label">Deep link</label>
-              </div>
-            </td>
-          </tr>
+              </td>
+            </tr>
+            <tr>
+              <th colSpan="2">Titles</th>
+            </tr>
+            {ntimes(ntabs, (ix) => (
+              <tr key={ix}>
+                <th>{ix + 1}</th>
+                <td>
+                  <input
+                    type="text"
+                    className="form-control text-to-display"
+                    value={titles[ix]}
+                    onChange={(e) =>
+                      setProp((prop) => (prop.titles[ix] = e.target.value))
+                    }
+                  />
+                </td>
+              </tr>
+            ))}
+            {tabsStyle === "Accordion" ? (
+              <tr>
+                <td colSpan="2">
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      name="block"
+                      type="checkbox"
+                      checked={independent}
+                      onChange={(e) => {
+                        if (e.target) {
+                          setProp(
+                            (prop) => (prop.independent = e.target.checked)
+                          );
+                        }
+                      }}
+                    />
+                    <label className="form-check-label">
+                      Open independently
+                    </label>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              <tr>
+                <td colSpan="2">
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      name="block"
+                      type="checkbox"
+                      checked={deeplink}
+                      onChange={(e) => {
+                        if (e.target) {
+                          setProp((prop) => (prop.deeplink = e.target.checked));
+                        }
+                      }}
+                    />
+                    <label className="form-check-label">Deep link</label>
+                  </div>
+                </td>
+              </tr>
+            )}
+          </Fragment>
         )}
       </tbody>
     </table>

package/src/components/elements/utils.js

@@ -252,7 +252,7 @@ const TextStyleSelect = ({ textStyle, setProp }) => {
       <option value="h5">Heading 5</option>
       <option value="h6">Heading 6</option>
       <option value="fw-bold">Bold</option>
-      <option value="font-italic">Italics</option>
+      <option value="fst-italic">Italics</option>
       <option value="small">Small</option>
       <option value="text-muted">Muted</option>
       <option value="text-underline">Underline</option>

package/src/components/storage.js

@@ -25,6 +25,7 @@ import { SearchBar } from "./elements/SearchBar";
 import { Container } from "./elements/Container";
 import { DropDownFilter } from "./elements/DropDownFilter";
 import { ToggleFilter } from "./elements/ToggleFilter";
+import { DropMenu } from "./elements/DropMenu";
 
 /**
  * @param {object} segment
@@ -69,6 +70,7 @@ const allElements = [
   DropDownFilter,
   Tabs,
   ToggleFilter,
+  DropMenu,
 ];
 
 export /**
@@ -227,6 +229,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           ntabs={segment.ntabs}
           independent={segment.independent}
           deeplink={segment.deeplink}
+          field={segment.field}
           tabsStyle={segment.tabsStyle}
           contents={segment.contents.map(toTag)}
         />
@@ -419,6 +422,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         ),
         titles: node.props.titles,
         tabsStyle: node.props.tabsStyle,
+        field: node.props.field,
         independent: node.props.independent,
         deeplink: node.props.deeplink,
         ntabs: node.props.ntabs,