Merge branch 'dev' into 'f-simple-datetimes'

# Conflicts:
#   CHANGELOG.md

CHANGELOG.md

@@ -14,6 +14,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   there is now very basic customization (via variable `BUILD_MODULE_EXT_COSMETICS_CUSTOMDATETIME`)
   for how datetime values can be displayed, which comes along with the new css classes
   `caosdb-v-property-datetime-customized` and `caosdb-v-property-datetime-customized-newvalue`.
+* `form_elements.make_form_modal` and
+  `form_elements.make_scripting_submission_button` functions to create a form
+  modal and an SSS submission button, respectively.
 
 ### Changed (for changes in existing functionality)
 

src/core/js/ext_trigger_crawler_form.js

@@ -41,7 +41,7 @@
  * variable `BUILD_MODULE_EXT_TRIGGER_CRAWLER_FORM_TOOLBOX`. The default is
  * `Tools`.
  */
-var ext_trigger_crawler_form = function () {
+var ext_trigger_crawler_form = function ($, form_elements) {
 
     var init = function (toolbox) {
         const _toolbox = toolbox || "${BUILD_MODULE_EXT_TRIGGER_CRAWLER_FORM_TOOLBOX}";
@@ -52,7 +52,7 @@ var ext_trigger_crawler_form = function () {
 
         const crawler_form = make_scripting_caller_form(
             script, button_name);
-        const modal = make_form_modal(crawler_form);
+        const modal = form_elements.make_form_modal(crawler_form, "Trigger the crawler", "Crawl the selected path");
 
 
         navbar.add_tool(button_name, _toolbox, {
@@ -63,32 +63,6 @@ var ext_trigger_crawler_form = function () {
         });
     }
 
-    /**
-     * Wrap the form into a Bootstrap modal.
-     */
-    var make_form_modal = function (form) {
-        const title = "Trigger the Crawler";
-        const modal = $(`
-          <div class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <button type="button"
-                    class="btn-close"
-                    data-bs-dismiss="modal"
-                    aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                  <h4 class="modal-title">${title}</h4>
-                </div>
-                <div class="modal-body">
-                </div>
-              </div>
-            </div>`);
-        modal.find(".modal-body").append(form);
-        return modal[0];
-    }
-
     /**
      * Create the trigger crawler form.
      */
@@ -104,15 +78,7 @@ var ext_trigger_crawler_form = function () {
         });
         $(warning_checkbox).find("input").attr("value", "TRUE");
 
-        const scripting_caller = $(`
-        <form method="POST" action="/scripting">
-          <input type="hidden" name="call" value="${script}"/>
-          <input type="hidden" name="-p0" value=""/>
-          <div class="form-control">
-            <input type="submit"
-              class="form-control btn btn-primary" value="${button_name}"/>
-          </div>
-        </form>`);
+        const scripting_caller = form_elements.make_scripting_submission_button(script, button_name);
 
         scripting_caller.prepend(warning_checkbox).prepend(path_field);
 
@@ -123,7 +89,7 @@ var ext_trigger_crawler_form = function () {
         init: init,
     };
 
-}();
+}($, form_elements);
 
 $(document).ready(function () {
     if ("${BUILD_MODULE_EXT_TRIGGER_CRAWLER_FORM}" === "ENABLED") {

src/core/js/form_elements.js

@@ -1437,6 +1437,10 @@ var form_elements = new function () {
     /**
      * Return a select field.
      *
+     * IMPORTANT: The select picker has to be initialized by the client by
+     * calling ``form_elements.init_select_picker(ret, config.value)`` (see
+     * below and https://gitlab.com/caosdb/caosdb-webui/-/issues/208).
+     *
      * @param {SelectFieldConfig} config
      * @returns {HTMLElement} a select field.
      */
@@ -1454,7 +1458,7 @@ var form_elements = new function () {
         // case when this method is called and is controlled by the client. So
         // there is currently no other work-around than to call
         // init_select_picker after the form creation explicitely :(
-        //form_elements.init_select_picker(select[0], config.value);
+        // form_elements.init_select_picker(ret, config.value);
 
         return ret;
     }
@@ -1563,6 +1567,58 @@ var form_elements = new function () {
         }
     }
 
+    /**
+     * Return a modal HTML element containing the given form.
+     *
+     * @param {HTMLElement} form - the form to be shown in the modal
+     * @param {string} title - the title of the form modal
+     * @param {string} explanationText - An optional paragraph shown between
+     *                                    modal title and form.
+     */
+    this.make_form_modal = function (form, title, explanationText) {
+        const modal = $(`
+              <div class="modal fade" tabindex="-1" role="dialog">
+                <div class="modal-dialog" role="document">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h4 class="modal-title">${title}</h4>
+                      <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close">
+                      </button>
+                    </div>
+                    <div class="modal-body">
+                      <p>${explanationText}</p>
+                    </div>
+                  </div>
+                </div>`);
+
+        modal.find(".modal-body").append(form);
+        return modal[0];
+    }
+
+    /**
+     * Return a submission button that triggers a given server-side-script.
+     *
+     * @param {string} script - Name of the server-side script to be triggered
+     * @param {string} buttonName - Display name of the submission button
+     */
+    this.make_scripting_submission_button = function (script, buttonName) {
+        let button_name = buttonName || "Submit";
+        const scripting_caller = $(`
+            <form method="POST" action="/scripting">
+              <input type="hidden" name="call" value="${script}"/>
+              <input type="hidden" name="-p0" value=""/>
+              <div class="form-group">
+                <input type="submit"
+                  class="form-control btn btn-primary" value="${button_name}"/>
+              </div>
+            </form>`);
+
+        return scripting_caller
+    }
+
 
     /**
      * Return an input and a label, wrapped in a div with class