- - -
- - - - - - - - - - - - {{ title }} app is running! - - - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - - Learn Angular - - - - - - - CLI Documentation - - - - - - - - Angular Blog - - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
-
- - - New Component -
- -
- - - Angular Material -
- -
- - - Add Dependency -
- -
- - - Run and Watch Tests -
- -
- - - Build for Production -
-
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add _____
- 
ng test
- 
ng build --prod
-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+
- - - - - - - -
- - - - - - - - - - - - \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..836cf26 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,16 +3,23 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { TreeComponent } from './tree/tree.component'; +import {ButtonModule, MessageService, TreeModule} from 'primeng/primeng'; +import {HttpClientModule} from '@angular/common/http'; @NgModule({ declarations: [ - AppComponent + AppComponent, + TreeComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + TreeModule, + HttpClientModule, + ButtonModule ], - providers: [], + providers: [ MessageService], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/node.service.spec.ts b/src/app/node.service.spec.ts new file mode 100644 index 0000000..d8589c0 --- /dev/null +++ b/src/app/node.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { NodeService } from './node.service'; + +describe('NodeService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: NodeService = TestBed.get(NodeService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/node.service.ts b/src/app/node.service.ts new file mode 100644 index 0000000..4b9eb36 --- /dev/null +++ b/src/app/node.service.ts @@ -0,0 +1,16 @@ +import {HttpClient, HttpClientModule} from '@angular/common/http'; +import { Injectable } from '@angular/core'; + +import { TreeNode } from 'primeng/api'; + +@Injectable({providedIn: 'root'}) +export class NodeService { + + constructor(private http: HttpClient) { } + + getFiles() { + return this.http.get('http://localhost:4200/assets/files.json') + .toPromise() + .then(res => res.data as TreeNode[]); + } +} diff --git a/src/app/tree/tree.component.css b/src/app/tree/tree.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/tree/tree.component.html b/src/app/tree/tree.component.html new file mode 100644 index 0000000..c8cd4d0 --- /dev/null +++ b/src/app/tree/tree.component.html @@ -0,0 +1,6 @@ + + +
+ + +
diff --git a/src/app/tree/tree.component.spec.ts b/src/app/tree/tree.component.spec.ts new file mode 100644 index 0000000..e3df2c3 --- /dev/null +++ b/src/app/tree/tree.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TreeComponent } from './tree.component'; + +describe('TreeComponent', () => { + let component: TreeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TreeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TreeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tree/tree.component.ts b/src/app/tree/tree.component.ts new file mode 100644 index 0000000..fb6a84b --- /dev/null +++ b/src/app/tree/tree.component.ts @@ -0,0 +1,66 @@ +import {Component, OnInit, ViewChild} from '@angular/core'; +import {Tree} from 'primeng/tree'; +import {MessageService, TreeNode} from 'primeng/api'; +import {NodeService} from '../node.service'; + +@Component({ + selector: 'app-tree', + templateUrl: './tree.component.html', + styleUrls: ['./tree.component.css'] +}) +export class TreeComponent implements OnInit { + @ViewChild('expandingTree', {static: false}) + expandingTree: Tree; + filesTree10: TreeNode[]; + + constructor(private nodeService: NodeService, private messageService: MessageService) { } + + ngOnInit() { + this.nodeService.getFiles().then(files => this.filesTree10 = files); + } + + // nodeSelect(event) { + // this.messageService.add({severity: 'info', summary: 'Node Selected', detail: event.node.label}); + // } + // + // nodeUnselect(event) { + // this.messageService.add({severity: 'info', summary: 'Node Unselected', detail: event.node.label}); + // } + // + // nodeExpandMessage(event) { + // this.messageService.add({severity: 'info', summary: 'Node Expanded', detail: event.node.label}); + // } + // + // nodeExpand(event) { + // if(event.node) { + // // in a real application, make a call to a remote url to load children of the current node and add the new nodes as children + // this.nodeService.getLazyFiles().then(nodes => event.node.children = nodes); + // } + // } + // + // viewFile(file: TreeNode) { + // this.messageService.add({severity: 'info', summary: 'Node Selected with Right Click', detail: file.label}); + // } + + expandAll(){ + this.filesTree10.forEach( node => { + this.expandRecursive(node, true); + } ); + } + + collapseAll(){ + this.filesTree10.forEach( node => { + this.expandRecursive(node, false); + } ); + } + + private expandRecursive(node: TreeNode, isExpand: boolean){ + node.expanded = isExpand; + if(node.children){ + node.children.forEach( childNode => { + this.expandRecursive(childNode, isExpand); + } ); + } + } + +} diff --git a/src/assets/files.json b/src/assets/files.json new file mode 100644 index 0000000..9fd7f97 --- /dev/null +++ b/src/assets/files.json @@ -0,0 +1,78 @@ +{ + "data": + [ + { + "label": "XA 1", + "data": "XA 1 Folder", + "expandedIcon": "fa fa-folder-open", + "collapsedIcon": "fa fa-folder", + "children": + [ + { + "label": "XB 1-1", + "data": "XB 1-1 Folder", + "expandedIcon": "fa fa-folder-open", + "collapsedIcon": "fa fa-folder", + "children": [{"label": "CI 1-1-1", "icon": "fa fa-file-word-o", "data": ""}, + {"label": "CI 1-1-2", "icon": "fa fa-file-word-o", "data": ""}] + }, + { + "label": "XB 1-2", + "data": "XB 1-2 Folder", + "expandedIcon": "fa fa-folder-open", + "collapsedIcon": "fa fa-folder", + "children": [{"label": "CI 1-2-1", "icon": "fa fa-file-word-o", "data": ""}] + } + ] + }, + { + "label": "XA 2", + "data": "XA 2 Folder", + "expandedIcon": "fa fa-folder-open", + "collapsedIcon": "fa fa-folder", + "children": + [ + { + "label": "XB 2-1", + "data": "XB 2-1 Folder", + "expandedIcon": "fa fa-folder-open", + "collapsedIcon": "fa fa-folder", + "children": + [ + { "label": "XB 2-1-1", + "data": "XB 2-1-1 Folder", + "expandedIcon": "fa fa-folder-open", + "collapsedIcon": "fa fa-folder", + "children": [{"label": "CI 2-1-1-1", "icon": "fa fa-file-image-o", "data":""}] + }, + {"label": "CI 2-1-1", "icon": "fa fa-file-image-o", "data": ""}, + {"label": "CI 2-1-2", "icon": "fa fa-file-image-o", "data": ""}, + {"label": "CI 2-1-3", "icon": "fa fa-file-image-o", "data": ""}] + } + ] + }, + { + "label": "XA 3", + "data": "XA 3 Folder", + "expandedIcon": "fa fa-folder-open", + "collapsedIcon": "fa fa-folder", + "children": + [ + { + "label": "XB 3-1", + "data": "XB 3-1 Folder", + "children": + [{"label": "CI 3-1-1", "icon": "fa fa-file-video-o", "data": ""}, + {"label": "CI 3-1-2", "icon": "fa fa-file-video-o", "data": ""}] + }, + { + "label": "XB 3-2", + "data": "XB 3-2 Folder", + "children": + [{"label": "CI 3-2-1", "icon": "fa fa-file-video-o", "data": ""}, + {"label": "CI 3-2-2", "icon": "fa fa-file-video-o", "data": ""}] + } + ] + } + ] +}