@saltcorn/builder 0.7.0-beta.2 → 0.7.0-beta.5

package/package.json

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

package/src/components/Toolbox.js

@@ -355,7 +355,7 @@ const DropMenuElem = ({ connectors }) => (
     title="Dropdown menu"
     label="DropMenu"
   >
-    <DropMenu />
+    <Element canvas is={DropMenu}></Element>
   </WrapElem>
 );
 
@@ -638,6 +638,7 @@ const ToolboxEdit = () => {
       </div>
       <div className="toolbar-row">
         <JoinFieldElem connectors={connectors} options={options} />
+        <DropMenuElem connectors={connectors} />
       </div>
     </Fragment>
   );
@@ -679,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/DropMenu.js

@@ -135,8 +135,8 @@ const DropMenuSettings = () => {
 DropMenu.craft = {
   displayName: "DropMenu",
   props: {
-    label: "",
-    show_badges: false,
+    label: "Menu",
+    block: false,
   },
   related: {
     settings: DropMenuSettings,

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

@@ -229,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)}
         />
@@ -421,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,