ENH: Allow sorting of properties

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);
@@ -69,6 +69,7 @@ var prop_display = new function ($, edit_mode, getEntityName, getEntityRole, get
                     // only hide 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)))) {
+                        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 +88,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 +180,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 +191,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 +205,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 {

test/core/js/modules/ext_prop_display.js.js

@@ -48,7 +48,7 @@ QUnit.test("unhide all properties", function (assert) {
 
 QUnit.test("hide properties garbage type", function (assert) {
     assert.ok(prop_display.getEntitiesInView, "getEntitiesInView available");
-    assert.ok(prop_display.unhideProperties, "unhideProperties available");
+    assert.ok(prop_display.displayProperties, "displayProperties available");
     const conf = {
         "DoesntExist": {
             "hide": [{
@@ -70,14 +70,14 @@ QUnit.test("hide properties garbage type", function (assert) {
     const entities = prop_display.getEntitiesInView();
     assert.equal(entities.length, 1, "only one entity in test data");
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 3, "all properties hidden initially");
-    prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 0, "no garbage-type entity, so no hidden properties");
     assert.equal($(document).find(".caosdb-v-show-property").length, 3, "all properties are being shown");
 });
 
 QUnit.test("hide properties garbage property", function (assert) {
     assert.ok(prop_display.getEntitiesInView, "getEntitiesInView available");
-    assert.ok(prop_display.unhideProperties, "unhideProperties available");
+    assert.ok(prop_display.displayProperties, "displayProperties available");
     const conf = {
         "MusicalInstrument": {
             "hide": [{
@@ -98,7 +98,7 @@ QUnit.test("hide properties garbage property", function (assert) {
     const entities = prop_display.getEntitiesInView();
     assert.equal(entities.length, 1, "only one entity in test data");
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 3, "all properties hidden initially");
-    prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 0, "no garbage property, so no hidden properties");
     assert.equal($(document).find(".caosdb-v-show-property").length, 3, "all properties are being shown");
 });
@@ -106,7 +106,7 @@ QUnit.test("hide properties garbage property", function (assert) {
 
 QUnit.test("hide properties", function (assert) {
     assert.ok(prop_display.getEntitiesInView, "getEntitiesInView available");
-    assert.ok(prop_display.unhideProperties, "unhideProperties available");
+    assert.ok(prop_display.displayProperties, "displayProperties available");
     const conf = {
         "MusicalInstrument": {
             "hide": [{
@@ -138,7 +138,7 @@ QUnit.test("hide properties", function (assert) {
     const entities = prop_display.getEntitiesInView();
     assert.equal(entities.length, 1, "only one entity in test data");
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 3, "all properties hidden initially");
-    prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 1, "exactly one hidden property");
     assert.equal($(document).find(".caosdb-v-show-property").length, 2, "the remaining two are shown");
     assert.equal($("#1").hasClass("caosdb-v-hidden-property"), true, "first prop hidden");
@@ -146,11 +146,11 @@ QUnit.test("hide properties", function (assert) {
     assert.equal($("#3").hasClass("caosdb-v-show-property"), true, "third prop shown");
 
     // reset
-    prop_display.unhideProperties(entities, conf, allTypes, "", []);
+    prop_display.displayProperties(entities, conf, allTypes, "", []);
     assert.equal($(document).find(".caosdb-v-show-property").length, 3, "all shown after reset");
 
     userRoles = ["some_other_role"];
-    prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 2, "two hidden properties");
     assert.equal($(document).find(".caosdb-v-show-property").length, 1, "the remaining one is shown");
     assert.equal($("#1").hasClass("caosdb-v-hidden-property"), true, "first prop hidden");
@@ -158,11 +158,11 @@ QUnit.test("hide properties", function (assert) {
     assert.equal($("#3").hasClass("caosdb-v-hidden-property"), true, "third prop hidden");
 
     // reset
-    prop_display.unhideProperties(entities, conf, allTypes, "", []);
+    prop_display.displayProperties(entities, conf, allTypes, "", []);
     assert.equal($(document).find(".caosdb-v-show-property").length, 3, "all shown after reset");
 
     userName = "someone else";
-    prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 2, "two hidden properties");
     assert.equal($(document).find(".caosdb-v-show-property").length, 1, "the remaining one is shown");
     assert.equal($("#1").hasClass("caosdb-v-show-property"), true, "first prop shown");
@@ -170,11 +170,11 @@ QUnit.test("hide properties", function (assert) {
     assert.equal($("#3").hasClass("caosdb-v-hidden-property"), true, "third prop hidden");
 
     // reset
-    prop_display.unhideProperties(entities, conf, allTypes, "", []);
+    prop_display.displayProperties(entities, conf, allTypes, "", []);
     assert.equal($(document).find(".caosdb-v-show-property").length, 3, "all shown after reset");
 
     userRoles = ["some_role", "some_other_role"]
-    prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 3, "two hidden properties");
     assert.equal($(document).find(".caosdb-v-show-property").length, 0, "None is shown");
     assert.equal($("#1").hasClass("caosdb-v-hidden-property"), true, "first prop hidden");
@@ -185,7 +185,7 @@ QUnit.test("hide properties", function (assert) {
 
 QUnit.test("show properties", function (assert) {
     assert.ok(prop_display.getEntitiesInView, "getEntitiesInView available");
-    assert.ok(prop_display.unhideProperties, "unhideProperties available");
+    assert.ok(prop_display.displayProperties, "displayProperties available");
     const conf = {
         "MusicalInstrument": {
             "show": [{
@@ -217,7 +217,7 @@ QUnit.test("show properties", function (assert) {
     const entities = prop_display.getEntitiesInView();
     assert.equal(entities.length, 1, "only one entity in test data");
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 3, "all properties hidden initially");
-    prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 2, "two hidden properties");
     assert.equal($(document).find(".caosdb-v-show-property").length, 1, "the remaining one shown");
     assert.equal($("#1").hasClass("caosdb-v-show-property"), true, "first prop shown");
@@ -225,11 +225,11 @@ QUnit.test("show properties", function (assert) {
     assert.equal($("#3").hasClass("caosdb-v-hidden-property"), true, "third prop hidden");
 
     // reset
-    prop_display.unhideProperties(entities, conf, allTypes, "", []);
+    prop_display.displayProperties(entities, conf, allTypes, "", []);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 3, "all hidden after reset");
 
     userRoles = ["some_other_role"];
-    prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 1, "one hidden properties");
     assert.equal($(document).find(".caosdb-v-show-property").length, 2, "the remaining two are shown");
     assert.equal($("#1").hasClass("caosdb-v-show-property"), true, "first prop shown");
@@ -237,11 +237,11 @@ QUnit.test("show properties", function (assert) {
     assert.equal($("#3").hasClass("caosdb-v-show-property"), true, "third prop shown");
 
     // reset
-    prop_display.unhideProperties(entities, conf, allTypes, "", []);
+    prop_display.displayProperties(entities, conf, allTypes, "", []);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 3, "all hidden after reset");
 
     userName = "someone else";
-    prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 1, "one hidden property");
     assert.equal($(document).find(".caosdb-v-show-property").length, 2, "the remaining ones are shown");
     assert.equal($("#1").hasClass("caosdb-v-hidden-property"), true, "first prop hidden");
@@ -249,11 +249,11 @@ QUnit.test("show properties", function (assert) {
     assert.equal($("#3").hasClass("caosdb-v-show-property"), true, "third prop shown");
 
     // reset
-    prop_display.unhideProperties(entities, conf, allTypes, "", []);
+    prop_display.displayProperties(entities, conf, allTypes, "", []);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 3, "all hidden after reset");
 
     userRoles = ["some_role", "some_other_role"]
-    prop_display.unhideProperties(entities, conf, allTypes, userName, userRoles);
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
     assert.equal($(document).find(".caosdb-v-hidden-property").length, 0, "no hidden properties");
     assert.equal($(document).find(".caosdb-v-show-property").length, 3, "All are shown");
     assert.equal($("#1").hasClass("caosdb-v-show-property"), true, "first prop shown");
@@ -261,3 +261,64 @@ QUnit.test("show properties", function (assert) {
     assert.equal($("#3").hasClass("caosdb-v-show-property"), true, "third prop shown");
 
 });
+
+QUnit.test("Sort properties", function (assert) {
+    assert.ok(prop_display.getEntitiesInView, "getEntitiesInView available");
+    assert.ok(prop_display.displayProperties, "displayProperties available");
+
+    var conf = {
+        "MusicalInstrument": {
+            "order": ["third prop", "first prop", "second prop"]
+        }
+    };
+    const allTypes = {
+        "typesWithChildren": {
+            "MusicalInstrument": ["MusicalInstrument", "Guitar"]
+        },
+        "allTypesOrChildren": ["MusicalInstrument", "Guitar"]
+    };
+    // username and roles don't matter for sorting
+    const userName = "";
+    const userRoles = [];
+    // initial order
+    var properties = $(document).find(".caosdb-v-property-row");
+    assert.equal(properties.index($("#1")), 0, "first prop at first position");
+    assert.equal(properties.index($("#2")), 1, "second prop at second position");
+    assert.equal(properties.index($("#3")), 2, "third prop at third position");
+
+    var entities = prop_display.getEntitiesInView();
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
+    properties = $(document).find(".caosdb-v-property-row");
+    assert.equal(properties.index($("#1")), 1, "first prop at second position");
+    assert.equal(properties.index($("#2")), 2, "second prop at third position");
+    assert.equal(properties.index($("#3")), 0, "third prop at first position");
+
+    // only specify first prop, the rest is appended in the previous order.
+    conf = {
+        "MusicalInstrument": {
+            "order": ["first prop"]
+        }
+    };
+    entities = prop_display.getEntitiesInView();
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
+    properties = $(document).find(".caosdb-v-property-row");
+    assert.equal(properties.index($("#1")), 0, "first prop at first position");
+    assert.equal(properties.index($("#2")), 2, "second prop at third position");
+    assert.equal(properties.index($("#3")), 1, "third prop at second position");
+
+    // two specified, the remaining prop is appended
+    conf = {
+        "MusicalInstrument": {
+            "order": ["second prop", "first prop"]
+        }
+    };
+    entities = prop_display.getEntitiesInView();
+    prop_display.displayProperties(entities, conf, allTypes, userName, userRoles);
+    properties = $(document).find(".caosdb-v-property-row");
+    assert.equal(properties.index($("#1")), 1, "first prop at second position");
+    assert.equal(properties.index($("#2")), 0, "second prop at first position");
+    assert.equal(properties.index($("#3")), 2, "third prop at third position");
+
+
+
+});