@saltcorn/builder 0.9.4-beta.1 → 0.9.4-beta.11

package/src/components/elements/Container.js

@@ -222,6 +222,7 @@ const ContainerSettings = () => {
     display: node.data.props.display,
     style: node.data.props.style,
     imgResponsiveWidths: node.data.props.imgResponsiveWidths,
+    click_action: node.data.props.click_action,
   }));
   const {
     actions: { setProp },
@@ -251,6 +252,7 @@ const ContainerSettings = () => {
     overflow,
     htmlElement,
     imgResponsiveWidths,
+    click_action,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles } = useContext(previewCtx);
@@ -738,7 +740,7 @@ const ContainerSettings = () => {
           )}
           {["show", "edit", "filter"].includes(options.mode) && (
             <tr>
-              <td>
+              <td colSpan={2}>
                 <input
                   type="text"
                   className="form-control text-to-display"
@@ -844,7 +846,29 @@ const ContainerSettings = () => {
             onChange={setAProp("url")}
           />
         </OrFormula>
-
+        {options.triggerActions ? (
+          <Fragment>
+            <label>Click action</label>
+            <select
+              value={click_action}
+              className="form-control form-select"
+              onChange={(e) => {
+                if (!e.target) return;
+                const value = e.target.value;
+                setProp((prop) => {
+                  prop.click_action = value;
+                });
+              }}
+            >
+              <option value="">None</option>
+              {options.triggerActions.map((f, ix) => (
+                <option key={ix} value={f}>
+                  {f}
+                </option>
+              ))}
+            </select>
+          </Fragment>
+        ) : null}
         <label>Hover color</label>
         <select
           value={hoverColor}

package/src/components/elements/DropMenu.js

@@ -8,7 +8,11 @@ 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 {
+  faCaretDown,
+  faCaretSquareLeft,
+  faCaretSquareRight,
+} from "@fortawesome/free-solid-svg-icons";
 import {
   SettingsRow,
   BlockSetting,
@@ -36,6 +40,7 @@ const DropMenu = ({
   action_textcol,
   block,
   label,
+  menu_direction,
 }) => {
   const {
     selected,
@@ -72,7 +77,7 @@ const DropMenu = ({
       <div
         className={`dropdown-menu dropmenu-dropdown ${
           showDropdown ? "show" : ""
-        }`}
+        } ${menu_direction === "end" ? "dropdown-menu-end" : ""}`}
       >
         <div className="canvas d-flex flex-column">{children}</div>
       </div>
@@ -96,6 +101,7 @@ const DropMenuSettings = () => {
     action_bgcol: node.data.props.action_bgcol,
     action_bordercol: node.data.props.action_bordercol,
     action_textcol: node.data.props.action_textcol,
+    menu_direction: node.data.props.menu_direction,
   }));
   const {
     actions: { setProp },
@@ -118,12 +124,34 @@ const DropMenuSettings = () => {
           setProp={setProp}
           keyPrefix="action_"
           values={node}
+          allowRunOnLoad={false}
         />
         <tr>
           <td colSpan="2">
             <BlockSetting block={block} setProp={setProp} />
           </td>
         </tr>
+        <SettingsRow
+          field={{
+            label: "Drop direction",
+            name: "menu_direction",
+            type: "btn_select",
+            options: [
+              {
+                value: "end",
+                title: "End",
+                label: <FontAwesomeIcon icon={faCaretSquareLeft} />,
+              },
+              {
+                value: "start",
+                title: "Start",
+                label: <FontAwesomeIcon icon={faCaretSquareRight} />,
+              },
+            ],
+          }}
+          node={node}
+          setProp={setProp}
+        />
       </tbody>
     </table>
   );
@@ -151,6 +179,7 @@ DropMenu.craft = {
       "action_bgcol",
       "action_bordercol",
       "action_textcol",
+      "menu_direction",
     ],
   },
 };

package/src/components/elements/Link.js

@@ -281,6 +281,7 @@ const LinkSettings = () => {
             values={node}
             linkFirst={true}
             linkIsBlank={true}
+            allowRunOnLoad={false}
           />
         </tbody>
       </table>

package/src/components/elements/RelationBadges.js

@@ -1,33 +1,49 @@
 import React from "react";
 import { removeWhitespaces } from "./utils";
+import { parseLegacyRelation, RelationType } from "@saltcorn/common-code";
 
-const buildBadgeCfgs = (parsed, parentTbl) => {
-  const result = [];
-  let currentCfg = null;
-  for (const { type, table, key } of parsed) {
-    if (type === "Inbound") {
-      if (currentCfg) result.push(currentCfg);
-      currentCfg = { up: key, table };
-    } else {
-      if (!currentCfg && key) result.push({ down: key, table: parentTbl });
-      else if (currentCfg) {
-        currentCfg.down = key;
-        result.push(currentCfg);
+const buildBadgeCfgs = (sourceTblName, type, path, caches) => {
+  if (type === RelationType.OWN)
+    return [{ table: `${sourceTblName} (same table)` }];
+  else if (type === RelationType.INDEPENDENT)
+    return [{ table: "None (no relation)" }];
+  else if (path.length === 0) return [{ table: "invalid relation" }];
+  else {
+    const result = [];
+    let currentCfg = null;
+    let currentTbl = sourceTblName;
+    for (const pathElement of path) {
+      if (pathElement.inboundKey) {
+        if (currentCfg) result.push(currentCfg);
+        currentTbl = pathElement.table;
+        currentCfg = { up: pathElement.inboundKey, table: currentTbl };
+      } else if (pathElement.fkey) {
+        if (!currentCfg)
+          result.push({ down: pathElement.fkey, table: currentTbl });
+        else {
+          currentCfg.down = pathElement.fkey;
+          result.push(currentCfg);
+        }
+        const tblObj = caches.tableNameCache[currentTbl];
+        const fkey = tblObj.foreign_keys.find(
+          (key) => key.name === pathElement.fkey
+        );
+        currentTbl = fkey.reftable_name;
+        currentCfg = { table: currentTbl };
       }
-      currentCfg = { table };
     }
-  }
-  if (
-    currentCfg &&
-    !result.find(
-      ({ down, table, up }) =>
-        down === currentCfg.down &&
-        table === currentCfg.table &&
-        up === currentCfg.up
+    if (
+      currentCfg &&
+      !result.find(
+        ({ down, table, up }) =>
+          down === currentCfg.down &&
+          table === currentCfg.table &&
+          up === currentCfg.up
+      )
     )
-  )
-    result.push(currentCfg);
-  return result;
+      result.push(currentCfg);
+    return result;
+  }
 };
 
 const buildBadge = ({ up, table, down }, index) => {
@@ -59,41 +75,34 @@ const buildBadge = ({ up, table, down }, index) => {
   );
 };
 
-export const RelationBadges = ({
-  view,
-  relation,
-  parentTbl,
-  tableNameCache,
-}) => {
+export const RelationBadges = ({ view, relation, parentTbl, caches }) => {
   if (relation) {
-    const parsed = relationHelpers.parseRelationPath(relation, tableNameCache);
-
     return (
       <div className="overflow-scroll">
-        {parsed.length > 0
-          ? buildBadgeCfgs(parsed, parentTbl).map(buildBadge)
-          : buildBadge({ table: "invalid relation" }, 0)}
+        {buildBadgeCfgs(
+          relation.sourceTblName,
+          relation.type,
+          relation.path,
+          caches
+        ).map(buildBadge)}
       </div>
     );
   } else {
     if (!view) return buildBadge({ table: "invalid relation" }, 0);
     const [prefix, rest] = view.split(":");
-    const parsed = relationHelpers.parseLegacyRelation(prefix, rest, parentTbl);
-    if (parsed.length === 0)
-      return buildBadge({ table: "invalid relation" }, 0);
-    else if (
-      parsed.length === 1 &&
-      (parsed[0].type === "Independent" || parsed[0].type === "Own")
-    )
+    if (!rest) return buildBadge({ table: "invalid relation" }, 0);
+    const { type, path } = parseLegacyRelation(prefix, rest, parentTbl);
+    if (path.length === 0) return buildBadge({ table: "invalid relation" }, 0);
+    else if (path.length === 1 && (type === "Independent" || type === "Own"))
       return (
         <div className="overflow-scroll">
-          {buildBadge({ table: parsed[0].table }, 0)}
+          {buildBadge({ table: path[0].table }, 0)}
         </div>
       );
     else
       return (
         <div className="overflow-scroll">
-          {buildBadgeCfgs(parsed, parentTbl).map(buildBadge)}
+          {buildBadgeCfgs(parentTbl, type, path, caches).map(buildBadge)}
         </div>
       );
   }

package/src/components/elements/Tabs.js

@@ -8,7 +8,7 @@ import React, { Fragment, useState, useContext, useEffect } from "react";
 import { ntimes } from "./Columns";
 import { Column } from "./Column";
 import optionsCtx from "../context";
-import { setAPropGen, buildOptions } from "./utils";
+import { setAPropGen, buildOptions, ConfigField } from "./utils";
 
 import { Element, useNode } from "@craftjs/core";
 
@@ -31,14 +31,16 @@ const Tabs = ({
   independent,
   startClosed,
   field,
+  setting_tab_n,
 }) => {
   const {
     selected,
     connectors: { connect, drag },
+    actions: { setProp },
   } = useNode((node) => ({ selected: node.events.selected }));
-  const [showTab, setShowTab] = useState(
-    tabsStyle === "Accordion" && startClosed ? false : 0
-  );
+
+  const showTab = setting_tab_n;
+  const setShowTab = (n) => setProp((prop) => (prop.setting_tab_n = n));
   const [showTabs, setShowTabs] = useState(
     tabsStyle === "Accordion" && startClosed ? [] : [true]
   );
@@ -178,9 +180,12 @@ const TabsSettings = () => {
     deeplink: node.data.props.deeplink,
     disable_inactive: node.data.props.disable_inactive,
     serverRendered: node.data.props.serverRendered,
+    setting_tab_n: node.data.props.setting_tab_n,
     tabId: node.data.props.tabId,
     titles: node.data.props.titles,
+    showif: node.data.props.showif,
     field: node.data.props.field,
+    acc_init_opens: node.data.props.acc_init_opens,
   }));
   const {
     actions: { setProp },
@@ -194,7 +199,11 @@ const TabsSettings = () => {
     field,
     serverRendered,
     tabId,
+    showif,
+    setting_tab_n,
+    acc_init_opens,
   } = node;
+  const use_setting_tab_n = setting_tab_n || 0;
   const options = useContext(optionsCtx);
   useEffect(() => {
     if (field)
@@ -263,42 +272,6 @@ const TabsSettings = () => {
           </Fragment>
         ) : (
           <Fragment>
-            <tr>
-              <th>
-                <label>Number of sections</label>
-              </th>
-              <td>
-                <input
-                  type="number"
-                  className="form-control"
-                  value={ntabs}
-                  step="1"
-                  min="0"
-                  max="20"
-                  onChange={setAProp("ntabs")}
-                />
-              </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) => {
-                      if (!e.target) return;
-                      const value = e.target.value;
-                      setProp((prop) => (prop.titles[ix] = value));
-                    }}
-                  />
-                </td>
-              </tr>
-            ))}
             {tabsStyle === "Accordion" ? (
               <tr>
                 <td colSpan="2">
@@ -401,6 +374,107 @@ const TabsSettings = () => {
                 </td>
               </tr>
             ) : null}
+            <tr>
+              <th>
+                <label>Number of sections</label>
+              </th>
+              <td>
+                <input
+                  type="number"
+                  className="form-control"
+                  value={ntabs}
+                  step="1"
+                  min="1"
+                  max="20"
+                  onChange={setAProp("ntabs")}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td colSpan={2}>
+                <ConfigField
+                  field={{
+                    name: "setting_tab_n",
+                    label: "Tab number",
+                    type: "btn_select",
+                    options: ntimes(ntabs, (i) => ({
+                      value: i,
+                      title: `${i + 1}`,
+                      label: `${i + 1}`,
+                    })),
+                  }}
+                  node={node}
+                  setProp={setProp}
+                  props={node}
+                ></ConfigField>
+              </td>
+            </tr>
+            <tr>
+              <th colSpan="2">Title</th>
+            </tr>
+            <tr>
+              <td colSpan={2}>
+                <input
+                  type="text"
+                  className="form-control text-to-display"
+                  value={titles[use_setting_tab_n] || ""}
+                  onChange={(e) => {
+                    if (!e.target) return;
+                    const value = e.target.value;
+                    setProp((prop) => (prop.titles[use_setting_tab_n] = value));
+                  }}
+                />
+              </td>
+            </tr>
+            {options.mode === "show" ||
+            options.mode === "edit" ||
+            options.mode === "filter" ? (
+              <Fragment>
+                <tr>
+                  <th colSpan="2">Show if formula</th>
+                </tr>
+                <tr>
+                  <td colSpan={2}>
+                    <input
+                      type="text"
+                      className="form-control text-to-display"
+                      value={showif?.[use_setting_tab_n] || ""}
+                      onChange={(e) => {
+                        if (!e.target) return;
+                        const value = e.target.value;
+                        setProp((prop) => {
+                          if (!prop.showif) prop.showif = [];
+                          prop.showif[use_setting_tab_n] = value;
+                        });
+                      }}
+                    />
+                  </td>
+                </tr>
+              </Fragment>
+            ) : null}
+            {tabsStyle === "Accordion" ? (
+              <tr>
+                <td colSpan="2">
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      name="block"
+                      type="checkbox"
+                      checked={acc_init_opens?.[use_setting_tab_n] || false}
+                      onChange={(e) => {
+                        if (!e.target) return;
+                        const value = e.target.checked;
+                        setProp((prop) => {
+                          if (!prop.acc_init_opens) prop.acc_init_opens = [];
+                          prop.acc_init_opens[use_setting_tab_n] = value;
+                        });
+                      }}
+                    />
+                    <label className="form-check-label">Initially open</label>
+                  </div>
+                </td>
+              </tr>
+            ) : null}
           </Fragment>
         )}
       </tbody>
@@ -414,6 +488,8 @@ const TabsSettings = () => {
 Tabs.craft = {
   props: {
     titles: ["Tab1", "Tab2"],
+    showif: [],
+    acc_init_opens: [],
     ntabs: 2,
     tabsStyle: "Tabs",
     independent: false,
@@ -421,8 +497,10 @@ Tabs.craft = {
     deeplink: true,
     disable_inactive: false,
     serverRendered: false,
+    setting_tab_n: 0,
     tabId: "",
   },
+  defaultProps: { setting_tab_n: 0, ntabs: 2 },
   displayName: "Tabs",
   related: {
     settings: TabsSettings,