@saltcorn/builder 0.9.4-beta.9 → 0.9.5-beta.0

package/src/components/elements/utils.js

@@ -19,6 +19,7 @@ import faIcons from "./faicons";
 import { Columns, ntimes } from "./Columns";
 import Tippy from "@tippyjs/react";
 import { RelationType } from "@saltcorn/common-code";
+import Select from "react-select";
 
 export const DynamicFontAwesomeIcon = ({ icon, className }) => {
   if (!icon) return null;
@@ -139,7 +140,7 @@ export /**
  */
 const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
   const { mode } = React.useContext(optionsCtx);
-
+  const allowFormula = mode === "show" || mode === "list";
   /**
    * @returns {void}
    */
@@ -160,14 +161,14 @@ const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
     });
   };
   let errorString = false;
-  if (mode === "show" && isFormula[nodekey]) {
+  if (allowFormula && isFormula[nodekey]) {
     try {
       Function("return " + node[nodekey]);
     } catch (error) {
       errorString = error.message;
     }
   }
-  return mode !== "show" ? (
+  return !allowFormula ? (
     children
   ) : (
     <Fragment>
@@ -492,6 +493,7 @@ export const fetchViewPreview =
     };
     let viewname,
       body = configuration ? { ...configuration } : {};
+    if (!view) return "";
     if (view.includes(":")) {
       const [prefix, rest] = view.split(":");
       const tokens = rest.split(".");
@@ -902,24 +904,51 @@ const ConfigField = ({
         spellCheck={false}
       />
     ),
-    select: () => (
-      <select
-        className="form-control form-select"
-        value={value || ""}
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-        onBlur={(e) => e.target && myOnChange(e.target.value)}
-      >
-        {field.options.map((o, ix) =>
-          o.name && o.label ? (
-            <option key={ix} value={o.name}>
-              {o.label}
-            </option>
-          ) : (
-            <option key={ix}>{o}</option>
-          )
-        )}
-      </select>
-    ),
+    select: () => {
+      if (field.class?.includes?.("selectizable")) {
+        const seloptions = field.options.map((o, ix) =>
+          o.name && o.label
+            ? { value: o.name, label: o.label }
+            : { value: o, label: o }
+        );
+        return (
+          <Select
+            options={seloptions}
+            value={seloptions.find((so) => value === so.value)}
+            onChange={(e) =>
+              (e.name && myOnChange(e.name)) ||
+              (e.value && myOnChange(e.value)) ||
+              (typeof e === "string" && myOnChange(e))
+            }
+            onBlur={(e) =>
+              (e.name && myOnChange(e.name)) ||
+              (e.value && myOnChange(e.value)) ||
+              (typeof e === "string" && myOnChange(e))
+            }
+            menuPortalTarget={document.body}
+            styles={{ menuPortal: (base) => ({ ...base, zIndex: 19999 }) }}
+          ></Select>
+        );
+      } else
+        return (
+          <select
+            className="form-control form-select"
+            value={value || ""}
+            onChange={(e) => e.target && myOnChange(e.target.value)}
+            onBlur={(e) => e.target && myOnChange(e.target.value)}
+          >
+            {field.options.map((o, ix) =>
+              o.name && o.label ? (
+                <option key={ix} value={o.name}>
+                  {o.label}
+                </option>
+              ) : (
+                <option key={ix}>{o}</option>
+              )
+            )}
+          </select>
+        );
+    },
     btn_select: () => (
       <div className="btn-group w-100" role="group">
         {field.options.map((o, ix) => (
@@ -1017,8 +1046,15 @@ export /**
  * @returns {table}
  */
 const SettingsFromFields =
-  (fields, opts = {}) =>
+  (fieldsIn, opts = {}) =>
   () => {
+    const fields = [...fieldsIn];
+    if (opts.additionalFieldsOptionKey) {
+      const options = React.useContext(optionsCtx);
+
+      const addFields = options[opts.additionalFieldsOptionKey];
+      fields.push(...(addFields || []));
+    }
     const node = useNode((node) => {
       const ps = {};
       fields.forEach((f) => {
@@ -1258,9 +1294,12 @@ const ButtonOrLinkSettingsRows = ({
           <option value={addBtnClass("btn-outline-secondary")}>
             Secondary outline button
           </option>
+          <option value={addBtnClass("btn-outline-danger")}>
+            Danger outline button
+          </option>
           <option value={addBtnClass("btn-outline-warning")}>
             Warning outline button
-          </option>{" "}
+          </option>
           <option value={addBtnClass("btn-outline-info")}>
             Info outline button
           </option>
@@ -1270,7 +1309,7 @@ const ButtonOrLinkSettingsRows = ({
           {!linkFirst ? (
             <option value={addBtnClass("btn-link")}>Link</option>
           ) : null}
-          {!linkFirst ? (
+          {!linkFirst && allowRunOnLoad ? (
             <option value="on_page_load">Run on Page Load</option>
           ) : null}
         </select>
@@ -1290,6 +1329,7 @@ const ButtonOrLinkSettingsRows = ({
             <option value="">Standard</option>
             <option value="btn-lg">Large</option>
             <option value="btn-sm">Small</option>
+            <option value="btn-sm btn-xs">Extra Small</option>
             <option value="btn-block">Block</option>
             <option value="btn-block btn-lg">Large block</option>
           </select>

package/src/components/storage.js

@@ -12,6 +12,8 @@ import { Empty } from "./elements/Empty";
 import { Columns, ntimes, sum } from "./elements/Columns";
 import { JoinField } from "./elements/JoinField";
 import { Tabs } from "./elements/Tabs";
+import { ListColumns } from "./elements/ListColumns";
+import { ListColumn } from "./elements/ListColumn";
 import { Table } from "./elements/Table";
 import { Aggregation } from "./elements/Aggregation";
 import { LineBreak } from "./elements/LineBreak";
@@ -76,6 +78,8 @@ const allElements = [
   DropMenu,
   Page,
   Table,
+  ListColumn,
+  ListColumns,
 ];
 
 export /**
@@ -88,7 +92,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
+const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
   //console.log("layoutToNodes", JSON.stringify(layout));
   /**
    * @param {object} segment
@@ -129,7 +133,6 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
         );
       else return <MatchElement key={ix} {...props} />;
     }
-
     if (segment.type === "blank") {
       return (
         <Text
@@ -177,6 +180,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           step_only_ifs={segment.step_only_ifs || ""}
           step_action_names={segment.step_action_names || ""}
           confirm={segment.confirm}
+          spinner={segment.spinner}
           configuration={segment.configuration || {}}
           block={segment.block || false}
           minRole={segment.minRole || 10}
@@ -200,6 +204,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           minHeight={segment.minHeight}
           height={segment.height}
           width={segment.width}
+          click_action={segment.click_action}
           url={segment.url}
           hoverColor={segment.hoverColor}
           minHeightUnit={segment.minHeightUnit || "px"}
@@ -258,6 +263,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           independent={segment.independent}
           startClosed={segment.startClosed}
           deeplink={segment.deeplink}
+          acc_init_opens={segment.acc_init_opens}
           disable_inactive={segment.disable_inactive}
           serverRendered={segment.serverRendered}
           tabId={segment.tabId}
@@ -283,6 +289,27 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           )}
         />
       );
+    } else if (segment.besides && segment.list_columns) {
+      const addFields = options.additionalColumnFields;
+
+      return segment.besides.map((col, jx) => {
+        const addProps = {};
+        (addFields || []).forEach((f) => {
+          addProps[f.name] = col[f.name];
+        });
+        return (
+          <ListColumn
+            key={jx}
+            alignment={col.alignment}
+            header_label={col.header_label}
+            col_width={col.col_width}
+            showif={col.showif}
+            col_width_units={col.col_width_units}
+            contents={toTag(col.contents)}
+            {...addProps}
+          ></ListColumn>
+        );
+      });
     } else if (segment.besides) {
       return (
         <Columns
@@ -317,7 +344,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
       segment.above.forEach((child) => {
         if (child) go(child, parent);
       });
-    } else if (segment.besides) {
+    } else if (segment.besides && !segment.list_columns) {
       const node = query
         .parseReactElement(
           <Columns
@@ -339,7 +366,13 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
       actions.addNodeTree(node, parent);
     } else {
       const tag = toTag(segment);
-      if (tag) {
+      if (Array.isArray(tag)) {
+        tag.forEach((t) => {
+          const node = query.parseReactElement(t).toNodeTree();
+          //console.log("other", node);
+          actions.addNodeTree(node, parent);
+        });
+      } else if (tag) {
         const node = query.parseReactElement(tag).toNodeTree();
         //console.log("other", node);
         actions.addNodeTree(node, parent);
@@ -363,7 +396,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
+const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
   //console.log(JSON.stringify(nodes, null, 2));
   var columns = [];
   /**
@@ -415,10 +448,33 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         related.fields.forEach((f) => {
           c[f.column_name || f.name || f] = node.props[f.name || f];
         });
+        if (s.isFormula) c.isFormula = s.isFormula;
         columns.push(c);
       }
       return s;
     }
+    if (node.displayName === ListColumns.craft.displayName) {
+      return {
+        besides: node.nodes.map((nm) => go(nodes[nm])),
+        list_columns: true,
+      };
+    }
+    if (node.displayName === ListColumn.craft.displayName) {
+      const contents = go(nodes[node.linkedNodes.listcol]);
+      const addFields = options.additionalColumnFields;
+      const lc = {
+        contents,
+        col_width: node.props.col_width,
+        col_width_units: node.props.col_width_units,
+        alignment: node.props.alignment,
+        header_label: node.props.header_label,
+        showif: node.props.showif,
+      };
+      (addFields || []).forEach((f) => {
+        lc[f.name] = node.props[f.name];
+      });
+      return lc;
+    }
     if (node.isCanvas) {
       if (node.displayName === Container.craft.displayName)
         return {
@@ -458,6 +514,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
           gradStartColor: node.props.gradStartColor,
           gradEndColor: node.props.gradEndColor,
           gradDirection: node.props.gradDirection,
+          click_action: node.props.click_action,
           rotate: node.props.rotate,
           style: node.props.style,
         };
@@ -535,6 +592,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         field: node.props.field,
         independent: node.props.independent,
         startClosed: node.props.startClosed,
+        acc_init_opens: node.props.acc_init_opens,
         deeplink: node.props.deeplink,
         disable_inactive: node.props.disable_inactive,
         serverRendered: node.props.serverRendered,
@@ -575,6 +633,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         action_textcol: node.props.action_textcol,
         minRole: node.props.minRole,
         confirm: node.props.confirm,
+        spinner: node.props.spinner,
         nsteps: node.props.nsteps,
         step_only_ifs: node.props.step_only_ifs,
         step_action_names: node.props.step_action_names,
@@ -587,6 +646,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         block: node.props.block,
         configuration: node.props.configuration,
         confirm: node.props.confirm,
+        spinner: node.props.spinner,
         action_name: node.props.name,
         ...(node.props.name !== "Clear" && node.props.action_row_variable
           ? {

package/tests/relations_finder.test.js

@@ -59,6 +59,7 @@ const doTest = (
     views: views,
     tableName: tableName,
     roles: [],
+    inJestTestingMode: true,
     excluded_subview_templates: excludedTemplates,
     // relationsCtx part
     relationsCache: relationsCache,