@saltcorn/server 0.9.6-beta.2 → 0.9.6-beta.20

package/public/saltcorn-builder.css

@@ -509,3 +509,26 @@ div.builder-config-field {
   border: 1px solid black;
   margin-top: 2px;
 }
+
+div.componets-and-library-accordion {
+  padding-right: 0 !important;
+}
+.builder-left-shrunk .componets-and-library-accordion {
+  min-height: 0 !important;
+  padding-right: 0;
+}
+.toolbox-card .builder-layers {
+  min-height: 200px;
+  overflow-y: auto;
+  max-height: max-content !important;
+}
+.toolbox-card:nth-child(2) {
+  margin-bottom: 0px;
+}
+#builder-main-canvas {
+  height: calc(100dvh - 50px) !important;
+  min-height: 600px;
+}
+#builder-main-canvas.h-100 {
+  height: 100% !important;
+}

package/public/saltcorn-common.js

@@ -8,6 +8,23 @@ jQuery.fn.swapWith = function (to) {
   });
 };
 
+function monospace_block_click(e) {
+  let e1 = $(e).next("pre");
+  let mine = $(e).html();
+  $(e).html($(e1).html());
+  $(e1).html(mine);
+}
+
+function copy_monospace_block(e) {
+  let e1 = $(e).next("pre");
+  let e2 = $(e1).next("pre");
+  if (!e2.length) return navigator.clipboard.writeText($(el).text());
+  const e1t = e1.text();
+  const e2t = e2.text();
+  if (e1t.length > e2t.length) return navigator.clipboard.writeText(e1t);
+  else return navigator.clipboard.writeText(e2t);
+}
+
 function setScreenInfoCookie() {
   document.cookie = `_sc_screen_info_=${JSON.stringify({
     width: window.screen.width,
@@ -179,14 +196,19 @@ function apply_showif() {
             is_or ? "&_or_field=" + k : ""
           }`;
     };
-    const qss = Object.entries(dynwhere.whereParsed).map(kvToQs);
+    const qss = Object.entries(dynwhere.whereParsed).map((kv) => kvToQs(kv));
+    if (dynwhere.existingValue) {
+      qss.push(`id=${dynwhere.existingValue}`);
+      qss.push(`_or_field=id`);
+    }
     if (dynwhere.dereference) {
       if (Array.isArray(dynwhere.dereference))
         qss.push(...dynwhere.dereference.map((d) => `dereference=${d}`));
       else qss.push(`dereference=${dynwhere.dereference}`);
     }
     const qs = qss.join("&");
-    var current = e.attr("data-selected");
+    let current = e.attr("data-selected");
+    if (current === "null") current = null;
     e.change(function (ec) {
       e.attr("data-selected", ec.target.value);
     });
