example/assets/mock-data/error-map.json

@@ -1,25 +1,29 @@
 {
   "/abstracts/0/source": [
     {
-      "message": "Mock-Error 1: abstracts.0.source"
+      "message": "Mock-Error 1: /abstracts/0/source",
+      "type": "Error"
     },
     {
-      "message": "Mock-Error 2: abstracts.0.source"
+      "message": "Mock-Warning 1: /abstracts/0/source",
+      "type": "Warning"
     }
   ],
   "/abstracts/0/value": [
     {
-      "message": "Mock-Error 1: abstracts.0.value"
+      "message": "Mock-Error 1: /abstracts/0/value"
     }
   ],
   "/field_categories/0/scheme": [
     {
-      "message": "Mock-Error 1: field_categories.0.term"
+      "message": "Mock-Error 1: /field_categories/0/term",
+      "type": "Error"
     }
   ],
   "/control_number": [
     {
-      "message": "Mock-Error 1: control_number"
+      "message": "Mock-Error 1: /control_number",
+      "type": "Error"
     }
   ]
 }

src/abstract-field/abstract-field.component.ts

@@ -19,13 +19,13 @@
  * waive the privileges and immunities granted to it by virtue of its status
  * as an Intergovernmental Organization or submit itself to any jurisdiction.
 */
-import { OnInit, OnDestroy } from '@angular/core';
-
-import { Subscription } from 'rxjs/Subscription';
+import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 
 import { AbstractTrackerComponent } from '../abstract-tracker';
 
 import { AppGlobalsService, PathUtilService } from '../shared/services';
+import { ValidationError} from '../shared/interfaces';
+import { Subscription } from 'rxjs/Subscription';
 
 /**
  * This is the base class for fields
@@ -40,39 +40,37 @@ export abstract class AbstractFieldComponent
   implements OnInit, OnDestroy {
 
   path: Array<any>;
-  errors: Array<Object> = [];
-  errorsSubscription: Subscription;
+  externalErrors: Array<ValidationError> = [];
+  internalErrors: Array<ValidationError> = [];
+  externalCategorizedErrorSubscription: Subscription;
 
   constructor(public appGlobalsService: AppGlobalsService,
-    public pathUtilService: PathUtilService) {
+    public pathUtilService: PathUtilService,
+    public changeDetectorRef: ChangeDetectorRef) {
     super();
   }
 
   ngOnInit() {
-    this.errorsSubscription = this.appGlobalsService
-      .globalErrorsSubject
-      .subscribe((globalErrors) => {
-        this.errors = globalErrors[this.pathString] || [];
+    this.externalCategorizedErrorSubscription = this.appGlobalsService.externalCategorizedErrorsSubject
+      .subscribe(externalCategorizedErrorMap => {
+        this.externalErrors = externalCategorizedErrorMap.Errors[this.pathString] || [];
+        this.changeDetectorRef.markForCheck();
       });
   }
 
   ngOnDestroy() {
-    if (this.errorsSubscription) {
-      this.errorsSubscription.unsubscribe();
-    }
-  }
-
-  get errorNgClass(): Object {
-    return {
-      error: this.errors.length > 0
-    };
+    this.externalCategorizedErrorSubscription.unsubscribe();
   }
 
   get isErrorTooltipEnabled(): boolean {
-    return this.errors && this.errors.length > 0;
+    return this.hasErrors;
   }
 
   get pathString(): string {
     return this.pathUtilService.toPathString(this.path);
   }
+
+  get hasErrors() {
+    return this.externalErrors.length > 0 || this.internalErrors.length > 0;
+  }
 }

src/abstract-list-field/abstract-list-field.component.ts

@@ -19,7 +19,7 @@
  * waive the privileges and immunities granted to it by virtue of its status
  * as an Intergovernmental Organization or submit itself to any jurisdiction.
 */
-
+import { ChangeDetectorRef } from '@angular/core';
 import { List } from 'immutable';
 
 import { AbstractFieldComponent } from '../abstract-field';
