feat: tree

artemnih · Mar 3, 2022 · 383ab25 · 383ab25
1 parent c1dcb6d
commit 383ab25
Show file tree

Hide file tree

Showing 14 changed files with 272 additions and 39 deletions.
diff --git a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.html b/projects/ngx-explorer/src/lib/components/explorer/explorer.component.html
@@ -1,15 +1,23 @@
-<div class="nxe-explorer-container">
-    <nxe-menu-bar></nxe-menu-bar>
-    <nxe-second-menu-bar></nxe-second-menu-bar>
-    <div class="nxe-explorer-view-container">
-
-        <ng-container *ngIf="view === avialableView.Icon">
-            <nxe-icons></nxe-icons>
-        </ng-container>
-
-        <ng-container *ngIf="view === avialableView.List">
-            <nxe-list></nxe-list>
-        </ng-container>
-
+<div class="nxe-explorer">
+    <div class="nxe-eplorer-menu">
+        <nxe-menu-bar></nxe-menu-bar>
     </div>
-</div>
+    <div class="nxe-explorer-containers">
+        <div class="nxe-explorer-left-container">
+            <nxe-tree></nxe-tree>
+        </div>
+        <div class="nxe-explorer-right-container">
+            <div class="nxe-explorer-right-menu">
+                <nxe-second-menu-bar></nxe-second-menu-bar>
+            </div>
+            <div class="nxe-explorer-right-content">
+                <ng-container *ngIf="view === avialableView.Icon">
+                    <nxe-icons></nxe-icons>
+                </ng-container>
+                <ng-container *ngIf="view === avialableView.List">
+                    <nxe-list></nxe-list>
+                </ng-container>
+            </div>
+        </div>
+    </div>
+</div> 
diff --git a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.scss b/projects/ngx-explorer/src/lib/components/explorer/explorer.component.scss
@@ -1,10 +1,38 @@
-.nxe-explorer-container {
+.nxe-explorer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    border: 1px solid #ccc;
+}
+
+.nxe-eplorer-menu {
+    border-bottom: 1px solid #ccc;
+}
+
+.nxe-explorer-containers {
+    display: flex;
+    flex-wrap: wrap;
     height: 100%;
+}
+
+.nxe-explorer-left-container {
+    flex-basis: 20rem;
+    flex-grow: 1;
+    border-right: 1px solid #ccc;
+}
+
+.nxe-explorer-right-container {
     display: flex;
     flex-direction: column;
+    flex-basis: 0;
+    flex-grow: 999;
+}
+
+.nxe-explorer-right-menu {
+    border-bottom: 1px solid #ccc;
 }
 
-.nxe-explorer-view-container {
+.nxe-explorer-right-content {
     flex-grow: 1;
     overflow: auto;
-}
+}
diff --git a/projects/ngx-explorer/src/lib/components/icons/icons.component.scss b/projects/ngx-explorer/src/lib/components/icons/icons.component.scss
@@ -57,7 +57,7 @@
                     .nxe-icons-icon {
                         i {
                             &.fa {
-                                -webkit-text-stroke: 2px #f1f9ff;
+                                -webkit-text-stroke: 2px #d7edff;
                             }
                         }
                     }

