@saltcorn/builder 0.9.4-beta.9 → 0.9.4

package/src/components/elements/JoinField.js

@@ -376,6 +376,7 @@ const JoinFieldSettings = () => {
     textStyle,
     configuration,
     fieldview,
+    click_to_edit,
     node_id,
   } = useNode((node) => ({
     name: node.data.props.name,
@@ -383,7 +384,7 @@ const JoinFieldSettings = () => {
     textStyle: node.data.props.textStyle,
     fieldview: node.data.props.fieldview,
     configuration: node.data.props.configuration,
-
+    click_to_edit: node.data.props.click_to_edit,
     node_id: node.id,
   }));
   const options = useContext(optionsCtx);
@@ -493,6 +494,28 @@ const JoinFieldSettings = () => {
               </td>
             </tr>
           )}
+          {options.mode === "show" || options.mode === "list" ? (
+            <tr>
+              <td></td>
+              <td>
+                <div className="form-check">
+                  <input
+                    className="form-check-input"
+                    name="inline"
+                    type="checkbox"
+                    checked={click_to_edit}
+                    onChange={(e) => {
+                      if (e && e.target) {
+                        const target_value = e.target.checked;
+                        setProp((prop) => (prop.click_to_edit = target_value));
+                      }
+                    }}
+                  />
+                  <label className="form-check-label">Click to edit?</label>
+                </div>
+              </td>
+            </tr>
+          ) : null}
           <tr>
             <td></td>
             <td>
@@ -527,6 +550,7 @@ JoinField.craft = {
       { name: "name", segment_name: "join_field", column_name: "join_field" },
       "fieldview",
       "textStyle",
+      "click_to_edit",
       "block",
       { name: "configuration", default: {} },
     ],

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

