[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

demo-shell/resources/i18n/en.json

@@ -85,7 +85,8 @@
     "WORD_TO_SEARCH": "Search Word",
     "SEARCH_CREATED_BY": "Created By",
     "SEARCH_SERVICE_APPROACH": "Check this to disable the input property and configure using the service",
-    "HEADER_DATA": "Header Data"
+    "HEADER_DATA": "Header Data",
+    "TREE_VIEW": "Tree View"
   },
   "TRASHCAN": {
     "ACTIONS": {

demo-shell/src/app.config.json

@@ -12,8 +12,8 @@
       "clientId": "activiti",
       "scope": "openid",
       "secret": "",
-      "implicitFlow": true,
-      "silentLogin": true,
+      "implicitFlow": false,
+      "silentLogin": false,
       "redirectUri": "/",
       "redirectUriLogout": "/logout"
     },

demo-shell/src/app/app.module.ts

@@ -67,6 +67,7 @@ import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud
 import { CloudComponent } from './components/cloud/cloud.component';
 import { TaskListCloudDemoComponent } from './components/task-list-cloud-demo/task-list-cloud-demo.component';
 import { ProcessListCloudExampleComponent } from './components/cloud/process-list-cloud-example.component';
+import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
 
 @NgModule({
     imports: [
@@ -117,7 +118,8 @@ import { ProcessListCloudExampleComponent } from './components/cloud/process-lis
         FormLoadingComponent,
         ReportIssueComponent,
         TaskListCloudDemoComponent,
-        ProcessListCloudExampleComponent
+        ProcessListCloudExampleComponent,
+        TreeViewSampleComponent
     ],
     providers: [
         {

demo-shell/src/app/app.routes.ts

@@ -43,6 +43,7 @@ import { AppComponent } from './app.component';
 import { CloudComponent } from './components/cloud/cloud.component';
 import { TaskListCloudDemoComponent } from './components/task-list-cloud-demo/task-list-cloud-demo.component';
 import { ProcessListCloudExampleComponent } from './components/cloud/process-list-cloud-example.component';
+import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
@@ -279,6 +280,11 @@ export const appRoutes: Routes = [
                 component: DemoPermissionComponent,
                 canActivate: [AuthGuardEcm]
             },
+            {
+                path: 'treeview',
+                component: TreeViewSampleComponent,
+                canActivate: [AuthGuardEcm]
+            },
             {
                 path: 'about',
                 loadChildren: 'app/components/about/about.module#AppAboutModule'

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -58,6 +58,7 @@ export class AppLayoutComponent implements OnInit {
         { href: '/extendedSearch', icon: 'search', title: 'APP_LAYOUT.SEARCH' },
         /* cspell:disable-next-line */
         { href: '/overlay-viewer', icon: 'pageview', title: 'APP_LAYOUT.OVERLAY_VIEWER' },
+        { href: '/treeview', icon: 'nature', title: 'APP_LAYOUT.TREE_VIEW' },
         { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
     ];
 

demo-shell/src/app/components/tree-view/tree-view-sample.component.html

@@ -0,0 +1,10 @@
+<div>TREE VIEW TEST</div>
+<mat-form-field class="example-full-width">
+    <input matInput placeholder="Node Id" [(ngModel)]="nodeIdSample">
+</mat-form-field>
+<span>
+    CLICKED NODE: {{clickedNodeName}}
+</span>
+
+<adf-tree-view-list [nodeId]="nodeIdSample" (nodeClicked)="onClick($event)">
+</adf-tree-view-list>

demo-shell/src/app/components/tree-view/tree-view-sample.component.scss

@@ -0,0 +1,3 @@
+.example-full-width {
+    width: 100%;
+  }

demo-shell/src/app/components/tree-view/tree-view-sample.component.ts

@@ -0,0 +1,34 @@
+/*!
+ * @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 { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-tree-view',
+    templateUrl: 'tree-view-sample.component.html',
+    styleUrls: ['tree-view-sample.component.scss']
+})
+export class TreeViewSampleComponent {
+
+    clickedNodeName: string = '';
+
+    nodeIdSample: string = '-my-';
+
+    onClick(node) {
+        this.clickedNodeName = node.entry.name;
+    }
+}