docs: extend example section (#912)

Author: tobiasengelhardt

README.md

@@ -4,12 +4,6 @@
 
 # angular tree component
 
-## News
-
-We are happy to announce, that starting today, [Circlon | group](https://circlon.de) is taking over this repository.
-We're going on this journey with the strong belief, that this component should not be missed by the community, and we are hoping on your continuous and significant support as always.
-On this new journey we will also receive technical guidance from [Adam](https://github.com/adamkleingit), who will help us to better understand the community, their needs and also to elevate this component to a completely new level of engineering.
-
 ## Getting started
 
 Install `angular-tree-component`:

projects/docs-app/src/app/app-routing.module.ts

@@ -12,6 +12,20 @@ import { ApiComponent } from './fundamentals/api/api.component';
 import { StylingComponent } from './fundamentals/styling/styling.component';
 import { FocusComponent } from './fundamentals/focus/focus.component';
 import { IssuesComponent } from './fundamentals/issues/issues.component';
+import { ColumnsExampleComponent } from './examples/columns-example/columns-example.component';
+import { CrudExampleComponent } from './examples/crud-example/crud-example.component';
+import { LoadMoreExampleComponent } from './examples/load-more-example/load-more-example.component';
+import { AsyncGuideComponent } from './guides/async-guide/async-guide.component';
+import { FilterGuideComponent } from './guides/filter-guide/filter-guide.component';
+import { UpdateGuideComponent } from './guides/update-guide/update-guide.component';
+import { DragDropGuideComponent } from './guides/drag-drop-guide/drag-drop-guide.component';
+import { CheckboxesGuideComponent } from './guides/checkboxes-guide/checkboxes-guide.component';
+import { LargeTreeGuideComponent } from './guides/large-tree-guide/large-tree-guide.component';
+import { ReduxGuideComponent } from './guides/redux-guide/redux-guide.component';
+import { RtlGuideComponent } from './guides/rtl-guide/rtl-guide.component';
+import { CustomFieldsGuideComponent } from './guides/custom-fields-guide/custom-fields-guide.component';
+import { ExpandingGuideComponent } from './guides/expanding-guide/expanding-guide.component';
+import { AutoScrollGuideComponent } from './guides/auto-scroll-guide/auto-scroll-guide.component';
 
 const routes: Routes = [
   {
@@ -22,7 +36,26 @@ const routes: Routes = [
   {
     path: 'examples',
     children: [
-      { path: 'basic', component: BasicUsageComponent }
+      { path: 'basic', component: BasicUsageComponent },
+      { path: 'columns', component: ColumnsExampleComponent },
+      { path: 'crud', component: CrudExampleComponent },
+      { path: 'loadmore', component: LoadMoreExampleComponent },
+    ]
+  },
+  {
+    path: 'guides',
+    children: [
+      { path: 'async', component: AsyncGuideComponent },
+      { path: 'filter', component: FilterGuideComponent },
+      { path: 'update', component: UpdateGuideComponent },
+      { path: 'dragdrop', component: DragDropGuideComponent },
+      { path: 'checkboxes', component: CheckboxesGuideComponent },
+      { path: 'largetree', component: LargeTreeGuideComponent },
+      { path: 'redux', component: ReduxGuideComponent },
+      { path: 'rtl', component: RtlGuideComponent },
+      { path: 'customfields', component: CustomFieldsGuideComponent },
+      { path: 'expanding', component: ExpandingGuideComponent },
+      { path: 'autoscroll', component: AutoScrollGuideComponent },
     ]
   },
   {

projects/docs-app/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, Title } from '@angular/platform-browser';
 import { NavigationNode } from './navigation/navigation.model';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter } from 'rxjs/operators';
@@ -11,7 +11,7 @@ import { filter } from 'rxjs/operators';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'docs-app';
+  baseTitle = 'Angular Tree Component';
 
   nav: NavigationNode[] = [
     { title: 'Getting Started', children: null, link: [''] },
@@ -29,9 +29,27 @@ export class AppComponent {
           { title: 'Common issues', url: 'fundamentals/issues', children: null, link: ['fundamentals', 'issues'] },
         ]
     },
+    { title: 'Guides', children:
+        [
+          { title: 'Async Data', url: 'guides/async', children: null, link: ['guides', 'async'] },
+          { title: 'Filtering', url: 'guides/filter', children: null, link: ['guides', 'filter'] },
+          { title: 'Updating the tree', url: 'guides/update', children: null, link: ['guides', 'update'] },
+          { title: 'Drag & Drop', url: 'guides/dragdrop', children: null, link: ['guides', 'dragdrop'] },
+          { title: 'Checkboxes', url: 'guides/checkboxes', children: null, link: ['guides', 'checkboxes'] },
+          { title: 'Large Trees & Virtual Scroll', url: 'guides/largetree', children: null, link: ['guides', 'largetree'] },
+          { title: 'Redux / Immutable Data', url: 'guides/redux', children: null, link: ['guides', 'redux'] },
+          { title: 'RTL', url: 'guides/rtl', children: null, link: ['guides', 'rtl'] },
+          { title: 'Custom Fields', url: 'guides/customfields', children: null, link: ['guides', 'customfields'] },
+          { title: 'Expanding nodes on init', url: 'guides/expanding', children: null, link: ['guides', 'expanding'] },
+          { title: 'Auto Scrolling', url: 'guides/autoscroll', children: null, link: ['guides', 'autoscroll'] },
+        ]
+    },
     { title: 'Examples', children:
         [
           { title: 'Basic', url: 'examples/basic', children: null, link: ['examples', 'basic'] },
+          { title: 'Columns', url: 'examples/columns', children: null, link: ['examples', 'columns'] },
+          { title: 'CRUD', url: 'examples/crud', children: null, link: ['examples', 'crud'] },
+          { title: 'Load more', url: 'examples/loadmore', children: null, link: ['examples', 'loadmore'] },
         ]
     },
   ];
@@ -40,7 +58,8 @@ export class AppComponent {
   constructor(
     iconRegistry: MatIconRegistry,
     sanitizer: DomSanitizer,
-    private router: Router
+    private router: Router,
+    private titleService: Title,
   ) {
     iconRegistry.addSvgIcon(
       'github',
@@ -71,6 +90,14 @@ export class AppComponent {
         if (newCurrent.length >= 2 && newCurrent.find(n => n.title === this.nav[0].title) !== undefined) {
           newCurrent = newCurrent.filter(n => n.title !== this.nav[0].title);
         }
+
+        // set title on all but landing page
+        if (newCurrent?.length && newCurrent[0].title !== 'Getting Started') {
+          this.titleService.setTitle(`${this.baseTitle} - ${newCurrent[0].title}`);
+        } else {
+          this.titleService.setTitle(this.baseTitle);
+        }
+
         this.currentNodes = newCurrent;
       });
   }

projects/docs-app/src/app/app.module.ts

@@ -17,6 +17,7 @@ import { TreeModule } from 'angular-tree-component';
 import { FundamentalsModule } from './fundamentals/fundamentals.module';
 import { LayoutModule } from './layout/layout.module';
 import { SharedModule } from './shared/shared.module';
+import { GuidesModule } from './guides/guides.module';
 
 @NgModule({
   declarations: [AppComponent, GettingStartedComponent],
@@ -36,6 +37,7 @@ import { SharedModule } from './shared/shared.module';
     ExamplesModule,
     TreeModule,
     FundamentalsModule,
+    GuidesModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

projects/docs-app/src/app/examples/basic-usage/basic-tree/basic-tree.component.html

@@ -0,0 +1 @@
+<tree-root [nodes]="nodes"></tree-root>

projects/docs-app/src/app/examples/basic-usage/basic-tree/basic-tree.component.scss

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicTreeComponent } from './basic-tree.component';
+
+describe('BasicTreeComponent', () => {
+  let component: BasicTreeComponent;
+  let fixture: ComponentFixture<BasicTreeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BasicTreeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BasicTreeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/docs-app/src/app/examples/basic-usage/basic-tree/basic-tree.component.spec.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-basic-tree',
+  templateUrl: './basic-tree.component.html',
+  styleUrls: ['./basic-tree.component.scss']
+})
+export class BasicTreeComponent {
+
+  nodes = [
+    {
+      name: 'root1',
+      children: [
+        { name: 'child1' },
+        { name: 'child2' }
+      ]
+    },
+    {
+      name: 'root2',
+      children: [
+        { name: 'child2.1', children: [] },
+        { name: 'child2.2', children: [
+            {name: 'grandchild2.2.1'}
+          ] }
+      ]
+    },
+    { name: 'root3' },
+    { name: 'root4', children: [] },
+    { name: 'root5', children: null }
+  ];
+
+}

projects/docs-app/src/app/examples/basic-usage/basic-tree/basic-tree.component.ts

@@ -2,6 +2,10 @@ <h1>Basic usage</h1>
 
 <h2>Working tree</h2>
 
-<tree-root [nodes]="nodes"></tree-root>
+<div class="demo-container">
+  <app-basic-tree></app-basic-tree>
+</div>
 
 <h2>How to implement</h2>
+
+<p>See <a [routerLink]="['/', 'fundamentals', 'nodes']">Nodes Fundamentals</a></p>

projects/docs-app/src/app/examples/basic-usage/basic-usage.component.html

@@ -0,0 +1,29 @@
+<h1>Tree with columns</h1>
+
+<h2>Working tree</h2>
+
+<div class="demo-container">
+  <app-columns></app-columns>
+</div>
+
+<h2>How to implement</h2>
+
+<p>To create columns inside the tree we need to use the templating options of the tree and style them with css.</p>
+<p>
+  The example component contains two parts. The header and the tree itself. The header is responsible for displaying the column header.
+  This is needed to give the tree the grid style. If you just want the tree to have columns without any header you don't need to build a header.
+</p>
+
+<h3>#treeNodeWrapperTemplate</h3>
+<p>
+  To show the tree in columns it's not needed to use the full templating option. But at least the <code>treeNodeWrapperTemplate</code> is needed.
+  See also the <a [routerLink]="['/', 'fundamentals', 'templates']">Template Fundamentals</a>.
+</p>
+
+<h3>Column definition</h3>
+<p>
+  The example uses a simple array <code>columns = ['city', 'zipCode']</code> to handle the columns.
+  This array includes the property names that should be shown as columns and does not include the name, which is the first column.
+  The name is handled differently as seen in the example. The columns array is just looped over and shown.
+  In a more advanced example you could have the columns array as an input and also handle the name dynamically.
+</p>

projects/docs-app/src/app/examples/columns-example/columns-example.component.html

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ColumnsExampleComponent } from './columns-example.component';
+
+describe('ColumnsExampleComponent', () => {
+  let component: ColumnsExampleComponent;
+  let fixture: ComponentFixture<ColumnsExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ColumnsExampleComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ColumnsExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/docs-app/src/app/examples/columns-example/columns-example.component.scss

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-columns-example',
+  templateUrl: './columns-example.component.html',
+  styleUrls: ['./columns-example.component.scss']
+})
+export class ColumnsExampleComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/docs-app/src/app/examples/columns-example/columns-example.component.spec.ts

@@ -0,0 +1,46 @@
+<div class="base-tree-container">
+  <div #treeHeader class="tree-header">
+    <div class="tree-column tree-header-column"><span>Company name</span></div>
+    <div
+      *ngFor="let columnName of columns"
+      class="tree-column tree-header-column">
+      <span>{{ columnName }}</span>
+    </div>
+  </div>
+  <div class="tree-wrapper">
+    <tree-root
+      #tree
+      [options]="options"
+      [nodes]="nodes">
+      <!-- Node wrapper template to control wrapper classes and cursor behaviour -->
+      <ng-template #treeNodeWrapperTemplate let-node let-index="index">
+        <div class="tree-node-wrapper no-pointer">
+          <tree-node-expander [node]="node"></tree-node-expander>
+          <div class="node-content-wrapper pointer"
+               [class.node-content-wrapper-active]="node.isActive"
+               [class.node-content-wrapper-focused]="node.isFocused"
+               (click)="node.mouseAction('click', $event)"
+               (dblclick)="node.mouseAction('dblClick', $event)"
+               (contextmenu)="node.mouseAction('contextMenu', $event)"
+               (treeDrop)="node.onDrop($event)"
+               [treeAllowDrop]="node.allowDrop"
+               [treeDrag]="node"
+               [treeDragEnabled]="node.allowDrag()">
+
+            <div class="tree-column-wrapper">
+              <div class="tree-column" [title]="node.data.name">
+                <span>{{ node.data.name }}</span>
+              </div>
+              <div
+                *ngFor="let columnName of columns"
+                class="tree-column"
+                [title]="node.data[columnName]">
+                <span>{{node.data[columnName]}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </tree-root>
+  </div>
+</div>