[ADF-3723] Tree view component (#3939)

* [ADF-3723] added first step to adf tree view component * [ADF-3723] start adding tests for the new component * [ADF-3723] fixed style and start adding tests * [ADF-3723] working on unit test * [ADF-3723] added test for the new tree view component * [ADF-3723] added event when clicked on a tree node * [ADF-3723] refactored code * [ADF-3723 added peer review changes * [ADF-3723] fixed extra space * [ADF-3723] fixed unit test * [ADF-3723] fixed failing unit test
2025-07-24 17:32:15 +00:00 · 2018-11-07 19:32:55 +00:00
parent 0ee592607a
commit 6ead388e55
25 changed files with 720 additions and 10 deletions
--- a/lib/content-services/tree-view/components/tree-view.component.ts
+++ b/lib/content-services/tree-view/components/tree-view.component.ts
@@ -0,0 +1,77 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
+import { TreeBaseNode } from '../models/tree-view.model';
+import { TreeViewDataSource } from '../data/tree-view-datasource';
+import { TreeViewService } from '../services/tree-view.service';
+import { NodeEntry } from 'alfresco-js-api';
+
+@Component({
+    selector: 'adf-tree-view-list',
+    templateUrl: 'tree-view.component.html',
+    styleUrls: ['tree-view.component.scss']
+})
+
+export class TreeViewComponent implements OnInit, OnChanges {
+
+    @Input()
+    nodeId: string;
+
+    @Output()
+    nodeClicked: EventEmitter<NodeEntry> = new EventEmitter();
+
+    treeControl: FlatTreeControl<TreeBaseNode>;
+    dataSource: TreeViewDataSource;
+
+    constructor(private treeViewService: TreeViewService) {
+        this.treeControl = new FlatTreeControl<TreeBaseNode>(this.getLevel, this.isExpandable);
+        this.dataSource = new TreeViewDataSource(this.treeControl, this.treeViewService);
+    }
+
+    ngOnInit() {
+        if (this.nodeId) {
+            this.loadTreeNode();
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['nodeId'].currentValue &&
+            changes['nodeId'].currentValue !== changes['nodeId'].previousValue) {
+            this.loadTreeNode();
+        }
+    }
+
+    onNodeClicked(node: NodeEntry) {
+        this.nodeClicked.emit(node);
+    }
+
+    getLevel = (node: TreeBaseNode) => node.level;
+
+    isExpandable = (node: TreeBaseNode) => node.expandable;
+
+    hasChild = (level: number, nodeData: TreeBaseNode) => nodeData.expandable;
+
+    private loadTreeNode() {
+        this.treeViewService.getTreeNodes(this.nodeId)
+            .subscribe(
+                (treeNode: TreeBaseNode[]) => {
+                    this.dataSource.data = treeNode;
+                });
+    }
+}