@@ -195,12 +217,14 @@ function apply_showif() {
     if (currentOptionsSet === qs) return;
 
     const activate = (success, qs) => {
+      //re-fetch current, because it may have changed
+      let current = e.attr("data-selected");
+      if (current === "null") current = null;
       if (e.prop("data-fetch-options-current-set") === qs) return;
       e.empty();
       e.prop("data-fetch-options-current-set", qs);
       const toAppend = [];
-      if (!dynwhere.required)
-        toAppend.push({ label: dynwhere.neutral_label || "", value: "" });
+
       let currentDataOption = undefined;
       const dataOptions = [];
       //console.log(success);
@@ -231,13 +255,24 @@ function apply_showif() {
           ? 1
           : -1
       );
+      if (!dynwhere.required)
+        toAppend.unshift({ label: dynwhere.neutral_label || "", value: "" });
+      if (dynwhere.required && dynwhere.placeholder)
+        toAppend.unshift({
+          disabled: true,
+          label: dynwhere.placeholder,
+          value: "",
+          selected: !current,
+        });
       e.html(
         toAppend
           .map(
-            ({ label, value, selected }) =>
+            ({ label, value, selected, disabled }) =>
               `<option${selected ? ` selected` : ""}${
-                typeof value !== "undefined" ? ` value="${value}"` : ""
-              }>${label || ""}</option>`
+                disabled ? ` disabled` : ""
+              }${typeof value !== "undefined" ? ` value="${value}"` : ""}>${
+                label || ""
+              }</option>`
           )
           .join("")
       );
@@ -428,7 +463,7 @@ function get_form_record(e_in, select_labels) {
 
   const e = e_in.viewname
     ? $(`form[data-viewname="${e_in.viewname}"]`)
-    : e_in.closest(".form-namespace");
+    : $(e_in).closest(".form-namespace");
 
   const form = $(e).closest("form");
 
@@ -462,6 +497,38 @@ function get_form_record(e_in, select_labels) {
       rec[name] = f(rec[name], $this);
     }
   });
+
+  const joinFieldsStr =
+    typeof e_in !== "string" && $(e_in).attr("data-show-if-joinfields");
+  if (joinFieldsStr) {
+    const joinFields = JSON.parse(decodeURIComponent(joinFieldsStr));
+
+    const joinVals = $(e_in).prop("data-join-values");
+    const kvals = $(e_in).prop("data-join-key-values") || {};
+    let differentKeys = false;
+    for (const { ref } of joinFields) {
+      if (rec[ref] != kvals[ref]) differentKeys = true;
+    }
+    if (!joinVals || differentKeys) {
+      $(e_in).prop("data-join-values", {});
+      const keyVals = {};
+      for (const { ref, target, refTable } of joinFields) {
+        keyVals[ref] = rec[ref];
+        $.ajax(`/api/${refTable}?id=${rec[ref]}`, {
+          success: (val) => {
+            const jvs = $(e_in).prop("data-join-values") || {};
+
+            jvs[ref] = val.success[0];
+            $(e_in).prop("data-join-values", jvs);
+            apply_showif();
+          },
+        });
+      }
+      $(e_in).prop("data-join-key-values", keyVals);
+    } else if (joinFieldsStr) {
+      Object.assign(rec, joinVals);
+    }
+  }
   return rec;
 }
 function showIfFormulaInputs(e, fml) {
@@ -588,6 +655,138 @@ function escapeHtml(text) {
 function reload_on_init() {
   localStorage.setItem("reload_on_init", true);
 }
+
+function doMobileTransforms() {
+  const replaceAttr = (el, attr, web, mobile) => {
+    const jThis = $(el);
+    const skip = jThis.attr("skip-mobile-adjust");
+    if (!skip) {
+      const attrVal = jThis.attr(attr);
+      if (attrVal?.includes(web)) {
+        jThis.attr(attr, attrVal.replace(web, mobile));
+      }
+    }
+  };
+
+  const replacers = {
+    href: [
+      {
+        web: "javascript:history.back()",
+        mobile: "javascript:parent.goBack()",
+      },
+      {
+        web: "javascript:ajax_modal",
+        mobile: "javascript:mobile_modal",
+      },
+    ],
+    onclick: [
+      {
+        web: "history.back()",
+        mobile: "parent.goBack()",
+      },
+      {
+        web: "ajax_modal",
+        mobile: "mobile_modal",
+      },
+      {
+        web: "ajax_post_",
+        mobile: "local_post_",
+      },
+    ],
+  };
+
+  $("a").each(function () {
+    let path = $(this).attr("href") || "";
+    if (path.startsWith("http")) {
+      const url = new URL(path);
+      path = `${url.pathname}${url.search}`;
+    }
+    if (path.startsWith("/view/") || path.startsWith("/page/")) {
+      const jThis = $(this);
+      const skip = jThis.attr("skip-mobile-adjust");
+      if (!skip) {
+        jThis.removeAttr("href");
+        jThis.attr("onclick", `execLink('${path}')`);
+        if (jThis.find("i,img").length === 0 && !jThis.css("color")) {
+          jThis.css(
+            "color",
+            "rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1))"
+          );
+        }
+      }
+    } else if (path.includes("/files/serve/")) {
+      const tokens = path.split("/files/serve/");
+      if (tokens.length > 1)
+        $(this).attr("href", `javascript:openFile('${tokens[1]}')`);
+    } else if (path.includes("/files/download/")) {
+      const tokens = path.split("/files/download/");
+      if (tokens.length > 1)
+        $(this).attr(
+          "href",
+          `javascript:notifyAlert('File donwloads are not supported.')`
+        );
+    } else {
+      for (const [k, v] of Object.entries(replacers)) {
+        for ({ web, mobile } of v) replaceAttr(this, k, web, mobile);
+      }
+    }
+  });
+
+  $("button").each(function () {
+    for (const [k, v] of Object.entries({ onclick: replacers.onclick })) {
+      for ({ web, mobile } of v) replaceAttr(this, k, v.web, v.mobile);
+    }
+  });
+
+  $("[mobile-img-path]").each(async function () {
+    if (parent.loadEncodedFile) {
+      const fileId = $(this).attr("mobile-img-path");
+      const base64Encoded = await parent.loadEncodedFile(fileId);
+      this.src = base64Encoded;
+    }
+  });
+
+  $("[mobile-bg-img-path]").each(async function () {
+    if (parent.loadEncodedFile) {
+      const fileId = $(this).attr("mobile-bg-img-path");
+      if (fileId) {
+        const base64Encoded = await parent.loadEncodedFile(fileId);
+        this.style.backgroundImage = `url("${base64Encoded}")`;
+      }
+    }
+  });
+
+  $("img:not([mobile-img-path]):not([mobile-bg-img-path])").each(
+    async function () {
+      if (parent.loadEncodedFile) {
+        const jThis = $(this);
+        const src = jThis.attr("src");
+        if (src?.includes("/files/serve/")) {
+          const tokens = src.split("/files/serve/");
+          if (tokens.length > 1) {
+            const fileId = tokens[1];
+            const base64Encoded = await parent.loadEncodedFile(fileId);
+            this.src = base64Encoded;
+          }
+        } else if (src?.includes("/files/resize/")) {
+          const tokens = src.split("/files/resize/");
+          if (tokens.length > 1) {
+            const idAndDims = tokens[1].split("/");
+            const width = idAndDims[0];
+            const height = idAndDims.length > 2 ? idAndDims[1] : undefined;
+            const fileId = idAndDims[idAndDims.length - 1];
+            const style = { width: `${width || 50}px` };
+            if (height > 0) style.height = `${height}px`;
+            const base64Encoded = await parent.loadEncodedFile(fileId);
+            this.src = base64Encoded;
+            jThis.css(style);
+          }
+        }
+      }
+    }
+  );
+}
+
 function initialize_page() {
   if (window._sc_locale && window.dayjs) dayjs.locale(window._sc_locale);
   const isNode = getIsNode();
@@ -762,58 +961,7 @@ function initialize_page() {
       </form>`
       );
   });
