Skip to content

Commit 5e09227

Browse files
author
Leo Vo
committed
Update demo.
1 parent 6be847e commit 5e09227

16 files changed

+285
-170
lines changed

‎src/demo/app-routing.module.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { NotFoundComponent } from './not-found.component';
4+
import { BookComponent } from './book/book.component';
5+
import { CityComponent } from './city/city.component';
6+
import { RoomComponent } from './room/room.component';
7+
import { DropdownTreeviewSelectDemoComponent } from './dropdown-treeview-select/dropdown-treeview-select-demo.component';
8+
import { ProductComponent } from './product/product.component';
9+
10+
const routes: Routes = [
11+
{ path: '', redirectTo: 'components', pathMatch: 'full' },
12+
{ path: 'components', component: BookComponent },
13+
{ path: 'pipe', component: CityComponent },
14+
{ path: 'performance', component: RoomComponent },
15+
{ path: 'template', component: DropdownTreeviewSelectDemoComponent },
16+
{ path: 'advanced', component: ProductComponent },
17+
{ path: '**', component: NotFoundComponent }
18+
];
19+
20+
@NgModule({
21+
imports: [
22+
RouterModule.forRoot(routes, { useHash: true })
23+
],
24+
exports: [
25+
RouterModule
26+
]
27+
})
28+
export class AppRoutingModule { }

‎src/demo/app.component.html

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,36 @@
1-
<div class="container">
2-
<h2>Angular ngx-treeview component demo</h2>
3-
<hr />
4-
<br />
5-
<div class="row">
6-
<label for="item-category" class="col-3 col-form-label">Language</label>
7-
<div class="col-9">
8-
<select class="form-control" [(ngModel)]="language">
9-
<option value="en">
10-
English
11-
</option>
12-
<option value="vi">
13-
Tiếng Việt
14-
</option>
15-
</select>
1+
<header class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
2+
<a class="navbar-brand" href="#">ngx-treeview</a>
3+
<div class="navbar-nav mr-auto"></div>
4+
<a class="github-button" href="https://github.com/leovo2708/ngx-treeview" data-size="large" data-show-count="true" aria-label="Star leovo2708/ngx-treeview on GitHub">Star</a>
5+
</header>
6+
<div class="container-fluid">
7+
<div class="row">
8+
<div class="col-12 col-md-2 sidebar">
9+
<nav>
10+
<div class="form-inline">
11+
<label class="mr-sm-2">Language</label>
12+
<select class="form-control" [(ngModel)]="language">
13+
<option value="en">
14+
English
15+
</option>
16+
<option value="vi">
17+
Tiếng Việt
18+
</option>
19+
</select>
1620
</div>
21+
<ul class="nav nav-pills flex-column">
22+
<li class="nav-item" routerLinkActive="active">
23+
<a class="nav-link" routerLink="components">Components</a>
24+
<a class="nav-link" routerLink="pipe">Pipe & i18n</a>
25+
<a class="nav-link" routerLink="performance">Performance</a>
26+
<a class="nav-link" routerLink="template">Template</a>
27+
<a class="nav-link" routerLink="advanced">Advanced</a>
28+
</li>
29+
</ul>
30+
</nav>
1731
</div>
18-
<hr>
19-
<ngx-book></ngx-book>
20-
<br />
21-
<ngx-room></ngx-room>
22-
<br />
23-
<ngx-city></ngx-city>
24-
<br />
25-
<ngx-dropdown-treeview-select-demo></ngx-dropdown-treeview-select-demo>
26-
<br />
27-
<ngx-product></ngx-product>
28-
</div>
32+
<main class="col-12 col-md-10">
33+
<router-outlet></router-outlet>
34+
</main>
35+
</div>
36+
</div>

‎src/demo/app.component.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.fixed-top {
2+
position: fixed;
3+
top: 0;
4+
right: 0;
5+
left: 0;
6+
z-index: 1030;
7+
}
8+
9+
.sidebar {
10+
position: sticky;
11+
top: 4rem;
12+
z-index: 1000;
13+
border-right: 1px solid rgba(0,0,0,.1);
14+
}

