Property Data Types considered for table ordering

Client/WebServer/css/governance.css

@@ -737,7 +737,7 @@
     vertical-align: top;
     }
     
-    .governance-info-table > thead > tr > th {
+    .governance-info-table > thead > tr > th > a {
     vertical-align: middle;
     text-transform: none;
     background-color: #333;

Projects/Governance/UI/Spaces/Reports-Space/ReportsSpace.js

@@ -7,6 +7,8 @@ function newGobernanceReportsSpace() {
         reportsPage: undefined,
         footer: undefined,
         userProfiles: undefined,
+        tablesSortingOrders: undefined,
+        changeTableSortingOrder,
         physics: physics,
         draw: draw,
         getContainer: getContainer,
@@ -64,6 +66,13 @@ function newGobernanceReportsSpace() {
         thisObject.userProfiles.initialize()
 
         setupSidePanelTab()
+
+        thisObject.tablesSortingOrders = {
+            userProfiles: {
+                property: 'name',
+                order: 'ascending'
+            }
+        }
         
         isInitialized = true
 
@@ -123,6 +132,10 @@ function newGobernanceReportsSpace() {
         }
     }
 
+    function changeTableSortingOrder(table, property, order){
+
+    }
+
     function onOpening() {
         thisObject.reportsPage.render()
     }

Projects/Governance/UI/Spaces/Reports-Space/UserProfiles.js

@@ -20,39 +20,104 @@ function newGovernanceReportsUserProfiles() {
 
         thisObject.resultCounter = 0
         let HTML = ''
-        let userProfiles = []
+        let tableRecords = []
+        let tableRecordDefinition = {
+            "properties": [
+                {
+                    "name": "name",
+                    "label": "Name",
+                    "type": "string"
+                },
+                {
+                    "name": "blockchainPower",
+                    "label": "Blockchain Power",
+                    "type": "number"
+                },
+                {
+                    "name": "delegatedPower",
+                    "label": "Name",
+                    "type": "number"
+                },
+                {
+                    "name": "tokenPower",
+                    "label": "Token Power",
+                    "type": "number"
+                }
+            ]
+        }
         let resultsArary = UI.projects.foundations.spaces.designSpace.workspace.getHierarchyHeadsByNodeType('User Profile')
 
         for (let j = 0; j < resultsArary.length; j++) {
             let node = resultsArary[j]
 
-            let userProfile = {
+            let tableRecord = {
                 "name": node.name,
                 "blockchainPower": node.payload.blockchainTokens,
                 "delegatedPower": node.payload.tokenPower - node.payload.blockchainTokens,
                 "tokenPower": node.payload.tokenPower
             }
 
-            userProfiles.push(userProfile)
+            tableRecords.push(tableRecord)
         }
 
-        userProfiles.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1)
+        /*
+        Apply the sorting order for this table.
+        */
+        let sortingOrder = UI.projects.governance.spaces.reportsSpace.tablesSortingOrders['userProfiles']
+        let propertyType
+
+        for (let i = 0; i < tableRecordDefinition.properties.length; i++) {
+            let property = tableRecordDefinition.properties[i]
+            if (property.name === sortingOrder.property) {
+                propertyType = property.type
+                break
+            }
+        }
+
+        switch (propertyType) {
+            case 'string': {
+                switch (sortingOrder.order) {
+                    case 'ascending': {
+                        tableRecords.sort((a, b) => (a[sortingOrder.property].toLowerCase() > b[sortingOrder.property].toLowerCase()) ? 1 : -1)
+                        break
+                    }
+                    case 'descending': {
+                        tableRecords.sort((a, b) => (a[sortingOrder.property].toLowerCase() > b[sortingOrder.property].toLowerCase()) ? -1 : 1)
+                        break
+                    }
+                }
+                break
+            }
+            case 'number': {
+                switch (sortingOrder.order) {
+                    case 'ascending': {
+                        tableRecords.sort((a, b) => (a[sortingOrder.property] > b[sortingOrder.property]) ? 1 : -1)
+                        break
+                    }
+                    case 'descending': {
+                        tableRecords.sort((a, b) => (a[sortingOrder.property] > b[sortingOrder.property]) ? -1 : 1)
+                        break
+                    }
+                }
+                break
+            }
+        }
 
         let odd = false
 
         HTML = HTML + '<table class="governance-info-table">'
         HTML = HTML + '<thead>'
         HTML = HTML + '<tr>'
-        HTML = HTML + '<th>' + 'Name' + '</th>'
-        HTML = HTML + '<th>' + 'Blockchain Power' + '</th>'
-        HTML = HTML + '<th>' + 'Delegated Power' + '</th>'
-        HTML = HTML + '<th>' + 'Token Power' + '</th>'
+        for (let i = 0; i < tableRecordDefinition.properties.length; i++) {
+            let property = tableRecordDefinition.properties[i]
+            HTML = HTML + '<th>' + '<a href="#" onClick="UI.projects.governance.spaces.reportsSpace.changeTableSortingOrder(\'' + property.name + '\')">' + property.label + '</a>' + '</th>'
+        }
         HTML = HTML + '</tr>'
         HTML = HTML + '<thead>'
         HTML = HTML + '<tbody>'
 
-        for (let j = 0; j < userProfiles.length; j++) {
-            let userProfile = userProfiles[j]
+        for (let j = 0; j < tableRecords.length; j++) {
+            let tableRecord = tableRecords[j]
 
             if (odd === true) {
                 HTML = HTML + '<tr class="governance-info-table-alt-bg">'
@@ -63,11 +128,11 @@ function newGovernanceReportsUserProfiles() {
             }
 
             /*
-            Iterate through an object properties.
+            Iterate through tableRecord properties.
             */
-            for (var property in userProfile) {
-                if (Object.prototype.hasOwnProperty.call(userProfile, property)) {
-                    HTML = HTML + '<td>' + userProfile[property] + '</td>'
+            for (var property in tableRecord) {
+                if (Object.prototype.hasOwnProperty.call(tableRecord, property)) {
+                    HTML = HTML + '<td>' + tableRecord[property] + '</td>'
                 }
             }