From 1a9fd6f0e1722ae9fda1d5877837463691fc3ae4 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Thu, 16 Jul 2020 10:55:20 +0300
Subject: [PATCH] feat: implement tree component

---
 .../src/lib/components/tree.component.html    | 27 ++++++++++
 .../src/lib/components/tree.component.scss    | 50 +++++++++++++++++++
 .../tree/src/lib/components/tree.component.ts | 42 +++++++++++++++-
 3 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
index e69de29bb2..574400d69d 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -0,0 +1,27 @@
+<nz-tree
+  [nzCheckable]="checkable"
+  [nzMultiple]="checkable"
+  [nzCheckedKeys]="checkedKeys"
+  [nzData]="nodes"
+  [nzTreeTemplate]="treeTemplate"
+  [nzExpandedKeys]="expandedKeys"
+  (nzExpandChange)="onExpandedKeysChange($event)"
+  (nzCheckBoxChange)="onCheckboxChange($event)"
+></nz-tree>
+<ng-template #treeTemplate let-node>
+  <div
+    class="node-wrapper"
+    [class.selected]="isNodeSelected(node)"
+    [title]="node.title"
+    (click)="onSelectedNodeChange(node)"
+  >
+    <span>{{ node.title }}</span>
+
+    <div *ngIf="menu" class="ellipsis" ngbDropdown placement="bottom" container="body">
+      <i class="fas fa-ellipsis-h" ngbDropdownToggle [class.dropdown-toggle]="false"></i>
+      <div ngbDropdownMenu>
+        <ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
+      </div>
+    </div>
+  </div>
+</ng-template>
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss
new file mode 100644
index 0000000000..113996455f
--- /dev/null
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss
@@ -0,0 +1,50 @@
+.ant-tree {
+  color: inherit;
+
+  .ant-tree-node-content-wrapper.ant-tree-node-selected {
+    background-color: transparent;
+  }
+
+  .ant-tree-switcher {
+    line-height: 17px;
+  }
+
+  .ant-tree-node-content-wrapper {
+    width: 100%;
+    padding: 0;
+  }
+
+  .node-wrapper {
+    width: 100%;
+    position: relative;
+    display: inline-block;
+    margin: 0;
+    padding: 0 5px;
+    line-height: 24px;
+    text-decoration: none;
+    vertical-align: top;
+    border-radius: 2px;
+    cursor: pointer;
+    padding-left: 8px;
+    border: 1px solid transparent;
+
+    &:hover {
+      background-color: transparent;
+      border: 1px solid var(--primary);
+      color: var(--text-color);
+    }
+
+    &.selected {
+      background-color: transparent;
+      color: var(--white);
+      background-color: var(--primary);
+    }
+  }
+
+  .ellipsis {
+    position: absolute;
+    right: 8px;
+    top: 1px;
+    cursor: pointer;
+  }
+}
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
index eb50b41575..48ac17056d 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
@@ -1,9 +1,47 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+  ViewEncapsulation,
+} from '@angular/core';
 
 @Component({
   selector: 'abp-tree',
   templateUrl: 'tree.component.html',
+  styleUrls: [
+    '../../../../../../node_modules/ng-zorro-antd/tree/style/index.min.css',
+    'tree.component.scss',
+  ],
+  encapsulation: ViewEncapsulation.None,
 })
 export class TreeComponent {
-  constructor() {}
+  @ContentChild('menu') menu: TemplateRef<any>;
+  @Input() checkable: boolean;
+  @Input() checkedKeys = [];
+  @Output() checkedKeysChange = new EventEmitter();
+  @Input() nodes = [];
+  @Input() expandedKeys: string[] = [];
+  @Output() expandedKeysChange = new EventEmitter<string[]>();
+  @Input() isNodeSelected = node => this.selectedNode?.id === node.key;
+  @Input() selectedNode: any;
+  @Output() selectedNodeChange = new EventEmitter();
+
+  onSelectedNodeChange(node) {
+    this.selectedNode = node.origin.entity;
+    this.selectedNodeChange.emit(node.origin.entity);
+  }
+
+  onCheckboxChange(event) {
+    console.log(event);
+    this.checkedKeys = event.checkedKeys;
+    this.checkedKeysChange.emit(event.checkedKeys);
+  }
+
+  onExpandedKeysChange(event) {
+    this.expandedKeys = event.keys;
+    this.expandedKeysChange.emit(event.keys);
+  }
 }