diff --git a/projects/ngx-explorer/src/lib/components/list/list.component.scss b/projects/ngx-explorer/src/lib/components/list/list.component.scss
@@ -56,11 +56,11 @@
                         }
 
                         &:hover {
-                            background-color: #c9e7ff;
+                            background-color: #d7edff;
                         }
 
                         &.nxe-list-row-selected {
-                            background-color: #c9e7ff;
+                            background-color: #d7edff;
                         }
 
                         td {

diff --git a/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.scss b/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.scss
@@ -1,7 +1,5 @@
 .ngx-menubar-container {
     width: 100%;
-    border: solid #ccc;
-    border-width: 0 0 1px 0;
     padding: 10px;
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box; /* Firefox, other Gecko */

diff --git a/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.scss b/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.scss
@@ -1,7 +1,5 @@
 .nxe-second-menu-bar {
     display: flex;
-    border: solid #ccc;
-    border-width: 0 0 1px 0;
 
     .nxe-second-menu-bar-left {
         flex-grow: 1;

diff --git a/projects/ngx-explorer/src/lib/components/tree/tree.component.html b/projects/ngx-explorer/src/lib/components/tree/tree.component.html
@@ -0,0 +1,23 @@
+<div class="nxe-tree">
+    <ng-container *ngTemplateOutlet="tree;context:{nodes:treeNodes}">
+    </ng-container>
+</div>
+
+<ng-template #tree let-nodes="nodes">
+    <ul *ngIf="nodes && nodes.length > 0">
+        <li *ngFor="let node of nodes">
+            <div class="chevron" *ngIf="!node.expanded" (click)="expand(node)"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
+            <div class="chevron" *ngIf="node.expanded" (click)="collapse(node)"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
+
+            <div class="item" (dblclick)="open(node)">
+                <div class="folder-icon"><i class="fa fa-folder-o" aria-hidden="true"></i></div>
+                <div class="grow" [innerText]="getName(node.data)"></div>
+                <!-- <div class="ellipsis-icon"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></div> -->
+                <div class="highlighter"></div>
+            </div>
+
+            <ng-container *ngTemplateOutlet="tree;context:{nodes:node.children}">
+            </ng-container>
+        </li>
+    </ul>
+</ng-template> 
diff --git a/projects/ngx-explorer/src/lib/components/tree/tree.component.scss b/projects/ngx-explorer/src/lib/components/tree/tree.component.scss
@@ -0,0 +1,46 @@
+$item-spacing: 10px;
+
+.nxe-tree {
+    ul {
+        list-style-position: inside;
+        padding: 0;
+        margin: 0;
+        margin-left: 20px;
+    }
+
+    li {
+        list-style-type: none;
+        position: relative;
+        padding: 0;
+    }
+
+    .chevron {
+        position: absolute;
+        cursor: pointer;
+        text-align: center;
+        color: #333;
+        width: 21px;
+        top: 1px;
+        left: -20px;
+        font-size: 1.3rem;
+    }
+
+    .item {
+        display: flex;
+        cursor: pointer;
+        padding: 5px 5px;
+        border-radius: 5px;
+
+        .folder-icon {
+            margin-right: 5px;
+        }
+
+        .grow {
+            flex: 1;
+        }
+
+        &:hover {
+            background-color: #d7edff;
+        }
+    }
+}
diff --git a/projects/ngx-explorer/src/lib/components/tree/tree.component.spec.ts b/projects/ngx-explorer/src/lib/components/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<TreeComponent>;
+
+  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/projects/ngx-explorer/src/lib/components/tree/tree.component.ts b/projects/ngx-explorer/src/lib/components/tree/tree.component.ts
@@ -0,0 +1,85 @@
+import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { XNode } from 'ngx-explorer';
+import { ExplorerService } from '../../services/explorer.service';
+import { filter } from 'rxjs/operators';
+import { HelperService } from '../../services/helper.service';
+import { Subscription } from 'rxjs';
+
+interface TreeNode extends XNode {
+    children: TreeNode[];
+    expanded: boolean;
+}
+
+@Component({
+    selector: 'nxe-tree',
+    templateUrl: './tree.component.html',
+    styleUrls: ['./tree.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TreeComponent implements OnDestroy {
+    public treeNodes: any = [];
+    private expandedIds: string[] = [];
+    private sub = new Subscription();
+
+    constructor(private explorerService: ExplorerService, private helperService: HelperService) {
+        this.sub.add(this.explorerService.tree.pipe(filter(x => !!x)).subscribe(node => {
+            this.addExpandedNode(node.id); // always expand root
+            this.treeNodes = this.buildTree(node).children;
+        }));
+    }
+
+    open(node: XNode) {
+        this.addExpandedNode(node.id);
+        this.explorerService.openNode(node.id);
+    }
+
+    expand(node: XNode) {
+        this.addExpandedNode(node.id);
+        this.explorerService.expandNode(node.id);
+    }
+
+    collapse(node: XNode) {
+        this.removeExpandedNode(node.id);
+        let nodes: XNode;
+        this.explorerService.tree.pipe(filter(x => !!x)).subscribe(x => nodes = x);
+        this.treeNodes = this.buildTree(nodes).children;
+    }
+
+    getName(node: XNode) {
+        return this.helperService.getName(node);
+    }
+
+    ngOnDestroy(): void {
+        this.sub.unsubscribe();
+    }
+
+    private buildTree(node: XNode): TreeNode {
+        const treeNode = {
+            id: node.id,
+            parentId: node.parentId,
+            data: node.data,
+            isLeaf: node.isLeaf,
+            children: [],
+            expanded: false
+        } as TreeNode;
+
+        treeNode.expanded = this.expandedIds.indexOf(node.id) > -1;
+        if (treeNode.expanded) {
+            treeNode.children = node.children.filter(x => !x.isLeaf).map(x => this.buildTree(x));
+        }
+        return treeNode;
+    }
+
+    private addExpandedNode(id: string) {
+        const index = this.expandedIds.indexOf(id);
+        if (index === -1) {
+            this.expandedIds.push(id);
+        }
+    }
+
+    private removeExpandedNode(id: string) {
+        const index = this.expandedIds.indexOf(id);
+        this.expandedIds.splice(index, 1);
+    }
+
+}
diff --git a/projects/ngx-explorer/src/lib/ngx-explorer.module.ts b/projects/ngx-explorer/src/lib/ngx-explorer.module.ts
@@ -7,6 +7,7 @@ import { BreadcrumbsComponent } from './components/breadcrumbs/breadcrumbs.compo
 import { ListComponent } from './components/list/list.component';
 import { SecondMenuBarComponent } from './components/second-menu-bar/second-menu-bar.component';
 import { ViewSwitcherComponent } from './components/view-switcher/view-switcher.component';
+import { TreeComponent } from './components/tree/tree.component';
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { ViewSwitcherComponent } from './components/view-switcher/view-switcher.
     ListComponent,
     SecondMenuBarComponent,
     ViewSwitcherComponent,
+    TreeComponent,
   ],
   imports: [
     CommonModule
@@ -26,8 +28,10 @@ import { ViewSwitcherComponent } from './components/view-switcher/view-switcher.
     ExplorerComponent, 
     MenuBarComponent,
     BreadcrumbsComponent,
+    ListComponent,
     SecondMenuBarComponent,
     ViewSwitcherComponent,
+    TreeComponent,
   ]
 })
 export class NgxExplorerModule { }