From b045044d12562d5fee71d1544b3dc509c5ec2252 Mon Sep 17 00:00:00 2001
From: Vito <vito.albano@alfresco.com>
Date: Thu, 15 Jun 2017 05:04:36 -0700
Subject: [PATCH] [ADF-494] fixed readonly rendering for forms (#1972)

* [ADF-494] improved disabling for form

* [ADF-494] fixed readonly rendering for forms
---
 .../widgets/attach/attach.widget.html         |  4 +-
 .../widgets/dropdown/dropdown.widget.html     |  1 +
 .../widgets/dropdown/dropdown.widget.spec.ts  | 18 ++++++
 .../components/widgets/text/text.widget.html  |  2 +-
 .../widgets/text/text.widget.spec.ts          | 11 ++++
 .../widgets/upload/upload.widget.html         |  1 +
 .../widgets/upload/upload.widget.spec.ts      | 63 ++++++++++++++++++-
 .../activiti-task-details.component.ts        | 16 ++++-
 8 files changed, 108 insertions(+), 8 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html
index 6dc2eb88b5..470801f5d1 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html
@@ -2,11 +2,11 @@
     <label [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
     <div>
         <span *ngIf="hasFile()" class="attach-widget__file mdl-chip"><span class="mdl-chip__text">{{getLinkedFileName()}}</span></span>
-        <button #browseFile (click)="showDialog();" class="mdl-button mdl-js-button mdl-js-ripple-effect attach-widget__browser">
+        <button #browseFile [disabled]="field.readOnly" (click)="showDialog();" class="mdl-button mdl-js-button mdl-js-ripple-effect attach-widget__browser">
             <i class="material-icons">image</i>
             Browse {{selectedFolderSiteName}}
         </button>
-        <button *ngIf="hasFile" (click)="reset(file);" class="mdl-button mdl-js-button mdl-js-ripple-effect attach-widget__reset">Clear</button>
+        <button *ngIf="hasFile" [disabled]="field.readOnly" (click)="reset(file);" class="mdl-button mdl-js-button mdl-js-ripple-effect attach-widget__reset">Clear</button>
     </div>
 </div>
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html
index db53e8d3e0..e79f2cb6bb 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html
@@ -4,6 +4,7 @@
     <select class="dropdown-widget__select"
             [attr.id]="field.id"
             [(ngModel)]="field.value"
+            [disabled]="field.readOnly"
             (ngModelChange)="checkVisibility(field)">
         <option *ngFor="let opt of field.options" [value]="getOptionValue(opt, field.value)" [id]="opt.id">{{opt.name}}</option>
     </select>
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.spec.ts
index 1930b6abb3..5827325ea9 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.spec.ts
@@ -253,6 +253,24 @@ describe('DropdownWidget', () => {
                         expect(dropDownElement.selectedOptions[0].textContent).toBe('Choose one...');
                     });
             }));
+
+            it('should be disabled when the field is readonly', async(() => {
+                dropDownWidget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
+                    id: 'dropdown-id',
+                    name: 'date-name',
+                    type: 'dropdown',
+                    readOnly: 'true',
+                    restUrl: 'fake-rest-url'
+                });
+
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        let dropDownElement: HTMLSelectElement = <HTMLSelectElement> element.querySelector('#dropdown-id');
+                        expect(dropDownElement).not.toBeNull();
+                        expect(dropDownElement.disabled).toBeTruthy();
+                    });
+            }));
         });
     });
 });
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html
index 5efc1d0c0b..0e7dec7fa9 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html
@@ -8,7 +8,7 @@
            [value]="field.value"
            [(ngModel)]="field.value"
            (ngModelChange)="onFieldChanged(field)"
-           [disabled]="field.readOnly"
+           [attr.disabled]="field.readOnly ? true : null"
            [textMask]="{mask: mask, isReversed: isMaskReversed}"
            placeholder="{{field.placeholder}}">
     <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts
index 16bf3f8318..e0b0ff2381 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts
@@ -92,6 +92,17 @@ describe('TextWidget', () => {
                     expect(textWidget.field.value).toBe('TEXT');
                 });
             }));
