Skip to content

Commit 93e127a

Browse files
author
Leo Vo
committed
Update demo.
1 parent 5e09227 commit 93e127a

12 files changed

+295
-254
lines changed

‎CHANGELOG.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,8 @@ export class TreeviewConfig {
6464

6565
# [1.2.0](https://www.npmjs.com/package/ngx-treeview) (2017-09-18)
6666
### Enhancement:
67-
* Support tri-state checkbox.
67+
* Support tri-state checkbox.
68+
69+
# [1.2.4](https://www.npmjs.com/package/ngx-treeview) (2017-10-19)
70+
### Enhancement:
71+
* Support configuration property to decouple parent and child.

‎e2e/app.e2e-spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ describe('ngx-treeview App', () => {
77
page = new NgxTreeviewPage();
88
});
99

10-
it('should display message saying "Angular ngx-treeview component demo"', () => {
10+
it('should display brand message saying "ngx-treeview"', () => {
1111
page.navigateTo();
12-
expect(page.getParagraphText()).toEqual('Angular ngx-treeview component demo');
12+
expect(page.getBrandText()).toEqual('ngx-treeview');
1313
});
1414
});

‎e2e/app.po.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export class NgxTreeviewPage {
55
return browser.get('/');
66
}
77

8-
getParagraphText() {
9-
return element(by.css('ngx-app h2')).getText();
8+
getBrandText() {
9+
return element(by.css('ngx-app .navbar-brand')).getText();
1010
}
1111
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-treeview",
3-
"version": "1.2.3",
3+
"version": "1.2.4",
44
"license": "MIT",
55
"description": "An Angular treeview component with checkbox",
66
"scripts": {

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,24 @@ <h3>Pipe & i18n (
22
<a href="https://github.com/leovo2708/ngx-treeview/tree/master/src/demo/city" target="_blank">source code</a>)</h3>
33
<ul>
44
<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>
5+
<li>No support to pipe JSON object with children property. Need to write a helper to transform them yourself</li>
6+
<li>How to get unchecked items</li>
67
<li>i18n</li>
78
</ul>
89
<div class="row">
910
<div class="col-12">
1011
<div class="alert alert-success" role="alert">
11-
Selected cities: {{values | json}}
12+
Selected cities: {{selectedCities | json}}
13+
</div>
14+
<div class="alert alert-secondary" role="alert">
15+
Unselected cities: {{unselectedCities | json}}
1216
</div>
1317
</div>
1418
<div class="col-12">
1519
<form class="d-inline-block">
1620
<label class="col-form-label mr-sm-2">City category</label>
1721
<div class="d-inline-block">
18-
<ngx-dropdown-treeview [items]="cities | ngxTreeview:'name'" [buttonClass]="'btn-outline-primary'" (selectedChange)="values = $event">
22+
<ngx-dropdown-treeview [items]="cities | ngxTreeview:'name'" [buttonClass]="'btn-outline-primary'" (selectedChange)="onSelectedChange($event)">
1923
</ngx-dropdown-treeview>
2024
</div>
2125
</form>

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { TreeviewI18n } from '../../lib';
1+
import { Component, OnInit, ViewChild } from '@angular/core';
2+
import { TreeviewI18n, DropdownTreeviewComponent } from '../../lib';
33
import { City, CityService } from './city.service';
44
import { CityTreeviewI18n } from './city-treeview-i18n';
55

@@ -12,8 +12,10 @@ import { CityTreeviewI18n } from './city-treeview-i18n';
1212
]
1313
})
1414
export class CityComponent implements OnInit {
15+
@ViewChild(DropdownTreeviewComponent) dropdownTreeviewComponent: DropdownTreeviewComponent;
1516
cities: City[];
16-
values: City[];
17+
selectedCities: City[];
18+
unselectedCities: City[];
1719

1820
constructor(
1921
private service: CityService
@@ -22,4 +24,10 @@ export class CityComponent implements OnInit {
2224
ngOnInit() {
2325
this.cities = this.service.getCities();
2426
}
27+
28+
onSelectedChange(selectedCities: City[]) {
29+
this.selectedCities = selectedCities;
30+
const uncheckedItems = this.dropdownTreeviewComponent.treeviewComponent.selection.uncheckedItems;
31+
this.unselectedCities = uncheckedItems.map(item => item.value);
32+
}
2533
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@
1111
</label>
1212
</div>
1313
</ng-template>
14-
<h3>Advanced</h3>
14+
<h3>Advanced (
15+
<a href="https://github.com/leovo2708/ngx-treeview/tree/master/src/demo/city" target="_blank">source code</a>)</h3>
1516
<ul>
1617
<li>Using custom TreeviewConfig to set new default configuration</li>
17-
<li>Using custom TreeviewEventParser to get selection by order</li>
18+
<li>Using OrderDownlineTreeviewEventParser to get selection by order</li>
1819
<li>Another example about using custom template</li>
1920
</ul>
2021
<div class="row">

‎src/lib/treeview-event-parser.spec.ts

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { TestBed } from '@angular/core/testing';
22
import { TreeviewItem, TreeviewSelection } from './treeview-item';
3-
import { TreeviewParserComponent } from './treeview-parser-component';
3+
import { TreeviewComponent } from './treeview.component';
4+
import { TreeviewModule } from './treeview.module';
45
import {
56
TreeviewEventParser, DefaultTreeviewEventParser, DownlineTreeviewEventParser, OrderDownlineTreeviewEventParser
67
} from './treeview-event-parser';
@@ -17,44 +18,42 @@ const selectionWithNullCheckedItems: TreeviewSelection = {
1718

1819
describe('DefaultTreeviewEventParser', () => {
1920
let parser: TreeviewEventParser;
20-
let fakeComponent: TreeviewParserComponent;
21+
let fakeComponent: TreeviewComponent;
2122

2223
beforeEach(() => {
2324
TestBed.configureTestingModule({
25+
imports: [
26+
TreeviewModule.forRoot()
27+
],
2428
providers: [
2529
{ provide: TreeviewEventParser, useClass: DefaultTreeviewEventParser }
2630
]
2731
});
2832
parser = TestBed.get(TreeviewEventParser);
33+
fakeComponent = TestBed.createComponent(TreeviewComponent).componentInstance;
2934
});
3035

3136
it('should return empty list if checkedItems is null or undefined', () => {
32-
fakeComponent = {
33-
items: undefined,
34-
selection: selectionWithUndefinedCheckedItems
35-
};
37+
fakeComponent.items = undefined;
38+
fakeComponent.selection = selectionWithUndefinedCheckedItems;
3639
let result = parser.getSelectedChange(fakeComponent);
3740
expect(result).toEqual([]);
3841

39-
fakeComponent = {
40-
items: undefined,
41-
selection: selectionWithNullCheckedItems
42-
};
42+
fakeComponent.items = undefined;
43+
fakeComponent.selection = selectionWithNullCheckedItems;
4344
result = parser.getSelectedChange(fakeComponent);
4445
expect(result).toEqual([]);
4546
});
4647

4748
it('should return list of value of checked items', () => {
48-
fakeComponent = {
49-
items: undefined,
50-
selection: {
51-
checkedItems: [
52-
new TreeviewItem({ text: 'Item1', value: 1 }),
53-
new TreeviewItem({ text: 'Item2', value: 2 })
54-
],
55-
uncheckedItems: undefined
56-
}
57-
};
49+
fakeComponent.items = undefined;
50+
fakeComponent.selection = {
51+
checkedItems: [
52+
new TreeviewItem({ text: 'Item1', value: 1 }),
53+
new TreeviewItem({ text: 'Item2', value: 2 })
54+
],
55+
uncheckedItems: undefined
56+
}
5857

5958
const result = parser.getSelectedChange(fakeComponent);
6059
expect(result).toEqual([1, 2]);
@@ -63,29 +62,29 @@ describe('DefaultTreeviewEventParser', () => {
6362

6463
describe('DownlineTreeviewEventParser', () => {
6564
let parser: TreeviewEventParser;
66-
let fakeComponent: TreeviewParserComponent;
65+
let fakeComponent: TreeviewComponent;
6766

6867
beforeEach(() => {
6968
TestBed.configureTestingModule({
69+
imports: [
70+
TreeviewModule.forRoot()
71+
],
7072
providers: [
7173
{ provide: TreeviewEventParser, useClass: DownlineTreeviewEventParser }
7274
]
7375
});
7476
parser = TestBed.get(TreeviewEventParser);
77+
fakeComponent = TestBed.createComponent(TreeviewComponent).componentInstance;
7578
});
7679

7780
it('should return empty list if items is null or undefined', () => {
78-
fakeComponent = {
79-
items: undefined,
80-
selection: selectionWithUndefinedCheckedItems
81-
};
81+
fakeComponent.items = undefined;
82+
fakeComponent.selection = selectionWithUndefinedCheckedItems;
8283
let result = parser.getSelectedChange(fakeComponent);
8384
expect(result).toEqual([]);
8485

85-
fakeComponent = {
86-
items: null,
87-
selection: selectionWithUndefinedCheckedItems
88-
};
86+
fakeComponent.items = null;
87+
fakeComponent.selection = selectionWithUndefinedCheckedItems;
8988
result = parser.getSelectedChange(fakeComponent);
9089
expect(result).toEqual([]);
9190
});
@@ -102,10 +101,8 @@ describe('DownlineTreeviewEventParser', () => {
102101
item1.children = [item1Child1, item1Child2];
103102
const item2 = new TreeviewItem({ text: 'Item2', value: 2 });
104103
const item3 = new TreeviewItem({ text: 'Item3', value: 3, checked: false });
105-
fakeComponent = {
106-
items: [item1, item2, item3],
107-
selection: selectionWithUndefinedCheckedItems
108-
};
104+
fakeComponent.items = [item1, item2, item3];
105+
fakeComponent.selection = selectionWithUndefinedCheckedItems;
109106
const result = parser.getSelectedChange(fakeComponent);
110107
const expected = [
111108
{
@@ -126,29 +123,29 @@ describe('DownlineTreeviewEventParser', () => {
126123

127124
describe('OrderDownlineTreeviewEventParser', () => {
128125
let parser: TreeviewEventParser;
129-
let fakeComponent: TreeviewParserComponent;
126+
let fakeComponent: TreeviewComponent;
130127

131128
beforeEach(() => {
132129
TestBed.configureTestingModule({
130+
imports: [
131+
TreeviewModule.forRoot()
132+
],
133133
providers: [
134134
{ provide: TreeviewEventParser, useClass: OrderDownlineTreeviewEventParser }
135135
]
136136
});
137137
parser = TestBed.get(TreeviewEventParser);
138+
fakeComponent = TestBed.createComponent(TreeviewComponent).componentInstance;
138139
});
139140

140141
it('should return empty list if items is null or undefined', () => {
141-
fakeComponent = {
142-
items: undefined,
143-
selection: selectionWithUndefinedCheckedItems
144-
};
142+
fakeComponent.items = undefined;
143+
fakeComponent.selection = selectionWithUndefinedCheckedItems;
145144
let result = parser.getSelectedChange(fakeComponent);
146145
expect(result).toEqual([]);
147146

148-
fakeComponent = {
149-
items: null,
150-
selection: selectionWithUndefinedCheckedItems
151-
};
147+
fakeComponent.items = null;
148+
fakeComponent.selection = selectionWithUndefinedCheckedItems;
152149
result = parser.getSelectedChange(fakeComponent);
153150
expect(result).toEqual([]);
154151
});
@@ -167,10 +164,8 @@ describe('OrderDownlineTreeviewEventParser', () => {
167164
const item3 = new TreeviewItem({ text: 'Item3', value: 3 });
168165

169166
beforeEach(() => {
170-
fakeComponent = {
171-
items: [item1, item2, item3],
172-
selection: selectionWithUndefinedCheckedItems
173-
};
167+
fakeComponent.items = [item1, item2, item3];
168+
fakeComponent.selection = selectionWithUndefinedCheckedItems;
174169
});
175170

176171
it('should return list of checked items with links', () => {

‎src/lib/treeview-event-parser.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { Injectable } from '@angular/core';
22
import * as _ from 'lodash';
3-
import { TreeviewParserComponent } from './treeview-parser-component';
43
import { TreeviewItem } from './treeview-item';
4+
import {TreeviewComponent} from './treeview.component';
55

66
@Injectable()
77
export abstract class TreeviewEventParser {
8-
abstract getSelectedChange(component: TreeviewParserComponent): any[];
8+
abstract getSelectedChange(component: TreeviewComponent): any[];
99
}
1010

1111
@Injectable()
1212
export class DefaultTreeviewEventParser extends TreeviewEventParser {
13-
getSelectedChange(component: TreeviewParserComponent): any[] {
13+
getSelectedChange(component: TreeviewComponent): any[] {
1414
const checkedItems = component.selection.checkedItems;
1515
if (!_.isNil(checkedItems)) {
1616
return checkedItems.map(item => item.value);
@@ -27,7 +27,7 @@ export interface DownlineTreeviewItem {
2727

2828
@Injectable()
2929
export class DownlineTreeviewEventParser extends TreeviewEventParser {
30-
getSelectedChange(component: TreeviewParserComponent): any[] {
30+
getSelectedChange(component: TreeviewComponent): any[] {
3131
const items = component.items;
3232
if (!_.isNil(items)) {
3333
let result: DownlineTreeviewItem[] = [];
@@ -77,7 +77,7 @@ export class OrderDownlineTreeviewEventParser extends TreeviewEventParser {
7777
private currentDownlines: DownlineTreeviewItem[] = [];
7878
private parser = new DownlineTreeviewEventParser();
7979

80-
getSelectedChange(component: TreeviewParserComponent): any[] {
80+
getSelectedChange(component: TreeviewComponent): any[] {
8181
const newDownlines: DownlineTreeviewItem[] = this.parser.getSelectedChange(component);
8282
if (this.currentDownlines.length === 0) {
8383
this.currentDownlines = newDownlines;

‎src/lib/treeview-parser-component.ts

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/lib/treeview.component.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { TreeviewConfig } from './treeview-config';
66
import { TreeviewEventParser } from './treeview-event-parser';
77
import { TreeviewHeaderTemplateContext } from './treeview-header-template-context';
88
import { TreeviewItemTemplateContext } from './treeview-item-template-context';
9-
import { TreeviewParserComponent } from './treeview-parser-component';
109

1110
class FilterTreeviewItem extends TreeviewItem {
1211
private readonly refItem: TreeviewItem;
@@ -47,7 +46,7 @@ class FilterTreeviewItem extends TreeviewItem {
4746
templateUrl: './treeview.component.html',
4847
styleUrls: ['./treeview.component.scss']
4948
})
50-
export class TreeviewComponent implements OnChanges, TreeviewParserComponent {
49+
export class TreeviewComponent implements OnChanges {
5150
@Input() headerTemplate: TemplateRef<TreeviewHeaderTemplateContext>;
5251
@Input() itemTemplate: TemplateRef<TreeviewItemTemplateContext>;
5352
@Input() items: TreeviewItem[];

0 commit comments

Comments
 (0)