@@ -0,0 +1,177 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Column
+ * @subcategory components / elements
+ */
+
+import React, {
+  useContext,
+  Fragment,
+  useRef,
+  useEffect,
+  useState,
+} from "react";
+
+import { Element, useNode, useEditor } from "@craftjs/core";
+import { setAPropGen, SettingsFromFields } from "./utils";
+import { Column } from "./Column";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowUp, faArrowDown } from "@fortawesome/free-solid-svg-icons";
+import optionsCtx from "../context";
+
+export /**
+ *
+ * @param {object} props
+ * @param {string} props.children
+ * @param {*} props.align
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const ListColumn = ({
+  alignment,
+  colIndex,
+  contents,
+  header_label,
+  showif,
+  col_width,
+  col_width_units,
+}) => {
+  const {
+    selected,
+    id,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  const { actions, query, isActve } = useEditor((state) => ({}));
+  const options = useContext(optionsCtx);
+
+  const {
+    data: { parent },
+  } = query.node(id).get();
+  const siblings = query.node(parent).childNodes();
+  const nChildren = siblings.length;
+  const childIx = siblings.findIndex((sib) => sib === id);
+
+  const moveDown = () => {
+    const {
+      data: { parent },
+    } = query.node(id).get();
+    actions.move(id, parent, childIx + 2);
+  };
+  const moveUp = () => {
+    const {
+      data: { parent },
+    } = query.node(id).get();
+    actions.move(id, parent, childIx - 1);
+  };
+  return (
+    <div
+      className={`${
+        selected ? "selected-node" : ""
+      } d-flex w-100 list-column-outer`}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <div className={`list-column flex-50 p-2`}>
+        <div className="d-flex justify-content-between h-100">
+          <div className="">
+            Column {childIx}
+            {header_label ? `: ${header_label}` : ""}
+            <br />
+            {showif ? (
+              <span className="badge bg-secondary me-2">showif</span>
+            ) : (
+              ""
+            )}
+            {alignment && alignment !== "Default" ? (
+              <span className="badge bg-secondary me-2">Align {alignment}</span>
+            ) : (
+              ""
+            )}
+            {col_width ? (
+              <span className="badge bg-secondary me-2">
+                {col_width}
+                {col_width_units}
+              </span>
+            ) : (
+              ""
+            )}
+          </div>
+          <div className="d-flex flex-column h-100 justify-content-between">
+            {childIx !== null && childIx > 0 ? (
+              <FontAwesomeIcon icon={faArrowUp} onClick={moveUp} />
+            ) : (
+              <span></span>
+            )}
+            {childIx !== null && childIx < nChildren - 1 ? (
+              <FontAwesomeIcon icon={faArrowDown} onClick={moveDown} />
+            ) : (
+              <span></span>
+            )}
+          </div>
+        </div>
+      </div>
+      <Element
+        canvas
+        id={`listcol`}
+        is={Column}
+        singleOccupancy={!options.allowMultipleElementsPerColumn}
+      >
+        {contents}
+      </Element>
+    </div>
+  );
+};
+
+const fields = [
+  {
+    name: "header_label",
+    label: "Header label",
+    type: "String",
+  },
+  {
+    name: "showif",
+    label: "Show if true",
+    sublabel: "Formula. Leave blank to always show",
+    class: "validate-expression",
+    type: "String",
+    required: false,
+  },
+  {
+    name: "col_width",
+    label: "Column width",
+    type: "Integer",
+    attributes: { asideNext: true },
+  },
+  {
+    name: "col_width_units",
+    label: "Units",
+    type: "String",
+    required: true,
+    attributes: {
+      inline: true,
+      options: ["px", "%", "vw", "em", "rem"],
+    },
+  },
+  {
+    name: "alignment",
+    label: "Alignment",
+    input_type: "select",
+    options: ["Default", "Left", "Center", "Right"],
+  },
+];
+ListColumn.craft = {
+  displayName: "ListColumn",
+  props: {},
+  rules: {
+    canDrag: () => true,
+  },
+  related: {
+    settings: SettingsFromFields(fields, {
+      additionalFieldsOptionKey: "additionalColumnFields",
+    }),
+    segment_type: "list_column",
+    hasContents: true,
+    colFields: fields,
+  },
+};

package/src/components/elements/ListColumns.js

@@ -0,0 +1,62 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/ListColumns
+ * @subcategory components / elements
+ */
+
+import React, { useContext, Fragment } from "react";
+
+import { Element, useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+
+export /**
+ *
+ * @param {object} props
+ * @param {string} props.children
+ * @param {*} props.align
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const ListColumns = ({ children, align }) => {
+  const {
+    selected,
+    id,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <div className={selected ? "selected-node" : ""}>
+      <div className={` ${id === "ROOT" ? "root-canvas" : ""}`}>{children}</div>
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const ListColumnsSettings = () => {
+  useNode((node) => ({}));
+  return <div></div>;
+};
+
+/**
+ * @type {object}
+ */
+ListColumns.craft = {
+  displayName: "ListColumns",
+  props: {},
+  rules: {
+    canDrag: () => false,
+    canDrop: () => false,
+    canMoveIn: (incoming) => {
+      return incoming?.data?.displayName === "ListColumn";
+    },
+  },
+  related: {
+    settings: ListColumnsSettings,
+  },
+};

package/src/components/elements/Tabs.js

@@ -185,6 +185,7 @@ const TabsSettings = () => {
     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 },
@@ -200,6 +201,7 @@ const TabsSettings = () => {
     tabId,
     showif,
     setting_tab_n,
+    acc_init_opens,
   } = node;
   const use_setting_tab_n = setting_tab_n || 0;
   const options = useContext(optionsCtx);
@@ -450,6 +452,29 @@ const TabsSettings = () => {
                 </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>
@@ -464,6 +489,7 @@ Tabs.craft = {
   props: {
     titles: ["Tab1", "Tab2"],
     showif: [],
+    acc_init_opens: [],
     ntabs: 2,
     tabsStyle: "Tabs",
     independent: false,

package/src/components/elements/Text.js

@@ -179,9 +179,11 @@ const TextSettings = () => {
   } = node;
   const { mode, fields } = useContext(optionsCtx);
   const setAProp = setAPropGen(setProp);
+  const allowFormula = mode === "show" || mode === "list";
+
   return (
     <div>
-      {mode === "show" && (
+      {allowFormula && (
         <div className="form-check">
           <input
             type="checkbox"
@@ -197,7 +199,7 @@ const TextSettings = () => {
         </div>
       )}
       <label>Text to display</label>
-      {mode === "show" && isFormula.text ? (
+      {allowFormula && isFormula.text ? (
         <input
           type="text"
           className="text-to-display form-control"

package/src/components/elements/View.js

@@ -9,6 +9,7 @@ import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
 import relationsCtx from "../relations_context";
+import Select from "react-select";
 
 import {
   fetchViewPreview,
@@ -151,7 +152,7 @@ const ViewSettings = () => {
     if (rest.startsWith(".")) viewname = prefix;
     else viewname = rest;
   }
-  if (viewname.includes(".")) viewname = viewname.split(".")[0];
+  if (viewname && viewname.includes(".")) viewname = viewname.split(".")[0];
 
   if (
     finder &&
@@ -176,7 +177,7 @@ const ViewSettings = () => {
     : [undefined, undefined];
   let safeRelation = null;
   const subView = views.find((view) => view.name === viewname);
-  if (relation) {
+  if (relation && subView) {
     const subTbl = tables.find((tbl) => tbl.id === subView.table_id);
     safeRelation = new Relation(
       relation,
@@ -186,7 +187,7 @@ const ViewSettings = () => {
   }
   if (
     options.mode !== "filter" &&
-    subView.table_id &&
+    subView?.table_id &&
     !safeRelation &&
     !hasLegacyRelation &&
     relationsData?.relations.length > 0
@@ -199,8 +200,8 @@ const ViewSettings = () => {
   const helpContext = { view_name: viewname };
   if (options.tableName) helpContext.srcTable = options.tableName;
   const set_view_name = (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
+    if (e?.target?.value || e?.value) {
+      const target_value = e.target?.value || e.value;
       if (target_value !== viewname) {
         if (options.mode === "filter") {
           setProp((prop) => {
@@ -237,25 +238,27 @@ const ViewSettings = () => {
       }
     }
   };
-
+  const viewOptions = options.views.map(({ name, label }) => ({
+    label,
+    value: name,
+  }));
+  const selectedView = viewOptions.find((v) => v.value === viewname);
   return (
     <div>
       {relationsData ? (
         <Fragment>
           <div>
             <label>View to {options.mode === "show" ? "embed" : "show"}</label>
-            <select
-              value={viewname}
-              className="form-control form-select"
-              onChange={set_view_name}
-              onBlur={set_view_name}
-            >
-              {options.views.map((v, ix) => (
-                <option key={ix} value={v.name}>
-                  {v.label}
-                </option>
-              ))}
-            </select>
+            {options.inJestTestingMode ? null : (
+              <Select
+                options={viewOptions}
+                value={selectedView}
+                onChange={set_view_name}
+                onBlur={set_view_name}
+                menuPortalTarget={document.body}
+                styles={{ menuPortal: (base) => ({ ...base, zIndex: 19999 }) }}
+              ></Select>
+            )}
           </div>
           {options.mode !== "filter" && (
             <div>
@@ -287,18 +290,20 @@ const ViewSettings = () => {
       ) : (
         <div>
           <label>View to {options.mode === "show" ? "embed" : "show"}</label>
-          <select
-            value={view}
-            className="form-control form-select"
-            onChange={setAProp("view")}
-            onBlur={setAProp("view")}
-          >
-            {options.views.map((f, ix) => (
-              <option key={ix} value={f.name}>
-                {f.label || f.name}
-              </option>
-            ))}
-          </select>
+          {options.inJestTestingMode ? null : (
+            <Select
+              options={viewOptions}
+              value={selectedView}
+              onChange={(e) => {
+                const target_value = e?.target?.value || e?.value;
+                setProp((prop) => {
+                  prop.view = target_value;
+                });
+              }}
+              menuPortalTarget={document.body}
+              styles={{ menuPortal: (base) => ({ ...base, zIndex: 19999 }) }}
+            ></Select>
+          )}
         </div>
       )}
       {options.mode !== "edit" && (
@@ -339,7 +344,7 @@ const ViewSettings = () => {
             )}
         </Fragment>
       )}
-      {(state === "shared" || options.mode === "page") && (
+      {
         <Fragment>
           <label>
             Extra state Formula
@@ -357,7 +362,7 @@ const ViewSettings = () => {
             </small>
           ) : null}
         </Fragment>
-      )}
+      }
       {view ? (
         <a
           className="d-block mt-2"

package/src/components/elements/ViewLink.js

@@ -24,6 +24,7 @@ import {
 
 import { RelationBadges } from "./RelationBadges";
 import { RelationOnDemandPicker } from "./RelationOnDemandPicker";
+import Select from "react-select";
 
 import {
   RelationsFinder,
@@ -201,8 +202,8 @@ const ViewLinkSettings = () => {
     });
   }
   const set_view_name = (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
+    if (e?.target?.value || e?.value) {
+      const target_value = e.target?.value || e.value;
       if (target_value !== use_view_name) {
         const newRelations = finder.findRelations(
           tableName,
@@ -236,6 +237,11 @@ const ViewLinkSettings = () => {
   };
   const helpContext = { view_name: use_view_name };
   if (tableName) helpContext.srcTable = tableName;
+  const viewOptions = options.views.map(({ name, label }) => ({
+    label,
+    value: name,
+  }));
+  const selectedView = viewOptions.find((v) => v.value === use_view_name);
   return (
     <div>
       <table className="w-100">
@@ -243,18 +249,18 @@ const ViewLinkSettings = () => {
           <tr>
             <td colSpan="2">
               <label>View to link to</label>
-              <select
-                value={use_view_name}
-                className="form-control form-select"
-                onChange={set_view_name}
-                onBlur={set_view_name}
-              >
-                {options.views.map((f, ix) => (
-                  <option key={ix} value={f.name}>
-                    {f.label}
-                  </option>
-                ))}
-              </select>
+              {options.inJestTestingMode ? null : (
+                <Select
+                  options={viewOptions}
+                  value={selectedView}
+                  onChange={set_view_name}
+                  onBlur={set_view_name}
+                  menuPortalTarget={document.body}
+                  styles={{
+                    menuPortal: (base) => ({ ...base, zIndex: 19999 }),
+                  }}
+                ></Select>
+              )}
             </td>
           </tr>
           <tr>
@@ -323,6 +329,7 @@ const ViewLinkSettings = () => {
             values={node}
             linkFirst={true}
             linkIsBlank={true}
+            allowRunOnLoad={false}
           />
         </tbody>
       </table>