Merge pull request #1508 from RobAndrewHurst/infoj_order

Infoj Order Correction

lib/ui/locations/infoj.mjs

@@ -45,32 +45,48 @@ export default function infoj(location, infoj_order) {
   // Create object to hold view groups.
   groups = {}
 
-  // The infoj_order may be assigned to the layer.
-  infoj_order ??= location?.layer?.infoj_order
-
   // infoj argument is provided as an array of strings to filter the location infoj entries.
   const infoj = Array.isArray(infoj_order) ?
-    infoj_order.map(_entry => {
+    infoj_order
+      .map(infoj_orderMap)
+      .filter(entry => entry !== undefined)
+    : location.infoj;
+
+  /**
+  @function infoj_orderMap
+
+  @description
+  The infoj_order argument allows to order and filter the location.layer.infoj array.
 
-      if (typeof _entry === 'string') {
-        const infoj_order_field = location.infoj.find(entry => (entry.key || entry.field || entry.query) === _entry);
+  The map function attempts to find and return an infoj-entry whose key, field, or query property values match the _entry string.
 
-        // if undefined then warn the user.
-        if (!infoj_order_field) console.warn(`infoj_order field: "${_entry}" not found in location.infoj. Please add entry.key, entry.field, or entry.query to the entry.`);
+  If typeof object the _entry itself will be returned. This allows for additional infoj-entry objects to be spliced into the infoj array.
 
-        // Check whether the _entry string matches an infoj entry keyvalue.
-        return infoj_order_field
+  @param {string||object} _entry 
+  @returns {infoj-entry} Either the _entry object itself, a lookup entry from the location.layer.infoj array, or undefined.
+  */
+  function infoj_orderMap(_entry) {
 
-      } else if (typeof _entry === 'object') {
+    if (typeof _entry === 'string') {
 
-        _entry.location = location
+      // Find infoj-entry with matching key, field, or query property.
+      const infoj_order_field = location.infoj
+        .find(entry => new Set([entry.key, entry.field, entry.query]).has(_entry));
 
-        // Return object _entry.
-        return _entry
+      if (!infoj_order_field) {
+        console.warn(`infoj_order field: "${_entry}" not found in location.infoj. Please add entry.key, entry.field, or entry.query to the entry.`);
       }
-    }).filter(entry => entry !== undefined)
-    : location.infoj;
-
+
+      return infoj_order_field
+
+    } else if (typeof _entry === 'object') {
+
+      _entry.location = location
+
+      return _entry
+    }
+  }
+
   let keyIdx = 0;
 
   // Iterate through info fields and add to info table.
@@ -314,7 +330,7 @@ The group layout will be expanded by adding the expanded class to the group elem
 @property {HTMLElement} entry.listview The listview element will be returned from the infoj method and appended to the location.view.
 */
 function entryGroup(entry) {
-  
+
   if (!entry.group) return;
 
   // Create new group

tests/browser/local.test.mjs

@@ -14,6 +14,8 @@ import { ui_layers } from '../lib/ui/layers/_layers.test.mjs';
 import { entriesTest } from '../lib/ui/locations/entries/_entries.test.mjs';
 import { uiTest } from '../lib/ui/_ui.test.mjs';
 import { formatTest } from '../lib/layer/format/_format.test.mjs';
+import { ui_locations } from '../lib/ui/locations/_locations.test.mjs';
+
 //API Tests
 await workspaceTest();
 await queryTest();
@@ -54,4 +56,6 @@ await ui_layers.filtersTest(mapview);
 
 await uiTest.Tabview();
 
-await formatTest.vectorTest(mapview);
+await formatTest.vectorTest(mapview);
+
+await ui_locations.infojTest();

tests/lib/ui/locations/_locations.test.mjs

@@ -0,0 +1,3 @@
+import { infojTest } from './infoj.test.mjs';
+
+export const ui_locations = { infojTest };

tests/lib/ui/locations/infoj.test.mjs

@@ -0,0 +1,78 @@
+/**
+ * This function is used as an entry point for the infoj test
+ * @function injojTest
+ */
+export async function infojTest() {
+  codi.describe('UI Locations: infojTest', async () => {
+    /**
+     * ### It should create an infoj with a correct order
+     * 1. We define an infoj with a combination of different entries with keys, fields and queries
+     * 2. We assert against the order
+     * @function it
+     */
+    await codi.it('It should create an infoj with certain order', async () => {
+
+      const location = {
+        infoj: [
+          {
+            field: 'field_1',
+            key: 'key_1',
+            label: 'test_1',
+            value: 'test 1 value'
+          },
+          {
+            field: 'field_2',
+            label: 'test_2',
+            value: 'value_2'
+          },
+          {
+            field: 'field_3',
+            label: 'test_3',
+            value: 'value_3'
+          },
+          {
+            key: 'key_4',
+            value: 'value_4'
+          },
+          {
+            query: 'query_5',
+            value: 'value_5',
+            location: {}
+          }
+        ]
+      };
+
+      const infoj_order = [
+        '_field_1',
+        'field_2',
+        'field_3',
+        'key_4',
+        'query_5',
+        {
+          field: 'field6',
+          value: 'value_6'
+        }
+      ];
+
+      // Get listview element from the infoj object
+      const infoj = mapp.ui.locations.infoj(location, infoj_order);
+
+      // Get textvalues from location listview elements.
+      const results = Array.from(infoj.children)
+        .map(el => el.firstChild.innerText.trim())
+
+      // Expected results
+      const expected = [
+        'value_2',
+        'value_3',
+        'value_4',
+        'value_5',
+        'value_6'
+      ];        
+
+      // Asserting we get the expected results and order
+      codi.assertEqual(results, expected, 'The infoj order needs to be as defined in the expected');
+
+    });
+  });
+}