Review feature decouple parent & child check-boxes.

Author: Leo Vo

README.md

@@ -78,6 +78,7 @@ export class AppModule {
     hasAllCheckBox: true,
     hasFilter: false,
     hasCollapseExpand: false,
+    decoupleChildFromParent: false,
     maxHeight: 500
 }
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-treeview",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "license": "MIT",
   "description": "An Angular treeview component with checkbox",
   "scripts": {
@@ -89,7 +89,7 @@
     "rimraf": "^2.6.1",
     "ts-node": "^3.2.0",
     "tslint": "^5.5.0",
-    "typescript": "^2.4.1",
+    "typescript": "2.3.2",
     "zone.js": "^0.8.1"
   }
 }

src/demo/book/book.component.html

@@ -28,6 +28,12 @@ <h4>Example 1: Primary features</h4>
                             hasCollapseExpand
                         </label>
                     </div>
+                    <div class="form-check">
+                        <label class="form-check-label">
+                            <input type="checkbox" class="form-check-input" [(ngModel)]="config.decoupleChildFromParent">
+                            decoupleChildFromParent
+                        </label>
+                    </div>
                     <div class="form-inline">
                         <div class="form-group">
                             <label for="maxHeight">maxHeight</label>

src/demo/book/book.component.ts

@@ -16,6 +16,7 @@ export class BookComponent implements OnInit {
         hasAllCheckBox: true,
         hasFilter: true,
         hasCollapseExpand: true,
+        decoupleChildFromParent: false,
         maxHeight: 400
     });
 

src/lib/treeview-config.spec.ts

@@ -1,11 +1,12 @@
 import { TreeviewConfig } from './treeview-config';
 
