Skip to content

Commit 459244c

Browse files
author
Leo Vo
committed
Header template.
1 parent c92f5d0 commit 459244c

35 files changed

+488
-211
lines changed

‎CHANGELOG.md

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,38 @@
1212

1313
### Enhancement:
1414
* Build bundles.
15-
* 100% code coverage.
15+
* 100% code coverage.
16+
17+
# [1.0.7](https://www.npmjs.com/package/ngx-treeview) (2017-07-19)
18+
19+
### Enhancement:
20+
* Template for header
21+
```js
22+
export interface TreeviewHeaderTemplateContext {
23+
config: TreeviewConfig;
24+
item: TreeviewItem;
25+
onCollapseExpand: () => void;
26+
onCheckedChange: (checked: boolean) => void;
27+
onFilterTextChange: (text: string) => void;
28+
}
29+
```
30+
### Refactoring:
31+
* Changes on interface of Treeview
32+
```js
33+
export interface TreeviewItemTemplateContext {
34+
item: TreeviewItem;
35+
onCollapseExpand: () => void;
36+
onCheckedChange: () => void;
37+
}
38+
```
39+
* Changes on TreeviewConfig
40+
```js
41+
export class TreeviewConfig {
42+
hasAllCheckBox = true;
43+
hasFilter = false;
44+
hasCollapseExpand = false;
45+
maxHeight = 500;
46+
}
47+
```
48+
### Demo:
49+
* Example for dropdown-treeview-select component.

