Skip to content
Snippets Groups Projects
Commit b50ef4bd authored by Henrik tom Wörden's avatar Henrik tom Wörden
Browse files

Merge branch 'f-lazy-edit-mode-dropdowns' into 'dev'

F lazy edit mode dropdowns

See merge request !141
parents 93491478 56507187
No related branches found
No related tags found
2 merge requests!142REL: Release 0.15.0,!141F lazy edit mode dropdowns
Pipeline #55833 passed
......@@ -8,8 +8,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added ###
* `BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING` build variable that
determines whether reference dropdowns in the edit mode are filled
automatically or only after manually clicking on "edit this
property". Default is `ENABLED`, i.e., don't load the dropdown
automatically.
* `caosdb-v-property-not-yet-lazy-loaded` class for reference
properties in the edit mode, the reference dropdown menu of which
hasn't been initialized yet.
### Changed ###
* [#262](https://gitlab.com/linkahead/linkahead-webui/-/issues/262)
Reference dropdowns in the edit mode don't load automatically by
default anymore but have to be initialized manually and per property
by default. Set `BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING=DISABLED` to
restore the previous behavior.
### Deprecated ###
### Removed ###
......
......@@ -158,6 +158,12 @@ BUILD_MODULE_EXT_TRIGGER_CRAWLER_FORM_TOOLBOX="Tools"
##############################################################################
BUILD_MAX_EDIT_MODE_DROPDOWN_OPTIONS=-1
##############################################################################
# Toggle lazy-loading of reference dropdowns. ENABLED is especially
# recommended in case of instances with a lot of entities.
##############################################################################
BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING=ENABLED
##############################################################################
# Build a dist file containing all JS code from the files in the
# MODULE_DEPENDENCIES array.
......
......@@ -65,6 +65,12 @@ var edit_mode = new function () {
*/
this.property_data_type_changed = new Event("caosdb.edit_mode.property_data_type_changed");
/**
* Fired when a reference property is editted. Only relevant if
* BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING=ENABLED.
*/
this.property_edit_reference_value = new Event("caosdb.edit_mode.property_edit_reference_value");
/**
* Initialize this module
*/
......@@ -522,6 +528,11 @@ var edit_mode = new function () {
}
}
// The property is a reference, but wasn't editted (the
// dropdown options were never loaded, so leave unchanged).
if (property.reference && ("${BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING}" == "ENABLED") && $(element).hasClass("caosdb-v-property-not-yet-lazy-loaded")) {
return property;
}
// LISTs need to be handled here
if (property.list == true) {
property.value = [];
......@@ -1389,6 +1400,36 @@ var edit_mode = new function () {
// create inputs
if (property.reference && ("${BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING}" == "ENABLED")) {
// Only add button to load reference options lazily.
const editValueButton = $(`<button title="Edit this property" class="btn btn-link caosdb-f-edit-reference-property-button"><i class="bi-pencil"/></button>`);
// Set data-lazy-loaded to false to indicate that it hasn't been initialized.
$(element).addClass("caosdb-v-property-not-yet-lazy-loaded");
$(editValueButton).click(() => {
// Remove edit and trash button
$(element).find(".caosdb-f-edit-reference-property-button").remove();
$(element).find(".caosdb-f-property-trash-button").remove();
// Create the input
edit_mode._addPropertyEditInputs(element, property, editfield);
element.dispatchEvent(edit_mode.property_edit_reference_value);
$(element).removeClass("caosdb-v-property-not-yet-lazy-loaded");
});
// append button
$(element).find(".caosdb-property-edit").append(editValueButton);
// Trash button can exist without having to load all options
edit_mode.add_property_trash_button($(element).find(".caosdb-property-edit")[0], element);
// No preview of references in edit mode (might mess up the update)
$(element).find(".caosdb-show-preview-button").remove();
} else {
edit_mode._addPropertyEditInputs(element, property, editfield);
}
}
/**
* Add input elements for value, units, list toggling, and
* deletion to a property row.
*/
this._addPropertyEditInputs = function(element, property, editfield) {
var inputs = edit_mode.create_value_inputs(property);
editfield.children().remove();
editfield.append(inputs);
......
......@@ -261,6 +261,16 @@ var fileupload = new function() {
}
this.init = function() {
if ("${BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING}" == "ENABLED") {
// If we have to manually enable editting of reference
// properties, we only want to add the file-upload button
// **after** we started editing the particular
// property. So no global event listener and not
// immediatly after adding a new reference property.
document.body.addEventListener(edit_mode.property_edit_reference_value.type, function(e) {
fileupload.create_upload_app(e.target);
}, true);
} else {
// add global listener for start_edit event
document.body.addEventListener(edit_mode.start_edit.type, function(e) {
$(e.target).find(".caosdb-properties .caosdb-f-entity-property").each(function(idx) {
......@@ -273,6 +283,7 @@ var fileupload = new function() {
fileupload.create_upload_app(e.target);
}, true);
}
// add global listener for data_type_changed event
document.body.addEventListener(edit_mode.property_data_type_changed.type, function(e) {
......
src/doc/tutorials/edit-lazy-load-dropdown.png

6.47 KiB

......@@ -75,6 +75,26 @@ to the corresponding area at the bottom of the Record. Properties and
parents can be removed from the entity by clicking on the trash-can
symbol. Note that a Record must always have at least one parent.
From LinkAhead WebUI version 0.15, the default behavior for changing
the values of reference properties has changed in that the dropdown
menus to select possible values are not filled automatically for
`performance reasons
<https://gitlab.com/linkahead/linkahead-webui/-/issues/262>`_. Instead,
you have to click on the pencil symbol to the right of the property
you want to edit:
.. image:: edit-lazy-load-dropdown.png
:width: 720
:alt: Clicking on the pencil symbol enables the editing of the
reference property.
.. note::
The behavior of version 0.14.x and before, i.e., enable and load
all reference dropdowns immediatly after starting to edit the
entity, can be restored by starting LinkAhead with the
``BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING = DISABLED`` option.
When many Entities are valid candidates for a reference property not all
might be available in the drop down element. In those cases, the drop down
warns, that only a subset is shown and a new button with a pencil symbol is
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment