@saltcorn/server 1.4.0-beta.1 → 1.4.0-beta.10

package/public/saltcorn-common.js

@@ -74,8 +74,9 @@ function reset_nearest_form(that) {
   form.find("select").trigger("change");
 }
 
-function add_repeater(nm) {
-  var es = $("div.form-repeat.repeat-" + nm);
+function add_repeater(nm, add_link) {
+  const outer_repeat = $(add_link).prev();
+  var es = outer_repeat.find("div.form-repeat.repeat-" + nm);
   const ncopy = es.length - 1;
   var e = es.last();
   var newix = es.length;
@@ -83,15 +84,21 @@ function add_repeater(nm) {
   newe.find("[name]").each(function (ix, element) {
     if ($(element).hasClass("omit-repeater-clone")) $(element).remove();
     const oldnm = element.name || "";
-    var newnm = (element.name || "").replace("_" + ncopy, "_" + newix);
-    var newid = (element.id || "").replace("_" + ncopy, "_" + newix);
+    var newnm = (element.name || "").replace(
+      new RegExp("_" + ncopy + "$"),
+      "_" + newix
+    );
+    var newid = (element.id || "").replace(
+      new RegExp("_" + ncopy + "$"),
+      "_" + newix
+    );
     $(element).attr("name", newnm).attr("id", newid);
     if (element.tagName === "SELECT") {
       const original = document.getElementsByName(oldnm)[0];
       if (original) element.selectedIndex = original.selectedIndex;
     }
   });
-  newe.appendTo($("div.repeats-" + nm));
+  newe.appendTo(outer_repeat);
   newe.find("[data-on-cloned]").each(function (ix, element) {
     (function (str) {
       return eval(str);
@@ -157,7 +164,7 @@ function add_extra_state(base_url, extra_state_fml, row, outerState = {}) {
   let extra_state = new Function(
     "row",
     `{${Object.keys(row).join(",")}}`,
-    "return " + extra_state_fml||"{}"
+    "return " + extra_state_fml || "{}"
   )(row, row);
   let qs = Object.entries({ ...outerState, ...extra_state })
     .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
@@ -1282,6 +1289,9 @@ function initialize_page() {
   $("[data-explainers]").change(function () {
     setExplainer(this);
   });
+  $(".card-max-full-screen").each(function () {
+    card_max_full_screen($(this));
+  });
 
   const codes = [];
   $("textarea.to-code").each(function () {
@@ -1327,7 +1337,7 @@ function initialize_page() {
                   }
                 } else {
                   cm1.save();
-                  $(el).closest("form").trigger("change");
+                  $(el).trigger("change");
                 }
               },
               500,
@@ -1424,6 +1434,37 @@ function enlarge_in_code($textarea, cm) {
     $card.css("min-height", newCardHeight + "px");
   }
 }
+function card_max_full_screen($card_outer) {
+  const $card = $card_outer.find(".card-body");
+  const cardTop = $card_outer.offset().top;
+  const cardHeight = $card.outerHeight();
+  const cardFooterHeight = $card_outer.find(".card-footer").outerHeight() || 0;
+  const cardHeaderHeight = $card_outer.find(".card-header").outerHeight() || 0;
+  const vh = $(window).height();
+  const newCardHeight = vh - cardTop - cardFooterHeight - cardHeaderHeight - 20;
+  let is_changed = false;
+  if (newCardHeight < cardHeight) {
+    $card.css("max-height", newCardHeight + "px").css("overflow-y", "scroll");
+    is_changed = true;
+  }
+  $card.attr("tabindex", "-1");
+  $card.focus();
+  window.addEventListener(
+    "resize",
+    function () {
+      const vh = $(window).height();
+      const newCardHeight =
+        vh - cardTop - cardFooterHeight - cardHeaderHeight - 20;
+      if (is_changed || newCardHeight < cardHeight) {
+        $card
+          .css("max-height", newCardHeight + "px")
+          .css("overflow-y", "scroll");
+        is_changed = true;
+      }
+    },
+    true
+  );
+}
 
 function cancel_inline_edit(e, opts1) {
   var opts = JSON.parse(decodeURIComponent(opts1 || "") || "{}");
@@ -1615,7 +1656,7 @@ function getIsNode() {
   }
 }
 
-function buildToast(txt, type, spin, title) {
+function buildToast(txt, type, spin, title, set_id) {
   const realtype = type === "error" ? "danger" : type;
   const icon =
     realtype === "success"
@@ -1626,7 +1667,8 @@ function buildToast(txt, type, spin, title) {
           ? "fa-exclamation-triangle"
           : "";
   const isNode = getIsNode();
-  const rndid = `tab${Math.floor(Math.random() * 16777215).toString(16)}`;
+  const rndid =
+    set_id || `tab${Math.floor(Math.random() * 16777215).toString(16)}`;
   return {
     id: rndid,
     html: `
@@ -1659,24 +1701,112 @@ function buildToast(txt, type, spin, title) {
         }
       </div>
       <div 
-        class="toast-body py-2 fs-6 fw-bold d-flex align-items-center"
+        class="toast-body py-2 fs-6 fw-bold"
       >
-        <strong>${txt}</strong>
-        ${
-          spin
-            ? `<span 
-                class="spinner-border ms-auto" 
-                role="status" 
-                aria-hidden="true" 
-                style="width: 1.5rem; height: 1.5rem"></span>`
-            : ""
-        }
+        <div class="d-flex align-items-center">
+          <strong>${txt}</strong>
+          ${
+            spin
+              ? `<span 
+                  class="spinner-border ms-auto" 
+                  role="status" 
+                  aria-hidden="true" 
+                  style="width: 1.5rem; height: 1.5rem"></span>`
+              : ""
+          }
+        </div>
       </div>
     </div>
   `,
   };
 }
 
+function progress_toast_update({
+  id,
+  close,
+  title,
+  message,
+  percent,
+  blocking,
+  maxHeight,
+  popupWidth,
+}) {
+  if (close && blocking) {
+    $("#scmodal .modal-body .progress-message").html("");
+    close_saltcorn_modal();
+    return;
+  }
+  let existing = !blocking && id ? $("#toast-" + id) : $("#scmodal");
+  if (close && id) {
+    existing.remove();
+    return;
+  }
+
+  if (blocking) {
+    ensure_modal_exists_and_closed({ open: true, blocking: true }); // no close
+    $(".sc-modal-linkout").hide();
+    $("#scmodal .modal-header button.btn-close").css("display", "none");
+    if (popupWidth) $(".modal-dialog").css("max-width", popupWidth);
+    existing = $("#scmodal");
+    if (title) $("#scmodal .modal-title").html(title);
+    const exBody = $("#scmodal .modal-body .blocking-progress-modal");
+    if (!exBody.length) {
+      $("#scmodal .modal-body").html(
+        `<div class="blocking-progress-modal"><div class="progress-message"${maxHeight ? ` style="max-height: ${maxHeight}px"` : ""}><div>${message || ""}</div></div><div class="progress-bar">${
+          typeof percent === "undefined"
+            ? ""
+            : '<progress style="width: 100%" value="' +
+              percent +
+              '" max="100">' +
+              percent +
+              " %</progress>"
+        }</div></div>`
+      );
+    } else {
+      if (message) {
+        if (maxHeight)
+          $("#scmodal .modal-body .progress-message").prepend(
+            `<div>${message}</div>`
+          );
+        else $("#scmodal .modal-body .progress-message").html(message);
+      }
+      if (typeof percent !== "undefined")
+        $("#scmodal .modal-body progress").val(percent);
+    }
+    if (!$("#scmodal").hasClass("show"))
+      new bootstrap.Modal($("#scmodal"), {
+        focus: false,
+        backdrop: "static",
+        keyboard: false,
+      }).show();
+  } else {
+    if (id && !existing.length) {
+      const { html } = buildToast(message, "info", false, title, "toast-" + id);
+      $("#toasts-area").append(html);
+      existing = $("#toast-" + id);
+    } else {
+      $("#toast-" + id)
+        .find(".toast-body strong")
+        .html(message);
+    }
+
+    if (typeof percent !== "undefined") {
+      const exprogress = existing.find("progress");
+      if (!exprogress.length) {
+        $("#toast-" + id)
+          .find(".toast-body")
+          .append(
+            '<progress value="' +
+              percent +
+              '" max="100">' +
+              percent +
+              " %</progress>"
+          );
+      } else exprogress.val(percent);
+    }
+  }
+}
+
 function notifyAlert(note, spin) {
   if (Array.isArray(note)) {
     note.forEach(notifyAlert);
@@ -1737,7 +1867,7 @@ function restore_old_button(btnId) {
   if (window.reset_spinners) reset_spinners();
   const btn = btnId instanceof jQuery ? btnId : $(`#${btnId}`);
   const oldText = $(btn).data("old-text");
-  if (!oldText.length) reuturn;
+  if (!oldText.length) return;
   btn.html(oldText);
   btn.css({ width: "", height: "" }).prop("disabled", false);
   btn.removeData("old-text");
@@ -1765,7 +1895,7 @@ async function common_done(res, viewnameOrElem0, isWeb = true) {
     else await fn(element);
   };
   //TODO what if something else is spinning?
-  if (window.reset_spinners) reset_spinners();
+  //if (window.reset_spinners) reset_spinners();
 
   const eval_it = async (s) => {
     if (res.row && res.field_names) {
@@ -1880,6 +2010,13 @@ async function common_done(res, viewnameOrElem0, isWeb = true) {
       text: res.suppressed,
     });
   }
+  if (res.reload_embedded_view) {
+    let new_state = res.new_state || undefined;
+    reload_embedded_view(res.reload_embedded_view, new_state);
+  }
+  if (res.progress_bar_update) {
+    progress_toast_update(res.progress_bar_update);
+  }
   if (res.eval_js) await handle(res.eval_js, eval_it);
   /// TODO got and resume_workflow - use localStorage
   if (res.goto) {

package/public/saltcorn.css

@@ -892,3 +892,16 @@ input[type="file"].file-has-existing {
 .toggle-password-vis {
   cursor: pointer;
 }
+
+.card-max-full-screen .card-body:focus {
+  outline-width: 0;
+}
+.card-max-full-screen .card-body:focus-visible {
+  outline: none !important;
+}
+
+.blocking-progress-modal .progress-message {
+  overflow: auto;
+  display: flex;
+  flex-direction: column-reverse;
+}

package/public/saltcorn.js

@@ -263,8 +263,11 @@ function spin_action_link(e) {
   const height = $e.height();
 
   $e.attr("data-innerhtml-prespin", $e.html());
+  $e.attr("data-previous-onclick", $e.attr("onclick"));
+  $e.attr("onclick", "void(0)");
   $e.html('<i class="fas fa-spinner fa-spin"></i>').width(width).height(height);
   $(document).trigger("activate-spinner", $e);
+  //null onclick
   $e.trigger("spin");
 }
 
@@ -273,12 +276,30 @@ function reset_spinners() {
     $e = $(this);
     $e.html($e.attr("data-innerhtml-prespin"));
     $e.removeAttr("data-innerhtml-prespin");
+    const prevOnclick = $e.attr("data-previous-onclick");
+    if (prevOnclick && prevOnclick !== "void(0)") {
+      $e.attr("onclick", prevOnclick);
+      $e.removeAttr("data-previous-onclick");
+    }
+
+    //reset onclick
   });
 }
 
 let last_route_viewname;
 
-function view_post(viewnameOrElem, route, data, onDone, sendState) {
+function view_post(viewnameOrElem, route, data, onDoneOrObj, sendState) {
+  let onDone,
+    sendState1,
+    runAsync = false;
+  if (typeof onDoneOrObj === "object") {
+    onDone = onDoneOrObj.onDone;
+    sendState1 = onDoneOrObj.sendState;
+    runAsync = onDoneOrObj.runAsync;
+  } else {
+    onDone = onDoneOrObj;
+    sendState1 = sendState;
+  }
   const viewname =
     typeof viewnameOrElem === "string"
       ? viewnameOrElem
@@ -286,7 +307,7 @@ function view_post(viewnameOrElem, route, data, onDone, sendState) {
           .closest("[data-sc-embed-viewname]")
           .attr("data-sc-embed-viewname");
   last_route_viewname = viewname;
-  const query = sendState
+  const query = sendState1
     ? `?${new URL(get_current_state_url()).searchParams.toString()}`
     : "";
   const isFormData = data instanceof FormData;
@@ -310,7 +331,7 @@ function view_post(viewnameOrElem, route, data, onDone, sendState) {
     .done(function (res) {
       if (onDone) onDone(res);
       ajax_done(res, viewnameOrElem);
-      reset_spinners();
+      if (!runAsync) reset_spinners();
     })
     .fail(function (res) {
       if (!checkNetworkError(res))
@@ -348,7 +369,7 @@ function globalErrorCatcher(message, source, lineno, colno, error) {
   });
 }
 
-function ensure_modal_exists_and_closed() {
+function ensure_modal_exists_and_closed(opts) {
   if ($("#scmodal").length === 0) {
     $("body").append(`<div id="scmodal" class="modal">
     <div class="modal-dialog">
@@ -377,13 +398,14 @@ function ensure_modal_exists_and_closed() {
       </div>
     </div>
   </div>`);
-  } else if ($("#scmodal").hasClass("show")) {
+  } else if ($("#scmodal").hasClass("show") && !opts?.open) {
     // remove reload handler added by edit, for when we have popup link
     // in autosave edit in popup
     $("#scmodal").off("hidden.bs.modal");
     close_saltcorn_modal();
   }
   $("#modal-toasts-area").empty();
+  $("#scmodal .modal-header button.btn-close").css("display", "");
 }
 
 function expand_thumbnail(img_id, filename) {
@@ -532,17 +554,25 @@ function saveAndContinue(e, k, event) {
   submitWithEmptyAction(form[0]);
   var url = form.attr("action");
   var form_data = form.serialize();
+
+  if (form.prop("data-last-save-success") === form_data) {
+    if (k) k(res);
+    return;
+  }
+
   ajax_indicator(true, e);
   $.ajax(url, {
     type: "POST",
     headers: {
       "CSRF-Token": _sc_globalCsrf,
+      "Page-Load-Tag": _sc_pageloadtag,
     },
     data: form_data,
     success: function (res) {
       ajax_indicator(false);
       form.removeAttr("data-unsaved-changes");
       form.parent().find(".full-form-error").text("");
+      form.prop("data-last-save-success", form_data);
       if (res.id && form.find("input[name=id")) {
         form.append(
           `<input type="hidden" class="form-control  " name="id" value="${res.id}">`
@@ -666,6 +696,7 @@ function ajaxSubmitForm(e, force_no_reload, event) {
     type: "POST",
     headers: {
       "CSRF-Token": _sc_globalCsrf,
+      "Page-Load-Tag": _sc_pageloadtag,
     },
     data: new FormData(form[0]),
     processData: false,
@@ -694,6 +725,19 @@ function ajaxSubmitForm(e, force_no_reload, event) {
 
   return false;
 }
+
+function page_post_action(url) {
+  ajax_post_json(
+    url,
+    {},
+    {
+      success: () => {
+        if (window.reset_spinners) reset_spinners();
+      },
+    }
+  );
+}
+
 function ajax_post_json(url, data, args = {}) {
   ajax_post(url, {
     data: JSON.stringify(data),
@@ -753,9 +797,11 @@ function ajax_post_btn(e, reload_on_done, reload_delay) {
     type: "POST",
     headers: {
       "CSRF-Token": _sc_globalCsrf,
+      "Page-Load-Tag": _sc_pageloadtag,
     },
     data: form_data,
-    success: function () {
+    success: function (res) {
+      common_done(res);
       if (reload_on_done) location.reload();
     },
     error: checkNetworkError,
@@ -775,6 +821,7 @@ function api_action_call(name, body) {
     type: "POST",
     headers: {
       "CSRF-Token": _sc_globalCsrf,
+      "Page-Load-Tag": _sc_pageloadtag,
     },
     data: body,
     success: function (res) {
@@ -1382,6 +1429,7 @@ function check_delete_unsaved(tablename, script_tag) {
         type: "DELETE",
         headers: {
           "CSRF-Token": _sc_globalCsrf,
+          "Page-Load-Tag": _sc_pageloadtag,
         },
       });
   }
@@ -1412,17 +1460,20 @@ function cfu_translate(that) {
   }
 }
 
-function ensure_script_loaded(src) {
+function ensure_script_loaded(src, callback) {
   //https://stackoverflow.com/questions/26331600/load-js-script-only-when-it-has-not-been-loaded-already-and-then-only-once
   let scripts = Array.from(document.querySelectorAll("script")).map(
     (scr) => scr.src
   );
 
-  if (!scripts.includes(src)) {
+  if (!scripts.some((s) => s.endsWith(src))) {
     var tag = document.createElement("script");
     tag.src = src;
+    tag.onload = () => {
+      if (typeof callback === "function") callback();
+    };
     document.getElementsByTagName("body")[0].appendChild(tag);
-  }
+  } else if (typeof callback === "function") callback();
 }
 
 function ensure_css_loaded(src) {