‎DEVELOPER.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ There are a few npm scripts provided with [ngx-cli-library-seed](https://github.
55
- `build:demo`: Build the demo. Using [live-server](https://www.npmjs.com/package/live-server) to run demo.
66
- `build:lib`: Build the library
77
- `test`: Run all unit tests
8+
- `test-coverage`: Run all unit tests with coverage output
89
- `e2e`: Run all e2e tests
910
- `pub`: Publish the demo and the library
1011
- `pub:demo`: Build and deploy the demo to github pages

‎README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ You can customize CSS yourself to break down dependencies to Bootstrap & Font Aw
2626

2727
## Demo
2828

29-
https://leovo2708.github.io/ngx-treeview/
29+
[https://leovo2708.github.io/ngx-treeview/](https://leovo2708.github.io/ngx-treeview/)
3030

3131
## Installation
3232

3333
After install the above dependencies, install `ngx-treeview` via:
3434
```shell
35-
npm install --save ngx-treeview
35+
yarn add ngx-treeview
3636
```
3737
Once installed you need to import our main module in your application module:
3838
```js
@@ -70,9 +70,9 @@ export class AppModule {
7070
`config` is optional. This is the default configuration:
7171
```js
7272
{
73-
isShowAllCheckBox: true,
74-
isShowFilter: false,
75-
isShowCollapseExpand: false,
73+
hasAllCheckBox: true,
74+
hasFilter: false,
75+
hasCollapseExpand: false,
7676
maxHeight: 500
7777
}
7878
```
@@ -135,8 +135,8 @@ Extract data from list of checked TreeviewItem and send it in parameter of event
135135
* DownlineTreeviewEventParser: return list of checked items in orginal order with their ancestors.
136136
* OrderDownlineTreeviewEventParser: return list of checked items in checked order with their ancestors. Note that: value of a leaf must be different from value of other leaves.
137137

138-
#### TreeviewItem Template:
139-
See example 4.
138+
#### Templating:
139+
See example 4 & 5.
140140

141141
## Contributing
142142

‎gulpfile.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,18 @@ gulp.task('inline-templates', () => {
3232
* @see https://github.com/ludohenin/gulp-inline-ng2-template
3333
* @see https://github.com/sass/node-sass
3434
*/
35-
function compileSass(path, ext, file, callback) {
36-
let compiledCss = sass.renderSync({
37-
data: file,
38-
outputStyle: 'compressed',
35+
function compileSass(_path, ext, data, callback) {
36+
const compiledCss = sass.renderSync({
37+
data: data,
38+
outputStyle: 'expanded',
39+
importer: function (url, prev, done) {
40+
if (url.startsWith('~')) {
41+
const newUrl = path.join(__dirname, 'node_modules', url.substr(1));
42+
return { file: newUrl };
43+
} else {
44+
return { file: url };
45+
}
46+
}
3947
});
4048
callback(null, compiledCss.css);
4149
}

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-treeview",
3-
"version": "1.0.6",
3+
"version": "1.0.7",
44
"license": "MIT",
55
"description": "An Angular treeview component with checkbox",
66
"scripts": {
@@ -90,6 +90,6 @@
9090
"ts-node": "^3.2.0",
9191
"tslint": "^5.5.0",
9292
"typescript": "^2.4.1",
93-
"zone.js": "^0.8.12"
93+
"zone.js": "^0.8.1"
9494
}
95-
}
95+
}

‎src/demo/app.component.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ <h4>Example 2: Performance with 1000 items</h4>
2525
<h4>Example 3: Using pipe & i18n</h4>
2626
<ngx-city></ngx-city>
2727
<br />
28-
<h4>Example 4: Tree-view without drop-down & custom TreeviewConfig & custom TreeviewEventParser & custom template</h4>
28+
<h4>Example 4: dropdown-treeview-select Component</h4>
29+
<ngx-dropdown-treeview-select-demo></ngx-dropdown-treeview-select-demo>
30+
<br />
31+
<h4>Example 5: Tree-view without drop-down & custom TreeviewConfig & custom TreeviewEventParser & custom template</h4>
2932
<ngx-product></ngx-product>
3033
</div>

‎src/demo/app.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,16 @@ import { BookComponent } from './book/book.component';
77
import { CityComponent } from './city/city.component';
88
import { RoomComponent } from './room/room.component';
99
import { ProductComponent } from './product/product.component';
10+
import { DropdownTreeviewSelectModule } from './dropdown-treeview-select';
1011
import { I18n } from './i18n';
1112
import { DisabledOnSelectorDirective } from './disabled-on-selector.directive';
1213

1314
@NgModule({
1415
imports: [
1516
BrowserModule,
1617
FormsModule,
17-
TreeviewModule.forRoot()
18+
TreeviewModule.forRoot(),
19+
DropdownTreeviewSelectModule
1820
],
1921
declarations: [
2022
BookComponent,

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ export class BookComponent implements OnInit {
1313
enableButton = true;
1414
items: TreeviewItem[];
1515
values: number[];
16-
config: TreeviewConfig = {
17-
isShowAllCheckBox: true,
18-
isShowFilter: true,
19-
isShowCollapseExpand: true,
16+
config = TreeviewConfig.create({
17+
hasAllCheckBox: true,
18+
hasFilter: true,
19+
hasCollapseExpand: true,
2020
maxHeight: 500
21-
};
21+
});
2222

2323
constructor(
2424
private service: BookService

‎src/demo/dropdown-treeview-select/dropdown-treeview-select-demo.component.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="row">
2+
<div class="col-6">
3+
<div class="form-group">
4+
<div class="d-inline-block">
5+
<ngx-dropdown-treeview-select [config]="config" [items]="items" (selectedChange)="selectedItem = $event">
6+
</ngx-dropdown-treeview-select>
7+
</div>
8+
</div>
9+
</div>
10+
<div class="col-6">
11+
<div class="alert alert-success" role="alert">
12+
Selected book: {{ selectedItem | json }}
13+
</div>
14+
</div>
15+
</div>

‎src/demo/dropdown-treeview-select/dropdown-treeview-select-demo.component.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { TreeviewItem, TreeviewConfig } from '../../lib';
3+
import { BookService } from '../book/book.service';
4+
5+
@Component({
6+
selector: 'ngx-dropdown-treeview-select-demo',
7+
templateUrl: './dropdown-treeview-select-demo.component.html',
8+
providers: [
9+
BookService
10+
]
11+
})
12+
export class DropdownTreeviewSelectDemoComponent implements OnInit {
13+
selectedItem: TreeviewItem;
14+
items: TreeviewItem[];
15+
config = TreeviewConfig.create({
16+
hasFilter: true,
17+
hasCollapseExpand: true
18+
});
19+
20+
constructor(
21+
private bookService: BookService
22+
) { }
23+
24+
ngOnInit() {
25+
this.items = this.bookService.getBooks();
26+
}
27+
}

‎src/demo/dropdown-treeview-select/dropdown-treeview-select.component.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange">
2+
<div class="form-check">
3+
<i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa" [class.fa-caret-right]="item.collapsed"
4+
[class.fa-caret-down]="!item.collapsed"></i>
5+
<label (click)="select(item)">{{ item.text }}</label>
6+
</div>
7+
</ng-template>
8+
<ng-template #headerTemplate let-config="config" let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange"
9+
let-onFilterTextChange="onFilterTextChange">
10+
<div *ngIf="config.hasFilter" class="row">
11+
<div class="col-12">
12+
<input class="form-control" type="text" [placeholder]="i18n.filterPlaceholder()" [(ngModel)]="filterText" (ngModelChange)="onFilterTextChange($event)"
13+
/>
14+
</div>
15+
</div>
16+
<div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row">
17+
<div class="col-12" [class.row-margin]="config.hasFilter && (config.hasAllCheckBox || config.hasCollapseExpand)">
18+
<label *ngIf="config.hasAllCheckBox" (click)="select(item)">
19+
{{ i18n.allCheckboxText() }}
20+
</label>
21+
<label *ngIf="config.hasCollapseExpand" class="pull-right label-collapse-expand" (click)="onCollapseExpand()">
22+
<i [title]="i18n.tooltipCollapseExpand(item.collapsed)" aria-hidden="true"
23+
class="fa" [class.fa-expand]="item.collapsed" [class.fa-compress]="!item.collapsed"></i>
24+
</label>
25+
</div>
26+
</div>
27+
<div class="divider"></div>
28+
</ng-template>
29+
<ngx-dropdown-treeview [config]="config" [headerTemplate]="headerTemplate" [items]="items" [itemTemplate]="itemTemplate">
30+
</ngx-dropdown-treeview>

‎src/demo/dropdown-treeview-select/dropdown-treeview-select.component.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
label {
2+
margin-bottom: 0;
3+
cursor: pointer;
4+
}

‎src/demo/dropdown-treeview-select/dropdown-treeview-select.component.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Component, Injectable, Input, Output, EventEmitter } from '@angular/core';
2+
import * as _ from 'lodash';
3+
import {
4+
TreeviewI18n, TreeviewItem, TreeviewConfig, TreeviewHelper, TreeviewComponent,
5+
TreeviewEventParser, DownlineTreeviewItem, TreeviewI18nDefault
6+
} from '../../lib';
7+
8+
export class TreeviewDropdownSelectI18n extends TreeviewI18nDefault {
9+
private _selectedItem: TreeviewItem;
10+
11+
set selectedItem(value: TreeviewItem) {
12+
if (value && value.children === undefined) {
13+
this._selectedItem = value;
14+
}
15+
}
16+
17+
get selectedItem(): TreeviewItem {
18+
return this._selectedItem;
19+
}
20+
21+
getText(checkededItems: TreeviewItem[], isAll: boolean): string {
22+
return this._selectedItem ? this._selectedItem.text : 'All';
23+
}
24+
}
25+
26+
@Component({
27+
selector: 'ngx-dropdown-treeview-select',
28+
templateUrl: './dropdown-treeview-select.component.html',
29+
styleUrls: [
30+
'./dropdown-treeview-select.component.scss'
31+
],
32+
providers: [
33+
{ provide: TreeviewI18n, useClass: TreeviewDropdownSelectI18n }
34+
]
35+
})
36+
export class DropdownTreeviewSelectComponent {
37+
@Input() config: TreeviewConfig;
38+
@Input() items: TreeviewItem[];
39+
@Output() selectedChange = new EventEmitter<TreeviewItem>();
40+
filterText: string;
41+
private treeviewDropdownSelectI18n: TreeviewDropdownSelectI18n;
42+
43+
constructor(
44+
public i18n: TreeviewI18n
45+
) {
46+
this.treeviewDropdownSelectI18n = i18n as TreeviewDropdownSelectI18n;
47+
}
48+
49+
select(item: TreeviewItem) {
50+
if (item.children === undefined) {
51+
this.treeviewDropdownSelectI18n.selectedItem = item;
52+
this.selectedChange.emit(item);
53+
}
54+
}
55+
}

‎src/demo/dropdown-treeview-select/dropdown-treeview-select.module.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { NgModule, ModuleWithProviders } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
import { CommonModule } from '@angular/common';
4+
import { TreeviewModule } from '../../lib';
5+
import { DropdownTreeviewSelectComponent } from './dropdown-treeview-select.component';
6+
import { DropdownTreeviewSelectDemoComponent } from './dropdown-treeview-select-demo.component';
7+
8+
@NgModule({
9+
imports: [
10+
FormsModule,
11+
CommonModule,
12+
TreeviewModule.forRoot()
13+
],
14+
declarations: [
15+
DropdownTreeviewSelectComponent,
16+
DropdownTreeviewSelectDemoComponent
17+
],
18+
exports: [
19+
DropdownTreeviewSelectDemoComponent
20+
]
21+
})
22+
export class DropdownTreeviewSelectModule { }

‎src/demo/dropdown-treeview-select/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './dropdown-treeview-select.module';

‎src/demo/product/product.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<ng-template #tpl let-item="item" let-toggleCollapseExpand="toggleCollapseExpand" let-onCheckedChange="onCheckedChange">
1+
<ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange">
22
<div class="form-check">
3-
<i *ngIf="item.children" (click)="toggleCollapseExpand()" aria-hidden="true" class="fa" [class.fa-caret-right]="item.collapsed"
3+
<i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa" [class.fa-caret-right]="item.collapsed"
44
[class.fa-caret-down]="!item.collapsed"></i>
55
<label class="form-check-label">
66
<input type="checkbox" class="form-check-input"
@@ -16,7 +16,7 @@
1616
<div class="col-6">
1717
<div class="form-group">
1818
<div class="d-inline-block">
19-
<ngx-treeview [items]="items" [template]="tpl" (selectedChange)="onSelectedChange($event)">
19+
<ngx-treeview [items]="items" [itemTemplate]="itemTemplate" (selectedChange)="onSelectedChange($event)">
2020
</ngx-treeview>
2121
</div>
2222
</div>

‎src/demo/product/product.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { ProductService } from './product.service';
88

99
@Injectable()
1010
export class ProductTreeviewConfig extends TreeviewConfig {
11-
isShowAllCheckBox = true;
12-
isShowFilter = true;
13-
isShowCollapseExpand = false;
11+
hasAllCheckBox = true;
12+
hasFilter = true;
13+
hasCollapseExpand = false;
1414
maxHeight = 500;
1515
}
1616

‎src/demo/room/room.component.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ import { RoomService } from './room.service';
1212
export class RoomComponent implements OnInit {
1313
items: TreeviewItem[];
1414
values: any[];
15-
config: TreeviewConfig = {
16-
isShowAllCheckBox: true,
17-
isShowFilter: true,
18-
isShowCollapseExpand: false,
15+
config = TreeviewConfig.create({
16+
hasAllCheckBox: true,
17+
hasFilter: true,
18+
hasCollapseExpand: false,
1919
maxHeight: 500
20-
};
20+
});
2121

2222
constructor(
2323
private service: RoomService

0 commit comments

Comments
 (0)