#476 basic radio buttons widget

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

@@ -34,6 +34,9 @@
                         <div *ngSwitchCase="'hyperlink'">
                             <hyperlink-widget [field]="field"></hyperlink-widget>
                         </div>
+                        <div *ngSwitchCase="'radio-buttons'">
+                            <radio-buttons-widget [field]="field"></radio-buttons-widget>
+                        </div>
                         <div *ngSwitchDefault>
                             <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
                         </div>

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

@@ -25,6 +25,7 @@ import { CheckboxWidget } from './../checkbox/checkbox.widget';
 import { MultilineTextWidget } from './../multiline-text/multiline-text.widget';
 import { DropdownWidget } from './../dropdown/dropdown.widget';
 import { HyperlinkWidget } from './../hyperlink/hyperlink.widget';
+import { RadioButtonsWidget } from './../radio-buttons/radio-buttons.widget';
 
 declare let __moduleName: string;
 declare var componentHandler;
@@ -41,7 +42,8 @@ declare var componentHandler;
         CheckboxWidget,
         MultilineTextWidget,
         DropdownWidget,
-        HyperlinkWidget
+        HyperlinkWidget,
+        RadioButtonsWidget
     ]
 })
 export class ContainerWidget implements AfterViewInit {

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

@@ -25,3 +25,4 @@ export * from './checkbox/checkbox.widget';
 export * from './multiline-text/multiline-text.widget';
 export * from './dropdown/dropdown.widget';
 export * from './hyperlink/hyperlink.widget';
+export * from './radio-buttons/radio-buttons.widget';

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

@@ -0,0 +1 @@
+.radio-buttons-widget {}

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

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

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

@@ -0,0 +1,32 @@
+/*!
+ * @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 } from '@angular/core';
+import { WidgetComponent } from './../widget.component';
+
+declare let __moduleName: string;
+declare var componentHandler;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'radio-buttons-widget',
+    templateUrl: './radio-buttons.widget.html',
+    styleUrls: ['./radio-buttons.widget.css']
+})
+export class RadioButtonsWidget extends WidgetComponent {
+
+}

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

@@ -27,6 +27,7 @@ export class FormFieldTypes {
     static GROUP: string = 'group';
     static DROPDOWN: string = 'dropdown';
     static HYPERLINK: string = 'hyperlink';
+    static RADIO_BUTTONS: string = 'radio-buttons';
 }
 
 export class FormWidgetModel {
@@ -121,7 +122,7 @@ export class FormFieldModel extends FormWidgetModel {
         let value = json.value;
 
         /*
-         This is needed due to Activiti reading dropdown values as string
+         This is needed due to Activiti issue related to reading dropdown values as value string
          but saving back as object: { id: <id>, name: <name> }
          */
         // TODO: needs review
@@ -131,6 +132,21 @@ export class FormFieldModel extends FormWidgetModel {
            }
         }
 
+        /*
+         This is needed due to Activiti issue related to reading radio button values as value string
+         but saving back as object: { id: <id>, name: <name> }
+         */
+        if (json.type === FormFieldTypes.RADIO_BUTTONS) {
+            // Activiti has a bug with default radio button value,
+            // so try resolving current one with a fallback to first entry
+            let entry: FormFieldOption[] = this.options.filter(opt => opt.id === value);
+            if (entry.length > 0) {
+                value = entry[0].id;
+            } else if (this.options.length > 0) {
+                value = this.options[0].id;
+            }
+        }
+
         return value;
     }
 
@@ -148,7 +164,21 @@ export class FormFieldModel extends FormWidgetModel {
                     this.form.values[this.id] = entry[0];
                 }
             }
-        } else {
+        }
+        /*
+         This is needed due to Activiti issue related to reading radio button values as value string
+         but saving back as object: { id: <id>, name: <name> }
+         */
+        else if (this.type === FormFieldTypes.RADIO_BUTTONS) {
+            let entry: FormFieldOption[] = this.options.filter(opt => opt.id === this.value);
+            if (entry.length > 0) {
+                this.form.values[this.id] = entry[0];
+            } else if (this.options.length > 0) {
+                this.form.values[this.id] = this.options[0].id;
+            }
+        }
+        // default value resolver
+        else {
             this.form.values[this.id] = this.value;
         }
     }