@saltcorn/server 0.9.1-beta.5 → 0.9.1-beta.6

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@saltcorn/server",
-  "version": "0.9.1-beta.5",
+  "version": "0.9.1-beta.6",
   "description": "Server app for Saltcorn, open-source no-code platform",
   "homepage": "https://saltcorn.com",
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
     "@aws-sdk/client-s3": "^3.451.0",
-    "@saltcorn/base-plugin": "0.9.1-beta.5",
-    "@saltcorn/builder": "0.9.1-beta.5",
-    "@saltcorn/data": "0.9.1-beta.5",
-    "@saltcorn/admin-models": "0.9.1-beta.5",
-    "@saltcorn/filemanager": "0.9.1-beta.5",
-    "@saltcorn/markup": "0.9.1-beta.5",
-    "@saltcorn/sbadmin2": "0.9.1-beta.5",
+    "@saltcorn/base-plugin": "0.9.1-beta.6",
+    "@saltcorn/builder": "0.9.1-beta.6",
+    "@saltcorn/data": "0.9.1-beta.6",
+    "@saltcorn/admin-models": "0.9.1-beta.6",
+    "@saltcorn/filemanager": "0.9.1-beta.6",
+    "@saltcorn/markup": "0.9.1-beta.6",
+    "@saltcorn/sbadmin2": "0.9.1-beta.6",
     "@socket.io/cluster-adapter": "^0.2.1",
     "@socket.io/sticky": "^1.0.1",
     "adm-zip": "0.5.10",

package/routes/common_lists.js

