Merge pull request HyperIoT-Labs#13 from gab-los/main

Implement sorting on the field treeview
Belgarat · May 26, 2023 · c40c114 · c40c114
2 parents 1cd8973 + 1ae1a25
commit c40c114
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hyperiot",
-  "version": "2.2.15",
+  "version": "2.2.16",
   "scripts": {
     "ng": "node_modules/.bin/ng",
     "ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",

diff --git a/projects/components/src/lib/hyt-inner-field-select/hyt-inner-field-select.component.html b/projects/components/src/lib/hyt-inner-field-select/hyt-inner-field-select.component.html
@@ -11,7 +11,7 @@
                         (change)="itemSelectToggle(node)" [disabled]="isDisabled(node)">{{node.name}}</mat-checkbox>
                 </li>
             </mat-tree-node>
-            <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
+            <mat-nested-tree-node *matTreeNodeDef="let node; when: isObjectField">
                 <li>
                     <div class="mat-tree-node">
                         <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">

diff --git a/projects/components/src/lib/hyt-inner-field-select/hyt-inner-field-select.component.ts b/projects/components/src/lib/hyt-inner-field-select/hyt-inner-field-select.component.ts
@@ -50,14 +50,14 @@ export class HytInnerFieldSelectComponent implements OnChanges, OnInit {
   sortFields(fields: HPacketField[]): HPacketField[] {
     return fields
       .sort((a, b) => {
-        // Sort fields with children above fields without children
-        if (a.innerFields.length && !b.innerFields.length) {
+        // Sort fields of type OBJECT above other fields
+        if (a.type === HPacketField.TypeEnum.OBJECT && !(b.type === HPacketField.TypeEnum.OBJECT)) {
           return -1;
-        } else if (!a.innerFields.length && b.innerFields.length) {
+        } else if (!(a.type === HPacketField.TypeEnum.OBJECT) && b.type === HPacketField.TypeEnum.OBJECT) {
           return 1;
         }
         // Sort fields alphabetically by name
-        return a.name.localeCompare(b.name)
+        return a.name.localeCompare(b.name);
       })
       .map(field => {
         if (field.innerFields) {
@@ -68,7 +68,7 @@ export class HytInnerFieldSelectComponent implements OnChanges, OnInit {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const sortedFields = this.sortFields(this.fields)
+    const sortedFields = this.sortFields(this.fields);
     this.dataSource.data = sortedFields;
     if (this.selectedFieldsIds.length > 0) {
       this.selectedFieldsIds.forEach(fieldId => {
@@ -84,7 +84,7 @@ export class HytInnerFieldSelectComponent implements OnChanges, OnInit {
 
   ngOnInit(): void { }
 
-  hasChild = (_: number, field: HPacketField) => !!field.innerFields && field.innerFields.length > 0;
+  isObjectField = (_: number, field: HPacketField) => field.type === HPacketField.TypeEnum.OBJECT;
   isChecked = (field: HPacketField) => this.selectedFieldsIds.some(fId => fId === field.id);
   isDisabled = (field: HPacketField) => {
     if (this.isMultiSelect) {

diff --git a/projects/components/src/lib/hyt-tree-view-editable/hyt-tree-view-editable.component.ts b/projects/components/src/lib/hyt-tree-view-editable/hyt-tree-view-editable.component.ts
@@ -2,6 +2,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { Component, Injectable, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';
 import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
+import { HPacketField } from 'core';
 import { BehaviorSubject } from 'rxjs';
 
 export class Node {
@@ -165,14 +166,36 @@ export class HytTreeViewEditableComponent implements OnInit {
     this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
     database.dataChange.subscribe(data => {
-      this.dataSource.data = data;
+      const sortedData = this.sortNodes(data);
+      this.dataSource.data = sortedData;
     });
   }
 
   ngOnInit() {
     this.database.initialize(this.tree, this.deviceName);
   }
 
+
+  sortNodes(nodes: Node[]): Node[] {
+    return nodes
+      .sort((a, b) => {
+        // Sort nodes of type OBJECT above other nodes
+        if (a.type === HPacketField.TypeEnum.OBJECT && !(b.type === HPacketField.TypeEnum.OBJECT)) {
+          return -1;
+        } else if (!(a.type === HPacketField.TypeEnum.OBJECT) && b.type === HPacketField.TypeEnum.OBJECT) {
+          return 1;
+        }
+        // Sort nodes alphabetically by name
+        return a.name.localeCompare(b.name);
+      })
+      .map(node => {
+        if (node.children) {
+          node.children = this.sortNodes(node.children);
+        }
+        return node;
+      });
+  }
+
   getLevel = (node: FlatNode) => node.level;
 
   isExpandable = (node: FlatNode) => node.expandable;