#533 allow explicitly making entire form readonly

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
+import { Component, AfterViewChecked, ViewChild } from '@angular/core';
 import { ALFRESCO_TASKLIST_DIRECTIVES } from 'ng2-activiti-tasklist';
 import { ActivitiForm } from 'ng2-activiti-form';
 
@@ -29,7 +29,7 @@ declare var componentHandler;
     styleUrls: ['./activiti-demo.component.css'],
     directives: [ALFRESCO_TASKLIST_DIRECTIVES, ActivitiForm]
 })
-export class ActivitiDemoComponent implements OnInit, AfterViewChecked {
+export class ActivitiDemoComponent implements AfterViewChecked {
 
     currentChoice: string = 'task-list';
 

ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.html

@@ -1,4 +1,8 @@
 <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="field.id">
-    <input type="checkbox" [attr.id]="field.id" class="mdl-checkbox__input" [(ngModel)]="field.value">
+    <input type="checkbox"
+           [attr.id]="field.id"
+           class="mdl-checkbox__input"
+           [(ngModel)]="field.value"
+           [disabled]="field.readOnly">
     <span class="mdl-checkbox__label">{{field.name}}</span>
 </label>

ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html

@@ -1,6 +1,10 @@
 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label multiline-text-widget">
-    <textarea class="mdl-textfield__input" type="text" rows= "3"
+    <textarea class="mdl-textfield__input"
-              [attr.id]="field.id" [(ngModel)]="field.value">
+              type="text"
+              rows= "3"
+              [attr.id]="field.id"
+              [(ngModel)]="field.value"
+              [disabled]="field.readOnly">
     </textarea>
     <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.html

@@ -1,6 +1,10 @@
 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget">
-    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?"
+    <input class="mdl-textfield__input"
-           [attr.id]="field.id" [(ngModel)]="field.value">
+           type="text"
+           pattern="-?[0-9]*(\.[0-9]+)?"
+           [attr.id]="field.id"
+           [(ngModel)]="field.value"
+           [disabled]="field.readOnly">
     <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
     <span class="mdl-textfield__error">Input is not a number!</span>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html

@@ -2,11 +2,12 @@
     <div *ngFor="let opt of field.options">
         <label [attr.for]="opt.id" class="mdl-radio mdl-js-radio">
             <input type="radio"
+                   class="mdl-radio__button"
                    [checked]="field.value === opt.id"
                    [attr.id]="opt.id"
                    [attr.name]="field.id"
                    [attr.value]="opt.id"
-                   class="mdl-radio__button"
+                   [disabled]="field.readOnly"
                    (click)="field.value = opt.id">
             <span class="mdl-radio__label">{{opt.name}}</span>
         </label>

ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html

@@ -1,4 +1,8 @@
 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label text-widget">
-    <input class="mdl-textfield__input" type="text" [attr.id]="field.id" [(ngModel)]="field.value">
+    <input class="mdl-textfield__input"
+           type="text"
+           [attr.id]="field.id"
+           [(ngModel)]="field.value"
+           [disabled]="field.readOnly">
     <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
 </div>

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

@@ -32,6 +32,8 @@ export class FormFieldTypes {
     static READONLY_TEXT: string = 'readonly-text';
 
     static READONLY_TYPES: string[] = [
+        FormFieldTypes.HYPERLINK,
+        FormFieldTypes.DISPLAY_VALUE,
         FormFieldTypes.READONLY_TEXT
     ];
 }
@@ -63,13 +65,13 @@ export interface FormFieldOption {
 export class FormFieldModel extends FormWidgetModel {
 
     private _value: string;
+    private _readOnly: boolean = false;
 
     fieldType: string;
     id: string;
     name: string;
     type: string;
     required: boolean;
-    readOnly: boolean;
     overrideId: boolean;
     tab: string;
     colspan: number = 1;
@@ -94,6 +96,13 @@ export class FormFieldModel extends FormWidgetModel {
         this.updateForm();
     }
 
+    get readOnly(): boolean {
+        if (this.form && this.form.readOnly) {
+            return true;
+        }
+        return this._readOnly;
+    }
+
     constructor(form: FormModel, json?: any) {
         super(form, json);
 
@@ -103,7 +112,7 @@ export class FormFieldModel extends FormWidgetModel {
             this.name = json.name;
             this.type = json.type;
             this.required = <boolean> json.required;
-            this.readOnly = <boolean> json.readOnly;
+            this._readOnly = <boolean> json.readOnly;
             this.overrideId = <boolean> json.overrideId;
             this.tab = json.tab;
             this.restUrl = json.restUrl;
@@ -124,6 +133,10 @@ export class FormFieldModel extends FormWidgetModel {
         }
     }
 
+    static isReadOnlyType(type: string) {
+        return FormFieldTypes.READONLY_TYPES.indexOf(type) > -1;
+    }
+
     private parseValue(json: any): any {
         let value = json.value;
 
@@ -187,10 +200,6 @@ export class FormFieldModel extends FormWidgetModel {
             }
         }
     }
-
-    static isReadOnlyType(type: string) {
-        return FormFieldTypes.READONLY_TYPES.indexOf(type) > -1;
-    }
 }
 
 export class ContainerColumnModel {
@@ -352,6 +361,7 @@ export class FormModel {
         return this._taskName;
     }
 
+    readOnly: boolean = false;
     tabs: TabModel[] = [];
     fields: ContainerModel[] = [];
     outcomes: FormOutcomeModel[] = [];
@@ -377,6 +387,7 @@ export class FormModel {
     }
 
     constructor(json?: any, data?: any, saveOption?: any, readOnly: boolean = false) {
+        this.readOnly = readOnly;
         if (json) {
             this._json = json;