‎src/demo/app.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { DefaultTreeviewI18n } from './default-treeview-i18n';
66
@Component({
77
selector: 'ngx-app',
88
templateUrl: './app.component.html',
9+
styleUrls: ['./app.component.scss'],
910
providers: [
1011
{ provide: TreeviewI18n, useClass: DefaultTreeviewI18n }
1112
]

‎src/demo/app.module.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import { BrowserModule } from '@angular/platform-browser';
33
import { FormsModule } from '@angular/forms';
44
import { TreeviewModule } from '../lib';
55
import { AppComponent } from './app.component';
6+
import { AppRoutingModule } from './app-routing.module';
67
import { BookComponent } from './book/book.component';
78
import { CityComponent } from './city/city.component';
89
import { RoomComponent } from './room/room.component';
910
import { ProductComponent } from './product/product.component';
11+
import { NotFoundComponent } from './not-found.component';
1012
import { DropdownTreeviewSelectModule } from './dropdown-treeview-select';
1113
import { I18n } from './i18n';
1214
import { DisabledOnSelectorDirective } from './disabled-on-selector.directive';
@@ -16,9 +18,11 @@ import { DisabledOnSelectorDirective } from './disabled-on-selector.directive';
1618
BrowserModule,
1719
FormsModule,
1820
TreeviewModule.forRoot(),
19-
DropdownTreeviewSelectModule
21+
DropdownTreeviewSelectModule,
22+
AppRoutingModule
2023
],
2124
declarations: [
25+
NotFoundComponent,
2226
BookComponent,
2327
CityComponent,
2428
RoomComponent,

‎src/demo/book/book.component.html

Lines changed: 78 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,83 @@
1-
<h4>Example 1: Primary features</h4>
1+
<h3>Components (
2+
<a href="https://github.com/leovo2708/ngx-treeview/tree/master/src/demo/book" target="_blank">source code</a>)</h3>
3+
<ul>
4+
<li>Exposing all of configuration of ngx-treeview & ngx-dropdown-treeview</li>
5+
<li>There is no option to disable ngx-treeview & ngx-dropdown-treeview but you can implement it easily with a
6+
<a href="https://github.com/leovo2708/ngx-treeview/blob/master/src/demo/disabled-on-selector.directive.ts"
7+
target="_blank">Angular directive</a>
8+
</li>
9+
</ul>
210
<div class="row">
3-
<div class="col-12">
4-
<div class="alert alert-success" role="alert">
5-
Selected books: {{values}}
6-
</div>
11+
<div class="col-12">
12+
<div class="alert alert-success" role="alert">
13+
Selected books: {{values}}
714
</div>
8-
<div class="col-12">
9-
<div class="row">
10-
<div class="col-lg-4 col-sm-12">
11-
<div class="form-group">
12-
<p><strong>Configuration</strong></p>
13-
<div class="form-check">
14-
<label class="form-check-label">
15-
<input type="checkbox" class="form-check-input" [(ngModel)]="config.hasAllCheckBox">
16-
hasAllCheckBox
17-
</label>
18-
</div>
19-
<div class="form-check">
20-
<label class="form-check-label">
21-
<input type="checkbox" class="form-check-input" [(ngModel)]="config.hasFilter">
22-
hasFilter
23-
</label>
24-
</div>
25-
<div class="form-check">
26-
<label class="form-check-label">
27-
<input type="checkbox" class="form-check-input" [(ngModel)]="config.hasCollapseExpand">
28-
hasCollapseExpand
29-
</label>
30-
</div>
31-
<div class="form-check">
32-
<label class="form-check-label">
33-
<input type="checkbox" class="form-check-input" [(ngModel)]="config.decoupleChildFromParent">
34-
decoupleChildFromParent
35-
</label>
36-
</div>
37-
<div class="form-inline">
38-
<div class="form-group">
39-
<label for="maxHeight">maxHeight</label>
40-
<input type="text" class="form-control mx-sm-3" id="maxHeight" placeholder="maxHeight" [(ngModel)]="config.maxHeight">
41-
</div>
42-
</div>
43-
</div>
44-
</div>
45-
<div class="col-lg-4 col-sm-12">
46-
<div class="form-group">
47-
<p><strong>ngx-treeview</strong></p>
48-
<ngx-treeview [config]="config" [items]="items" (selectedChange)="values = $event">
49-
</ngx-treeview>
50-
</div>
51-
</div>
52-
<div class="col-lg-4 col-sm-12">
53-
<div class="form-group">
54-
<p><strong>ngx-dropdown-treeview</strong></p>
55-
<ngx-dropdown-treeview [config]="config" [items]="items" (selectedChange)="values = $event">
56-
</ngx-dropdown-treeview>
57-
</div>
15+
</div>
16+
<div class="col-12">
17+
<div class="row">
18+
<div class="col-lg-4 col-sm-12">
19+
<div class="form-group">
20+
<label>
21+
<strong>Configuration</strong>
22+
</label>
23+
<div class="form-check">
24+
<label class="form-check-label">
25+
<input type="checkbox" class="form-check-input" [(ngModel)]="config.hasAllCheckBox"> hasAllCheckBox
26+
</label>
27+
</div>
28+
<div class="form-check">
29+
<label class="form-check-label">
30+
<input type="checkbox" class="form-check-input" [(ngModel)]="config.hasFilter"> hasFilter
31+
</label>
32+
</div>
33+
<div class="form-check">
34+
<label class="form-check-label">
35+
<input type="checkbox" class="form-check-input" [(ngModel)]="config.hasCollapseExpand"> hasCollapseExpand
36+
</label>
37+
</div>
38+
<div class="form-check">
39+
<label class="form-check-label">
40+
<input type="checkbox" class="form-check-input" [(ngModel)]="config.decoupleChildFromParent"> decoupleChildFromParent
41+
</label>
42+
</div>
43+
<div class="form-inline">
44+
<div class="form-group">
45+
<label for="maxHeight">maxHeight</label>
46+
<input type="text" class="form-control mx-sm-3" id="maxHeight" placeholder="maxHeight" [(ngModel)]="config.maxHeight">
5847
</div>
48+
</div>
49+
</div>
50+
</div>
51+
<div class="col-lg-4 col-sm-12">
52+
<div class="form-group">
53+
<label>
54+
<strong>ngx-treeview</strong>
55+
</label>
56+
<ngx-treeview [config]="config" [items]="items" (selectedChange)="values = $event">
57+
</ngx-treeview>
58+
</div>
59+
</div>
60+
<div class="col-lg-4 col-sm-12">
61+
<div class="form-group">
62+
<label>
63+
<strong>ngx-dropdown-treeview</strong>
64+
</label>
65+
<div class="form-check">
66+
<label class="form-check-label">
67+
<input class="form-check-input" type="checkbox" [(ngModel)]="dropdownEnabled"> Enable/disable
68+
</label>
69+
</div>
70+
<div class="form-group form-inline">
71+
<label>buttonClass</label>
72+
<select class="form-control mx-sm-3" [(ngModel)]="buttonClass">
73+
<option *ngFor="let c of buttonClasses" [value]="c">{{c}}</option>
74+
</select>
75+
</div>
76+
<ngx-dropdown-treeview [config]="config" [items]="items" [buttonClass]="buttonClass" (selectedChange)="values = $event" [disabled]="!dropdownEnabled"
77+
[ngxDisabledOnSelector]="'button.dropdown-toggle'">
78+
</ngx-dropdown-treeview>
5979
</div>
80+
</div>
6081
</div>
61-
</div>
82+
</div>
83+
</div>

‎src/demo/book/book.component.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { BookService } from './book.service';
1010
]
1111
})
1212
export class BookComponent implements OnInit {
13+
dropdownEnabled = true;
1314
items: TreeviewItem[];
1415
values: number[];
1516
config = TreeviewConfig.create({
@@ -20,6 +21,18 @@ export class BookComponent implements OnInit {
2021
maxHeight: 400
2122
});
2223

24+
buttonClasses = [
25+
'btn-outline-primary',
26+
'btn-outline-secondary',
27+
'btn-outline-success',
28+
'btn-outline-danger',
29+
'btn-outline-warning',
30+
'btn-outline-info',
31+
'btn-outline-light',
32+
'btn-outline-dark'
33+
];
34+
buttonClass = this.buttonClasses[0];
35+
2336
constructor(
2437
private service: BookService
2538
) { }

‎src/demo/city/city.component.html

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
1-
<h4>Example 3: Using ngxTreeview pipe, custom TreeviewI18n & how to enable/disable dropdown button</h4>
1+
<h3>Pipe & i18n (
2+
<a href="https://github.com/leovo2708/ngx-treeview/tree/master/src/demo/city" target="_blank">source code</a>)</h3>
3+
<ul>
4+
<li>This pipe converts a list of JSON objects to be list of TreeviewItem objects</li>
5+
<li>No support to pipe JSON object with children property</li>
6+
<li>i18n</li>
7+
</ul>
28
<div class="row">
3-
<div class="col-12">
4-
<div class="alert alert-success" role="alert">
5-
Selected cities: {{values | json}}
6-
</div>
9+
<div class="col-12">
10+
<div class="alert alert-success" role="alert">
11+
Selected cities: {{values | json}}
712
</div>
8-
<div class="col-12">
9-
<div class="form-check">
10-
<label class="form-check-label">
11-
<input class="form-check-input" type="checkbox" [(ngModel)]="dropdownEnabled">
12-
Check/uncheck to enable/disable dropdown button
13-
</label>
14-
</div>
15-
<div class="form-group row">
16-
<label for="city-category" class="col-3 col-form-label">City category</label>
17-
<div class="col-9">
18-
<div class="d-inline-block">
19-
<ngx-dropdown-treeview [items]="cities | ngxTreeview:'name'" [buttonClass]="'btn-outline-primary'" (selectedChange)="values = $event"
20-
[disabled]="!dropdownEnabled" [ngxDisabledOnSelector]="'button.dropdown-toggle'">
21-
</ngx-dropdown-treeview>
22-
</div>
23-
</div>
24-
</div>
25-
</div>
26-
</div>
13+
</div>
14+
<div class="col-12">
15+
<form class="d-inline-block">
16+
<label class="col-form-label mr-sm-2">City category</label>
17+
<div class="d-inline-block">
18+
<ngx-dropdown-treeview [items]="cities | ngxTreeview:'name'" [buttonClass]="'btn-outline-primary'" (selectedChange)="values = $event">
19+
</ngx-dropdown-treeview>
20+
</div>
21+
</form>
22+
</div>
23+
</div>

‎src/demo/city/city.component.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { CityTreeviewI18n } from './city-treeview-i18n';
1212
]
1313
})
1414
export class CityComponent implements OnInit {
15-
dropdownEnabled = true;
1615
cities: City[];
1716
values: City[];
1817

0 commit comments

Comments
 (0)