ENH: Allow sorting of properties

Summary

For https://gitlab.indiscale.com/caosdb/customers/leibniz-zmt/management/-/issues/140. Adds the possibility to configure the order in which the properties of (Records of) a defined RecordType are shown.

Focus

Test Environment

New unit tests should be more or less sufficient. Also test this manually, e.g. by using the demo profile, enabling BUILD_MODULE_EXT_PROPERTY_DISPLAY, and adding the following to your conf/ext/json/ext_prop_display.json:

{
    "MusicalInstrument": {
        "order": ["Photograph", "electric"]
    }
}

Make sure that all properties of all instruments are displayed in the correct order, and that properties that are not part of the order list are appended.

You may also want to verify that the feature does not interfere with the hiding of properties.

Also check whether the new documentation is understandable.

Check List for the Author

Please, prepare your MR for a review. Be sure to write a summary and a focus and create gitlab comments for the reviewer. They should guide the reviewer through the changes, explain your changes and also point out open questions. For further good practices have a look at our review guidelines

• All automated tests pass
• Reference related issues
• Up-to-date CHANGELOG.md (or not necessary)
• Annotations in code (Gitlab comments)
  • Intent of new code
  • Problems with old code
  • Why this implementation?

Check List for the Reviewer

• I understand the intent of this MR
• All automated tests pass
• Up-to-date CHANGELOG.md (or not necessary)
• The test environment setup works and the intended behavior is reproducible in the test environment
• In-code documentation and comments are up-to-date.
• Check: Are there specifications? Are they satisfied?

For further good practices have a look at our review guidelines.

src/core/js/ext_prop_display.js

@@ -51,7 +51,7 @@ var prop_display = new function ($, edit_mode, getEntityName, getEntityRole, get
         return $(".caosdb-entity-panel,.caosdb-entity-preview");
     }
 
-    this.unhideProperties = function (entities, conf, allTypes, userName, userRoles) {
+    this.displayProperties = function (entities, conf, allTypes, userName, userRoles) {
 
         for (let ent of entities) {
             let parents = getParents(ent).map(par => par.name);
@@ -66,9 +66,12 @@ var prop_display = new function ($, edit_mode, getEntityName, getEntityRole, get
                 for (let typeName of Object.keys(conf)) {
                     let typeConf = conf[typeName];
                     let allNames = allTypes.typesWithChildren[typeName];
-                    // only hide something if there is a match in at least one parent type
+                    // only change the display something if there is a match in
+                    // at least one parent type
                     if (parents.some(par => allNames.includes(par)) ||
                         (getEntityRole(ent) == "RecordType" && allNames.includes(getEntityName(ent)))) {
+                        // first sort the properties
+                        this._sortProperties(ent, properties, typeConf);
                         properties.forEach((prop, index) => {
                             if (this._hide_property(getPropertyName(prop), userName, userRoles, typeConf)) {
                                 // Should be hidden by default but better safe than sorry
@@ -87,6 +90,31 @@ var prop_display = new function ($, edit_mode, getEntityName, getEntityRole, get
         }
     }
 
+    this._sortProperties = function (entity, properties, conf) {
+        if (conf.order == undefined || conf.order.length == 0) {
+            return;
+        }
+        properties.sort(function (a, b) {
+            let confIndexA = conf.order.indexOf(getPropertyName(a));
+            let confIndexB = conf.order.indexOf(getPropertyName(b));
+            if (confIndexA < 0 && confIndexB < 0) {
+                // both are not part of order list
+                return 0;
+            }
+            if (confIndexA < 0) {
+                // only b is part of order list , so it is placed before a
+                return 1;
+            }
+            if (confIndexB < 0) {
+                // only a is part of order list, so it is placed before b
+                return -1;
+            }
+            // From here, we can assume that both are in the order list:
+            return confIndexA - confIndexB;
+        });
+        $(entity).find(".caosdb-properties").append(properties);
+    }
+
     this._hide_property = function (propname, userName, userRoles, conf) {
 
         // is this property only shown for certain users/groups?
@@ -154,7 +182,7 @@ var prop_display = new function ($, edit_mode, getEntityName, getEntityRole, get
         return result;
     }
 
-    this._unhidePropertiesWrapper = function (original, conf, allTypes) {
+    this._displayPropertiesWrapper = function (original, conf, allTypes) {
         // Same as above, but for when there actually may be something to hide
         // (i.e., build variable is set and config is non-empty).
         const result = function (entitiy) {
@@ -165,7 +193,7 @@ var prop_display = new function ($, edit_mode, getEntityName, getEntityRole, get
             var entities = prop_display.getEntitiesInView();
             const userName = getUserName();
             const userRoles = getUserRoles();
-            prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+            prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
             return original_return;
         }
 
@@ -179,11 +207,11 @@ var prop_display = new function ($, edit_mode, getEntityName, getEntityRole, get
             var entities = this.getEntitiesInView();
             const userName = getUserName();
             const userRoles = getUserRoles();
-            this.unhideProperties(entities, conf, allTypes, userName, userRoles);
+            this.displayProperties(entities, conf, allTypes, userName, userRoles);
             // If we are in the edit mode, (un)hide properties after ending
             // the editing of an entity
             document.body.addEventListener(edit_mode.start_edit.type, (e) => {
-                edit_mode.app.onAfterShowResults = this._unhidePropertiesWrapper(edit_mode.app.onAfterShowResults, conf, allTypes);
+                edit_mode.app.onAfterShowResults = this._displayPropertiesWrapper(edit_mode.app.onAfterShowResults, conf, allTypes);
             }, true);
 
         } else {