-describe('Treeview-Config', () => {
+describe('TreeviewConfig', () => {
     it('should have sensible default values', () => {
         const config = new TreeviewConfig();
         expect(config.hasAllCheckBox).toBe(true);
         expect(config.hasFilter).toBe(false);
         expect(config.hasCollapseExpand).toBe(false);
         expect(config.maxHeight).toBe(500);
+        expect(config.decoupleChildFromParent).toBe(false);
     });
 });

src/lib/treeview-config.ts

@@ -5,6 +5,7 @@ export class TreeviewConfig {
     hasAllCheckBox = true;
     hasFilter = false;
     hasCollapseExpand = false;
+    decoupleChildFromParent = false;
     maxHeight = 500;
 
     get hasDivider(): boolean {
@@ -15,7 +16,8 @@ export class TreeviewConfig {
         hasAllCheckBox?: boolean,
         hasFilter?: boolean,
         hasCollapseExpand?: boolean,
-        maxHeight?: number
+        decoupleChildFromParent?: boolean
+        maxHeight?: number,
     }): TreeviewConfig {
         const config = new TreeviewConfig();
         Object.assign(config, fields);

src/lib/treeview-item.component.spec.ts

@@ -1,9 +1,10 @@
-import { Component, DebugElement } from '@angular/core';
-import { TestBed, ComponentFixture, fakeAsync, tick, async } from '@angular/core/testing';
+import { Component, DebugElement, Injectable } from '@angular/core';
+import { TestBed, ComponentFixture, fakeAsync, tick, async, inject } from '@angular/core/testing';
 import { BrowserModule, By } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import * as _ from 'lodash';
 import { expect, createGenericTestComponent } from '../testing';
+import { TreeviewConfig } from './treeview-config';
 import { TreeviewItemComponent } from './treeview-item.component';
 import { TreeviewItem } from './treeview-item';
 import { fakeItemTemplate } from './treeview-item-template.spec';
@@ -43,10 +44,17 @@ describe('TreeviewItemComponent', () => {
             declarations: [
                 TestComponent,
                 TreeviewItemComponent
-            ]
+            ],
+            providers: [TreeviewConfig]
         });
     });
 
+    it('should initialize with default config', () => {
+        const defaultConfig = new TreeviewConfig();
+        const component = TestBed.createComponent(TreeviewItemComponent).componentInstance;
+        expect(component.config).toEqual(defaultConfig);
+    });
+
     describe('item', () => {
         it('should not have element with class "treeview-item" if no item provided', () => {
             const fixture = createTestComponent('<ngx-treeview-item></ngx-treeview-item>');

src/lib/treeview-item.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
 import * as _ from 'lodash';
 import { TreeviewItem } from './treeview-item';
+import { TreeviewConfig } from './treeview-config';
 import { TreeviewItemTemplateContext } from './treeview-item-template-context';
 
 @Component({
@@ -9,39 +10,49 @@ import { TreeviewItemTemplateContext } from './treeview-item-template-context';
     styleUrls: ['./treeview-item.component.scss']
 })
 export class TreeviewItemComponent {
+    @Input() config: TreeviewConfig;
     @Input() template: TemplateRef<TreeviewItemTemplateContext>;
     @Input() item: TreeviewItem;
     @Output() checkedChange = new EventEmitter<boolean>();
 
+    constructor(
+        private defaultConfig: TreeviewConfig
+    ) {
+        this.config = this.defaultConfig;
+    }
+
     onCollapseExpand = () => {
         this.item.collapsed = !this.item.collapsed;
     }
 
     onCheckedChange = () => {
         const checked = this.item.checked;
-        if (!_.isNil(this.item.children)) {
+        if (!_.isNil(this.item.children) && !this.config.decoupleChildFromParent) {
             this.item.children.forEach(child => child.setCheckedRecursive(checked));
         }
         this.checkedChange.emit(checked);
     }
 
     onChildCheckedChange(child: TreeviewItem, checked: boolean) {
-        let itemChecked: boolean = null;
-        for (const childItem of this.item.children) {
+        if (!this.config.decoupleChildFromParent) {
+            let itemChecked: boolean = null;
+            for (const childItem of this.item.children) {
+                if (itemChecked === null) {
+                    itemChecked = childItem.checked;
+                } else if (itemChecked !== childItem.checked) {
+                    itemChecked = undefined;
+                    break;
+                }
+            }
+
             if (itemChecked === null) {
-                itemChecked = childItem.checked;
-            } else if (itemChecked !== childItem.checked) {
-                itemChecked = undefined;
-                break;
+                itemChecked = false;
             }
-        }
 
-        if (itemChecked === null) {
-            itemChecked = false;
-        }
+            if (this.item.checked !== itemChecked) {
+                this.item.checked = itemChecked;
+            }
 
-        if (this.item.checked !== itemChecked) {
-            this.item.checked = itemChecked;
         }
 
         this.checkedChange.emit(checked);

src/lib/treeview.component.html

@@ -40,7 +40,8 @@
 </div>
 <div [ngSwitch]="hasFilterItems">
     <div *ngSwitchCase="true" class="treeview-container" [style.max-height.px]="maxHeight">
-        <ngx-treeview-item *ngFor="let item of filterItems" [item]="item" [template]="itemTemplate || defaultItemTemplate" (checkedChange)="onItemCheckedChange(item, $event)">
+        <ngx-treeview-item *ngFor="let item of filterItems" [config]="config" [item]="item" [template]="itemTemplate || defaultItemTemplate"
+            (checkedChange)="onItemCheckedChange(item, $event)">
         </ngx-treeview-item>
     </div>
     <div *ngSwitchCase="false" class="treeview-text">

src/lib/treeview.component.spec.ts

@@ -159,11 +159,11 @@ describe('TreeviewComponent', () => {
 
     describe('config', () => {
 
-        beforeEach(() => {
-            fakeData.items = [new TreeviewItem({ text: '1', value: 1 })];
-        });
-
         describe('hasAllCheckBox', () => {
+            beforeEach(() => {
+                fakeData.items = [new TreeviewItem({ text: '1', value: 1 })];
+            });
+
             it('should display checkbox "All" if value is true', () => {
                 fakeData.config = TreeviewConfig.create({
                     hasAllCheckBox: true
@@ -186,6 +186,10 @@ describe('TreeviewComponent', () => {
         });
 
         describe('hasFilter', () => {
+            beforeEach(() => {
+                fakeData.items = [new TreeviewItem({ text: '1', value: 1 })];
+            });
+
             it('should display checkbox Filter textbox if value is true', () => {
                 fakeData.config = TreeviewConfig.create({
                     hasFilter: true
@@ -208,6 +212,10 @@ describe('TreeviewComponent', () => {
         });
 
         describe('hasCollapseExpand', () => {
+            beforeEach(() => {
+                fakeData.items = [new TreeviewItem({ text: '1', value: 1 })];
+            });
+
             it('should display icon Collapse/Expand if value is true', () => {
                 fakeData.config = TreeviewConfig.create({
                     hasCollapseExpand: true
@@ -229,8 +237,47 @@ describe('TreeviewComponent', () => {
             });
         });
 
+        describe('decoupleChildFromParent with false value', () => {
+            let fixture: ComponentFixture<TestComponent>;
+            let parentCheckbox: DebugElement;
+            let childCheckbox: DebugElement;
+
+            beforeEach(fakeAsync(() => {
+                fakeData.items = [new TreeviewItem({ text: '1', value: 1, children: [{ text: '11', value: 11 }] })];
+                fakeData.config = TreeviewConfig.create({
+                    hasAllCheckBox: false,
+                    hasCollapseExpand: false,
+                    hasFilter: false,
+                    decoupleChildFromParent: true
+                });
+                fixture = createTestComponent('<ngx-treeview [config]="config" [items]="items"></ngx-treeview>');
+                fixture.detectChanges();
+                tick();
+                const checkboxes = queryItemCheckboxes(fixture.debugElement);
+                parentCheckbox = checkboxes[0];
+                childCheckbox = checkboxes[1];
+            }));
+
+            it('should have checked state is true for child item', () => {
+                expect(childCheckbox.nativeElement.checked).toBeTruthy();
+            });
+
+            describe('uncheck parent', () => {
+                beforeEach(fakeAsync(() => {
+                    parentCheckbox.nativeElement.click();
+                    fixture.detectChanges();
+                    tick();
+                }));
+
+                it('should not change checked state of child item', () => {
+                    expect(childCheckbox.nativeElement.checked).toBeTruthy();
+                });
+            });
+        });
+
         describe('maxHeight', () => {
             it('should display style correct max-height value', () => {
+                fakeData.items = [new TreeviewItem({ text: '1', value: 1 })];
                 fakeData.config = TreeviewConfig.create({
                     maxHeight: 400
                 });
@@ -242,6 +289,10 @@ describe('TreeviewComponent', () => {
         });
 
         describe('divider', () => {
+            beforeEach(() => {
+                fakeData.items = [new TreeviewItem({ text: '1', value: 1 })];
+            });
+
             it('should display divider with default config', () => {
                 fakeData.config = new TreeviewConfig();
                 const fixture = createTestComponent('<ngx-treeview [config]="config" [items]="items"></ngx-treeview>');
@@ -316,6 +367,7 @@ describe('TreeviewComponent', () => {
                 hasAllCheckBox: true,
                 hasCollapseExpand: true,
                 hasFilter: true,
+                decoupleChildFromParent: false,
                 maxHeight: 400
             });
             fakeData.items = [

yarn.lock

@@ -25,8 +25,8 @@
     rxjs "^5.4.2"
 
 "@angular/cli@^1.2.0":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.4.2.tgz#220a54c7e12303157cc289f4306fa46d080705ac"
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.4.3.tgz#8389d4eeadfe34abb1d16e53836416a8f8430fb3"
   dependencies:
     "@angular-devkit/build-optimizer" "~0.0.18"
     "@angular-devkit/schematics" "~0.0.21"
@@ -171,16 +171,16 @@
     "@types/jasmine" "*"
 
 "@types/lodash@^4.14.68":
-  version "4.14.74"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.74.tgz#ac3bd8db988e7f7038e5d22bd76a7ba13f876168"
+  version "4.14.76"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.76.tgz#87874f766774d54e89589697340be9496fb8bf70"
 
 "@types/node@^6.0.46":
   version "6.0.88"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.88.tgz#f618f11a944f6a18d92b5c472028728a3e3d4b66"
 
 "@types/node@^8.0.14":
-  version "8.0.28"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.28.tgz#86206716f8d9251cf41692e384264cbd7058ad60"
+  version "8.0.31"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.31.tgz#d9af61093cf4bfc9f066ca34de0175012cfb0ce9"
 
 "@types/q@^0.0.32":
   version "0.0.32"
@@ -6022,7 +6022,11 @@ type-is@~1.6.15:
     media-typer "0.3.0"
     mime-types "~2.1.15"
 
-"typescript@>=2.0.0 <2.6.0", typescript@^2.3.3, typescript@^2.4.1:
+[email protected]:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.2.tgz#f0f045e196f69a72f06b25fd3bd39d01c3ce9984"
+
+"typescript@>=2.0.0 <2.6.0", typescript@^2.3.3:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.2.tgz#038a95f7d9bbb420b1bf35ba31d4c5c1dd3ffe34"