+
+            it('should be disabled on readonly forms', async(() => {
+                textWidget.field.form.readOnly = true;
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(inputElement).toBeDefined();
+                    expect(inputElement).not.toBeNull();
+                    expect(inputElement.disabled).toBeTruthy();
+                });
+            }));
         });
 
         describe('and mask is configured on text element', () => {
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.html
index 172e9b0d57..c95723bd76 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.html
@@ -8,6 +8,7 @@
                #file
                type="file"
                [attr.id]="field.id"
+               [disabled]="field.readOnly"
                class="upload-widget__file"
                (change)="onFileChanged($event)">
         <button *ngIf="hasFile" (click)="reset(file);"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.spec.ts
index 9e1fd1ec8b..3597759a5c 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.spec.ts
@@ -19,9 +19,14 @@ import { UploadWidget } from './upload.widget';
 import { FormFieldModel } from './../core/form-field.model';
 import { FormFieldTypes } from '../core/form-field-types';
 import { FormService } from '../../../services/form.service';
+import { EcmModelService } from '../../../services/ecm-model.service';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
+import { FormModel } from '../core/form.model';
 
 describe('UploadWidget', () => {
 
+    let componentHandler;
     let widget: UploadWidget;
     let formService: FormService;
 
@@ -37,7 +42,7 @@ describe('UploadWidget', () => {
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.UPLOAD,
             value: [
-                {name: encodedFileName}
+                { name: encodedFileName }
             ]
         });
 
@@ -71,7 +76,7 @@ describe('UploadWidget', () => {
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.UPLOAD,
             value: [
-                {name: 'filename'}
+                { name: 'filename' }
             ]
         });
         widget.reset();
@@ -79,4 +84,58 @@ describe('UploadWidget', () => {
         expect(widget.field.json.value).toBeNull();
     });
 
+    describe('when template is ready', () => {
+        let uploadWidget: UploadWidget;
+        let fixture: ComponentFixture<UploadWidget>;
+        let element: HTMLInputElement;
+        let inputElement: HTMLInputElement;
+
+        beforeEach(async(() => {
+            componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']);
+            window['componentHandler'] = componentHandler;
+        }));
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                imports: [CoreModule],
+                declarations: [UploadWidget],
+                providers: [FormService, EcmModelService]
+            }).compileComponents().then(() => {
+                fixture = TestBed.createComponent(UploadWidget);
+                uploadWidget = fixture.componentInstance;
+                element = fixture.nativeElement;
+            });
+        }));
+
+        afterEach(() => {
+            fixture.destroy();
+            TestBed.resetTestingModule();
+        });
+
+        beforeEach(() => {
+            uploadWidget.field = new FormFieldModel(new FormModel({ taskId: 'fake-upload-id' }), {
+                id: 'upload-id',
+                name: 'upload-name',
+                value: '',
+                type: FormFieldTypes.UPLOAD,
+                readOnly: false
+            });
+
+            fixture.detectChanges();
+            inputElement = <HTMLInputElement>element.querySelector('#upload-id');
+        });
+
+        it('should be disabled on readonly forms', async(() => {
+            uploadWidget.field.form.readOnly = true;
+
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(inputElement).toBeDefined();
+                expect(inputElement).not.toBeNull();
+                expect(inputElement.disabled).toBeTruthy();
+            });
+        }));
+
+    });
+
 });
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
index 95ff776883..e1d9096c3b 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
@@ -15,7 +15,18 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, ViewChild, Output, EventEmitter, TemplateRef, OnChanges, SimpleChanges, DebugElement} from '@angular/core';
+import {
+    Component,
+    Input,
+    OnInit,
+    ViewChild,
+    Output,
+    EventEmitter,
+    TemplateRef,
+    OnChanges,
+    SimpleChanges,
+    DebugElement
+} from '@angular/core';
 import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 import { TaskDetailsModel } from '../models/task-details.model';
@@ -187,8 +198,7 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
                     }
 
                     let endDate: any = res.endDate;
-                    this.readOnlyForm = !!(endDate && !isNaN(endDate.getTime()));
-
+                    this.readOnlyForm = this.readOnlyForm ? this.readOnlyForm : !!(endDate && !isNaN(endDate.getTime()));
                     if (this.taskDetails && this.taskDetails.involvedPeople) {
                         this.taskDetails.involvedPeople.forEach((user) => {
                             this.taskPeople.push(new User(user));