From 4dfd7e8c280f36d1ae2745d166dbc59948daec4e Mon Sep 17 00:00:00 2001
From: tibing <parapupum@gmail.com>
Date: Mon, 4 Jul 2016 17:07:51 +0300
Subject: [PATCH] feat(app\components): create tree view component

---
 package.json                                  |  1 +
 .../pages/components/components.component.ts  | 25 +++++++++++++
 src/app/pages/components/components.scss      |  1 +
 .../components/components/treeView/index.ts   |  1 +
 .../components/treeView/treeView.component.ts | 37 +++++++++++++++++++
 .../components/treeView/treeView.html         |  5 +++
 src/app/pages/components/index.ts             |  1 +
 src/app/theme/sass/_treeView.scss             | 27 ++++++++++++++
 src/app/theme/theme.scss                      |  1 +
 9 files changed, 99 insertions(+)
 create mode 100644 src/app/pages/components/components.component.ts
 create mode 100644 src/app/pages/components/components.scss
 create mode 100644 src/app/pages/components/components/treeView/index.ts
 create mode 100644 src/app/pages/components/components/treeView/treeView.component.ts
 create mode 100644 src/app/pages/components/components/treeView/treeView.html
 create mode 100644 src/app/pages/components/index.ts
 create mode 100644 src/app/theme/sass/_treeView.scss

diff --git a/package.json b/package.json
index 268bc23d..163e6ed2 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
     "ng2-bootstrap": "^1.0.16",
+    "ng2-branchy": "0.0.2-2",
     "ng2-ckeditor": "^1.0.3",
     "ng2-uploader": "^0.5.2",
     "normalize.css": "^4.1.1",
diff --git a/src/app/pages/components/components.component.ts b/src/app/pages/components/components.component.ts
new file mode 100644
index 00000000..ef02cdac
--- /dev/null
+++ b/src/app/pages/components/components.component.ts
@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {RouteConfig} from '@angular/router-deprecated';
+import {TreeView} from "./components/treeView";
+
+@Component({
+  selector: 'components',
+  pipes: [],
+  providers: [],
+  styles: [],
+  template: `<router-outlet></router-outlet>`
+})
+@RouteConfig([
+  {
+    name: 'TreeView',
+    component: TreeView,
+    path: '/tree-view',
+    useAsDefault: true
+  }
+])
+export class Components {
+
+  constructor() {
+  }
+
+}
diff --git a/src/app/pages/components/components.scss b/src/app/pages/components/components.scss
new file mode 100644
index 00000000..1999f610
--- /dev/null
+++ b/src/app/pages/components/components.scss
@@ -0,0 +1 @@
+@import '../../theme/sass/treeView';
diff --git a/src/app/pages/components/components/treeView/index.ts b/src/app/pages/components/components/treeView/index.ts
new file mode 100644
index 00000000..15f949fe
--- /dev/null
+++ b/src/app/pages/components/components/treeView/index.ts
@@ -0,0 +1 @@
+export * from './treeView.component';
diff --git a/src/app/pages/components/components/treeView/treeView.component.ts b/src/app/pages/components/components/treeView/treeView.component.ts
new file mode 100644
index 00000000..1f7fbb96
--- /dev/null
+++ b/src/app/pages/components/components/treeView/treeView.component.ts
@@ -0,0 +1,37 @@
+import {Component} from '@angular/core';
+import {BranchyComponent, TreeModel} from 'ng2-branchy';
+import {BaCard} from "../../../../theme/components/baCard/baCard.component";
+
+@Component({
+  selector: 'tree-view',
+  directives: [BranchyComponent, BaCard],
+  template: require('./treeView.html'),
+})
+
+export class TreeView {
+
+  constructor() {
+  }
+  private tree: TreeModel = {
+    value: 'Programming languages by programming paradigm',
+    children: [
+      {
+        value: 'Object-oriented programming',
+        children: [
+          {value: 'Java'},
+          {value: 'C++'},
+          {value: 'C#'},
+        ]
+      },
+      {
+        value: 'Prototype-based programming',
+        children: [
+          {value: 'JavaScript'},
+          {value: 'CoffeeScript'},
+          {value: 'Lua'},
+        ]
+      }
+    ]
+  };
+
+}
diff --git a/src/app/pages/components/components/treeView/treeView.html b/src/app/pages/components/components/treeView/treeView.html
new file mode 100644
index 00000000..df018c41
--- /dev/null
+++ b/src/app/pages/components/components/treeView/treeView.html
@@ -0,0 +1,5 @@
+<div class="col-md-6">
+  <ba-card title="basic">
+    <branchy id="tree-view" [tree]="tree"></branchy>
+  </ba-card>
+</div>
diff --git a/src/app/pages/components/index.ts b/src/app/pages/components/index.ts
new file mode 100644
index 00000000..86211eac
--- /dev/null
+++ b/src/app/pages/components/index.ts
@@ -0,0 +1 @@
+export * from './components.component';
diff --git a/src/app/theme/sass/_treeView.scss b/src/app/theme/sass/_treeView.scss
new file mode 100644
index 00000000..fd03a679
--- /dev/null
+++ b/src/app/theme/sass/_treeView.scss
@@ -0,0 +1,27 @@
+#tree-view .tree {
+  & .node-value {
+    color: white;
+  }
+  & .folding {
+    &.node-expanded::before {
+      color: white;
+    }
+    &.node-collapsed::before  {
+      color: white;
+    }
+    &.node-leaf::before {
+      color: white;
+    }
+  }
+  & .over-drop-target {
+    border: 4px solid ghostwhite;
+  }
+  & .node-value{
+    & .node-selected::after {
+      background-color: white;
+    }
+    &:after {
+      background-color: white;
+    }
+  }
+}
diff --git a/src/app/theme/theme.scss b/src/app/theme/theme.scss
index 4f38c1d0..f1f411b2 100644
--- a/src/app/theme/theme.scss
+++ b/src/app/theme/theme.scss
@@ -8,3 +8,4 @@
 @import "sass/socicon";
 @import "sass/table";
 @import "sass/form";
+@import "sass/treeView";