first version stable, with the correct generation of the tree

Author: David Martínez Ros

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

@@ -0,0 +1,16 @@
+div {
+ background: #363ca1;
+ border-radius: 4px;
+ box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
+ will-change: transform;
+ cursor: pointer;
+ padding: 0 0 0 0;
+ margin: 0 0 0 0;
+}
+
+.images {
+ float: left;
+ display: block;
+ padding: 0 0 0 0;
+ margin: 0 0 0 0;
+}

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

@@ -1,23 +1,25 @@
 <div id="{{ node.id }}">
- <span *ngIf="parents.length > 0">
- <span *ngFor="let p of parents">
- <img *ngIf="!p.lastParentNode" src="../assets/line_continue.png"/>
- <img *ngIf="p.lastParentNode" src="../assets/blank_node.png"/>
+ <span class="images">
+ <span *ngIf="node.parents.length > 0" class="images">
+ <span *ngFor="let p of node.parents" class="images">
+ <img *ngIf="!p.lastNode" src="../assets/line_continue.png"/>
+ <img *ngIf="p.lastNode" src="../assets/blank_node.png"/>
+ </span>
  </span>
+ 
+ <img *ngIf="!node.lastNode" src="../assets/line_node_and_continue.png"/>
+ <img *ngIf="node.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>
- 
- <img *ngIf="!node.lastNode" src="../assets/line_node_and_continue.png"/>
- <img *ngIf="node.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 *ngIf="!node.sheet">
  <div *ngIf="node.expand">
  <div *ngFor="let child of node.childs; let lastNodeChild = last">
- <app-node-tree [node]="child" [parents]="[node,parents]" [lastParentNode]="node.lastNode" [lastNode]="lastNodeChild"></app-node-tree>
+ <app-node-tree [node]="child" [parent]="node" [lastNode]="lastNodeChild"></app-node-tree>
  </div>
  </div>
 </div>

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

@@ -11,12 +11,10 @@ export class NodeTreeComponent implements OnInit {
 
  @Input() node: Node;
 
- @Input() parents: Node[];
+ @Input() parent: Node;
 
  @Input() lastNode;
 
- @Input() lastParentNode;
-
  constructor() { }
 
  ngOnInit() {
@@ -29,8 +27,22 @@ export class NodeTreeComponent implements OnInit {
 
  loadNode() {
  this.node.lastNode = this.lastNode;
- this.node.lastParentNode = this.lastParentNode;
- console.log('el node ' + this.node.name + " te " + this.parents.length + " parents.");
+ console.log("el node " + this.node.name + " te lastNode " + this.node.lastNode);
+ if(this.node.parents == null) {
+ this.node.parents = [];
+ }
+ if(this.parent != null) {
+ for(let p of this.parent.parents) {
+ if(!this.node.parents.filter(x => x.id === p.id)[0]) {
+ this.node.parents.push(p);
+ }
+ }
+ if(!this.node.parents.filter(x => x.id === this.parent.id)[0]) {
+ this.node.parents.push(this.parent);
+ }
+ console.log("afegim parent " + this.parent.name + " amnb lastNode " + this.parent.lastNode);
+ }
+ console.log('el node ' + this.node.name + " te " + this.node.parents.length + " parents.");
  }
 
 }

src/app/node.class.ts

@@ -10,5 +10,5 @@ export class Node {
 
  lastNode: boolean;
 
- lastParentNode: boolean;
+ parents: Node[];
 }

src/app/tree/tree.component.css

@@ -0,0 +1,4 @@
+div {
+ padding: 0 0 0 0;
+ margin: 0 0 0 0;
+}

src/app/tree/tree.component.html

@@ -1,5 +1,5 @@
-<div *ngFor="let node of tree | async; let lastParentNode = last">
- <app-node-tree [node]="node" [parents]="[]" [lastParentNode]="true" [lastNode]="lastParentNode"></app-node-tree>
+<div *ngFor="let node of tree | async; let lastNode = last">
+ <app-node-tree [node]="node" [parent]="" [lastNode]="lastNode"></app-node-tree>
 
  <!--
  haure de fer algo aixi