-  if (!isNode) {
-    $("[mobile-img-path]").each(async function () {
-      if (parent.loadEncodedFile) {
-        const fileId = $(this).attr("mobile-img-path");
-        const base64Encoded = await parent.loadEncodedFile(fileId);
-        this.src = base64Encoded;
-      }
-    });
-
-    $("[mobile-bg-img-path]").each(async function () {
-      if (parent.loadEncodedFile) {
-        const fileId = $(this).attr("mobile-bg-img-path");
-        if (fileId) {
-          const base64Encoded = await parent.loadEncodedFile(fileId);
-          this.style.backgroundImage = `url("${base64Encoded}")`;
-        }
-      }
-    });
-
-    $("a").each(function () {
-      let path = $(this).attr("href") || "";
-      if (path.startsWith("http")) {
-        const url = new URL(path);
-        path = `${url.pathname}${url.search}`;
-      }
-      if (path.startsWith("/view/")) {
-        const jThis = $(this);
-        const skip = jThis.attr("skip-mobile-adjust");
-        if (!skip) {
-          jThis.attr("href", `javascript:execLink('${path}')`);
-          if (jThis.find("i,img").length === 0 && !jThis.css("color")) {
-            jThis.css(
-              "color",
-              "rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1))"
-            );
-          }
-        }
-      }
-    });
-
-    $("img").each(async function () {
-      if (parent.loadEncodedFile) {
-        const jThis = $(this);
-        const src = jThis.attr("src");
-        if (src?.startsWith("/files/serve/")) {
-          const fileId = src.replace("/files/serve/", "");
-          const base64Encoded = await parent.loadEncodedFile(fileId);
-          this.src = base64Encoded;
-        }
-      }
-    });
-  }
+  if (!isNode) doMobileTransforms();
   function setExplainer(that) {
     var id = $(that).attr("id") + "_explainer";
 
@@ -1219,7 +1367,13 @@ function restore_old_button(btnId) {
   btn.removeData("old-text");
 }
 
-async function common_done(res, viewname, isWeb = true) {
+async function common_done(res, viewnameOrElem, isWeb = true) {
+  const viewname =
+    typeof viewnameOrElem === "string"
+      ? viewnameOrElem
+      : $(viewnameOrElem)
+          .closest("[data-sc-embed-viewname]")
+          .attr("data-sc-embed-viewname");
   if (window._sc_loglevel > 4)
     console.log("ajax result directives", viewname, res);
   const handle = async (element, fn) => {
@@ -1231,30 +1385,33 @@ async function common_done(res, viewname, isWeb = true) {
     if (res.row && res.field_names) {
       const f = new Function(`viewname, row, {${res.field_names}}`, s);
       const evalres = await f(viewname, res.row, res.row);
-      if (evalres) await common_done(evalres, viewname, isWeb);
+      if (evalres) await common_done(evalres, viewnameOrElem, isWeb);
     } else if (res.row) {
       const f = new Function(`viewname, row`, s);
       const evalres = await f(viewname, res.row);
-      if (evalres) await common_done(evalres, viewname, isWeb);
+      if (evalres) await common_done(evalres, viewnameOrElem, isWeb);
     } else {
       const f = new Function(`viewname`, s);
       const evalres = await f(viewname);
-      if (evalres) await common_done(evalres, viewname, isWeb);
+      if (evalres) await common_done(evalres, viewnameOrElem, isWeb);
     }
   };
   if (res.notify) await handle(res.notify, notifyAlert);
-  if (res.error)
+  if (res.error) {
+    if (window._sc_loglevel > 4) console.trace("error response", res.error);
     await handle(res.error, (text) =>
       notifyAlert({ type: "danger", text: text })
     );
+  }
   if (res.notify_success)
     await handle(res.notify_success, (text) =>
       notifyAlert({ type: "success", text: text })
     );
   if (res.set_fields && (viewname || res.set_fields._viewname)) {
-    const form = $(
-      `form[data-viewname="${res.set_fields._viewname || viewname}"]`
-    );
+    const form =
+      typeof viewnameOrElem === "string" || res.set_fields._viewname
+        ? $(`form[data-viewname="${res.set_fields._viewname || viewname}"]`)
+        : $(viewnameOrElem).closest("form[data-viewname]");
     if (form.length === 0 && set_state_fields) {
       // assume this is a filter
       set_state_fields(
@@ -1279,9 +1436,14 @@ async function common_done(res, viewname, isWeb = true) {
         if (input.attr("type") === "checkbox")
           input.prop("checked", res.set_fields[k]);
         else input.val(res.set_fields[k]);
+        if (input.attr("data-selected")) {
+          input.attr("data-selected", res.set_fields[k]);
+        }
+
         input.trigger("set_form_field");
       });
     }
+    form.trigger("change");
   }
 
   if (res.download) {
@@ -1311,15 +1473,15 @@ async function common_done(res, viewname, isWeb = true) {
     });
   }
   if (res.eval_js) await handle(res.eval_js, eval_it);
-
-  if (res.goto && !isWeb)
-    // TODO ch
-    notifyAlert({
-      type: "danger",
-      text: "Goto is not supported in a mobile deployment.",
-    });
   else if (res.goto) {
-    if (res.target === "_blank") window.open(res.goto, "_blank").focus();
+    if (!isWeb) {
+      const next = new URL(res.goto, "http://localhost");
+      const pathname = next.pathname;
+      if (pathname.startsWith("/view/") || pathname.startsWith("/page/")) {
+        const route = `get${pathname}${next.search ? "?" + next.search : ""}`;
+        await parent.handleRoute(route);
+      } else parent.cordova.InAppBrowser.open(res.goto, "_system");
+    } else if (res.target === "_blank") window.open(res.goto, "_blank").focus();
     else {
       const prev = new URL(window.location.href);
       const next = new URL(res.goto, prev.origin);
@@ -1440,10 +1602,10 @@ const columnSummary = (col) => {
 };
 
 function submitWithEmptyAction(form) {
-  var formAction = form.action;
-  form.action = "javascript:void(0)";
+  var formAction = form.getAttribute("action");
+  form.setAttribute("action", "javascript:void(0)");
   form.submit();
-  form.action = formAction;
+  form.setAttribute("action", formAction);
 }
 
 function unique_field_from_rows(
@@ -1667,7 +1829,13 @@ function close_saltcorn_modal() {
 function reload_embedded_view(viewname, new_query_string) {
   const isNode = getIsNode();
   const updater = ($e, res) => {
-    $e.html(res);
+    const localState = $e.attr("data-sc-local-state");
+    const parent = $e.parent();
+    $e.replaceWith(res);
+    if (localState && !new_query_string) {
+      const newE = parent.find(`[data-sc-embed-viewname="${viewname}"]`);
+      newE.attr("data-sc-local-state", localState);
+    }
     initialize_page();
   };
   if (window._sc_loglevel > 4)

package/public/saltcorn.css

@@ -506,3 +506,83 @@ tr[onclick] {
 .modal-header {
   justify-content: space-between;
 }
+
+ul.katetree {
+  list-style-type: none;
+}
+
+ul.katetree details ul {
+  list-style-type: none;
+}
+
+pre.monospace-block {
+  font-family: monospace;
+  color: unset;
+  background: unset;
+  padding: unset;
+  border-radius: unset;
+}
+
+.d-none-prefer {
+  display: none;
+}
+
+button.monospace-copy-btn:has(+ pre.monospace-block:hover) {
+  display: block !important ;
+}
+button.monospace-copy-btn:hover {
+  display: block !important ;
+}
+button.monospace-copy-btn {
+  position: absolute;
+}
+
+#page-inner-content.sbadmin2-theme .table.table-card-rows {
+  border-spacing: 0px 8px;
+  border-collapse: separate;
+}
+#page-inner-content.sbadmin2-theme .table.table-card-rows tbody {
+  transform: translateY(8px);
+}
+#page-inner-content.sbadmin2-theme .table.table-card-rows tr {
+  border-radius: 6px;
+}
+#page-inner-content.sbadmin2-theme
+  .table-hover.table-card-rows
+  > tbody
+  > tr:hover
+  > * {
+  --tblr-table-bg-state: transparent !important;
+  --bs-table-accent-bg: transparent !important;
+  color: var(--bs-table-hover-color);
+  background-color: var(--bs-table-hover-bg);
+}
+#page-inner-content.sbadmin2-theme .table.table-card-rows thead th {
+  background-color: #eaecf4;
+  border-block: 1px solid #d3d3d3 !important;
+  padding: 18px 15px;
+  font-weight: 600;
+}
+#page-inner-content.sbadmin2-theme .table.table-card-rows thead th:first-child {
+  border-left: 1px solid #d3d3d3 !important;
+  border-radius: 6px 0 0 6px;
+}
+#page-inner-content.sbadmin2-theme .table.table-card-rows thead th:last-child {
+  border-right: 1px #d3d3d3 !important;
+  border-radius: 0 6px 6px 0;
+}
+#page-inner-content.sbadmin2-theme .table.table-card-rows tbody td {
+  border-block: 1px solid #e3e6f0 !important;
+  position: relative;
+  z-index: 11;
+  padding: 15px 15px;
+  background-color: #fff;
+}
+#page-inner-content.sbadmin2-theme .table.table-card-rows tbody td:first-child {
+  border-left: 1px solid #e3e6f0 !important;
+  border-radius: 6px 0 0 6px;
+}
+#page-inner-content.sbadmin2-theme .table.table-card-rows tbody td:last-child {
+  border-right: 1px #e3e6f0 !important;
+  border-radius: 0 6px 6px 0;
+}

