[ADF-1090] support custom dynamic table row validation (#2308)

* support custom dynamic table row validation

* test fixes

* export missing models

demo-shell-ng2/app/app.component.scss

@@ -1,8 +1,3 @@
-.material-icons {
-    position: relative;
-    top: 6px;
-}
-
 .user-profile {
     margin-right: 10px;
 }

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -20,7 +20,10 @@ import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChi
 import { ActivatedRoute, Router } from '@angular/router';
 import { Pagination } from 'alfresco-js-api';
 import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
-import { FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService } from 'ng2-activiti-form';
+import {
+    DynamicTableRow, FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService,
+    FormService, ValidateDynamicTableRowEvent
+} from 'ng2-activiti-form';
 import {
     FilterProcessRepresentationModel,
     ProcessFiltersComponent,
@@ -54,7 +57,7 @@ const currentProcessIdNew = '__NEW__';
 const currentTaskIdNew = '__NEW__';
 
 @Component({
-    selector: 'activiti-demo',
+    selector: 'adf-activiti-demo',
     templateUrl: './activiti-demo.component.html',
     styleUrls: ['./activiti-demo.component.scss'],
     encapsulation: ViewEncapsulation.None
@@ -160,6 +163,17 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
             console.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
         });
 
+        formService.validateDynamicTableRow.subscribe(
+            (e: ValidateDynamicTableRowEvent) => {
+                const row: DynamicTableRow = e.row;
+                if (row && row.value && row.value.name === 'admin') {
+                    e.summary.isValid = false;
+                    e.summary.text = 'Sorry, wrong value. You cannot use "admin".';
+                    e.preventDefault();
+                }
+            }
+        );
+
         // Uncomment this block to see form event handling in action
         /*
         formService.formEvents.subscribe((event: Event) => {

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html

@@ -28,28 +28,28 @@
             <button md-button
                     [disabled]="!hasSelection()"
                     (click)="moveSelectionUp()">
-                <i class="material-icons">arrow_upward</i>
+                <md-icon>arrow_upward</md-icon>
             </button>
             <button md-button
                     [disabled]="!hasSelection()"
                     (click)="moveSelectionDown()">
-                <i class="material-icons">arrow_downward</i>
+                <md-icon>arrow_downward</md-icon>
             </button>
             <button md-button
                     [disabled]="field.readOnly"
                     id="{{content.id}}-add-row"
                     (click)="addNewRow()">
-                <i class="material-icons">add_circle_outline</i>
+                <md-icon>add_circle_outline</md-icon>
             </button>
             <button md-button
                     [disabled]="!hasSelection()"
                     (click)="deleteSelection()">
-                <i class="material-icons">remove_circle_outline</i>
+                <md-icon>remove_circle_outline</md-icon>
             </button>
             <button md-button
                     [disabled]="!hasSelection()"
                     (click)="editSelection()">
-                <i class="material-icons">edit</i>
+                <md-icon>edit</md-icon>
             </button>
         </div>
      </div>

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.model.ts

@@ -18,6 +18,8 @@
  /* tslint:disable:component-selector  */
 
 import * as moment from 'moment';
+import { ValidateDynamicTableRowEvent } from '../../../events/validate-dynamic-table-row.event';
+import { FormService } from './../../../services/form.service';
 import { FormFieldModel } from './../core/form-field.model';
 import { FormWidgetModel } from './../core/form-widget.model';
 
@@ -51,7 +53,7 @@ export class DynamicTableModel extends FormWidgetModel {
         }
     }
 
-    constructor(field: FormFieldModel) {
+    constructor(field: FormFieldModel, private formService: FormService) {
         super(field.form, field.json);
         this.field = field;
 
@@ -136,11 +138,18 @@ export class DynamicTableModel extends FormWidgetModel {
     }
 
     validateRow(row: DynamicTableRow): DynamicRowValidationSummary {
-        let summary = <DynamicRowValidationSummary> {
+        const summary = <DynamicRowValidationSummary> {
             isValid: true,
             text: null
         };
 
+        const event = new ValidateDynamicTableRowEvent(this.form, this.field, row, summary);
+        this.formService.validateDynamicTableRow.next(event);
+
+        if (event.defaultPrevented || !summary.isValid) {
+            return summary;
+        }
+
         if (row) {
             for (let col of this.columns) {
                 for (let validator of this._validators) {

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts

@@ -81,6 +81,7 @@ describe('DynamicTableWidgetComponent', () => {
     let element: HTMLElement;
     let table: DynamicTableModel;
     let logService: LogService;
+    let formService: FormService;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -104,7 +105,8 @@ describe('DynamicTableWidgetComponent', () => {
     beforeEach(() => {
         const field = new FormFieldModel(new FormModel());
         logService = TestBed.get(LogService);
-        table = new DynamicTableModel(field);
+        formService = TestBed.get(FormService);
+        table = new DynamicTableModel(field, formService);
         let changeDetectorSpy = jasmine.createSpyObj('cd', ['detectChanges']);
         let nativeElementSpy = jasmine.createSpyObj('nativeElement', ['querySelector']);
         changeDetectorSpy.nativeElement = nativeElementSpy;
@@ -310,7 +312,7 @@ describe('DynamicTableWidgetComponent', () => {
             required: true,
             value: null
         });
-        widget.content = new DynamicTableModel(field);
+        widget.content = new DynamicTableModel(field, formService);
 
         expect(widget.content.field.validate()).toBeFalsy();
         expect(widget.isValid()).toBe(widget.content.field.isValid);

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts

@@ -52,7 +52,7 @@ export class DynamicTableWidgetComponent extends WidgetComponent implements OnIn
 
     ngOnInit() {
         if (this.field) {
-            this.content = new DynamicTableModel(this.field);
+            this.content = new DynamicTableModel(this.field, this.formService);
             this.visibilityService.refreshVisibility(this.field.form);
         }
     }

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts

@@ -37,7 +37,7 @@ describe('DateEditorComponent', () => {
         row = <DynamicTableRow> { value: { date: '1879-03-14T00:00:00.000Z' } };
         column = <DynamicTableColumn> { id: 'date', type: 'Date' };
         const field = new FormFieldModel(new FormModel());
-        table = new DynamicTableModel(field);
+        table = new DynamicTableModel(field, null);
         table.rows.push(row);
         table.columns.push(column);
         component = new DateEditorComponent(new MomentDateAdapter());

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts

@@ -53,7 +53,7 @@ describe('DropdownEditorComponent', () => {
         };
 
         form = new FormModel({taskId: '<task-id>'});
-        table = new DynamicTableModel(new FormFieldModel(form, {id: '<field-id>'}));
+        table = new DynamicTableModel(new FormFieldModel(form, {id: '<field-id>'}), formService);
         table.rows.push(row);
         table.columns.push(column);
 
@@ -151,7 +151,7 @@ describe('DropdownEditorComponent', () => {
     it('should handle REST error getting option with processDefinitionId', () => {
         column.optionType = 'rest';
         let procForm = new FormModel({processDefinitionId: '<process-definition-id>'});
-        let procTable = new DynamicTableModel(new FormFieldModel(procForm, {id: '<field-id>'}));
+        let procTable = new DynamicTableModel(new FormFieldModel(procForm, {id: '<field-id>'}), formService);
         component.table = procTable;
         const error = 'error';
 
@@ -223,7 +223,7 @@ describe('DropdownEditorComponent', () => {
                     ]
                 };
                 form = new FormModel({taskId: '<task-id>'});
-                dynamicTable = new DynamicTableModel(new FormFieldModel(form, {id: '<field-id>'}));
+                dynamicTable = new DynamicTableModel(new FormFieldModel(form, {id: '<field-id>'}), formService);
                 dynamicTable.rows.push(row);
                 dynamicTable.columns.push(column);
                 dropDownEditorComponent.table = dynamicTable;
@@ -271,7 +271,7 @@ describe('DropdownEditorComponent', () => {
                     ]
                 };
                 form = new FormModel({processDefinitionId: '<proc-id>'});
-                dynamicTable = new DynamicTableModel(new FormFieldModel(form, {id: '<field-id>'}));
+                dynamicTable = new DynamicTableModel(new FormFieldModel(form, {id: '<field-id>'}), formService);
                 dynamicTable.rows.push(row);
                 dynamicTable.columns.push(column);
                 dropDownEditorComponent.table = dynamicTable;

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/row.editor.spec.ts

@@ -16,6 +16,7 @@
  */
 
 import { FormFieldModel, FormModel } from '../../index';
+import { FormService } from './../../../../services/form.service';
 import { DynamicRowValidationSummary, DynamicTableColumn, DynamicTableModel, DynamicTableRow } from './../dynamic-table.widget.model';
 import { RowEditorComponent } from './row.editor';
 
@@ -26,7 +27,7 @@ describe('RowEditorComponent', () => {
     beforeEach(() => {
         component = new RowEditorComponent();
         const field = new FormFieldModel(new FormModel());
-        component.table = new DynamicTableModel(field);
+        component.table = new DynamicTableModel(field, new FormService(null, null, null));
         component.row =  <DynamicTableRow> {};
         component.column = <DynamicTableColumn> {};
     });

ng2-components/ng2-activiti-form/src/components/widgets/index.ts

@@ -74,6 +74,7 @@ export * from './error/error.component';
 export { DocumentWidgetComponent } from './document/document.widget';
 
 // editors (dynamic table)
+export * from './dynamic-table/dynamic-table.widget.model';
 export * from './dynamic-table/editors/row.editor';
 export * from './dynamic-table/editors/date/date.editor';
 export * from './dynamic-table/editors/dropdown/dropdown.editor';

ng2-components/ng2-activiti-form/src/events/index.ts

@@ -20,3 +20,4 @@ export { FormErrorEvent } from './form-error.event';
 export { FormFieldEvent } from './form-field.event';
 export { ValidateFormFieldEvent } from './validate-form-field.event';
 export { ValidateFormEvent } from './validate-form.event';
+export { ValidateDynamicTableRowEvent } from './validate-dynamic-table-row.event';

ng2-components/ng2-activiti-form/src/events/validate-dynamic-table-row.event.ts

@@ -0,0 +1,33 @@
+/*!
+ * @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 { DynamicRowValidationSummary, DynamicTableRow } from '../components/widgets/dynamic-table/dynamic-table.widget.model';
+import { FormFieldModel, FormModel } from './../components/widgets/core/index';
+import { FormFieldEvent } from './form-field.event';
+
+export class ValidateDynamicTableRowEvent extends FormFieldEvent {
+
+    isValid = true;
+
+    constructor(form: FormModel,
+                field: FormFieldModel,
+                public row: DynamicTableRow,
+                public summary: DynamicRowValidationSummary) {
+        super(form, field);
+    }
+
+}

ng2-components/ng2-activiti-form/src/services/form.service.ts

@@ -23,7 +23,10 @@ import { ContentLinkModel } from './../components/widgets/core/content-link.mode
 import { GroupUserModel } from './../components/widgets/core/group-user.model';
 import { GroupModel } from './../components/widgets/core/group.model';
 import { FormModel, FormOutcomeEvent, FormOutcomeModel, FormValues } from './../components/widgets/core/index';
-import { FormErrorEvent, FormEvent, FormFieldEvent, ValidateFormEvent, ValidateFormFieldEvent } from './../events/index';
+import {
+    FormErrorEvent, FormEvent, FormFieldEvent,
+    ValidateDynamicTableRowEvent, ValidateFormEvent, ValidateFormFieldEvent
+} from './../events/index';
 import { EcmModelService } from './ecm-model.service';
 
 @Injectable()
@@ -44,6 +47,7 @@ export class FormService {
 
     validateForm = new Subject<ValidateFormEvent>();
     validateFormField = new Subject<ValidateFormFieldEvent>();
+    validateDynamicTableRow = new Subject<ValidateDynamicTableRowEvent>();
 
     executeOutcome = new Subject<FormOutcomeEvent>();