@saltcorn/builder 0.6.1-beta.1 → 0.6.2-beta.0

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.6.1-beta.1",
+  "version": "0.6.2-beta.0",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
   "scripts": {
     "build": "webpack --mode production",
     "builddev": "webpack --mode none",
-    "test": "echo \"Error: no test specified\""
+    "test": "echo \"Error: no test specified\"",
+    "tsc": "echo \"Error: no TypeScript support yet\"",
+    "clean": "echo \"Error: no TypeScript support yet\""
   },
   "repository": "github:saltcorn/saltcorn",
   "author": "Tom Nielsen",

package/src/components/Toolbox.js

@@ -1,6 +1,6 @@
 /**
  * @category saltcorn-builder
- * @module components / Toolbox
+ * @module components/Toolbox
  * @subcategory components
  */
 
@@ -34,9 +34,9 @@ import {
 } from "react-bootstrap-icons";
 
 /**
- * 
- * @param {object[]} xs 
- * @param {object} def 
+ *
+ * @param {object[]} xs
+ * @param {object} def
  * @returns {object}
  */
 const headOr = (xs, def) => (xs && xs.length > 0 ? xs[0] : def);
@@ -349,7 +349,7 @@ const DropDownFilterElem = ({ connectors, fields }) => (
 /**
  * @param {object} props
  * @param {object} props.connectors
- * @returns {WrapElem} 
+ * @returns {WrapElem}
  * @category saltcorn-builder
  * @subcategory components / Toolbox
  * @namespace
@@ -448,7 +448,7 @@ const ActionElem = ({ connectors, options }) => (
  * @returns {WrapElem}
  * @category saltcorn-builder
  * @subcategory components / Toolbox
- * @namespace 
+ * @namespace
  */
 const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => (
   <WrapElem
@@ -533,9 +533,7 @@ const ToolboxShow = () => {
   );
 };
 
-
-
-export /** 
+export /**
  * @returns {Fragment}
  * @category saltcorn-builder
  * @subcategory components / Toolbox
@@ -544,7 +542,7 @@ export /**
 const ToolboxFilter = () => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
-  const { fields, views } = options;
+  const { fields, views, field_view_options } = options;
   return (
     <Fragment>
       <div className="toolbar-row">
@@ -552,23 +550,31 @@ const ToolboxFilter = () => {
         <ColumnsElem connectors={connectors} />
       </div>
       <div className="toolbar-row">
+        <FieldElem
+          connectors={connectors}
+          fields={fields}
+          field_view_options={field_view_options}
+        />
         <LineBreakElem connectors={connectors} />
-        <DropDownFilterElem connectors={connectors} fields={fields} />
       </div>
       <div className="toolbar-row">
+        <DropDownFilterElem connectors={connectors} fields={fields} />
         <ToggleFilterElem connectors={connectors} fields={fields} />
-        <SearchElem connectors={connectors} />
       </div>
       <div className="toolbar-row">
+        <SearchElem connectors={connectors} />
         <ActionElem connectors={connectors} options={options} />
-        <ContainerElem connectors={connectors} />
       </div>
       <div className="toolbar-row">
+        <ContainerElem connectors={connectors} />
+
         <CardElem connectors={connectors} />
-        <TabsElem connectors={connectors} />
       </div>
       <div className="toolbar-row">
+        <TabsElem connectors={connectors} />
         <ViewElem connectors={connectors} views={views} />
+      </div>
+      <div className="toolbar-row">
         <HTMLElem connectors={connectors} />
       </div>
     </Fragment>

package/src/components/elements/Container.js

@@ -46,8 +46,8 @@ import { BoxModelEditor } from "./BoxModelEditor";
 import previewCtx from "../preview_context";
 
 /**
- * 
- * @param {string} string 
+ *
+ * @param {string} string
  * @returns {string}
  */
 function capitalizeFirstLetter(string) {
@@ -55,7 +55,7 @@ function capitalizeFirstLetter(string) {
 }
 
 export /**
- * @param {object} props 
+ * @param {object} props
  * @param {*} props.children
  * @param {*} props.minHeight
  * @param {*} props.height
@@ -185,7 +185,6 @@ const Container = ({
   );
 };
 
-
 export /**
  * @returns {div}
  * @returns {Accordion}
@@ -265,7 +264,7 @@ const ContainerSettings = () => {
   const ownership = !!options.ownership;
 
   /**
-   * @param {string} key 
+   * @param {string} key
    * @returns {function}
    */
   const setAProp = (key) => (e) => {
@@ -763,9 +762,13 @@ const ContainerSettings = () => {
                         : showForRole[id]
                     }
                     onChange={(e) =>
-                      setProp(
-                        (prop) => (prop.showForRole[id] = e.target.checked)
-                      )
+                      setProp((prop) => {
+                        if (!prop.showForRole || prop.showForRole.length === 0)
+                          options.roles.forEach(
+                            (r) => (prop.showForRole[r.id] = true)
+                          );
+                        prop.showForRole[id] = e.target.checked;
+                      })
                     }
                   />
                   <label className="form-check-label">{role}</label>
@@ -882,8 +885,8 @@ const ContainerSettings = () => {
   );
 };
 
-/** 
- * @type {object} 
+/**
+ * @type {object}
  */
 Container.craft = {
   displayName: "Container",

package/src/components/elements/Tabs.js

@@ -21,23 +21,36 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Tabs = ({ contents, titles, tabsStyle, ntabs }) => {
+const Tabs = ({ contents, titles, tabsStyle, ntabs, independent }) => {
   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">
         {ntimes(ntabs, (ix) => (
-          <div className="card">
+          <div key={ix} className="card">
             <div className="card-header">
               <h2 className="mb-0">
                 <button
                   className="btn btn-link btn-block text-left"
                   type="button"
-                  onClick={() => setShowTab(ix)}
+                  onClick={() => {
+                    setShowTab(ix);
+                    if (!independent) {
+                      let newArr = [];
+                      newArr[ix] = true;
+                      setShowTabs(newArr);
+                    } else {
+                      let newArr = [...showTabs];
+                      newArr[ix] = !newArr[ix];
+                      setShowTabs(newArr);
+                    }
+                  }}
                 >
                   {titles[ix]}
                 </button>
@@ -45,8 +58,12 @@ const Tabs = ({ contents, titles, tabsStyle, ntabs }) => {
             </div>
 
             <div
-              id="collapseOne"
-              className={`collapse ${ix === showTab ? "show" : ""}`}
+              id={`collapse${ix}`}
+              className={`collapse ${
+                (independent && showTabs[ix]) || (!independent && showTab == ix)
+                  ? "show"
+                  : ""
+              }`}
               aria-labelledby="headingOne"
               data-parent="#accordionExample"
             >
@@ -110,12 +127,14 @@ const TabsSettings = () => {
   const node = useNode((node) => ({
     tabsStyle: node.data.props.tabsStyle,
     ntabs: node.data.props.ntabs,
+    independent: node.data.props.independent,
     titles: node.data.props.titles,
   }));
   const {
     actions: { setProp },
     titles,
     tabsStyle,
+    independent,
     ntabs,
   } = node;
   return (
@@ -175,6 +194,26 @@ const TabsSettings = () => {
             </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>
+        )}
       </tbody>
     </table>
   );
@@ -188,6 +227,7 @@ Tabs.craft = {
     titles: ["Tab1", "Tab2"],
     ntabs: 2,
     tabsStyle: "Tabs",
+    independent: false,
   },
   displayName: "Tabs",
   related: {

package/src/components/elements/View.js

@@ -27,7 +27,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const View = ({ name, view, state }) => {
+const View = ({ name, view, configuration, state }) => {
   const {
     selected,
     node_id,
@@ -45,9 +45,10 @@ const View = ({ name, view, state }) => {
       options,
       view,
       setPreviews,
+      configuration,
       node_id,
     })();
-  }, []);
+  }, [view, configuration, state]);
   return (
     <div
       ref={(dom) => connect(drag(dom))}
@@ -95,12 +96,7 @@ const ViewSettings = () => {
   const fixed_state_fields =
     options.fixed_state_fields && options.fixed_state_fields[view];
   const { setPreviews } = useContext(previewCtx);
-  const refetchPreview = fetchViewPreview({
-    options,
-    view,
-    setPreviews,
-    node_id,
-  });
+
   const setAProp = (key) => (e) => {
     if (e.target) {
       const target_value = e.target.value;
@@ -116,7 +112,6 @@ const ViewSettings = () => {
           className="form-control"
           onChange={(e) => {
             setProp((prop) => (prop.view = e.target.value));
-            refetchPreview({ view: e.target.value });
           }}
         >
           {views.map((f, ix) => (
@@ -154,6 +149,15 @@ const ViewSettings = () => {
             )}
         </Fragment>
       )}
+      {view ? (
+        <a
+          className="d-block mt-2"
+          target="_blank"
+          href={`/viewedit/config/${view}`}
+        >
+          Configure this view
+        </a>
+      ) : null}
     </div>
   );
 };

package/src/components/elements/utils.js

@@ -22,7 +22,7 @@ export const DynamicFontAwesomeIcon = ({ icon, className }) => {
 };
 
 export /**
- * @param {boolean} is_block 
+ * @param {boolean} is_block
  * @returns {object}
  */
 const blockProps = (is_block) =>
@@ -390,12 +390,12 @@ export const fetchFieldPreview = (args = {}) => (changes = {}) => {
  * @return {function}
  */
 export const fetchViewPreview = (args = {}) => (changes = {}) => {
-  const { node_id, options, view, setPreviews } = {
+  const { node_id, options, view, setPreviews, configuration } = {
     ...args,
     ...changes,
   };
   let viewname,
-    body = {};
+    body = configuration || {};
   if (view.includes(":")) {
     const [reltype, rest] = view.split(":");
     const [vnm] = rest.split(".");
@@ -463,9 +463,9 @@ export const parseStyles = (styles) =>
 
 /**
  * @function
- * @param {object} styles 
+ * @param {object} styles
  * @returns {object}
- */    
+ */
 export const reactifyStyles = (styles) => {
   const toCamel = (s) => {
     return s.replace(/([-][a-z])/gi, ($1) => {
@@ -480,7 +480,7 @@ export const reactifyStyles = (styles) => {
 };
 
 /**
- * @param {object} f 
+ * @param {object} f
  * @returns {boolean}
  */
 const isCheckbox = (f) =>
@@ -488,8 +488,8 @@ const isCheckbox = (f) =>
 
 /**
  * @function
- * @param {function} setProp 
- * @param {*} fieldview 
+ * @param {function} setProp
+ * @param {*} fieldview
  * @param {object[]} [fields]
  * @returns {void}
  */
@@ -540,14 +540,8 @@ export /**
  * @category saltcorn-builder
  * @subcategory components / elements / utils
  * @namespace
- */  
-const ConfigForm = ({
-  fields,
-  configuration,
-  setProp,
-  node,
-  onChange,
-}) => (
+ */
+const ConfigForm = ({ fields, configuration, setProp, node, onChange }) => (
   <div>
     {fields.map((f, ix) => {
       if (f.showIf && node && node.configuration) {
@@ -579,13 +573,12 @@ const ConfigForm = ({
 );
 
 /**
- * @param {object|undefined} x 
- * @param {object} y 
+ * @param {object|undefined} x
+ * @param {object} y
  * @returns {object}
  */
 const or_if_undef = (x, y) => (typeof x === "undefined" ? y : x);
 
-
 export /**
  * @param {object} props
  * @param {object} props.field
@@ -598,7 +591,7 @@ export /**
  * @category saltcorn-builder
  * @subcategory components / elements / utils
  * @namespace
- */  
+ */
 const ConfigField = ({
   field,
   configuration,
@@ -608,7 +601,7 @@ const ConfigField = ({
   isStyle,
 }) => {
   /**
-   * @param {object} v 
+   * @param {object} v
    * @returns {void}
    */
   const myOnChange = (v) => {
@@ -928,7 +921,7 @@ const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
 export class ErrorBoundary extends React.Component {
   /**
    * ErrorBoundary constructor
-   * @param {object} props 
+   * @param {object} props
    */
   constructor(props) {
     super(props);
@@ -936,7 +929,7 @@ export class ErrorBoundary extends React.Component {
   }
 
   /**
-   * @param {*} error 
+   * @param {*} error
    * @returns {object}
    */
   static getDerivedStateFromError(error) {
@@ -945,8 +938,8 @@ export class ErrorBoundary extends React.Component {
   }
 
   /**
-   * @param {object} error 
-   * @param {object} errorInfo 
+   * @param {object} error
+   * @param {object} errorInfo
    * @returns {void}
    */
   componentDidCatch(error, errorInfo) {
@@ -1107,7 +1100,7 @@ const ButtonOrLinkSettingsRows = ({
 
 /**
  * @function
- * @param {string} style 
+ * @param {string} style
  * @returns {object}
  */
 export const bstyleopt = (style) => ({

package/src/components/storage.js

@@ -27,7 +27,7 @@ import { DropDownFilter } from "./elements/DropDownFilter";
 import { ToggleFilter } from "./elements/ToggleFilter";
 
 /**
- * @param {object} segment 
+ * @param {object} segment
  * @returns {number}
  */
 const getColWidths = (segment) => {
@@ -43,7 +43,7 @@ const getColWidths = (segment) => {
 };
 
 /**
- * @param {object} segment 
+ * @param {object} segment
  * @returns {object[]}
  */
 const default_breakpoints = (segment) =>
@@ -72,9 +72,9 @@ const allElements = [
 ];
 
 export /**
- * @param {object} layout 
- * @param {object} query 
- * @param {object} actions 
+ * @param {object} layout
+ * @param {object} query
+ * @param {object} actions
  * @param {string} [parent = "ROOT"]
  * @returns {Text|View|Action|Element|Tabs|Columns}
  * @category saltcorn-builder
@@ -84,8 +84,8 @@ export /**
 const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
   //console.log("layoutToNodes", JSON.stringify(layout));
   /**
-   * @param {object} segment 
-   * @param {string} ix 
+   * @param {object} segment
+   * @param {string} ix
    * @returns {Element|Text|View|Action|Tabs|Columns}
    */
   function toTag(segment, ix) {
@@ -223,6 +223,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           key={ix}
           titles={segment.titles}
           ntabs={segment.ntabs}
+          independent={segment.independent}
           tabsStyle={segment.tabsStyle}
           contents={segment.contents.map(toTag)}
         />
@@ -243,8 +244,8 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
   }
 
   /**
-   * @param {object} segment 
-   * @param {object} parent 
+   * @param {object} segment
+   * @param {object} parent
    * @returns {void}
    */
   function go(segment, parent) {
@@ -285,7 +286,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
 const rand_ident = () => Math.floor(Math.random() * 16777215).toString(16);
 
 export /**
- * @param {object[]} nodes 
+ * @param {object[]} nodes
  * @param {string} [startFrom = "ROOT" ]
  * @returns {object}
  * @category saltcorn-builder
@@ -295,9 +296,9 @@ export /**
 const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
   //console.log(JSON.stringify(nodes, null, 2));
   var columns = [];
-  
+
   /**
-   * @param {object} node 
+   * @param {object} node
    * @returns {void|object}
    */
   const get_nodes = (node) => {
@@ -307,7 +308,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
   };
 
   /**
-   * @param {object} node 
+   * @param {object} node
    * @returns {object}
    */
   const go = (node) => {
@@ -410,6 +411,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         ),
         titles: node.props.titles,
         tabsStyle: node.props.tabsStyle,
+        independent: node.props.independent,
         ntabs: node.props.ntabs,
       };
     }

package/src/index.js

@@ -3,6 +3,51 @@
  * @module saltcorn-builder/index
  */
 
+/**
+ * All files in the saltcorn-builder package.
+ * @namespace saltcorn-builder_overview
+ * @property {module:components/Builder} Builder
+ * @property {module:components/context} context
+ * @property {module:components/Library} Library
+ * @property {module:components/preview_context} preview_context
+ * @property {module:components/RenderNode} RenderNode
+ * @property {module:components/storage} storage
+ * @property {module:components/Toolbox} Toolbox
+ * 
+ * @category saltcorn-builder
+ */ 
+
+/**
+ * All files in the elements folder.
+ * @namespace saltcorn-builder_overview/elements
+ * @memberof module:saltcorn-builder/index~saltcorn-builder_overview
+ * @property {module:components/elements/Action} Action
+ * @property {module:components/elements/Aggregation} Aggregation
+ * @property {module:components/elements/BoxModelEditor} BoxModelEditor
+ * @property {module:components/elements/Card} Card
+ * @property {module:components/elements/Column} Column
+ * @property {module:components/elements/Columns} Columns
+ * @property {module:components/elements/Container} Container
+ * @property {module:components/elements/DropDownFilter} DropDownFilter
+ * @property {module:components/elements/Empty} Empty
+ * @property {module:components/elements/faicons} faicons
+ * @property {module:components/elements/Field} Field
+ * @property {module:components/elements/HTMLCode} HTMLCode
+ * @property {module:components/elements/Image} Image
+ * @property {module:components/elements/JoinField} JoinField
+ * @property {module:components/elements/LineBreak} LineBreak
+ * @property {module:components/elements/Link} Link
+ * @property {module:components/elements/SearchBar} SearchBar
+ * @property {module:components/elements/Tabs} Tabs
+ * @property {module:components/elements/Text} Text
+ * @property {module:components/elements/ToggleFilter} ToggleFilter
+ * @property {module:components/elements/utils} utils
+ * @property {module:components/elements/View} View
+ * @property {module:components/elements/ViewLink} ViewLink
+ * 
+ * @category saltcorn-builder
+ */
+
 import React from "react";
 import Builder from "./components/Builder";
 import ReactDOM from "react-dom";