STY: styling drop down

src/core/css/webcaosdb.css

@@ -350,12 +350,10 @@ h5 {
     border-bottom-right-radius: 3px;  
 }
 
-.coasdb-entity-version-attr,
 .caosdb-entity-heading-attr {
     overflow-x: auto;
 }
 
-.coasdb-entity-version-attr-name,
 .caosdb-entity-heading-attr-name {
     color: #6c6c6c;
     font-size: 90%;
@@ -567,10 +565,23 @@ input[type="file"] {
     min-height: 22px;
 }
 
+.caosdb-v-property-value-inputs {
+    max-height: 300px;
+    overflow: auto;
+}
+
 .caosdb-v-property-value-inputs > textarea {
     width: 100%;
 }
 
+.caosdb-v-property-value-inputs .caosdb-preview-waiting-notification {
+  color: #aaa;
+}
+
+.caosdb-v-property-value-inputs .caosdb-preview-waiting-notification:after {
+  content: "...";
+}
+
 .caosdb-v-property-value-inputs li > textarea {
     width: calc(100% - 40px);
 }
@@ -620,11 +631,16 @@ input[type="file"] {
     margin: 0px;
 }
 
-.caosdb-v-property-value-inputs .bootstrap-select .dropdown-menu .inner {
-  max-height: 300px;
+.caosdb-v-property-value-inputs div.dropdown.bootstrap-select {
+    margin-bottom: -1px;
+    border: 1px solid #aaa;
+}
+
+.caosdb-v-property-value-inputs div.dropdown.bootstrap-select:last-child {
+    margin-bottom: 0px;
 }
 
-.caosdb-v-property-value-inputs .caosdb-v-edit-value-list-buttons > button {
+.caosdb-v-property-value-inputs button.caosdb-f-list-item-button {
     padding: 1px;
 }
 

src/core/js/edit_mode.js

@@ -774,7 +774,7 @@ var edit_mode = new function () {
         header.append(form);
         // selectpicker is based on bootstrap-select and must be initializes
         // AFTER it had been added to the dom tree.
-        $(form).find(".selectpicker").selectpicker();
+        form.find(".selectpicker").selectpicker();
         edit_mode.add_parent_dropzone(entity);
 
         edit_mode.make_datatype_input_logic(form[0]);
@@ -983,13 +983,25 @@ var edit_mode = new function () {
         } else if (property.datatype == "INTEGER") {
             result = "<input type='number' value='" + property.value + "'></input>";
         } else if (property.datatype == "BOOLEAN") {
-            result = $('<select data-width="80%" class="selectpicker form-control caosdb-list-' + property.datatype + '"><option value=""></option><option value="FALSE">FALSE</option><option value="TRUE">TRUE</option></select>');
-            result.val(property.value);
+          result = `<select class="selectpicker form-control caosdb-list-${property.datatype}"><option value=""></option><option ${property.value=="FALSE" ? "selected" : ""}>FALSE</option><option ${property.value=="TRUE" ? selected : ""}>TRUE</option></select>`;
         } else if (property.reference || property.datatype == "FILE") {
-            result = $('<select data-width="80%" data-virtual-scroll="100" data-window-padding="15" data-live-search="true" class="selectpicker form-control caosdb-list-' + property.datatype + '" data-resolved="false"><option selected class="caosdb-f-option-default" value="' + property.value + '">' + property.value + '</option></select>');
-            if (typeof options !== "undefined") {
-                edit_mode.fill_reference_drop_down(result[0], options);
-            }
+          result = $('<div/>');
+          var css = {
+            "min-height": "38px",
+            "width": "80%",
+            "display": "inline-block",
+          };
+          result.css(css);
+          result.append(createWaitingNotification(property.value));
+
+          const select = $('<select data-container="body" data-virtual-scroll="100" data-window-padding="15" data-live-search="true" class="selectpicker form-control caosdb-list-' + property.datatype + '" data-resolved="false"><option value=""></option></select>');
+          options.then((_options) => {
+              edit_mode.fill_reference_drop_down(select[0], _options, property.value);
+            result.empty();
+            result.append(select);
+            select.selectpicker();
+          });
+
         } else {
             throw ("Unsupported data type: `" + property.datatype + "`. Please issue a feature request.");
         }
@@ -1120,7 +1132,7 @@ var edit_mode = new function () {
             });
 
             result = result.concat([inputs[0],
-                $("<span>Insert element at the end of the list: </span>")
+              $('<div>Insert element at the end of the list: </div>')
                 .append(insertButton)[0]
             ]);
         }
@@ -1202,6 +1214,7 @@ var edit_mode = new function () {
         var editfield = $(element).find(".caosdb-f-property-value");
         editfield.children().remove();
         editfield.append(inputs);
+        editfield.find(".selectpicker").selectpicker();
 
         edit_mode.change_property_data_type(element, property.datatype);
 
@@ -1306,7 +1319,7 @@ var edit_mode = new function () {
         editfield.append(inputs);
         // selectpicker is based on bootstrap-select and must be initializes
         // AFTER it had been added to the dom tree.
-        $(editfield).find(".selectpicker").selectpicker();
+        editfield.find(".selectpicker").selectpicker();
 
         // CHECKBOX `List [ ]`
         edit_mode.add_toggle_list_checkbox(element, property.list, property.datatype);
@@ -1762,7 +1775,7 @@ var edit_mode = new function () {
                 prdict.push(prlist[j].name + ": " + prlist[j].value);
             }
             prdict.push("CaosDB ID: " + getEntityID(eli));
-            results.push($(`<option value="${getEntityID(eli)}"/>`).text(prdict.join(", "))[0]);
+            results.push($(`<option value="${getEntityID(eli)}">${prdict.join(", ")}</option>`)[0]);
         }
 
         return results;
@@ -1778,24 +1791,16 @@ var edit_mode = new function () {
      * @param {HTMLElement[]} options - array of option elements, ready for
      *     being appended to a SELECT element. This parameter might as well be
      *     a Promise for such an array.
+     * @param {String} [current_value] - The value which is to be selected.
      */
-    this.fill_reference_drop_down = async function (drop_down, options) {
-        var resolved_options = await options;
-        var old = $(drop_down).find("option.caosdb-f-option-default");
-        if (old.length == 0) {
-            // no option selected, append all
-            $(drop_down).append($(resolved_options).clone());
-            return;
-        }
-        var old_value = old.attr("value");
-        for (let opt of resolved_options) {
-            if (opt.value === old_value) {
-                old.text($(opt).text());
-            } else {
-                $(drop_down).append($(opt).clone());
-            }
+    this.fill_reference_drop_down = function (drop_down, options, current_value) {
+        var resolved_options = options;
+        drop_down = $(drop_down);
+
+        drop_down.append($(resolved_options).clone());
+        if (current_value) {
+            drop_down.val(current_value);
         }
-        $(drop_down).selectpicker('refresh');
     }
 
     /**
@@ -1812,13 +1817,15 @@ var edit_mode = new function () {
      */
     this.retrieve_datatype_list = async function (datatype) {
         var find_entity = ["FILE", "REFERENCE"].includes(datatype) ? "" : `"${datatype}"`;
-        var entities = datatype !== "FILE" ? await edit_mode.query(`FIND Record ${find_entity}`) : [];
-        var files = await edit_mode.query(`FIND File ${find_entity}`);
+        var entities = datatype !== "FILE" ? edit_mode.query(`FIND Record ${find_entity}`) : [];
+        var files = edit_mode.query(`FIND File ${find_entity}`);
+
+        await Promise.all([entities, files])
 
         var options = edit_mode
-            ._create_reference_options(entities)
+            ._create_reference_options(await entities)
             .concat(edit_mode
-                ._create_reference_options(files));
+                ._create_reference_options(await files));
 
         return options;
 
@@ -2059,8 +2066,15 @@ var edit_mode = new function () {
         $(entity).find(".caosdb-f-entity-delete-button").remove();
     }
 
+    const query_cache = {};
+
     this.query = (str) => {
-        return query(str);
+        if (query_cache[str]) {
+          return query_cache[str];
+        }
+        const result = query(str);
+        query_cache[str] = result;
+        return result;
     }
 
 }()