simplify the fields in the node class and make the up and down movement of nodes between siblings

Author: davidmartinezros

src/app/node-tree/node-tree.component.css

@@ -18,6 +18,12 @@ div.text {
  background: lightgoldenrodyellow;
 }
 
+div.description {
+ display: inline-block;
+ line-height: 15px;
+ font-family: arial;
+}
+
 div.text:hover {
  border: 1px solid darkgoldenrod;
  color:black;

src/app/node-tree/node-tree.component.html

@@ -12,14 +12,21 @@
  <img *ngIf="hasLeaf() && node.expand" src="./assets/collapse_icon.png" (click)="clickExpandCollapse()"/>
  <img *ngIf="hasLeaf() && !node.expand" src="./assets/expand_icon.png" (click)="clickExpandCollapse()"/>
  <img *ngIf="!hasLeaf()" src="./assets/line_sheet.png"/>
- </span>
+ </span> 
 
- <div class="text"><b>{{ node.name }}</b> el seu pare es: {{ getParentId() }}</div>
+ <div class="text" title="His parent is: {{ getParentName() }} with id: {{ getParentId() }}">
+ <b>{{ node.name }}</b>
+ </div>
+ <img *ngIf="!node.firstNode" src="./assets/up.png" (click)="upNode()"/>
+ <img *ngIf="!node.lastNode" src="./assets/down.png" (click)="downNode()"/>
+ <div class="description">
+ {{ node.description }}
+ </div>
 </div>
 <div *ngIf="hasLeaf()">
  <div *ngIf="node.expand">
- <div *ngFor="let child of node.childs; let lastNodeChild = last">
- <app-node-tree [node]="child" [parent]="node" [lastNode]="lastNodeChild"></app-node-tree>
+ <div *ngFor="let child of node.childs; let firstNodeChild = first; let lastNodeChild = last">
+ <app-node-tree [node]="child" [parent]="node" [firstNode]="firstNodeChild" [lastNode]="lastNodeChild"></app-node-tree>
  </div>
  </div>
 </div>

src/app/node-tree/node-tree.component.ts

@@ -13,6 +13,8 @@ export class NodeTreeComponent implements OnInit {
 
  @Input() parent: Node;
 
+ @Input() firstNode;
+
  @Input() lastNode;
 
  constructor() { }
@@ -37,7 +39,16 @@ export class NodeTreeComponent implements OnInit {
  }
  }
 
+ getParentName(): string {
+ if(this.node.ancestors != null && this.node.ancestors.length > 0) {
+ return this.node.ancestors[this.node.ancestors.length-1].name;
+ } else {
+ return "root";
+ }
+ }
+
  loadNode() {
+ this.node.firstNode = this.firstNode;
  this.node.lastNode = this.lastNode;
  console.log("el node " + this.node.name + " te lastNode " + this.node.lastNode);
  if(this.node.ancestors == null) {
@@ -57,4 +68,99 @@ export class NodeTreeComponent implements OnInit {
  console.log('el node ' + this.node.name + " te " + this.node.ancestors.length + " parents.");
  }
 
+ upNode() {
+ console.log('upNode');
+
+ let parentTree: Node;
+
+ if(this.node.ancestors != null && this.node.ancestors.length > 0) {
+ parentTree = this.node.ancestors[this.node.ancestors.length-1];
+ }
+
+ if(parentTree != null) {
+ const nodeIndex = parentTree.childs.indexOf(this.node);
+ const siblingIndex = nodeIndex -1;
+ const siblingNode = parentTree.childs[siblingIndex];
+
+ console.log('nodeIndex:' + nodeIndex);
+ console.log('siblingIndex:' + siblingIndex);
+ console.log('this.node.ancestors.length:' + this.node.ancestors.length);
+
+ let firstNode = false;
+ let lastNode = false;
+ if(nodeIndex === 0) {
+ firstNode = true;
+ }
+ if(nodeIndex === parentTree.childs.length-1) {
+ lastNode = true;
+ }
+
+ let firstNodeSibling = false;
+ let lastNodeSibling = false;
+ if(siblingIndex === 0) {
+ firstNodeSibling = true;
+ }
+ if(siblingIndex === parentTree.childs.length-1) {
+ lastNodeSibling = true;
+ }
+ 
+ this.node.lastNode = lastNodeSibling;
+ this.node.firstNode = firstNodeSibling;
+ siblingNode.lastNode = lastNode;
+ siblingNode.firstNode = firstNode;
+
+ parentTree.childs[siblingIndex] = this.node;
+ parentTree.childs[nodeIndex] = siblingNode;
+
+ }
+ 
+ }
+
+ downNode() {
+ console.log('downNode');
+ 
+ let parentTree: Node;
+
+ if(this.node.ancestors != null && this.node.ancestors.length > 0) {
+ parentTree = this.node.ancestors[this.node.ancestors.length-1];
+ }
+
+ if(parentTree != null) {
+ const nodeIndex = parentTree.childs.indexOf(this.node);
+ const siblingIndex = nodeIndex +1;
+ const siblingNode = parentTree.childs[siblingIndex];
+
+ console.log('nodeIndex:' + nodeIndex);
+ console.log('siblingIndex:' + siblingIndex);
+ console.log('parentTree.childs.length:' + parentTree.childs.length);
+
+ let firstNode = false;
+ let lastNode = false;
+ if(nodeIndex === 0) {
+ firstNode = true;
+ }
+ if(nodeIndex === parentTree.childs.length-1) {
+ lastNode = true;
+ }
+
+ let firstNodeSibling = false;
+ let lastNodeSibling = false;
+ if(siblingIndex === 0) {
+ firstNodeSibling = true;
+ }
+ if(siblingIndex === parentTree.childs.length-1) {
+ lastNodeSibling = true;
+ }
+ 
+ this.node.lastNode = lastNodeSibling;
+ this.node.firstNode = firstNodeSibling;
+ siblingNode.lastNode = lastNode;
+ siblingNode.firstNode = firstNode;
+
+ parentTree.childs[siblingIndex] = this.node;
+ parentTree.childs[nodeIndex] = siblingNode;
+
+ }
+ }
+
 }

src/app/node.class.ts

@@ -1,11 +1,13 @@
 export class Node {
  id: number;
  name: string;
+ description: string;
 
  childs: Node[];
 
  expand: boolean = false;
 
+ firstNode: boolean;
  lastNode: boolean;
 
  ancestors: Node[];

src/app/tree/tree.component.html

@@ -1,5 +1,5 @@
 <div class="parent"> 
- <div *ngFor="let node of tree | async; let lastNode = last">
- <app-node-tree [node]="node" [parent]="" [lastNode]="lastNode"></app-node-tree>
+ <div *ngFor="let node of tree | async; let firstNode = first; let lastNode = last">
+ <app-node-tree [node]="node" [parent]="" [firstNode]="firstNode" [lastNode]="lastNode"></app-node-tree>
  </div>
 </div>

src/assets/down.png

@@ -2,107 +2,129 @@
  {
  "id": 1,
  "name": "Node 1",
+ "description": "Desc Node 1",
  "childs":
  [
  {
  "id": 11,
- "name": "Node 1.1"
+ "name": "Node 1.1",
+ "description": "Desc Node 1.1"
  },
  {
  "id": 12,
  "name": "Node 1.2",
+ "description": "Desc Node 1.2",
  "childs":
  [
  {
  "id": 121,
- "name": "Node 1.2.1"
+ "name": "Node 1.2.1",
+ "description": "Desc Node 1.2.1"
  }
  ]
  },
  {
  "id": 13,
- "name": "Node 1.3"
+ "name": "Node 1.3",
+ "description": "Desc Node 1.3"
  }
  ]
  },
  {
  "id": 2,
  "name": "Node 2",
+ "description": "Desc Node 2",
  "childs":
  [
  {
  "id": 21,
- "name": "Node 2.1"
+ "name": "Node 2.1",
+ "description": "Desc Node 2.1"
  },
  {
  "id": 22,
  "name": "Node 2.2",
+ "description": "Desc Node 2.2",
  "childs":
  [
  {
  "id": 221,
- "name": "Node 2.2.1"
+ "name": "Node 2.2.1",
+ "description": "Desc Node 2.2.1"
  }
  ]
  },
  {
  "id": 23,
- "name": "Node 2.3"
+ "name": "Node 2.3",
+ "description": "Desc Node 2.3"
  },
  {
  "id": 24,
- "name": "Node 2.4"
+ "name": "Node 2.4",
+ "description": "Desc Node 2.4"
  },
  {
  "id": 25,
- "name": "Node 2.5"
+ "name": "Node 2.5",
+ "description": "Desc Node 2.5"
  }
  ]
  },
  {
  "id": 3,
  "name": "Node 3",
+ "description": "Desc Node 3",
  "childs":
  [
  {
  "id": 31,
- "name": "Node 3.1"
+ "name": "Node 3.1",
+ "description": "Desc Node 3.1"
  },
  {
  "id": 32,
  "name": "Node 3.2",
+ "description": "Desc Node 3.2",
  "childs":
  [
  {
  "id": 321,
- "name": "Node 3.2.1"
+ "name": "Node 3.2.1",
+ "description": "Desc Node 3.2.1"
  }
  ]
  },
  {
  "id": 33,
- "name": "Node 3.3"
+ "name": "Node 3.3",
+ "description": "Desc Node 3.3"
  },
  {
  "id": 34,
  "name": "Node 3.4",
+ "description": "Desc Node 3.4",
  "childs":
  [
  {
  "id": 341,
- "name": "Node 3.4.1"
+ "name": "Node 3.4.1",
+ "description": "Desc Node 3.4.1"
  },
  {
  "id": 342,
- "name": "Node 3.4.2"
+ "name": "Node 3.4.2",
+ "description": "Desc Node 3.4.2"
  },
  {
  "id": 343,
- "name": "Node 3.4.3"
+ "name": "Node 3.4.3",
+ "description": "Desc Node 3.4.3"
  },
  {
  "id": 344,
- "name": "Node 3.4.4"
+ "name": "Node 3.4.4",
+ "description": "Desc Node 3.4.4"
  }
  ]
  }