package/public/saltcorn.js

@@ -236,7 +236,13 @@ function reset_spinners() {
   });
 }
 
-function view_post(viewname, route, data, onDone, sendState) {
+function view_post(viewnameOrElem, route, data, onDone, sendState) {
+  const viewname =
+    typeof viewnameOrElem === "string"
+      ? viewnameOrElem
+      : $(viewnameOrElem)
+          .closest("[data-sc-embed-viewname]")
+          .attr("data-sc-embed-viewname");
   const query = sendState
     ? `?${new URL(get_current_state_url()).searchParams.toString()}`
     : "";
@@ -254,7 +260,7 @@ function view_post(viewname, route, data, onDone, sendState) {
   })
     .done(function (res) {
       if (onDone) onDone(res);
-      ajax_done(res, viewname);
+      ajax_done(res, viewnameOrElem);
       reset_spinners();
     })
     .fail(function (res) {
@@ -1028,6 +1034,84 @@ function execLink(path) {
   window.location.href = `${location.origin}${path}`;
 }
 
+let defferedPrompt;
+window.addEventListener("beforeinstallprompt", (e) => {
+  e.preventDefault();
+  defferedPrompt = e;
+});
+
+function isAndroidMobile() {
+  const ua = navigator.userAgent || navigator.vendor || window.opera;
+  return /android/i.test(ua) && /mobile/i.test(ua);
+}
+
+function validatePWAManifest(manifest) {
+  const errors = [];
+  if (!manifest) errors.push("The manifest.json file is missing. ");
+  else {
+    if (!manifest.icons || manifest.icons.length === 0)
+      errors.push("At least one icon is required");
+    else if (
+      manifest.icons.length > 0 &&
+      !manifest.icons.some((icon) => {
+        const sizes = icon.sizes.split("x");
+        const x = parseInt(sizes[0]);
+        const y = parseInt(sizes[1]);
+        return x === y && x >= 144;
+      })
+    ) {
+      errors.push(
+        "At least one square icon of size 144x144 or larger is required"
+      );
+    }
+    if (isAndroidMobile() && manifest.display === "browser") {
+      errors.push(
+        "The display property 'browser' may not work on mobile devices"
+      );
+    }
+  }
+  return errors;
+}
+
+function supportsBeforeInstallPrompt() {
+  return "onbeforeinstallprompt" in window;
+}
+
+function installPWA() {
+  if (defferedPrompt) defferedPrompt.prompt();
+  else if (!supportsBeforeInstallPrompt()) {
+    notifyAlert({
+      type: "danger",
+      text:
+        "It looks like your browser doesn’t support this feature. " +
+        "Please try the standard installation method provided by your browser, or switch to a different browser.",
+    });
+  } else {
+    const manifestUrl = `${window.location.origin}/notifications/manifest.json`;
+    notifyAlert({
+      type: "danger",
+      text:
+        "Unable to install the app. " +
+        "Please check if the app is already installed or " +
+        `inspect your manifest.json <a href="${manifestUrl}?pretty=true" target="_blank">here</a>`,
+    });
+    $.ajax(manifestUrl, {
+      success: (res) => {
+        const errors = validatePWAManifest(res);
+        if (errors.length > 0)
+          notifyAlert({
+            type: "warning",
+            text: `${errors.join(", ")}`,
+          });
+      },
+      error: (res) => {
+        console.log("Error fetching manifest.json");
+        console.log(res);
+      },
+    });
+  }
+}
+
 (() => {
   const e = document.querySelector("[data-sidebar-toggler]");
   let closed = localStorage.getItem("sidebarClosed") === "true";

package/restart_watcher.js

@@ -23,6 +23,7 @@ const relevantPackages = [
   "saltcorn-admin-models",
   "saltcorn-markup",
   "saltcorn-sbadmin2",
+  "saltcorn-types",
   "server",
   "sqlite",
   "filemanager",