WIP

misc/yaml_to_json.py

@@ -6,4 +6,4 @@ import json
 import yaml
 
 with open(sys.argv[1], 'r') as infile:
-    print(json.dumps(yaml.load(infile)))
+    print(json.dumps(yaml.safe_load(infile)))

src/core/js/form_elements.js

@@ -118,7 +118,7 @@ var form_elements = new function () {
     this.get_cache_value = function (field) {
         var ret = $(field)
             .find(":input")
-            .val();
+            .val()
         if (!ret) {
             return null;
         } else {
@@ -293,12 +293,15 @@ var form_elements = new function () {
         if (typeof desc == "undefined") {
             desc = entity_id;
         }
-        var opt_str = '<option value="' + entity_id + '">' + desc +
+        return form_elements._make_option(entity_id, desc);
+    }
+
+    this._make_option = function(value, label) {
+        const opt_str = '<option value="' + value + '">' + label +
             "</option>";
         return $(opt_str)[0];
     }
 
-
     /**
      * (Re-)set this module's functions to standard implementation.
      */
@@ -333,12 +336,7 @@ var form_elements = new function () {
                 caosdb_utils.assert_type(make_value, "function",
                     "param `make_value`");
             }
-            const ret = $('<select class="selectpicker form-control" title="Nothing selected"/>');
-            if (multiple) {
-                ret.attr("multiple", "");
-            } else {
-                ret.append('<option style="display: none" selected="selected" value="" disabled="disabled"></option>');
-            }
+            const ret = $(form_elements._make_select(multiple));
             for (let entity of entities) {
                 this.logger.trace("add option", entity);
                 let entity_id = getEntityID(entity);
@@ -351,6 +349,16 @@ var form_elements = new function () {
             return ret[0];
         }
 
+        this._make_select = function (multiple) {
+            const ret = $('<select class="selectpicker form-control" title="Nothing selected"/>');
+            if (multiple) {
+                ret.attr("multiple", "");
+            } else {
+                ret.append('<option style="display: none" selected="selected" value="" disabled="disabled"></option>');
+            }
+            return ret[0];
+        }
+
         /**
          * Configuration object for a drop down menu for selecting references.
          * `make_reference_drop_down` generates such a drop down menu using a
@@ -673,6 +681,8 @@ var form_elements = new function () {
             field = await this.make_range_input(config);
         } else if (type === "reference_drop_down") {
             field = this.make_reference_drop_down(config);
+        } else if (type === "select") {
+            field = this.make_select_input(config);
         } else if (type === "subform") {
             // TODO handle cache and required for subforms
             return await this.make_subform(config);
@@ -1223,6 +1233,32 @@ var form_elements = new function () {
     }
 
 
+    /**
+     * Return a select field.
+     *
+     * @param {form_elements.input_config} config
+     * @returns {HTMLElement} a select field.
+     */
+    this.make_select_input = function (config) {
+        const options = config.options;
+        const multiple = config.multiple;
+        const select = $(form_elements._make_select(multiple));
+        for (let option of options) {
+            select.append(form_elements._make_option(option.value, option.label));
+        }
+
+        const ret = $(form_elements._make_field_wrapper(config.name));
+        const label = form_elements._make_input_label_str(config);
+        select.change(function () {
+            ret[0].dispatchEvent(form_elements.field_changed_event);
+        });
+
+        const input_col = $('<div class="caosdb-f-property-value col-sm-9"/>');
+        input_col.append(select);
+        return ret.append(label, input_col)[0];
+    }
+
+
     /**
      * Return a checkbox input field.
      *

test/core/js/modules/form_elements.js.js

@@ -628,4 +628,52 @@ QUnit.test("make_alert - remember", async function(assert) {
     assert.equal(typeof _alert, "undefined", "alert was not created, proceed callback was called third time");
 });
 
+QUnit.test("make_select_input", function(assert) {
+    const config = {
+        name: "sex", label: "Sex", multiple: true, options: [
+            {"value": "f", "label": "female"},
+            {"value": "d", "label": "diverse"},
+            {"value": "m", "label": "male"},
+        ],
+    }
+    const select = $(form_elements.make_select_input(config));
+    assert.equal(select.find("select").length, 1, "select input there");
+    assert.equal(select.find("select option").length, 3, "three options there");
+});
+
+QUnit.test("select_input caching", async function (assert) {
+    const config = {
+      "name": "test-form",
+      "fields": [
+            {
+                type: "select",
+                required: true,
+                cached: true,
+                name: "sex",
+                label: "Sex",
+                options: [
+                    {"value": "f", "label": "female"},
+                    {"value": "d", "label": "diverse"},
+                    {"value": "m", "label": "male"},
+                ],
+            },
+        ],
+    }
+    const form_wrapper = $(form_elements.make_form(config));
+    await sleep(500);
+    const form = form_wrapper.find("form");
+    assert.equal(form.find("select").length, 1);
+    assert.equal(xml2str(form[0]), "");
+
+
+    var cache = {};
+    var field = $(form_elements.get_fields(form[0], "sex"));
+    field.find("select").val("f");
+    assert.equal(form_elements.get_cache_value(field[0]), "f", "value set");
+    assert.equal(form_elements.get_cache_key(form[0], field[0]), "form_elements.cache.test-form.sex", "cache key correct");
+
+    form_elements.cache_form(cache, form[0]);
+    assert.equal(cache[form_elements.get_cache_key(form[0], field[0])], "f");
+});
+
 }