first version with some visualization errors and without styles and functionality

Author: David Martínez Ros

src/app/app.component.css

@@ -3,6 +3,3 @@ table, th, td {
  padding:1px 3px;
  font:15px Verdana;
 }
-th {
- font-weight:bold;
-}

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

@@ -1,9 +1,22 @@
 <div id="{{ node.id }}">
- <img *ngIf="!last" src="../assets/line_node_and_continue.png" (click)="clickExpandCollapse()"/>
- <img *ngIf="last" src="../assets/line_node_and_end.png" (click)="clickExpandCollapse()"/>
+ <span *ngIf="countParents > 0">
+ <img *ngIf="!lastParentNode" src="../assets/line_continue.png"/>
+ <img *ngIf="lastParentNode" src="../assets/blank_node.png"/>
+ <img *ngFor="let i of getNumber(countParents -1)" src="../assets/line_continue.png"/>
+ </span>
+ 
+ <img *ngIf="!lastNode" src="../assets/line_node_and_continue.png"/>
+ <img *ngIf="lastNode" src="../assets/line_node_and_end.png"/>
  <img *ngIf="!node.sheet && node.expand" src="../assets/collapse_icon.png" (click)="clickExpandCollapse()"/>
  <img *ngIf="!node.sheet && !node.expand" src="../assets/expand_icon.png" (click)="clickExpandCollapse()"/>
  <img *ngIf="node.sheet" src="../assets/line_sheet.png" (click)="clickExpandCollapse()"/>
 
  <span><b>{{ node.name }}</b> el seu pare es: {{ node.idParent }}</span>
-</div>
+</div>
+<div *ngIf="!node.sheet">
+ <div *ngIf="node.expand">
+ <div *ngFor="let child of node.childs; let lastNodeChild = last">
+ <app-node-tree [node]="child" [lastParentNode]="lastNode" [countParents]="countParents + 1" [lastNode]="lastNodeChild"></app-node-tree>
+ </div>
+ </div>
+</div>

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

@@ -11,7 +11,11 @@ export class NodeTreeComponent implements OnInit {
 
  @Input() node: Node;
 
- @Input() last: boolean;
+ @Input() lastNode: boolean;
+
+ @Input() lastParentNode: boolean;
+
+ @Input() countParents: number;
 
  constructor() { }
 
@@ -22,4 +26,8 @@ export class NodeTreeComponent implements OnInit {
  this.node.expand = !this.node.expand;
  }
 
+ getNumber(num: number) {
+ return new Array(num); 
+ }
+
 }

src/app/tree/tree.component.html

@@ -1,12 +1,6 @@
-<div *ngFor="let node of tree | async; let i of index">
- <app-node-tree [node]="node" [last]="i == tree.length"></app-node-tree>
- <div *ngIf="!node.sheet">
- <div *ngIf="node.expand" style="padding-left:10px">
- <div *ngFor="let child of node.childs; let j of index">
- <app-node-tree [node]="child" [last]="j == node.childs.length"></app-node-tree>
- </div>
- </div>
- </div> 
+<div *ngFor="let node of tree | async; let lastParentNode = last">
+ <app-node-tree [node]="node" [lastParentNode]="true" [countParents]="0" [lastNode]="lastParentNode"></app-node-tree>
+ 
  <!--
  haure de fer algo aixi 
  <app-node-tree [node]="node" [lastParentNode]="lastParentNode" [lastNode]="lastNode"></app-node-tree>

src/assets/blank_node.png

@@ -1 +1 @@
-/* You can add global styles to this file, and also import other style files */
+/* You can add global styles to this file, and also import other style files */