Merge pull request #835 from Alfresco/dev-denys-634

#634 Amount widget for Activiti Form

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

@@ -0,0 +1,20 @@
+.amount-widget {
+    width: 100%;
+}
+
+
+.amount-widget__invalid .mdl-textfield__input {
+    border-color: #d50000;
+}
+
+.amount-widget__invalid .mdl-textfield__label {
+    color: #d50000;
+}
+
+.amount-widget__invalid .mdl-textfield__label:after {
+    background-color: #d50000;
+}
+
+.amount-widget__invalid .mdl-textfield__error {
+    visibility: visible !important;
+}

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

@@ -0,0 +1,13 @@
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label amount-widget"
+     [class.amount-widget__invalid]="!field.isValid">
+    <input class="mdl-textfield__input"
+           type="text"
+           pattern="-?[0-9]*(\.[0-9]+)?"
+           [attr.id]="field.id"
+           [attr.required]="isRequired()"
+           [(ngModel)]="field.value"
+           (ngModelChange)="checkVisibility(field)"
+           [disabled]="field.readOnly">
+    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}, {{currency}}</label>
+    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
+</div>

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

@@ -0,0 +1,60 @@
+/*!
+ * @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, ElementRef, OnInit } from '@angular/core';
+import { WidgetComponent } from './../widget.component';
+
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'amount-widget',
+    templateUrl: './amount.widget.html',
+    styleUrls: ['./amount.widget.css']
+})
+export class AmountWidget extends WidgetComponent implements OnInit {
+
+    currency: string = '$';
+
+    constructor(private elementRef: ElementRef) {
+        super();
+    }
+
+    ngOnInit() {
+        if (this.field && this.field.currency) {
+            this.currency = this.field.currency;
+        }
+    }
+
+    setupMaterialComponents(componentHandler: any): boolean {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+            if (this.elementRef && this.hasValue()) {
+                let el = this.elementRef.nativeElement;
+                let container = el.querySelector('.mdl-textfield');
+                if (container) {
+                    container.MaterialTextfield.change(this.field.value);
+                }
+            }
+
+            return true;
+        }
+        return false;
+    }
+
+}

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

@@ -59,6 +59,9 @@
                         <div *ngSwitchCase="'date'">
                             <date-widget [field]="field" (fieldChanged)="fieldChanged($event);"></date-widget>
                         </div>
+                        <div *ngSwitchCase="'amount'">
+                            <amount-widget [field]="field" (fieldChanged)="fieldChanged($event);"></amount-widget>
+                        </div>
                         <div *ngSwitchDefault>
                             <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
                         </div>

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

@@ -32,6 +32,7 @@ export class FormFieldTypes {
     static BOOLEAN: string = 'boolean';
     static NUMBER: string = 'integer';
     static DATE: string = 'date';
+    static AMOUNT: string = 'amount';
 
     static READONLY_TYPES: string[] = [
         FormFieldTypes.HYPERLINK,

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

@@ -38,7 +38,8 @@ export class RequiredFieldValidator implements FormFieldValidator {
         FormFieldTypes.PEOPLE,
         FormFieldTypes.FUNCTIONAL_GROUP,
         FormFieldTypes.RADIO_BUTTONS,
-        FormFieldTypes.UPLOAD
+        FormFieldTypes.UPLOAD,
+        FormFieldTypes.AMOUNT
     ];
 
     isSupported(field: FormFieldModel): boolean {
@@ -79,7 +80,8 @@ export class RequiredFieldValidator implements FormFieldValidator {
 export class NumberFieldValidator implements FormFieldValidator {
 
     private supportedTypes = [
-        FormFieldTypes.NUMBER
+        FormFieldTypes.NUMBER,
+        FormFieldTypes.AMOUNT
     ];
 
     static isNumber(value: any): boolean {
@@ -262,7 +264,8 @@ export class MaxLengthFieldValidator implements FormFieldValidator {
 export class MinValueFieldValidator implements FormFieldValidator {
 
     private supportedTypes = [
-        FormFieldTypes.NUMBER
+        FormFieldTypes.NUMBER,
+        FormFieldTypes.AMOUNT
     ];
 
     isSupported(field: FormFieldModel): boolean {
@@ -290,7 +293,8 @@ export class MinValueFieldValidator implements FormFieldValidator {
 export class MaxValueFieldValidator implements FormFieldValidator {
 
     private supportedTypes = [
-        FormFieldTypes.NUMBER
+        FormFieldTypes.NUMBER,
+        FormFieldTypes.AMOUNT
     ];
 
     isSupported(field: FormFieldModel): boolean {

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

@@ -43,6 +43,7 @@ export class FormFieldModel extends FormWidgetModel {
     private _readOnly: boolean = false;
     private _isValid: boolean = true;
 
+    // model members
     fieldType: string;
     id: string;
     name: string;
@@ -69,7 +70,10 @@ export class FormFieldModel extends FormWidgetModel {
     displayText: string;
     isVisible: boolean = true;
     visibilityCondition: WidgetVisibilityModel = null;
+    enableFractions: boolean = false;
+    currency: string = null;
 
+    // advanced members
     emptyOption: FormFieldOption;
     validationSummary: string;
     validators: FormFieldValidator[] = [];
@@ -142,6 +146,8 @@ export class FormFieldModel extends FormWidgetModel {
             this.hyperlinkUrl = json.hyperlinkUrl;
             this.displayText = json.displayText;
             this.visibilityCondition = <WidgetVisibilityModel> json.visibilityCondition;
+            this.enableFractions = <boolean>json.enableFractions;
+            this.currency = json.currency;
             this._value = this.parseValue(json);
         }
 
@@ -199,7 +205,7 @@ export class FormFieldModel extends FormWidgetModel {
         }
 
         /*
-        This is needed due to Activiti desplaying/editing dates in d-M-YYYY format
+        This is needed due to Activiti displaying/editing dates in d-M-YYYY format
         but storing on server in ISO8601 format (i.e. 2013-02-04T22:44:30.652Z)
          */
         if (json.type === FormFieldTypes.DATE) {
@@ -269,6 +275,12 @@ export class FormFieldModel extends FormWidgetModel {
                     this.form.values[this.id] = null;
                 }
                 break;
+            case FormFieldTypes.NUMBER:
+                this.form.values[this.id] = parseInt(this.value, 10);
+                break;
+            case FormFieldTypes.AMOUNT:
+                this.form.values[this.id] = this.enableFractions ? parseFloat(this.value) : parseInt(this.value, 10);
+                break;
             default:
                 if (!FormFieldTypes.isReadOnlyType(this.type)) {
                     this.form.values[this.id] = this.value;

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

@@ -33,6 +33,7 @@ import { TypeaheadWidget } from './typeahead/typeahead.widget';
 import { FunctionalGroupWidget } from './functional-group/functional-group.widget';
 import { PeopleWidget } from './people/people.widget';
 import { DateWidget } from './date/date.widget';
+import { AmountWidget } from './amount/amount.widget';
 
 // core
 export * from './widget.component';
@@ -58,6 +59,7 @@ export * from './typeahead/typeahead.widget';
 export * from './functional-group/functional-group.widget';
 export * from './people/people.widget';
 export * from './date/date.widget';
+export * from './amount/amount.widget';
 
 export const WIDGET_DIRECTIVES: any[] = [
     TabsWidget,
@@ -76,5 +78,6 @@ export const WIDGET_DIRECTIVES: any[] = [
     TypeaheadWidget,
     FunctionalGroupWidget,
     PeopleWidget,
-    DateWidget
+    DateWidget,
+    AmountWidget
 ];