@saltcorn/server 0.8.0-beta.4 → 0.8.1-beta.0

package/public/diagram_utils.js

@@ -9,6 +9,8 @@ let tagFilterEnabled = false;
 
 let activePopper = null;
 
+const maxPreviewHeight = "350px";
+
 function initMouseOver() {
   cy.on("mouseover", "node", (event) => {
     const node = event.target;
@@ -41,7 +43,7 @@ function initMouseOver() {
 function buildCard(node) {
   const { type, label } = node.data();
   const html = `
-    <div class="card" style="width: 18rem;">
+    <div class="card" style="width: 20rem;">
       <div class="card-header">
         <h5 class="card-title">${type}</h5>
         <h6 class="card-subtitle text-muted">${label}</h6>
@@ -49,7 +51,9 @@ function buildCard(node) {
       <div class="card-body">
         ${buildTagBadges(node)}
         ${buildCardBody(node)}
-        ${type === "page" || type === "view" ? buildPreviewDiv(node) : ""}
+        <div>
+          ${type === "page" || type === "view" ? buildPreviewDiv(node) : ""}
+        </div>
         ${type === "page" || type === "view" ? buildMinRoleSelect(node) : ""}
       </div>
     </div>
@@ -70,26 +74,35 @@ function buildPreview(node) {
       "CSRF-Token": _sc_globalCsrf,
     },
     success: (res) => {
-      $(`#${previewId}`).html(`
+      $(`[id='${previewId}']`).html(`
         <div 
           id="preview_wrapper"
-          style="min-height: 70px;"
+          style="min-height: 70px; pointer-events: none;"
         > 
           ${res}
         </div></div></div>`);
-      const previewDiv = $(`#${previewId}`);
+      const previewDiv = $(`[id='${previewId}']`);
       const pos = previewDiv.position();
       const cssBase = `
+        max-height: ${maxPreviewHeight};
+        pointer-events: none;
         position: absolute; top: ${pos.top}px; left: ${pos.left}px;
         width: ${previewDiv.width()}px; height: ${previewDiv.height() + 12}px;`;
-      $(`#${previewId}`).after(`
-        <div 
+      const previewLabelId = `${previewId}_label`;
+      const previewOverlayId = `${previewId}_overlay`;
+      $(`[id='${previewLabelId}']`).remove();
+      $(`[id='${previewOverlayId}']`).remove();
+      $(`[id='${previewId}']`).after(`
+        <div
+          id="${previewOverlayId}" 
           style="${cssBase}
             background-color: black; opacity: 0.1;
             z-index: 10;"
         >
         </div>
-        <div style="${cssBase} opacity: 0.5;">
+        <div
+          id="${previewLabelId}" 
+          style="${cssBase} opacity: 0.5;">
           <h2 class="preview-text fw-bold text-danger">
             Preview
           </h2>
@@ -105,7 +118,7 @@ function buildPreview(node) {
 function buildPreviewDiv(node) {
   const previewId = `preview_${node.id()}`;
   return `
-    <div class="my-2" id="${previewId}" style="min-height: 70px;">
+    <div class="my-2" id="${previewId}" style="min-height: 70px; max-height: ${maxPreviewHeight}; overflow: scroll;">
       <div style="opacity: 0.5;">
         <h2>
           <span class="fw-bold text-danger">Preview</span>

package/public/saltcorn-common.js

@@ -36,11 +36,11 @@ function add_repeater(nm) {
   newe.appendTo($("div.repeats-" + nm));
 }
 
-const _apply_showif_plugins = []
+const _apply_showif_plugins = [];
 
-const add_apply_showif_plugin = p => {
-  _apply_showif_plugins.push(p)
-}
+const add_apply_showif_plugin = (p) => {
+  _apply_showif_plugins.push(p);
+};
 function apply_showif() {
   $("[data-show-if]").each(function (ix, element) {
     var e = $(element);
@@ -92,7 +92,8 @@ function apply_showif() {
       } else {
         e.append(
           $(
-            `<option ${`${current}` === `${o.value}` ? "selected" : ""
+            `<option ${
+              `${current}` === `${o.value}` ? "selected" : ""
             } value="${o.value}">${o.label}</option>`
           )
         );
@@ -117,76 +118,127 @@ function apply_showif() {
       e.attr("data-selected", ec.target.value);
     });
 
-    const currentOptionsSet = e.prop('data-fetch-options-current-set')
+    const currentOptionsSet = e.prop("data-fetch-options-current-set");
     if (currentOptionsSet === qs) return;
 
     const activate = (success, qs) => {
       e.empty();
-      e.prop('data-fetch-options-current-set', qs)
+      e.prop("data-fetch-options-current-set", qs);
       if (!dynwhere.required) e.append($(`<option></option>`));
       let currentDataOption = undefined;
-      const dataOptions = []
+      const dataOptions = [];
       success.forEach((r) => {
         const label = dynwhere.label_formula
           ? new Function(
-            `{${Object.keys(r).join(",")}}`,
-            "return " + dynwhere.label_formula
-          )(r)
-          : r[dynwhere.summary_field]
-        const value = r[dynwhere.refname]
-        const selected = `${current}` === `${r[dynwhere.refname]}`
+              `{${Object.keys(r).join(",")}}`,
+              "return " + dynwhere.label_formula
+            )(r)
+          : r[dynwhere.summary_field];
+        const value = r[dynwhere.refname];
+        const selected = `${current}` === `${r[dynwhere.refname]}`;
         dataOptions.push({ text: label, value });
         if (selected) currentDataOption = value;
-        const html = `<option ${selected ? "selected" : ""
-          } value="${value}">${label}</option>`
-        e.append(
-          $(html)
-        );
+        const html = `<option ${
+          selected ? "selected" : ""
+        } value="${value}">${label}</option>`;
+        e.append($(html));
       });
-      element.dispatchEvent(new Event('RefreshSelectOptions'))
+      element.dispatchEvent(new Event("RefreshSelectOptions"));
       if (e.hasClass("selectized") && $().selectize) {
         e.selectize()[0].selectize.clearOptions();
         e.selectize()[0].selectize.addOption(dataOptions);
         if (typeof currentDataOption !== "undefined")
           e.selectize()[0].selectize.setValue(currentDataOption);
-
       }
-    }
+    };
 
-    const cache = e.prop('data-fetch-options-cache') || {}
+    const cache = e.prop("data-fetch-options-cache") || {};
     if (cache[qs]) {
-      activate(cache[qs], qs)
+      activate(cache[qs], qs);
     } else
       $.ajax(`/api/${dynwhere.table}?${qs}`).then((resp) => {
         if (resp.success) {
-          activate(resp.success, qs)
-          const cacheNow = e.prop('data-fetch-options-cache') || {}
-          e.prop('data-fetch-options-cache', { ...cacheNow, [qs]: resp.success })
+          activate(resp.success, qs);
+          const cacheNow = e.prop("data-fetch-options-cache") || {};
+          e.prop("data-fetch-options-cache", {
+            ...cacheNow,
+            [qs]: resp.success,
+          });
         }
       });
   });
 
   $("[data-source-url]").each(function (ix, element) {
     const e = $(element);
-    const rec = get_form_record(e);
+    const rec0 = get_form_record(e);
+
+    const relevantFieldsStr = e.attr("data-relevant-fields");
+    let rec;
+    if (relevantFieldsStr) {
+      rec = {};
+      relevantFieldsStr.split(",").forEach((k) => {
+        rec[k] = rec0[k];
+      });
+    } else rec = rec0;
+    const recS = JSON.stringify(rec);
+
+    const shown = e.prop("data-source-url-current");
+    if (shown === recS) return;
+
+    const cache = e.prop("data-source-url-cache") || {};
+
+    const activate_onchange_coldef = () => {
+      e.closest(".form-namespace")
+        .find("input,select, textarea")
+        .on("change", (ec) => {
+          const $ec = $(ec.target);
+          const k = $ec.attr("name");
+          if (!k || k === "_columndef") return;
+          const v = ec.target.value;
+          const $def = e
+            .closest(".form-namespace")
+            .find("input[name=_columndef]");
+          const def = JSON.parse($def.val());
+          def[k] = v;
+          $def.val(JSON.stringify(def));
+        });
+    };
+
+    if (typeof cache[recS] !== "undefined") {
+      e.html(cache[recS]);
+      activate_onchange_coldef();
+      return;
+    }
     ajax_post_json(e.attr("data-source-url"), rec, {
       success: (data) => {
         e.html(data);
+        const cacheNow = e.prop("data-source-url-cache") || {};
+        e.prop("data-source-url-cache", {
+          ...cacheNow,
+          [recS]: data,
+        });
+        e.prop("data-source-url-current", recS);
+        activate_onchange_coldef();
       },
       error: (err) => {
         console.error(err);
+        const cacheNow = e.prop("data-source-url-cache") || {};
+        e.prop("data-source-url-cache", {
+          ...cacheNow,
+          [recS]: "",
+        });
         e.html("");
       },
     });
   });
-  _apply_showif_plugins.forEach(p => p())
+  _apply_showif_plugins.forEach((p) => p());
 }
 
 function splitTargetMatch(elemValue, target, keySpec) {
   if (!elemValue) return false;
-  const [fld, keySpec1] = keySpec.split("|_")
-  const [sep, pos] = keySpec1.split("_")
-  const elemValueShort = elemValue.split(sep)[pos]
+  const [fld, keySpec1] = keySpec.split("|_");
+  const [sep, pos] = keySpec1.split("_");
+  const elemValueShort = elemValue.split(sep)[pos];
   return elemValueShort === target;
 }
 
@@ -195,7 +247,7 @@ function get_form_record(e, select_labels) {
   e.closest(".form-namespace")
     .find("input[name],select[name]")
     .each(function () {
-      const name = $(this).attr("data-fieldname") || $(this).attr("name")
+      const name = $(this).attr("data-fieldname") || $(this).attr("name");
       if (select_labels && $(this).prop("tagName").toLowerCase() === "select")
         rec[name] = $(this).find("option:selected").text();
       else if ($(this).prop("type") === "checkbox")
@@ -508,14 +560,16 @@ function notifyAlert(note, spin) {
   }
 
   $("#alerts-area")
-    .append(`<div class="alert alert-${type} alert-dismissible fade show ${spin ? "d-flex align-items-center" : ""
-      }" role="alert">
+    .append(`<div class="alert alert-${type} alert-dismissible fade show ${
+    spin ? "d-flex align-items-center" : ""
+  }" role="alert">
   ${txt}
-  ${spin
-        ? `<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>`
-        : `<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
+  ${
+    spin
+      ? `<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>`
+      : `<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
   </button>`
-      }
+  }
 </div>`);
 }
 
@@ -532,8 +586,9 @@ function common_done(res, isWeb = true) {
     (isWeb ? location : parent.location).reload(); //TODO notify to cookie if reload or goto
   }
   if (res.download) {
-    const dataurl = `data:${res.download.mimetype || "application/octet-stream"
-      };base64,${res.download.blob}`;
+    const dataurl = `data:${
+      res.download.mimetype || "application/octet-stream"
+    };base64,${res.download.blob}`;
     fetch(dataurl)
       .then((res) => res.blob())
       .then((blob) => {
@@ -553,15 +608,19 @@ function common_done(res, isWeb = true) {
   else if (res.goto) {
     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)
+      const prev = new URL(window.location.href);
+      const next = new URL(res.goto, prev.origin);
       window.location.href = res.goto;
-      if (prev.origin === next.origin && prev.pathname === next.pathname && next.hash !== prev.hash)
-        location.reload()
+      if (
+        prev.origin === next.origin &&
+        prev.pathname === next.pathname &&
+        next.hash !== prev.hash
+      )
+        location.reload();
     }
   }
   if (res.popup) {
-    ajax_modal(res.popup)
+    ajax_modal(res.popup);
   }
 }
 
@@ -572,7 +631,9 @@ const repeaterCopyValuesToForm = (form, editor, noTriggerChange) => {
     const $e = form.find(`input[name="${k}_${ix}"]`);
     if ($e.length) $e.val(v);
     else {
-      const $ne = $(`<input type="hidden" data-repeater-ix="${ix}" name="${k}_${ix}"></input>`);
+      const $ne = $(
+        `<input type="hidden" data-repeater-ix="${ix}" name="${k}_${ix}"></input>`
+      );
       $ne.val(v);
       form.append($ne);
     }
@@ -700,9 +761,9 @@ function room_older(viewname, room_id, btn) {
 function init_room(viewname, room_id) {
   const socket = parent?.config?.server_path
     ? io(parent.config.server_path, {
-      query: `jwt=${localStorage.getItem("auth_jwt")}`,
-      transports: ["websocket"],
-    })
+        query: `jwt=${localStorage.getItem("auth_jwt")}`,
+        transports: ["websocket"],
+      })
     : io({ transports: ["websocket"] });
 
   socket.emit("join_room", [viewname, room_id]);
@@ -735,32 +796,31 @@ function cancel_form(form) {
 }
 
 function split_paste_handler(e) {
-  let clipboardData = e.clipboardData || window.clipboardData || e.originalEvent.clipboardData;
+  let clipboardData =
+    e.clipboardData || window.clipboardData || e.originalEvent.clipboardData;
 
-  const lines = clipboardData.getData('text').split(/\r\n/g)
+  const lines = clipboardData.getData("text").split(/\r\n/g);
 
   // do normal thing if not multiline - do not interfere with ordinary copy paste
   if (lines.length < 2) return;
   e.preventDefault();
-  const form = $(e.target).closest('form')
+  const form = $(e.target).closest("form");
 
   let matched = false;
 
-  form.find('input:not(:disabled):not([readonly]):not(:hidden)').each(function (ix, element) {
-    if (!matched && element === e.target) matched = true;
-    if (matched && lines.length > 0) {
-      const $elem = $(element)
-      if (ix === 0 && $elem.attr("type") !== "number") {
-        //const existing = $elem.val()
-        //const pasted = 
-        $elem.val(lines.shift())
-
-      } else
-        $elem.val(lines.shift())
-    }
-  })
-
-
+  form
+    .find("input:not(:disabled):not([readonly]):not(:hidden)")
+    .each(function (ix, element) {
+      if (!matched && element === e.target) matched = true;
+      if (matched && lines.length > 0) {
+        const $elem = $(element);
+        if (ix === 0 && $elem.attr("type") !== "number") {
+          //const existing = $elem.val()
+          //const pasted =
+          $elem.val(lines.shift());
+        } else $elem.val(lines.shift());
+      }
+    });
 }
 
 function is_paging_param(key) {

package/public/saltcorn.css

@@ -364,3 +364,9 @@ table.table-inner-grid td {
   margin-left: 30px;
   margin-top: -5px;
 }
+
+.accordion-button:after {
+  order: -1;
+  margin-left: 0;
+  margin-right: 0.5em;
+}

package/public/saltcorn.js

@@ -202,6 +202,19 @@ function view_post(viewname, route, data, onDone) {
     });
 }
 let logged_errors = [];
+let error_catcher_enabled = false;
+function enable_error_catcher() {
+  if (error_catcher_enabled) return;
+  document.addEventListener(
+    "DOMContentLoaded",
+    function () {
+      window.onerror = globalErrorCatcher;
+    },
+    false
+  );
+  error_catcher_enabled = true;
+}
+
 function globalErrorCatcher(message, source, lineno, colno, error) {
   if (error && error.preventDefault) error.preventDefault();
   if (logged_errors.includes(message)) return;
@@ -260,16 +273,22 @@ function ajax_modal(url, opts = {}) {
   if (opts.submitReload === false) $("#scmodal").addClass("no-submit-reload");
   else $("#scmodal").removeClass("no-submit-reload");
   $.ajax(url, {
+    headers: {
+      SaltcornModalRequest: "true",
+    },
     success: function (res, textStatus, request) {
       var title = request.getResponseHeader("Page-Title");
+      var width = request.getResponseHeader("SaltcornModalWidth");
+      if (width) $(".modal-dialog").css("max-width", width);
+      else $(".modal-dialog").css("max-width", "");
       if (title) $("#scmodal .modal-title").html(decodeURIComponent(title));
       $("#scmodal .modal-body").html(res);
       $("#scmodal").prop("data-modal-state", url);
       new bootstrap.Modal($("#scmodal")).show();
       initialize_page();
-      (opts.onOpen || function () { })(res);
+      (opts.onOpen || function () {})(res);
       $("#scmodal").on("hidden.bs.modal", function (e) {
-        (opts.onClose || function () { })(res);
+        (opts.onClose || function () {})(res);
         $("body").css("overflow", "");
       });
     },
@@ -278,7 +297,7 @@ function ajax_modal(url, opts = {}) {
 
 function saveAndContinue(e, k) {
   var form = $(e).closest("form");
-  const valres = form[0].reportValidity()
+  const valres = form[0].reportValidity();
   if (!valres) return;
   submitWithEmptyAction(form[0]);
   var url = form.attr("action");
@@ -323,7 +342,7 @@ function applyViewConfig(e, url, k) {
       "CSRF-Token": _sc_globalCsrf,
     },
     data: JSON.stringify(cfg),
-    error: function (request) { },
+    error: function (request) {},
     success: function (res) {
       k && k(res);
       !k && updateViewPreview();
@@ -344,10 +363,14 @@ function updateViewPreview() {
         "CSRF-Token": _sc_globalCsrf,
       },
 
-      error: function (request) { },
+      error: function (request) {},
       success: function (res) {
         $preview.css({ opacity: 1.0 });
 
+        //disable functions preview migght try to call
+        set_state_field = () => {};
+        set_state_fields = () => {};
+
         //disable elements in preview
         $preview.html(res);
         $preview.find("a").attr("href", "#");
@@ -357,11 +380,6 @@ function updateViewPreview() {
 
         $preview.find("textarea").attr("disabled", true);
         $preview.find("input").attr("readonly", true);
-
-        //disable functions preview migght try to call
-        set_state_field = () => { }
-        set_state_fields = () => { }
-
       },
     });
   }
@@ -596,15 +614,13 @@ function build_mobile_app(button) {
       localStorage.setItem("sidebarClosed", `${closed}`);
     });
   }
-})()
-
-
+})() +
   /*
   https://github.com/jeffdavidgreen/bootstrap-html5-history-tabs/blob/master/bootstrap-history-tabs.js
   Copyright (c) 2015 Jeff Green
   */
 
-  + (function ($) {
+  (function ($) {
     "use strict";
     $.fn.historyTabs = function () {
       var that = this;
@@ -619,21 +635,24 @@ function build_mobile_app(button) {
         $(element).on("show.bs.tab", function () {
           var stateObject = { url: $(this).attr("href") };
 
-          if (window.location.hash && stateObject.url !== window.location.hash) {
+          if (
+            window.location.hash &&
+            stateObject.url !== window.location.hash
+          ) {
             window.history.pushState(
               stateObject,
               document.title,
               window.location.pathname +
-              window.location.search +
-              $(this).attr("href")
+                window.location.search +
+                $(this).attr("href")
             );
           } else {
             window.history.replaceState(
               stateObject,
               document.title,
               window.location.pathname +
-              window.location.search +
-              $(this).attr("href")
+                window.location.search +
+                $(this).attr("href")
             );
           }
         });
@@ -649,4 +668,33 @@ function build_mobile_app(button) {
 
 // Copyright (c) 2011 Marcus Ekwall, http://writeless.se/
 // https://github.com/mekwall/jquery-throttle
-(function (a) { var b = a.jQuery || a.me || (a.me = {}), i = function (e, f, g, h, c, a) { f || (f = 100); var d = !1, j = !1, i = typeof g === "function", l = function (a, b) { d = setTimeout(function () { d = !1; if (h || c) e.apply(a, b), c && (j = +new Date); i && g.apply(a, b) }, f) }, k = function () { if (!d || a) { if (!d && !h && (!c || +new Date - j > f)) e.apply(this, arguments), c && (j = +new Date); (a || !c) && clearTimeout(d); l(this, arguments) } }; if (b.guid) k.guid = e.guid = e.guid || b.guid++; return k }; b.throttle = i; b.debounce = function (a, b, g, h, c) { return i(a, b, g, h, c, !0) } })(this);
+(function (a) {
+  var b = a.jQuery || a.me || (a.me = {}),
+    i = function (e, f, g, h, c, a) {
+      f || (f = 100);
+      var d = !1,
+        j = !1,
+        i = typeof g === "function",
+        l = function (a, b) {
+          d = setTimeout(function () {
+            d = !1;
+            if (h || c) e.apply(a, b), c && (j = +new Date());
+            i && g.apply(a, b);
+          }, f);
+        },
+        k = function () {
+          if (!d || a) {
+            if (!d && !h && (!c || +new Date() - j > f))
+              e.apply(this, arguments), c && (j = +new Date());
+            (a || !c) && clearTimeout(d);
+            l(this, arguments);
+          }
+        };
+      if (b.guid) k.guid = e.guid = e.guid || b.guid++;
+      return k;
+    };
+  b.throttle = i;
+  b.debounce = function (a, b, g, h, c) {
+    return i(a, b, g, h, c, !0);
+  };
+})(this);