Merge branch 'master' into master

Itori · Sep 18, 2017 · 129da92 · 129da92
2 parents 9bd1563 + 81036cd
commit 129da92
Show file tree

Hide file tree

Showing 25 changed files with 713 additions and 1,002 deletions.
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -5,34 +5,6 @@
   },
   "apps": [
     {
-      "name": "lib",
-      "root": "src",
-      "outDir": "dist/demo",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.lib.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "ngx",
-      "styles": [
-        "../node_modules/font-awesome/scss/font-awesome.scss",
-        "../node_modules/bootstrap/scss/bootstrap.scss",
-        "styles.scss"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    },
-    {
-      "name": "demo",
       "root": "src",
       "outDir": "dist/demo",
       "assets": [

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -56,4 +56,8 @@ export class TreeviewConfig {
 
 # [1.0.9](https://www.npmjs.com/package/ngx-treeview) (2017-07-21)
 ### Enhancement:
-* Expose DropdownDirective from DropdownTreeviewComponent.
+* Expose DropdownDirective from DropdownTreeviewComponent.
+
+# [1.1.0](https://www.npmjs.com/package/ngx-treeview) (2017-08-16)
+### Enhancement:
+* Support Bootstrap 4 beta.
diff --git a/README.md b/README.md
@@ -11,9 +11,11 @@ An Angular treeview component with checkbox
 
 * [Angular](https://angular.io)
 * [Lodash](https://lodash.com)
-* [Bootstrap 4 alpha 6](https://v4-alpha.getbootstrap.com)
+* [Bootstrap 4](https://getbootstrap.com)
 * [Font Awesome 4](http://fontawesome.io)
 
+This component is currently supporting Bootstrap 4.0.0 beta. If you are using Bootstrap 4 alpha 6, please downgrade to the older version 1.0.10.
+
 You can customize CSS yourself to break down dependencies to Bootstrap & Font Awesome.
 
 ## Features
@@ -61,6 +63,7 @@ export class AppModule {
 #### Treeview with dropdown:
 ```html
 <ngx-dropdown-treeview
+    [buttonClass]="buttonClass"
     [config]="config"
     [items]="items"
     (selectedChange)="onSelectedChange($event)">

diff --git a/package.json b/package.json
@@ -1,24 +1,24 @@
 {
   "name": "ngx-treeview",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "license": "MIT",
   "description": "An Angular treeview component with checkbox",
   "scripts": {
-    "start": "ng serve --app lib",
-    "start:demo": "npm run build:demo && lite-server -c bs-config.json",
+    "start": "ng serve",
     "lint": "ng lint",
     "test": "ng test",
     "test-coverage": "ng test --code-coverage",
     "test-ci": "ng test --watch=false --code-coverage --single-run=true",
     "e2e": "ng e2e",
-    "build:lib": "gulp inline-templates && rimraf dist/lib && ngc -p tsconfig-lib.json && copyfiles package.json README.md LICENSE dist/lib",
-    "build:demo": "npm run build:lib && rimraf dist/demo && ng build --app demo",
-    "build": "npm run build:demo",
-    "prebuild": "rimraf dist tmp",
-    "pub:demo": "npm run build:demo -- --base-href /ngx-treeview/ && gh-pages -d dist/demo",
+    "ci": "npm run lint && npm run test-ci && npm run e2e",
+    "prebuild:lib": "rimraf tmp dist/lib",
+    "build:lib": "gulp inline-templates && ngc -p tsconfig-lib.json && copyfiles package.json README.md LICENSE dist/lib",
+    "postbuild:lib": "rimraf tmp",
+    "prebuild:demo": "rimraf dist/demo",
+    "build:demo": "ng build --prod",
     "pub:lib": "npm run build:lib && npm publish dist/lib",
-    "pub": "rimraf dist && npm run pub:lib && npm run pub:demo",
-    "ci": "npm run lint && npm run test-ci && npm run e2e"
+    "pub:demo": "npm run build:demo -- --base-href /ngx-treeview/ && gh-pages -d dist/demo",
+    "pub": "npm run pub:lib && npm run pub:demo"
   },
   "keywords": [
     "ng",
@@ -83,7 +83,6 @@
     "karma-coverage-istanbul-reporter": "^1.3.0",
     "karma-jasmine": "^1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "lite-server": "^2.3.0",
     "lodash": "^4.17.4",
     "node-sass": "^4.5.3",
     "protractor": "^5.1.2",

diff --git a/src/demo/app.component.ts b/src/demo/app.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { TreeviewI18n } from 'ngx-treeview';
+import { TreeviewI18n } from '../lib';
 import { I18n } from './i18n';
 import { DefaultTreeviewI18n } from './default-treeview-i18n';
 

diff --git a/src/demo/city/city.component.html b/src/demo/city/city.component.html
@@ -16,8 +16,8 @@ <h4>Example 3: Using ngxTreeview pipe, custom TreeviewI18n & how to enable/disab
             <label for="city-category" class="col-3 col-form-label">City category</label>
             <div class="col-9">
                 <div class="d-inline-block">
-                    <ngx-dropdown-treeview [items]="cities | ngxTreeview:'name'" (selectedChange)="values = $event" [disabled]="!dropdownEnabled"
-                        [ngxDisabledOnSelector]="'button.dropdown-toggle'">
+                    <ngx-dropdown-treeview [items]="cities | ngxTreeview:'name'" [buttonClass]="'btn-outline-primary'" (selectedChange)="values = $event"
+                        [disabled]="!dropdownEnabled" [ngxDisabledOnSelector]="'button.dropdown-toggle'">
                     </ngx-dropdown-treeview>
                 </div>
             </div>

diff --git a/src/demo/dropdown-treeview-select/dropdown-treeview-select-demo.component.html b/src/demo/dropdown-treeview-select/dropdown-treeview-select-demo.component.html
@@ -2,13 +2,23 @@ <h4>Example 4: Using custom template => building a ngx-dropdown-treeview-select
 <div class="row">
     <div class="col-12">
         <div class="alert alert-success" role="alert">
-            Selected book: {{ selectedItem | json }}
+            Selected book id: {{ value }}
         </div>
     </div>
+</div>
+<div class="row">
+    <div class="col-12">
+        <div class="form-group">
+            <button class="btn btn-secondary" (click)="loadBooks1()">Load books 1</button>
+            <button class="btn btn-secondary" (click)="loadBooks2()">Load books 2</button>
+        </div>
+    </div>
+</div>
+<div class="row">
     <div class="col-12">
         <div class="form-group">
             <div class="d-inline-block">
-                <ngx-dropdown-treeview-select [config]="config" [items]="items" (selectedChange)="selectedItem = $event">
+                <ngx-dropdown-treeview-select [items]="items" [(value)]="value" (valueChange)="onValueChange($event)">
                 </ngx-dropdown-treeview-select>
             </div>
         </div>

diff --git a/src/demo/dropdown-treeview-select/dropdown-treeview-select-demo.component.ts b/src/demo/dropdown-treeview-select/dropdown-treeview-select-demo.component.ts
@@ -10,7 +10,7 @@ import { BookService } from '../book/book.service';
     ]
 })
 export class DropdownTreeviewSelectDemoComponent implements OnInit {
-    selectedItem: TreeviewItem;
+    value = 11;
     items: TreeviewItem[];
     config = TreeviewConfig.create({
         hasFilter: true,
@@ -24,4 +24,21 @@ export class DropdownTreeviewSelectDemoComponent implements OnInit {
     ngOnInit() {
         this.items = this.bookService.getBooks();
     }
+
+    onValueChange(value: number) {
+        console.log('valueChange raised with value: ' + value);
+    }
+
+    loadBooks1() {
+        this.items = this.bookService.getBooks();
+        this.value = 11;
+    }
+
+    loadBooks2() {
+        this.items = [new TreeviewItem({
+            text: 'ABC',
+            value: 123456
+        })];
+        this.value = undefined;
+    }
 }
diff --git a/src/demo/dropdown-treeview-select/dropdown-treeview-select-i18n.ts b/src/demo/dropdown-treeview-select/dropdown-treeview-select-i18n.ts
@@ -0,0 +1,19 @@
+import { TreeviewItem, TreeviewI18nDefault } from '../../lib';
+
+export class DropdownTreeviewSelectI18n extends TreeviewI18nDefault {
+    private _selectedItem: TreeviewItem;
+
+    set selectedItem(value: TreeviewItem) {
+        if (value && value.children === undefined) {
+            this._selectedItem = value;
+        }
+    }
+
+    get selectedItem(): TreeviewItem {
+        return this._selectedItem;
+    }
+
+    getText(checkededItems: TreeviewItem[], isAll: boolean): string {
+        return this._selectedItem ? this._selectedItem.text : 'All';
+    }
+}
diff --git a/src/demo/dropdown-treeview-select/dropdown-treeview-select.component.ts b/src/demo/dropdown-treeview-select/dropdown-treeview-select.component.ts
@@ -1,27 +1,7 @@
-import { Component, Injectable, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Injectable, Input, Output, EventEmitter, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
 import * as _ from 'lodash';
-import {
-    TreeviewI18n, TreeviewItem, TreeviewConfig, TreeviewHelper, TreeviewComponent,
-    TreeviewEventParser, DownlineTreeviewItem, TreeviewI18nDefault, DropdownDirective, DropdownTreeviewComponent
-} from '../../lib';
-
-export class DropdownTreeviewSelectI18n extends TreeviewI18nDefault {
-    private _selectedItem: TreeviewItem;
-
-    set selectedItem(value: TreeviewItem) {
-        if (value && value.children === undefined) {
-            this._selectedItem = value;
-        }
-    }
-
-    get selectedItem(): TreeviewItem {
-        return this._selectedItem;
-    }
-
-    getText(checkededItems: TreeviewItem[], isAll: boolean): string {
-        return this._selectedItem ? this._selectedItem.text : 'All';
-    }
-}
+import { TreeviewI18n, TreeviewItem, TreeviewConfig, DropdownTreeviewComponent, TreeviewHelper } from '../../lib';
+import { DropdownTreeviewSelectI18n } from './dropdown-treeview-select-i18n';
 
 @Component({
     selector: 'ngx-dropdown-treeview-select',
@@ -33,25 +13,65 @@ export class DropdownTreeviewSelectI18n extends TreeviewI18nDefault {
         { provide: TreeviewI18n, useClass: DropdownTreeviewSelectI18n }
     ]
 })
-export class DropdownTreeviewSelectComponent {
+export class DropdownTreeviewSelectComponent implements OnChanges {
     @Input() config: TreeviewConfig;
     @Input() items: TreeviewItem[];
-    @Output() selectedChange = new EventEmitter<TreeviewItem>();
+    @Input() value: any;
+    @Output() valueChange = new EventEmitter<any>();
     @ViewChild(DropdownTreeviewComponent) dropdownTreeviewComponent: DropdownTreeviewComponent;
     filterText: string;
     private dropdownTreeviewSelectI18n: DropdownTreeviewSelectI18n;
 
     constructor(
         public i18n: TreeviewI18n
     ) {
+        this.config = TreeviewConfig.create({
+            hasAllCheckBox: true,
+            hasCollapseExpand: true,
+            hasFilter: false,
+            maxHeight: 500
+        });
         this.dropdownTreeviewSelectI18n = i18n as DropdownTreeviewSelectI18n;
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (_.isNil(this.value)) {
+            this.selectAll();
+        } else {
+            this.updateSelectedItem();
+        }
+    }
+
     select(item: TreeviewItem) {
         if (item.children === undefined) {
-            this.dropdownTreeviewComponent.dropdownDirective.close();
+            this.selectItem(item);
+        }
+    }
+
+    private updateSelectedItem() {
+        if (!_.isNil(this.items)) {
+            const selectedItem = TreeviewHelper.findItemInList(this.items, this.value);
+            if (selectedItem) {
+                this.selectItem(selectedItem);
+            } else {
+                this.selectAll();
+            }
+        }
+    }
+
+    private selectItem(item: TreeviewItem) {
+        this.dropdownTreeviewComponent.dropdownDirective.close();
+        if (this.dropdownTreeviewSelectI18n.selectedItem !== item) {
             this.dropdownTreeviewSelectI18n.selectedItem = item;
-            this.selectedChange.emit(item);
+            if (this.value !== item.value) {
+                this.value = item.value;
+                this.valueChange.emit(item.value);
+            }
         }
     }
+
+    private selectAll() {
+        const allItem = this.dropdownTreeviewComponent.treeviewComponent.allItem;
+        this.selectItem(allItem);
+    }
 }
diff --git a/src/demo/product/product.component.ts b/src/demo/product/product.component.ts
@@ -55,11 +55,11 @@ export class ProductComponent implements OnInit {
 
     removeItem(item: TreeviewItem) {
         let isRemoved = false;
-        for (let i = 0; i < this.items.length; i++) {
-            if (this.items[i] === item) {
+        for (const tmpItem of this.items) {
+            if (tmpItem === item) {
                 _.remove(this.items, item);
             } else {
-                isRemoved = TreeviewHelper.removeItem(this.items[i], item);
+                isRemoved = TreeviewHelper.removeItem(tmpItem, item);
                 if (isRemoved) {
                     break;
                 }

diff --git a/src/lib/dropdown-menu.directive.ts b/src/lib/dropdown-menu.directive.ts
@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { DropdownDirective } from './dropdown.directive';
+
+@Directive({
+    selector: '[ngxDropdownMenu]',
+    // tslint:disable-next-line:use-host-property-decorator
+    host: {
+        '[class.dropdown-menu]': 'true',
+        '[class.show]': 'dropdown.isOpen'
+    }
+})
+export class DropdownMenuDirective {
+    constructor(
+        private dropdown: DropdownDirective
+    ) { }
+}
diff --git a/src/lib/dropdown-toggle.directive.ts b/src/lib/dropdown-toggle.directive.ts
@@ -1,28 +1,21 @@
-import { Directive, HostBinding, HostListener, ElementRef } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 import { DropdownDirective } from './dropdown.directive';
 
 @Directive({
     selector: '[ngxDropdownToggle]',
     // tslint:disable-next-line:use-host-property-decorator
     host: {
         'class': 'dropdown-toggle',
-        'aria-haspopup': 'true'
+        'aria-haspopup': 'true',
+        '[attr.aria-expanded]': 'dropdown.isOpen',
+        '(click)': 'dropdown.toggle()'
     }
 })
 export class DropdownToggleDirective {
-    @HostBinding('attr.aria-expanded') get ariaExpanded(): boolean {
-        return this.dropdown.isOpen;
-    }
-
     constructor(
         private dropdown: DropdownDirective,
         elementRef: ElementRef
     ) {
         dropdown.toggleElement = elementRef.nativeElement;
     }
-
-    @HostListener('click')
-    onClick() {
-        this.dropdown.toggle();
-    }
 }
diff --git a/src/lib/dropdown-treeview.component.html b/src/lib/dropdown-treeview.component.html
@@ -1,8 +1,8 @@
 <div class="dropdown" ngxDropdown>
-    <button class="btn btn-secondary" type="button" role="button" ngxDropdownToggle>
+    <button class="btn" [ngClass]="buttonClass" type="button" role="button" ngxDropdownToggle>
         {{getText()}}
     </button>
-    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" (click)="$event.stopPropagation()">
+    <div ngxDropdownMenu aria-labelledby="dropdownMenu" (click)="$event.stopPropagation()">
         <div class="dropdown-container">
             <ngx-treeview [config]="config" [headerTemplate]="headerTemplate" [items]="items" [itemTemplate]="itemTemplate" (selectedChange)="onSelectedChange($event)">
             </ngx-treeview>

diff --git a/src/lib/dropdown-treeview.component.ts b/src/lib/dropdown-treeview.component.ts
@@ -13,6 +13,7 @@ import { TreeviewItemTemplateContext } from './treeview-item-template-context';
     styleUrls: ['./dropdown-treeview.component.scss']
 })
 export class DropdownTreeviewComponent {
+    @Input() buttonClass = 'btn-outline-secondary';
     @Input() headerTemplate: TemplateRef<TreeviewHeaderTemplateContext>;
     @Input() itemTemplate: TemplateRef<TreeviewItemTemplateContext>;
     @Input() items: TreeviewItem[];