[ADF-584] [ADF-3561] Validation error summary for error component (#3795)

* emit Forms error

* add demo

* add documentation
remove old form tag deprecated in 1.x
fix translation outcome

* remove prevent default validation

* fix lint

demo-shell/src/app/components/form/form.component.css

@@ -1,3 +0,0 @@
-.form-container {
-    padding: 10px;
-}

demo-shell/src/app/components/form/form.component.html

@@ -1,6 +1,19 @@
-<div class="form-container">
-    <adf-form
-        [showRefreshButton]="false"
-        [form]="form">
-    </adf-form>
+<div class="main-content">
+    <h1>Form Component</h1>
+
+    <div class="form-container">
+        <adf-form
+            [showRefreshButton]="false"
+            [form]="form"
+            (formError)="logErrors($event)">
+        </adf-form>
+    </div>
+
+    <div class="console" #console>
+        <h3>Error log:</h3>
+        <p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message | translate}}</p>
+    </div>
+
 </div>
+
+

demo-shell/src/app/components/form/form.component.scss

@@ -0,0 +1,32 @@
+.form-container {
+    padding: 10px;
+}
+
+.main-content {
+    padding: 0 15px;
+}
+
+.card-view {
+    width: 30%;
+    display: inline-block;
+}
+
+.console {
+    width: 60%;
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 10px;
+    height: 500px;
+    overflow: scroll;
+    padding-bottom: 30px;
+
+h3 {
+    margin-top: 0;
+}
+
+p {
+    display: block;
+    font-family: monospace, monospace;
+    margin: 0;
+}
+}

demo-shell/src/app/components/form/form.component.ts

@@ -15,45 +15,38 @@
  * limitations under the License.
  */
 
-/*!
-* @license
-* Copyright 2016 Alfresco Software, Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-
-import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormModel, FormService, FormOutcomeEvent } from '@alfresco/adf-core';
+import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormModel, FormFieldModel, FormService, FormOutcomeEvent } from '@alfresco/adf-core';
 import { InMemoryFormService } from '../../services/in-memory-form.service';
 import { DemoForm } from './demo-form';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'app-form',
     templateUrl: 'form.component.html',
-    styleUrls: ['form.component.css'],
+    styleUrls: ['form.component.scss'],
     providers: [
         { provide: FormService, useClass: InMemoryFormService }
     ],
     encapsulation: ViewEncapsulation.None
 })
-export class FormComponent implements OnInit {
+export class FormComponent implements OnInit, OnDestroy {
 
     form: FormModel;
+    errorFields: FormFieldModel[] = [];
+    private subscriptions: Subscription[] = [];
 
     constructor(@Inject(FormService) private formService: InMemoryFormService) {
-        formService.executeOutcome.subscribe((formOutcomeEvent: FormOutcomeEvent) => {
-            formOutcomeEvent.preventDefault();
-        });
+
+        this.subscriptions.push(
+            formService.executeOutcome.subscribe((formOutcomeEvent: FormOutcomeEvent) => {
+                formOutcomeEvent.preventDefault();
+            })
+        );
+    }
+
+    logErrors(errorFields: FormFieldModel[]) {
+        this.errorFields = errorFields;
     }
 
     ngOnInit() {
@@ -61,4 +54,9 @@ export class FormComponent implements OnInit {
         this.form = this.formService.parseForm(formDefinitionJSON);
     }
 
+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        this.subscriptions = [];
+    }
+
 }

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -29,7 +29,11 @@ import {
     Output
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ProcessInstanceFilterRepresentation, Pagination, UserProcessInstanceFilterRepresentation } from 'alfresco-js-api';
+import {
+    ProcessInstanceFilterRepresentation,
+    Pagination,
+    UserProcessInstanceFilterRepresentation
+} from 'alfresco-js-api';
 import {
     FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
     DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent, UserPreferenceValues
@@ -53,7 +57,7 @@ import {
     TaskListComponent
 } from '@alfresco/adf-process-services';
 import { LogService } from '@alfresco/adf-core';
-import { AlfrescoApiService, UserPreferencesService } from '@alfresco/adf-core';
+import { AlfrescoApiService, UserPreferencesService, ValidateFormEvent } from '@alfresco/adf-core';
 import { Subscription } from 'rxjs';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 import { DemoFieldValidator } from './demo-field-validator';
@@ -198,6 +202,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
             formService.formContentClicked.subscribe(content => {
                 this.showContentPreview(content);
+            }),
+
+            formService.validateForm.subscribe((validateFormEvent: ValidateFormEvent) => {
+                this.logService.log('Error form:' + validateFormEvent.errorsField);
             })
         );
 
@@ -257,7 +265,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
             this.showTaskTab = event.index === this.tabs.tasks;
             this.relocateLocationToTask();
         } else if (index === PROCESS_ROUTE) {
-            this.showProcessTab =  event.index === this.tabs.processes;
+            this.showProcessTab = event.index === this.tabs.processes;
             this.relocateLocationToProcess();
         } else if (index === REPORT_ROUTE) {
             this.relocateLocationToReport();