@saltcorn/builder 0.8.1-beta.5 → 0.8.1-rc.3

package/package.json

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

package/src/components/Builder.js

@@ -467,8 +467,7 @@ const Builder = ({ options, layout, mode }) => {
                   <HistoryPanel />
                   <FontAwesomeIcon
                     icon={faSave}
-                    title={isSaving ? "Saving..." : "All changes saved"}
-                    className={isSaving ? "text-muted" : ""}
+                    className={isSaving ? "d-inline" : "d-none"}
                   />
                   <ViewPageLink />
                   <SettingsPanel />

package/src/components/Toolbox.js

@@ -26,6 +26,7 @@ import { Image } from "./elements/Image";
 import { View } from "./elements/View";
 import { SearchBar } from "./elements/SearchBar";
 import { Link } from "./elements/Link";
+import { Page } from "./elements/Page";
 import optionsCtx from "./context";
 import {
   BoundingBox,
@@ -359,6 +360,20 @@ const DropMenuElem = ({ connectors }) => (
   </WrapElem>
 );
 
+const PageElem = ({connectors, pages}) => (
+  <WrapElem
+    connectors={connectors}
+    icon="fa-fw far fa-file"
+    title="Embed a page"
+    label="Page"
+    disable={pages.length <= 1}
+  >
+    <Page 
+      page={pages.length > 0 ? pages[0].name : "page"}
+    />
+  </WrapElem>
+);
+
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -654,7 +669,7 @@ export /**
 const ToolboxPage = () => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
-  const { views, images } = options;
+  const { views, pages, images } = options;
   return (
     <Fragment>
       <div className="toolbar-row">
@@ -683,6 +698,7 @@ const ToolboxPage = () => {
       </div>
       <div className="toolbar-row">
         <DropMenuElem connectors={connectors} />
+        <PageElem connectors={connectors} pages={pages} />
       </div>
     </Fragment>
   );

package/src/components/elements/Card.js

@@ -104,6 +104,15 @@ const CardSettings = () => {
             node={node}
             setProp={setProp}
           />
+          <SettingsRow
+            field={{
+              label: "Save indicator",
+              name: "titleAjaxIndicator",
+              type: "Bool",
+            }}
+            node={node}
+            setProp={setProp}
+          />
           <SettingsRow
             field={{ label: "No padding", name: "noPadding", type: "Bool" }}
             node={node}
@@ -127,6 +136,7 @@ const fields = [
   },
   { label: "URL", name: "url", type: "String", canBeFormula: true },
   { label: "Shadow", name: "shadow", type: "Bool" },
+  { label: "Save indicator", name: "titleAjaxIndicator", type: "Bool" },
   { label: "No padding", name: "noPadding", type: "Bool" },
   { name: "style", default: {} },
 ];

package/src/components/elements/Page.js

@@ -0,0 +1,102 @@
+import React, { Fragment, useContext, useEffect } from "react";
+import { useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+import previewCtx from "../preview_context";
+import { fetchPagePreview, setAPropGen } from "./utils";
+
+export const Page = ({ page }) => {
+  const {
+    selected,
+    node_id,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected, node_id: node.id }));
+  const options = useContext(optionsCtx);
+  const { previews, setPreviews } = useContext(previewCtx);
+  const myPreview = previews[node_id];
+  useEffect(() => {
+    fetchPagePreview({
+      options,
+      page,
+      setPreviews,
+      node_id,
+    })();
+  }, [page]);
+
+  return (
+    <div
+      ref={(dom) => connect(drag(dom))}
+      className={`${myPreview ? "" : "builder-embed-view"} ${
+        selected ? "selected-node" : ""
+      }`}
+    >
+      {myPreview ? (
+        <div
+          className="d-inline"
+          dangerouslySetInnerHTML={{ __html: myPreview }}
+        ></div>
+      ) : (
+        `Page: ${page}`
+      )}
+    </div>
+  );
+};
+
+export const PageSettings = () => {
+  const node = useNode((node) => ({
+    page: node.data.props.page,
+    node_id: node.id,
+  }));
+  const {
+    actions: { setProp },
+    page,
+    node_id,
+  } = node;
+  const options = useContext(optionsCtx);
+  const pages = options.pages;
+  const setAProp = setAPropGen(setProp);
+  return (
+    <div>
+      <Fragment>
+        <div>
+          <label>Page to embed</label>
+          <select
+            value={page}
+            className="form-control form-select"
+            onChange={setAProp("page")}
+            onBlur={setAProp("page")}
+          >
+            {pages
+              .filter((p) =>
+                options.page_name ? p.name !== options.page_name : true
+              )
+              .map((p, ix) => (
+                <option key={ix} value={p.name}>
+                  {p.name}
+                </option>
+              ))}
+          </select>
+        </div>
+      </Fragment>
+      {page ? (
+        <a
+          className="d-block mt-2"
+          target="_blank"
+          href={`/pageedit/edit/${page}`}
+        >
+          Edit this page
+        </a>
+      ) : null}
+    </div>
+  );
+};
+
+Page.craft = {
+  displayName: "Page",
+  related: {
+    settings: PageSettings,
+    segment_type: "page",
+    fields: [
+      "page",
+    ],
+  },
+};

package/src/components/elements/utils.js

@@ -405,6 +405,7 @@ const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
     headers: {
       "Content-Type": "application/json",
       "CSRF-Token": options.csrfToken,
+      "X-Requested-With": "XMLHttpRequest",
     },
     body: JSON.stringify(body),
   })
@@ -487,6 +488,23 @@ export const fetchViewPreview =
     });
   };
 
+export const fetchPagePreview =
+  (args = {}) =>
+  (changes = {}) => {
+    const { node_id, options, page, setPreviews } = {
+      ...args,
+      ...changes,
+    };
+    fetchPreview({
+      options,
+      node_id,
+      setPreviews,
+      url: `/page/${page}/preview`,
+      body: {},
+      isView: true, // disables inputs
+    });
+  };
+
 export /**
  * @param {object} props
  * @param {boolean} props.vert

package/src/components/storage.js

@@ -21,6 +21,7 @@ import { Card } from "./elements/Card";
 import { Image } from "./elements/Image";
 import { Link } from "./elements/Link";
 import { View } from "./elements/View";
+import { Page } from "./elements/Page";
 import { SearchBar } from "./elements/SearchBar";
 import { Container } from "./elements/Container";
 import { DropDownFilter } from "./elements/DropDownFilter";
@@ -71,6 +72,7 @@ const allElements = [
   Tabs,
   ToggleFilter,
   DropMenu,
+  Page,
 ];
 
 export /**
@@ -147,7 +149,8 @@ export /**
             configuration={segment.configuration || {}}
           />
         );
-      } else if (segment.type === "action") {
+      }
+      else if (segment.type === "action") {
         return (
           <Action
             key={ix}
@@ -461,7 +464,6 @@ export /**
           extra_state_fml: node.props.extra_state_fml,
         };
       }
-
       if (node.displayName === Action.craft.displayName) {
         const newid = rand_ident();
         columns.push({