solution some bugs with the movement of a node with childs to the parent

Author: David Martínez Ros

run_ng_prod.bat

@@ -1 +1 @@
-ng build --base-href http://davidmartinezros.com/Angular2/component-tree-project/ --prod --env=prod
+ng build --prod --env=prod

src/app/load/load.component.html

@@ -1,7 +1,7 @@
 <div>
  <ul>
  <li>Load the file <input type="file" (change)="onChange($event)"/></li>
- <li>Example json file <a href="../../data/tree.json" target="_blank">download here</a></li>
+ <li>Example json file <a href="./assets/data/tree.json" target="_blank">download here</a></li>
  </ul>
 </div>
 <app-tree [(tree)]="tree"></app-tree>

src/app/load/load.component.ts

@@ -29,7 +29,7 @@ export class LoadComponent implements OnInit {
  }
 
  loadFile() {
- this.tree = this.service.getTree('./data/tree.json');
+ this.tree = this.service.getTree('./assets/data/tree.json');
  }
 
  onChange(event) {
@@ -42,7 +42,7 @@ export class LoadComponent implements OnInit {
  if(file != null) {
  url = URL.createObjectURL(file);
  } else {
- url = './data/tree.json';
+ url = './assets/data/tree.json';
  }
  console.log('url:' + url);
  if(url != null) {

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

@@ -26,7 +26,7 @@
 </div>
 <div *ngIf="hasLeaf()">
  <div *ngIf="node.expand">
- <div *ngFor="let child of node.childs; let firstNodeChild = first; let lastNodeChild = last">
+ <div *ngFor="let child of node.children; let firstNodeChild = first; let lastNodeChild = last">
  <app-node-tree [node]="child" [parent]="node" [firstNode]="firstNodeChild" [lastNode]="lastNodeChild"></app-node-tree>
  </div>
  </div>

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

@@ -28,7 +28,7 @@ export class NodeTreeComponent implements OnInit {
  }
 
  hasLeaf(): boolean {
- return ((this.node.childs != null) && (this.node.childs.length > 0));
+ return ((this.node.children != null) && (this.node.children.length > 0));
  }
 
  hasParent(): boolean {
@@ -55,6 +55,9 @@ export class NodeTreeComponent implements OnInit {
  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.children == null) {
+ this.node.children = [];
+ }
  if(this.node.ancestors == null) {
  this.node.ancestors = [];
  }
@@ -82,16 +85,16 @@ export class NodeTreeComponent implements OnInit {
  }
 
  if(parentTree != null) {
- const nodeIndex = parentTree.childs.indexOf(this.node);
+ const nodeIndex = parentTree.children.indexOf(this.node);
  const siblingIndex = nodeIndex -1;
- const siblingNode = parentTree.childs[siblingIndex];
+ const siblingNode = parentTree.children[siblingIndex];
 
  console.log('nodeIndex:' + nodeIndex);
  console.log('siblingIndex:' + siblingIndex);
  console.log('this.node.ancestors.length:' + this.node.ancestors.length);
 
- parentTree.childs[siblingIndex] = this.node;
- parentTree.childs[nodeIndex] = siblingNode;
+ parentTree.children[siblingIndex] = this.node;
+ parentTree.children[nodeIndex] = siblingNode;
 
  this.reloadFirstAndLastNode(parentTree, parentTree.firstNode, parentTree.lastNode);
  }
@@ -107,16 +110,16 @@ export class NodeTreeComponent implements OnInit {
  }
 
  if(parentTree != null) {
- const nodeIndex = parentTree.childs.indexOf(this.node);
+ const nodeIndex = parentTree.children.indexOf(this.node);
  const siblingIndex = nodeIndex +1;
- const siblingNode = parentTree.childs[siblingIndex];
+ const siblingNode = parentTree.children[siblingIndex];
 
  console.log('nodeIndex:' + nodeIndex);
  console.log('siblingIndex:' + siblingIndex);
- console.log('parentTree.childs.length:' + parentTree.childs.length);
+ console.log('parentTree.children.length:' + parentTree.children.length);
 
- parentTree.childs[siblingIndex] = this.node;
- parentTree.childs[nodeIndex] = siblingNode;
+ parentTree.children[siblingIndex] = this.node;
+ parentTree.children[nodeIndex] = siblingNode;
 
  this.reloadFirstAndLastNode(parentTree, parentTree.firstNode, parentTree.lastNode);
  }
@@ -138,24 +141,24 @@ export class NodeTreeComponent implements OnInit {
 
  if(parentTree != null && grandParentTree != null) {
 
- let ancestorsSecondLevel: Node[] = grandParentTree.childs;
- let childsSecondLevel: Node[] = [];
+ let ancestorsSecondLevel: Node[] = grandParentTree.children;
+ let childrenSecondLevel: Node[] = [];
  for(let ancestor of ancestorsSecondLevel) {
- childsSecondLevel.push(ancestor);
+ childrenSecondLevel.push(ancestor);
  if(ancestor === parentTree) {
- childsSecondLevel.push(this.node);
+ childrenSecondLevel.push(this.node);
  }
  }
- grandParentTree.childs = childsSecondLevel;
+ grandParentTree.children = childrenSecondLevel;
 
- let ancestorsFirstLevel: Node[] = parentTree.childs;
- let childsFirstLevel: Node[] = [];
+ let ancestorsFirstLevel: Node[] = parentTree.children;
+ let childrenFirstLevel: Node[] = [];
  for(let ancestor of ancestorsFirstLevel) {
  if(!(ancestor === this.node)) {
- childsFirstLevel.push(ancestor);
+ childrenFirstLevel.push(ancestor);
  }
  }
- parentTree.childs = childsFirstLevel;
+ parentTree.children = childrenFirstLevel;
 
  let ancestors: Node[] = [];
  for(let ancestor of this.node.ancestors) {
@@ -165,6 +168,8 @@ export class NodeTreeComponent implements OnInit {
  }
  this.node.ancestors = ancestors;
 
+ this.removeParentMovedInChildren(this.node, parentTree);
+
  this.reloadFirstAndLastNode(grandParentTree, grandParentTree.firstNode, grandParentTree.lastNode);
  }
  }
@@ -173,12 +178,27 @@ export class NodeTreeComponent implements OnInit {
  let i = 0;
  node.firstNode = firstNode;
  node.lastNode = lastNode;
- if(node.childs != null && node.childs.length > 0) {
- for(let child of node.childs) {
- this.reloadFirstAndLastNode(child, i === 0, i === node.childs.length-1);
+ if(node.children != null && node.children.length > 0) {
+ for(let child of node.children) {
+ this.reloadFirstAndLastNode(child, i === 0, i === node.children.length-1);
  i++;
  }
  }
  }
 
+ removeParentMovedInChildren(node: Node, parent: Node) {
+ for(let child of node.children) {
+ let ancestors: Node[] = [];
+ for(let ancestorChild of child.ancestors) {
+ if(!(ancestorChild === parent)) {
+ ancestors.push(ancestorChild);
+ }
+ }
+ child.ancestors = ancestors;
+ if(child.children.length > 0) {
+ this.removeParentMovedInChildren(child, parent);
+ }
+ } 
+ }
+ 
 }

src/app/node.class.ts

@@ -3,26 +3,13 @@ export class Node {
  name: string;
  description: string;
 
- childs: Node[];
+ children: Node[] = [];
 
  expand: boolean = false;
 
  firstNode: boolean;
  lastNode: boolean;
 
- ancestors: Node[];
-
- /*removeParentInChilds(parent: Node) {
- let ans: Node[] = [];
- for(let a of this.ancestors) {
- if(!(a === parent)) {
- ans.push(a);
- }
- }
- this.ancestors = ans;
- for(let child of this.childs) {
- child.removeParentInChilds(parent);
- }
- }*/
+ ancestors: Node[] = [];
 
 }

src/data/tree.json renamed to src/assets/data/tree.json

@@ -3,13 +3,13 @@
  "id": 0,
  "name": "root",
  "description": "Desc Root",
- "childs":
+ "children":
  [
  {
  "id": 1,
  "name": "Node 1",
  "description": "Desc Node 1",
- "childs":
+ "children":
  [
  {
  "id": 11,
@@ -20,7 +20,7 @@
  "id": 12,
  "name": "Node 1.2",
  "description": "Desc Node 1.2",
- "childs":
+ "children":
  [
  {
  "id": 121,
@@ -40,7 +40,7 @@
  "id": 2,
  "name": "Node 2",
  "description": "Desc Node 2",
- "childs":
+ "children":
  [
  {
  "id": 21,
@@ -51,7 +51,7 @@
  "id": 22,
  "name": "Node 2.2",
  "description": "Desc Node 2.2",
- "childs":
+ "children":
  [
  {
  "id": 221,
@@ -81,7 +81,7 @@
  "id": 3,
  "name": "Node 3",
  "description": "Desc Node 3",
- "childs":
+ "children":
  [
  {
  "id": 31,
@@ -92,7 +92,7 @@
  "id": 32,
  "name": "Node 3.2",
  "description": "Desc Node 3.2",
- "childs":
+ "children":
  [
  {
  "id": 321,
@@ -110,7 +110,7 @@
  "id": 34,
  "name": "Node 3.4",
  "description": "Desc Node 3.4",
- "childs":
+ "children":
  [
  {
  "id": 341,

src/index.html

@@ -3,7 +3,7 @@
 <head>
  <meta charset="utf-8">
  <title>ComponentTreeProject</title>
- <base href="/">
+ <base href="">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">