@@ -42,8 +42,9 @@ export abstract class AbstractListFieldComponent extends AbstractFieldComponent
 
   constructor(public appGlobalsService: AppGlobalsService,
     public jsonStoreService: JsonStoreService,
-    public pathUtilService: PathUtilService) {
-    super(appGlobalsService, pathUtilService);
+    public pathUtilService: PathUtilService,
+    public changeDetectorRef: ChangeDetectorRef) {
+    super(appGlobalsService, pathUtilService, changeDetectorRef);
   }
   /**
    * @param {number} index - Index of the element that is moved

src/any-type-field/any-type-field.component.ts

@@ -26,9 +26,10 @@ import {
   ChangeDetectionStrategy,
 } from '@angular/core';
 
-import { AppGlobalsService, ComponentTypeService } from '../shared/services';
+import { AppGlobalsService, ComponentTypeService, PathUtilService } from '../shared/services';
 import { JSONSchema } from '../shared/interfaces';
 
+
 /**
  * AnyFieldComponent
  *
@@ -54,7 +55,8 @@ export class AnyTypeFieldComponent {
   @Input() value: any;
 
   constructor(public componentTypeService: ComponentTypeService,
-    public  appGlobalsService: AppGlobalsService) { }
+    public  appGlobalsService: AppGlobalsService,
+    public pathUtilService: PathUtilService) { }
 
   get componentType(): string {
     return this.componentTypeService.getComponentType(this.schema);

src/autocomplete-input/autocomplete-input.component.spec.ts

@@ -33,7 +33,7 @@ import { Ng2BootstrapModule } from 'ng2-bootstrap';
 
 import { AutocompleteInputComponent } from '../autocomplete-input';
 
-import { RemoteAutocompletionService, JsonStoreService, PathUtilService, AppGlobalsService } from '../shared/services';
+import { RemoteAutocompletionService, JsonStoreService, PathUtilService, AppGlobalsService, ErrorMapUtilService } from '../shared/services';
 
 import { AutocompletionResult, AutocompletionConfig } from '../shared/interfaces';
 
@@ -73,6 +73,7 @@ describe('AutocompleteInputComponent', () => {
         { provide: AppGlobalsService, useClass: MockAppGlobalsService },
         JsonStoreService,
         PathUtilService,
+        ErrorMapUtilService
       ]
     }).compileComponents();
   }));

src/complex-list-field/complex-list-field.component.ts

@@ -26,7 +26,8 @@ import {
   OnChanges,
   OnInit,
   ChangeDetectionStrategy,
-  SimpleChanges
+  SimpleChanges,
+  ChangeDetectorRef
 } from '@angular/core';
 
 import { List, Map, Set } from 'immutable';
@@ -63,8 +64,9 @@ export class ComplexListFieldComponent extends AbstractListFieldComponent implem
   constructor(public appGlobalsService: AppGlobalsService,
     public jsonStoreService: JsonStoreService,
     public domUtilService: DomUtilService,
-    public pathUtilService: PathUtilService) {
-    super(appGlobalsService, jsonStoreService, pathUtilService);
+    public pathUtilService: PathUtilService,
+    public changeDetectorRef: ChangeDetectorRef) {
+    super(appGlobalsService, jsonStoreService, pathUtilService, changeDetectorRef);
   }
 
   ngOnInit() {

src/error-panel/error-panel-item/error-panel-item.component.html

@@ -0,0 +1,18 @@
+<ul class="list-group" *ngFor="let key of keys(errorMap)">
+  <div [ngSwitch]="isJsonPointerPath(key)" *ngFor="let error of errorMap[key]">
+    <div *ngSwitchCase="true" class="list-group">
+      <a (click)="focusPath($event, key)" class="list-group-item">
+        <i *ngIf="heading === 'Errors'" class="fa fa-times" aria-hidden="true"></i>
+        <i *ngIf="heading === 'Warnings'" class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+        {{error.message}}
+      </a>
+    </div>
+    <div *ngSwitchDefault>
+      <li class="list-group-item">
+        <i *ngIf="heading === 'Errors'" class="fa fa-times" aria-hidden="true"></i>
+        <i *ngIf="heading === 'Warnings'" class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+        {{error.message}}
+      </li>
+    </div>
+  </div>
+</ul>

src/error-panel/error-panel-item/error-panel-item.component.scss

@@ -0,0 +1,21 @@
+i {
+  &.fa-exclamation-triangle {
+    color: #FFDD00;
+  }
+
+  &.fa-times {
+    color: #D14024;
+  }
+}
+
+a {
+  &:hover {
+    background-color: #faebcc;
+    text-decoration: underline;
+  }
+
+  &.list-group-item {
+    cursor: pointer;
+    color: #0074D9;
+  }
+}

src/error-panel/error-panel-item/error-panel-item.component.ts

@@ -0,0 +1,60 @@
+/*
+ * This file is part of ng2-json-editor.
+ * Copyright (C) 2017 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 {
+  Component, Input, ChangeDetectionStrategy
+} from '@angular/core';
+
+import { DomUtilService, PathUtilService } from '../../shared/services';
+import { SchemaValidationErrors } from '../../shared/interfaces';
+
+@Component({
+  selector: 'error-panel-item',
+  styleUrls: [
+    './error-panel-item.component.scss'
+  ],
+  templateUrl: './error-panel-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ErrorPanelItemComponent {
+
+  @Input() errorMap: SchemaValidationErrors;
+  @Input() heading;
+
+
+  constructor(public domUtilService: DomUtilService,
+              public pathUtilService: PathUtilService) { }
+
+  isJsonPointerPath(key: string) {
+    return key.startsWith(this.pathUtilService.separator);
+  }
+
+  keys(errorMap: SchemaValidationErrors) {
+    return Object.keys(errorMap);
+  }
+
+  focusPath(event: Event, path: string) {
+    event.preventDefault();
+    this.domUtilService.focusAndSelectFirstEditableChildById(path, true);
+  }
+}
+

src/error-panel/error-panel-item/index.ts

@@ -0,0 +1 @@
+export { ErrorPanelItemComponent } from './error-panel-item.component';

src/error-panel/error-panel.component.html

@@ -0,0 +1,34 @@
+<div *ngIf="isOpen" [ngClass]="{'error-panel-container': isOpen}">
+  <tabset>
+    <tab *ngFor="let tab of tabs" [active]="isTabActive(tab.title)" [disabled]="!isTabEnabled(tab.title)">
+      <ng-template tabHeading>
+        <div *ngIf="tab.title === 'Errors' then errorBlock else warningBlock"></div>
+        <ng-template #errorBlock>
+          <span [ngClass]="tab.customClass">
+            <i class="fa fa-times" aria-hidden="true"></i>
+          </span>
+          <span [ngClass]="'error-link'">{{tab.title}}
+            <span class="badge">{{internalErrorCount + externalErrorCount}}</span>
+          </span>
+        </ng-template>
+        <ng-template #warningBlock>
+          <span [ngClass]="tab.customClass">
+             <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+          </span>
+          <span [ngClass]="'warning-link'">{{tab.title}}
+            <span class="badge">{{internalWarningCount + externalWarningCount}}</span>
+          </span>
+        </ng-template>
+      </ng-template>
+      <div [ngClass]="'error-panel-item-container'">
+        <error-panel-item [heading]="tab.title" [errorMap]="externalErrorMap[tab.title]"></error-panel-item>
+        <error-panel-item [heading]="tab.title" [errorMap]="internalErrorMap[tab.title]"></error-panel-item>
+      </div>
+    </tab>
+    <tab (select)="closePanel()" [customClass]="'tab-align-right'">
+      <ng-template tabHeading>
+        <i class="fa fa-window-close" aria-hidden="true"></i>
+      </ng-template>
+    </tab>
+  </tabset>
+</div>

src/error-panel/error-panel.component.scss

@@ -0,0 +1,10 @@
+$error-color: #D14024;
+$warning-color: #FFDD00;
+
+.error-tab-class {
+  color: $error-color;
+}
+
+.warning-tab-class {
+  color: $warning-color;
+}