diff --git a/src/core/css/webcaosdb.css b/src/core/css/webcaosdb.css
index 2644e7b3b0938f55e6bc95f4345ae93bc95f80ff..1c8f50be049d308efcac25e41d705b08d96d21e6 100644
--- a/src/core/css/webcaosdb.css
+++ b/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;
}
diff --git a/src/core/js/edit_mode.js b/src/core/js/edit_mode.js
index 92833771b2c1e3b480dadc0e71fe8a607e080183..78e6c66b6b0548f12e0db2ffc8bd6aa2ff2885fd 100644
--- a/src/core/js/edit_mode.js
+++ b/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;
}
}()