Introduce config to decouple parent and child category nodes

Author: narsivc

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

@@ -12,16 +12,17 @@ import { BookService } from './book.service';
 export class BookComponent implements OnInit {
     items: TreeviewItem[];
     values: number[];
-    config = TreeviewConfig.create({
-        hasAllCheckBox: true,
-        hasFilter: true,
-        hasCollapseExpand: true,
-        maxHeight: 400
-    });
 
     constructor(
-        private service: BookService
-    ) { }
+        private service: BookService,
+        private config: TreeviewConfig
+    ) {
+        config.hasAllCheckBox = true;
+        config.hasFilter = true;
+        config.hasCollapseExpand = true;
+        config.maxHeight = 400;
+        config.decoupleChildFromParent = false;
+     }
 
     ngOnInit() {
         this.items = this.service.getBooks();

src/lib/treeview-config.spec.ts

@@ -7,5 +7,6 @@ describe('Treeview-Config', () => {
         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

@@ -6,6 +6,7 @@ export class TreeviewConfig {
     hasFilter = false;
     hasCollapseExpand = false;
     maxHeight = 500;
+    decoupleChildFromParent = false;
 
     get hasDivider(): boolean {
         return this.hasFilter || this.hasAllCheckBox || this.hasCollapseExpand;
@@ -15,7 +16,8 @@ export class TreeviewConfig {
         hasAllCheckBox?: boolean,
         hasFilter?: boolean,
         hasCollapseExpand?: boolean,
-        maxHeight?: number
+        maxHeight?: number,
+        decoupleChildFromParent?: boolean
     }): 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';
@@ -18,6 +19,11 @@ const fakeData: FakeData = {
     checkedChange(checked: boolean) { }
 };
 
+@Injectable()
+export class MockTreeviewConfig extends TreeviewConfig {
+    decoupleChildFromParent = true;
+}
+
 const testTemplate = fakeItemTemplate
     + '<ngx-treeview-item [item]="item" [template]="itemTemplate" (checkedChange)="checkedChange($event)"></ngx-treeview-item>';
 
@@ -43,10 +49,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({
@@ -12,36 +13,45 @@ export class TreeviewItemComponent {
     @Input() template: TemplateRef<TreeviewItemTemplateContext>;
     @Input() item: TreeviewItem;
     @Output() checkedChange = new EventEmitter<boolean>();
+    config: TreeviewConfig;
 
+    constructor(
+        defaultConfig: TreeviewConfig
+    ) {
+        this.config = 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);