Merge pull request #257 from harunurhan/menu-max-depth

add menuMaxDepth config

Author: harunurhan

example/app/app.config.ts

@@ -59,6 +59,7 @@ export class AppConfig {
       }
     },
     enableAdminModeSwitch: true,
+    menuMaxDepth: 1,
     tabsConfig: {
       defaultTabName: 'Main',
       tabs: [

src/json-editor.component.ts

@@ -142,6 +142,9 @@ export class JsonEditorComponent extends AbstractTrackerComponent implements OnI
         this.activeTabName = tabName;
       });
       this.appGlobalsService.activeTabName = this.config.tabsConfig.defaultTabName;
+
+      // set config to make it globally accessible all over the app
+      this.appGlobalsService.config = this.config;
     }
 
   }

src/shared/interfaces/json-editor-config.ts

@@ -11,6 +11,14 @@ export interface JsonEditorConfig {
    */
   enableAdminModeSwitch?: boolean;
 
+  /**
+   * Max depth for tree menu
+   *
+   * - It is `infinity` by default
+   * - Must be set to 1 or greater.
+   */
+  menuMaxDepth?: number;
+
   /**
    * Configurations for properties defined in the schema.
    *

src/shared/services/app-globals.service.ts

@@ -22,7 +22,7 @@
 
 import { Injectable, TemplateRef } from '@angular/core';
 import { ReplaySubject } from 'rxjs/ReplaySubject';
-import { SchemaValidationErrors } from '../interfaces';
+import { SchemaValidationErrors, JsonEditorConfig } from '../interfaces';
 
 @Injectable()
 export class AppGlobalsService {
@@ -31,6 +31,7 @@ export class AppGlobalsService {
   public activeTabName = '';
   public tabNameToFirstTopLevelElement: { [tabName: string]: string } = {};
   public templates: { [templateName: string]: TemplateRef<any> };
+  public config: JsonEditorConfig;
 
   set globalErrors(errors: SchemaValidationErrors) {
     this._globalErrorsSubject.next(errors);

src/tree-menu/tree-menu-item.component.html

@@ -1,16 +1,16 @@
 <div>
   <a [href]="href" (click)="toggle($event)">{{label}}</a>
   <a *ngIf="isCollapsable" [hidden]="isCollapsed" (click)="collapse()"> [x]</a>
-  <div [ngSwitch]="schema.type" [hidden]="isCollapsed">
+  <div *ngIf="isNotLeaf" [ngSwitch]="schema.type" [hidden]="isCollapsed">
     <ul>
       <div *ngSwitchCase="'object'">
         <li *ngFor="let key of keys | addAlwaysShowFields:schema | filterAndSortBySchema:schema; trackBy:trackByElement">
-          <tree-menu-item [label]="key" [value]="value.get(key)" [schema]="schema.properties[key]" [path]="getChildPath(key)"></tree-menu-item>
+          <tree-menu-item [label]="key" [value]="value.get(key)" [schema]="schema.properties[key]" [path]="getChildPath(key)" [depth]="depth + 1"></tree-menu-item>
         </li>
       </div>
       <div *ngSwitchCase="'array'">
         <li *ngFor="let element of value; let i = index; trackBy:trackByElement">
-          <tree-menu-item [label]="i" [value]="element" [schema]="schema.items" [path]="getChildPath(i)"></tree-menu-item>
+          <tree-menu-item [label]="i" [value]="element" [schema]="schema.items" [path]="getChildPath(i)" [depth]="depth + 1"></tree-menu-item>
         </li>
       </div>
     </ul>

src/tree-menu/tree-menu-item.component.ts

@@ -26,7 +26,7 @@ import { AbstractTrackerComponent } from '../abstract-tracker';
 
 import { Map, Set } from 'immutable';
 
-import { DomUtilService, WindowHrefService, PathUtilService } from '../shared/services';
+import { DomUtilService, WindowHrefService, PathUtilService, AppGlobalsService } from '../shared/services';
 import { JSONSchema } from '../shared/interfaces';
 
 @Component({
@@ -43,6 +43,7 @@ export class TreeMenuItemComponent extends AbstractTrackerComponent implements O
   @Input() value: any;
   @Input() schema: JSONSchema;
   @Input() path: string;
+  @Input() depth: number;
 
   // defined only if schmea.type equals to 'object'
   keys: Set<string>;
@@ -52,7 +53,8 @@ export class TreeMenuItemComponent extends AbstractTrackerComponent implements O
 
   constructor(private windowHrefService: WindowHrefService,
     private domUtilService: DomUtilService,
-    private pathUtilService: PathUtilService) {
+    private pathUtilService: PathUtilService,
+    private appGlobalsService: AppGlobalsService) {
     super();
   }
 
@@ -83,7 +85,15 @@ export class TreeMenuItemComponent extends AbstractTrackerComponent implements O
 
   get isCollapsable(): boolean {
     let schemaType = this.schema.type;
-    return (schemaType === 'object' || schemaType === 'array');
+    return this.isNotLeaf && (schemaType === 'object' || schemaType === 'array');
+  }
+
+  get maxDepth(): number {
+    return this.appGlobalsService.config.menuMaxDepth;
+  }
+
+  get isNotLeaf(): boolean {
+    return this.maxDepth === undefined || this.depth < this.maxDepth;
   }
 
   getChildPath(indexOrKey: number | string) {

src/tree-menu/tree-menu.component.html

@@ -1,7 +1,7 @@
 <div class="tree-menu-container">
   <ul class="menu-item-container">
     <li *ngFor="let key of keys | addAlwaysShowFields:schema | filterAndSortBySchema:schema; trackBy:trackByElement">
-      <tree-menu-item [label]="key" [value]="record.get(key)" [schema]="schema.properties[key]" [path]="getChildPath(key)"></tree-menu-item>
+      <tree-menu-item [label]="key" [value]="record.get(key)" [schema]="schema.properties[key]" [path]="getChildPath(key)" [depth]="1"></tree-menu-item>
     </li>
   </ul>
 </div>

src/tree-menu/tree-menu.component.spec.ts

@@ -0,0 +1,142 @@
+/*
+ * This file is part of ng2-json-editor.
+ * Copyright (C) 2016 CERN.
+ *
+ * ng2-json-editor is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License as
+ * published by the Free Software Foundation; either version 2 of the
+ * License, or (at your option) any later version.
+ *
+ * ng2-json-editor is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with ng2-json-editor; if not, write to the Free Software Foundation, Inc.,
+ * 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
+ * In applying this license, CERN does not
+ * waive the privileges and immunities granted to it by virtue of its status
+ * as an Intergovernmental Organization or submit itself to any jurisdiction.
+*/
+
+import {
+  async,
+  ComponentFixture,
+  TestBed
+} from '@angular/core/testing';
+
+import { Component } from '@angular/core';
+
+import { fromJS, Map } from 'immutable';
+
+import { TreeMenuItemComponent } from './tree-menu-item.component';
+import { TreeMenuComponent } from './tree-menu.component';
+
+import {
+  DomUtilService,
+  PathUtilService,
+  WindowHrefService,
+  AppGlobalsService,
+  TabsUtilService
+} from '../shared/services';
+
+import {
+  AddAlwaysShowFieldsPipe,
+  FilterAndSortBySchemaPipe
+} from '../shared/pipes';
+
+
+/**
+ * Wrap tree-menu in a host component to be able trigger `ngOnChanges`
+ */
+@Component({
+  template: '<tree-menu [record]="record" [schema]="schema"></tree-menu>'
+})
+class TestHostComponent {
+  schema = {
+    type: 'object',
+    properties: {
+      anArray: {
+        type: 'array',
+        items: {
+          type: 'object',
+          properties: {
+            aString: {
+              type: 'string'
+            }
+          }
+        }
+      }
+    }
+  };
+
+  record: Map<string, any> = fromJS({
+    anArray: [
+      {
+        aString: 'foo'
+      },
+      {
+        aString: 'bar'
+      }
+    ]
+  });
+  firstLevelKeysCount = 1;
+  allKeysCount = 5;
+}
+
+describe('TreeMenuComponent', () => {
+
+  let fixture: ComponentFixture<TestHostComponent>;
+  let component: TestHostComponent;
+  let nativeEl: HTMLElement;
+  let appGlobalsService = new AppGlobalsService();
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        TestHostComponent,
+        TreeMenuComponent,
+        TreeMenuItemComponent,
+        AddAlwaysShowFieldsPipe,
+        FilterAndSortBySchemaPipe
+      ],
+      imports: [
+
+      ],
+      providers: [
+        PathUtilService,
+        WindowHrefService,
+        DomUtilService,
+        TabsUtilService,
+        { provide: AppGlobalsService, useValue: appGlobalsService }
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestHostComponent);
+    component = fixture.componentInstance;
+    appGlobalsService.config = {};
+    fixture.detectChanges();
+    nativeEl = fixture.nativeElement;
+  });
+
+  it('should be nested if menuMaxDepth is not set', () => {
+    let menuItemsCount = nativeEl.querySelectorAll('tree-menu-item').length;
+
+    expect(menuItemsCount).toEqual(component.allKeysCount);
+  });
+
+  it('should not go deeper than menuMaxDepth', () => {
+    appGlobalsService.config = { menuMaxDepth: 1 };
+    // Create the component again to render with new menuMaxDepth
+    fixture = TestBed.createComponent(TestHostComponent);
+    component = fixture.componentInstance;
+    nativeEl = fixture.nativeElement;
+    fixture.detectChanges();
+
+    let menuItemsCount = nativeEl.querySelectorAll('tree-menu-item').length;
+    expect(menuItemsCount).toEqual(component.firstLevelKeysCount);
+  });
+});