#723 fixes for widget rendering

Fixes for all the widgets to correctly display on completed/readonly
form

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-types.ts

@@ -18,6 +18,8 @@
 export class FormFieldTypes {
     static CONTAINER: string = 'container';
     static GROUP: string = 'group';
+    static TEXT: string = 'text';
+    static MULTILINE_TEXT: string = 'multi-line-text';
     static DROPDOWN: string = 'dropdown';
     static HYPERLINK: string = 'hyperlink';
     static RADIO_BUTTONS: string = 'radio-buttons';
@@ -27,6 +29,7 @@ export class FormFieldTypes {
     static TYPEAHEAD: string = 'typeahead';
     static FUNCTIONAL_GROUP: string = 'functional-group';
     static PEOPLE: string = 'people';
+    static BOOLEAN: string = 'boolean';
 
     static READONLY_TYPES: string[] = [
         FormFieldTypes.HYPERLINK,

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html

@@ -1,10 +1,52 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label display-value-widget">
+<div [ngSwitch]="fieldType" class="display-value-widget">
+    <div *ngSwitchCase="'boolean'">
+        <label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id">
+            <input type="checkbox"
+                   [attr.id]="field.id"
+                   [(ngModel)]="value"
+                   class="mdl-checkbox__input"
+                   disabled>
+            <span class="mdl-checkbox__label">{{field.name}}</span>
+        </label>
+    </div>
+    <div *ngSwitchCase="'text'"
+         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"
+               [value]="value"
+               disabled>
+        <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+    </div>
+    <div *ngSwitchCase="'multi-line-text'"
+         class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label multiline-text-widget">
+        <textarea class="mdl-textfield__input"
+                  type="text"
+                  rows= "3"
+                  [attr.id]="field.id"
+                  [(ngModel)]="value"
+                  [disabled]="field.readOnly">
+        </textarea>
+        <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+    </div>
+    <div *ngSwitchCase="'hyperlink'"
+         class="hyperlink-widget">
+        <div>
+            <span>{{field.name}}</span>
+        </div>
+        <div>
+            <a [href]="linkUrl" target="_blank" rel="nofollow">{{linkText}}</a>
+        </div>
+    </div>
+    <div *ngSwitchDefault
+         class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label text-widget">
+        <input class="mdl-textfield__input"
+               type="text"
+               [attr.id]="field.id"
+               [value]="value"
                (ngModelChange)="checkVisibility(field)"
                disabled>
         <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+    </div>
 </div>
 

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts

@@ -15,8 +15,11 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
+import { FormFieldTypes } from '../core/form-field-types';
+import { FormService } from '../../../services/form.service';
+import { FormFieldOption } from './../core/form-field-option';
 
 declare let __moduleName: string;
 declare var componentHandler;
@@ -27,6 +30,113 @@ declare var componentHandler;
     templateUrl: './display-value.widget.html',
     styleUrls: ['./display-value.widget.css']
 })
-export class DisplayValueWidget extends WidgetComponent {
+export class DisplayValueWidget extends WidgetComponent implements OnInit {
+
+    value: any;
+    fieldType: string;
+    FormFieldTypes: FormFieldTypes;
+
+    constructor(private formService: FormService) {
+        super();
+    }
+
+    ngOnInit() {
+        if (this.field) {
+            this.value = this.field.value;
+
+            if (this.field.params) {
+                let originalField = this.field.params['field'];
+                if (originalField && originalField.type) {
+                    this.fieldType = originalField.type;
+                    switch (originalField.type) {
+                        case FormFieldTypes.BOOLEAN:
+                            this.value = this.field.value === 'true' ? true : false;
+                            break;
+                        case FormFieldTypes.FUNCTIONAL_GROUP:
+                            this.value = this.field.value.name;
+                            break;
+                        case FormFieldTypes.PEOPLE:
+                            let model = this.field.value;
+                            let displayName = `${model.firstName} ${model.lastName}`;
+                            this.value = displayName.trim();
+                            break;
+                        case FormFieldTypes.UPLOAD:
+                            let files = this.field.value || [];
+                            if (files.length > 0) {
+                                this.value = files[0].name;
+                            }
+                            break;
+                        case FormFieldTypes.TYPEAHEAD:
+                            this.loadRestFieldValue();
+                            break;
+                        case FormFieldTypes.DROPDOWN:
+                            this.loadRestFieldValue();
+                            break;
+                        case FormFieldTypes.RADIO_BUTTONS:
+                            this.loadRadioButtonValue();
+                            break;
+                        default:
+                            this.value = this.field.value;
+                            break;
+                    }
+                }
+            }
+        }
+    }
+
+    loadRadioButtonValue() {
+        let options = this.field.options || [];
+        let toSelect = options.find(item => item.id === this.field.value);
+        if (toSelect) {
+            this.value = toSelect.name;
+        } else {
+            this.value = this.field.value;
+        }
+    }
+
+    loadRestFieldValue() {
+        this.formService
+            .getRestFieldValues(this.field.form.taskId, this.field.id)
+            .subscribe(
+                (result: FormFieldOption[]) => {
+                    let options = result || [];
+                    let toSelect = options.find(item => item.id === this.field.value);
+                    if (toSelect) {
+                        this.value = toSelect.name;
+                    } else {
+                        this.value = this.field.value;
+                    }
+                },
+                error => {
+                    console.log(error);
+                    this.value = this.field.value;
+                }
+            );
+    }
+
+    // TODO: TAKEN FROM hyperlink WIDGET, OPTIMIZE
+
+    DEFAULT_URL: string = '#';
+    DEFAULT_URL_SCHEME: string = 'http://';
+
+    get linkUrl(): string {
+        let url = this.DEFAULT_URL;
+
+        if (this.field && this.field.hyperlinkUrl) {
+            url = this.field.hyperlinkUrl;
+            if (!/^https?:\/\//i.test(url)) {
+                url = this.DEFAULT_URL_SCHEME + url;
+            }
+        }
+
+        return url;
+    }
+
+    get linkText(): string {
+        if (this.field) {
+            return this.field.displayText || this.field.hyperlinkUrl;
+        }
+        return null;
+    }
 
 }

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

@@ -1,3 +1,8 @@
 <div class="hyperlink-widget">
+    <div>
+        <span>{{field.name}}</span>
+    </div>
+    <div>
         <a [href]="linkUrl" target="_blank" rel="nofollow">{{linkText}}</a>
+    </div>
 </div>

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

@@ -1,3 +1,3 @@
-:host .multiline-text-widget {
+.multiline-text-widget {
     width: 100%;
 }

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

@@ -1,3 +1,3 @@
-:host .text-widget {
+.text-widget {
     width: 100%;
 }