@@ -344,11 +344,7 @@ const getPageList = (rows, roles, req, { tagId, domId, showList } = {}) => {
       },
       {
         label: req.__("Edit"),
-        key: (r) =>
-          link(
-            `/pageedit/${!r.html_file ? "edit" : "edit-properties"}/${r.name}`,
-            req.__(!r.html_file ? "Edit" : "Edit properties")
-          ),
+        key: (r) => link(`/pageedit/edit/${r.name}`, req.__("Edit")),
       },
       !tagId
         ? {

package/routes/pageedit.js

@@ -9,7 +9,7 @@ const View = require("@saltcorn/data/models/view");
 const Field = require("@saltcorn/data/models/field");
 const Table = require("@saltcorn/data/models/table");
 const Page = require("@saltcorn/data/models/page");
-const { div, a } = require("@saltcorn/markup/tags");
+const { div, a, iframe, script } = require("@saltcorn/markup/tags");
 const { getState } = require("@saltcorn/data/db/state");
 const User = require("@saltcorn/data/models/user");
 const Workflow = require("@saltcorn/data/models/workflow");
@@ -41,6 +41,7 @@ const {
 const { getActionConfigFields } = require("@saltcorn/data/plugin-helper");
 const Library = require("@saltcorn/data/models/library");
 const path = require("path");
+const fsp = require("fs").promises;
 
 /**
  * @type {object}
@@ -431,6 +432,116 @@ router.post(
 );
 
 /**
+ * open the builder
+ * @param {*} req
+ * @param {*} res
+ * @param {*} page
+ */
+const getEditNormalPage = async (req, res, page) => {
+  // set fixed states in page directly for legacy builds
+  traverseSync(page.layout, {
+    view(s) {
+      if (s.state === "fixed" && !s.configuration) {
+        const fs = page.fixed_states[s.name];
+        if (fs) s.configuration = fs;
+      }
+    },
+  });
+  const options = await pageBuilderData(req, page);
+  const builderData = {
+    options,
+    context: page,
+    layout: page.layout,
+    mode: "page",
+    version_tag: db.connectObj.version_tag,
+  };
+  res.sendWrap(
+    req.__(`%s configuration`, page.name),
+    wrap(renderBuilder(builderData, req.csrfToken()), true, req, page)
+  );
+};
+
+/**
+ * open a file editor with an iframe preview
+ * @param {*} req
+ * @param {*} res
+ * @param {*} page
+ */
+const getEditPageWithHtmlFile = async (req, res, page) => {
+  const htmlFile = page.html_file;
+  const iframeId = "page_preview_iframe";
+  const updateBttnId = "addnUpdBtn";
+  const file = await File.findOne(htmlFile);
+  if (!file) {
+    req.flash("error", req.__("File not found"));
+    return res.redirect(`/pageedit`);
+  }
+  const editForm = new Form({
+    action: `/pageedit/edit/${encodeURIComponent(page.name)}`,
+    fields: [
+      {
+        name: "code",
+        form_name: "code",
+        label: "Code",
+        input_type: "code",
+        attributes: { mode: "text/html" },
+        validator(s) {
+          return true;
+        },
+      },
+    ],
+    values: {
+      code: await fsp.readFile(file.location, "utf8"),
+    },
+    onChange: `document.getElementById('${updateBttnId}').disabled = false;`,
+    additionalButtons: [
+      {
+        label: req.__("Update"),
+        id: updateBttnId,
+        class: "btn btn-primary",
+        onclick: `saveAndContinue(this, () => {
+          document.getElementById('${iframeId}').contentWindow.location.reload();
+          document.getElementById('${updateBttnId}').disabled = true;
+        })`,
+        disabled: true,
+      },
+    ],
+    submitLabel: req.__("Finish") + " »",
+  });
+  res.sendWrap(req.__("Edit %s", page.title), {
+    above: [
+      {
+        type: "card",
+        title: "Edit",
+        titleAjaxIndicator: true,
+        contents: [renderForm(editForm, req.csrfToken())],
+      },
+      {
+        type: "card",
+        title: "Preview",
+        contents: [
+          iframe({
+            id: iframeId,
+            src: `/files/serve/${encodeURIComponent(htmlFile)}`,
+          }),
+          script(`
+            const iframe = document.getElementById("${iframeId}");
+            iframe.onload = () => {
+              const _iframe = document.getElementById("${iframeId}");
+              if (_iframe.contentWindow.document.body) {
+                _iframe.width = _iframe.contentWindow.document.body.scrollWidth;
+                _iframe.height = _iframe.contentWindow.document.body.scrollHeight;
+              }
+            }`),
+        ],
+      },
+    ],
+  });
+};
+
+/**
+ * for normal pages, open the builder
+ * for pages with a fixed html file, open a file editor with an iframe preview
  * @name get/edit/:pagename
  * @function
  * @memberof module:routes/pageedit~pageeditRouter
@@ -446,27 +557,8 @@ router.get(
       req.flash("error", req.__(`Page %s not found`, pagename));
       res.redirect(`/pageedit`);
     } else {
-      // set fixed states in page directly for legacy builds
-      traverseSync(page.layout, {
-        view(s) {
-          if (s.state === "fixed" && !s.configuration) {
-            const fs = page.fixed_states[s.name];
-            if (fs) s.configuration = fs;
-          }
-        },
-      });
-      const options = await pageBuilderData(req, page);
-      const builderData = {
-        options,
-        context: page,
-        layout: page.layout,
-        mode: "page",
-        version_tag: db.connectObj.version_tag,
-      };
-      res.sendWrap(
-        req.__(`%s configuration`, page.name),
-        wrap(renderBuilder(builderData, req.csrfToken()), true, req, page)
-      );
+      if (!page.html_file) await getEditNormalPage(req, res, page);
+      else await getEditPageWithHtmlFile(req, res, page);
     }
   })
 );
@@ -495,13 +587,33 @@ router.post(
       await Page.update(page.id, {
         layout: decodeURIComponent(req.body.layout),
       });
-
       req.flash("success", req.__(`Page %s saved`, pagename));
       res.redirect(redirectTarget);
+    } else if (req.body.code) {
+      try {
+        if (!page.html_file) throw new Error(req.__("File not found"));
+        const file = await File.findOne(page.html_file);
+        if (!file) throw new Error(req.__("File not found"));
+        await fsp.writeFile(file.location, req.body.code);
+        if (!req.xhr) {
+          req.flash("success", req.__(`Page %s saved`, pagename));
+          res.redirect(redirectTarget);
+        } else res.json({ okay: true });
+      } catch (error) {
+        getState().log(2, `POST /edit/${pagename}: '${error.message}'`);
+        req.flash(
+          "error",
+          `${req.__("Error")}: ${error.message || req.__("An error occurred")}`
+        );
+        if (!req.xhr) res.redirect(redirectTarget);
+        else res.json({ error: error.message });
+      }
     } else {
+      getState().log(2, `POST /edit/${pagename}: '${req.body}'`);
       req.flash("error", req.__(`Error processing page`));
       res.redirect(redirectTarget);
     }
+    getState().log(5, `POST /edit/${pagename}: Success`);
   })
 );
 

package/tests/page.test.js

@@ -16,6 +16,7 @@ const Page = require("@saltcorn/data/models/page");
 const File = require("@saltcorn/data/models/file");
 const { existsSync } = require("fs");
 const { join } = require("path");
+const fs = require("fs");
 
 let htmlFile = null;
 
@@ -26,24 +27,20 @@ const prepHtmlFiles = async () => {
       db.getTenantSchema(),
       folder
     );
+    const html = `<html><head><title>Landing page</title></head><body><h1>${content}</h1></body></html>`;
     if (!existsSync(scFolder)) await File.new_folder(folder);
     if (!existsSync(join(scFolder, name))) {
-      return await File.from_contents(
-        name,
-        "text/html",
-        `<html><head><title>Landing page</title></head><body><h1>${content}</h1></body></html>`,
-        1,
-        1,
-        folder
-      );
+      return await File.from_contents(name, "text/html", html, 1, 1, folder);
     } else {
       const file = await File.from_file_on_disk(name, scFolder);
+      fs.writeFileSync(file.location, html);
       file.location = File.absPathToServePath(file.location);
       return file;
     }
   };
   htmlFile = await createFile("/", "fixed_page.html", "Land here");
   await createFile("/subfolder", "fixed_page2.html", "Or Land here");
+  await createFile("/", "test.html", "page with fixed html");
 };
 
 beforeAll(async () => {
@@ -135,6 +132,11 @@ describe("page create", () => {
 
   it("does not find the html file for staff or public", async () => {
     const app = await getApp({ disableCsrf: true });
+    await request(app)
+      .post(`/files/setrole/fixed_page.html`)
+      .set("Cookie", await getAdminLoginCookie())
+      .send("role=1")
+      .expect(toRedirect("/files?dir=."));
     const loginCookie = await getStaffLoginCookie();
     await request(app)
       .get("/page/new_page_with_html_file")
@@ -247,6 +249,33 @@ describe("pageedit", () => {
       .set("Cookie", loginCookie)
       .expect(toInclude("<script>builder.renderBuilder"));
   });
+  it("show editor with html file", async () => {
+    const app = await getApp({ disableCsrf: true });
+    const loginCookie = await getAdminLoginCookie();
+    await request(app)
+      .get("/pageedit/edit/page_with_html_file")
+      .set("Cookie", loginCookie)
+      .expect(toInclude(`<textarea mode="text/html"`));
+  });
+  it("edit editor with html file", async () => {
+    const app = await getApp({ disableCsrf: true });
+    const loginCookie = await getAdminLoginCookie();
+    const newHtml =
+      "<html><head><title>title</title></head><body><h1>new html</h1></body</html>";
+    await request(app)
+      .get("/page/page_with_html_file")
+      .set("Cookie", loginCookie)
+      .expect(toInclude("page with fixed html"));
+    await request(app)
+      .post("/pageedit/edit/page_with_html_file")
+      .set("Cookie", loginCookie)
+      .send("code=" + encodeURIComponent(newHtml))
+      .expect(toRedirect("/pageedit"));
+    await request(app)
+      .get("/page/page_with_html_file")
+      .set("Cookie", loginCookie)
+      .expect(toInclude("new html"));
+  });
 
   it("sets root page", async () => {
     const app = await getApp({ disableCsrf: true });