feat: render options as radio

components/dataentry/inner-form.html

@@ -11,7 +11,8 @@
                                 d2-option-filter="optionVisibility[currentEvent.event]"
                                 d2-all-options="optionSets[prStDe.dataElement.optionSet.id].options"
                                 d2-use-notification="true"
-                                d2-element="currentElement">
+                                d2-element="currentElement"
+                                d2-render-horizontally="prStDe.renderRadioHorizontally">
                 </d2-option-list>
             </div>
             <div ng-if="prStDe.renderOptionsAsRadio && optionSets[prStDe.dataElement.optionSet.id].options.length < 7">

components/dataentry/section-inner-form.html

@@ -24,7 +24,8 @@
                     d2-options="optionSets[prStDes[de.id].dataElement.optionSet.id].options"
                     d2-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                     d2-disabled="!dataElementEditable(prStDes[de.id])"
-                    d2-function="saveDataValueForRadio(prStDes[de.id], currentEvent, value)">
+                    d2-function="saveDataValueForRadio(prStDes[de.id], currentEvent, value)"
+                    d2-render-horizontally="prStDes[de.id]">
                 </d2-radio>                
             </div>
         </div>

components/home/search/search.html

@@ -48,7 +48,7 @@ <h2>{{'search_for'| translate}}</h2>
                             d2-name="foo" 
                             d2-object="searchGroup"
                             d2-options="base.optionSets[attribute.optionSet.id].options"
-                            >
+                            d2-render-horizontally="attribute.renderRadioHorizontally">
                     </d2-radio>
                 </span>
             </div>

components/registration/default-registration-form.html

@@ -64,7 +64,8 @@
                                 d2-option-filter="optionVisibility"
                                 d2-options="optionSets[attributesById[attribute.id].optionSet.id].options"
                                 d2-required="attributeIsRequired(attribute.id, attribute.mandatory)"
-                                d2-disabled="attributeFieldDisabled(attribute)">
+                                d2-disabled="attributeFieldDisabled(attribute)"
+                                d2-render-horizontally="attribute.renderRadioHorizontally">
                         </d2-radio>
                     </span>
                     <span class="not-for-screen">

core/tracker-capture.js

@@ -364,6 +364,21 @@ function getBatchPrograms( programs, batch )
 
                 if( program.programStages ){
                     program.programStages = _.sortBy( program.programStages, 'sortOrder' );
+                    _.each( program.programStages, function ( prSt ) {
+                        if ( prSt.programStageDataElements ) {
+                            _.each( prSt.programStageDataElements, function ( prStDe ) {
+                                if ( prStDe.renderType && prStDe.renderType.DESKTOP ) {
+                                    const renderType = prStDe.renderType.DESKTOP.type;
+                                    if (renderType === 'VERTICAL_RADIOBUTTONS' || renderType === 'HORIZONTAL_RADIOBUTTONS') {
+                                        prStDe.renderOptionsAsRadio = true;
+                                        prStDe.renderRadioHorizontally = renderType === 'HORIZONTAL_RADIOBUTTONS';
+                                    }
+                                } else if ( prStDe.renderOptionsAsRadio ) {
+                                    prStDe.renderRadioHorizontally = false;
+                                }
+                            });
+                        }
+                    });
                 }
 
                 if( program.categoryCombo && program.categoryCombo.categories ){

d2-tracker/dhis2.angular.directives.js

@@ -1016,7 +1016,8 @@ var d2Directives = angular.module('d2Directives', [])
             d2Required: '=',
             d2Options: '=',
             d2CallbackFunction: '&d2Function',
-            d2OptionFilter: '='
+            d2OptionFilter: '=',
+            d2RenderHorizontally: '='
         },
         link: function (scope, element, attrs) {
 

d2-tracker/templates/radio-input.html

@@ -1,21 +1,22 @@
-<span ng-repeat="option in displayOptions" 
-      class="col-sm-12 form-control cursor-pointer" 
-      ng-disabled="d2Disabled"
-      ng-class="{'input-success': d2ValueSaved && model.radio === option.displayName}"
-      ng-click="saveValue(option.displayName)">
-    <span class="fa fa-circle-thin fa-stack-custom-large" ng-if="option.displayName !== model.radio"></span> 
-    <span class="fa fa-dot-circle-o fa-stack-custom-large" ng-if="option.displayName === model.radio"></span> 
-    {{option.displayName}}
-</span>
+<div ng-style="{display: d2RenderHorizontally ? 'flex' : 'block'}">
+    <span ng-repeat="option in displayOptions"
+        class="col-sm-12 form-control cursor-pointer"
+        ng-disabled="d2Disabled"
+        ng-class="{'input-success': d2ValueSaved && model.radio === option.displayName}"
+        ng-click="saveValue(option.displayName)">
+        <span class="fa fa-circle-thin fa-stack-custom-large" ng-if="option.displayName !== model.radio"></span>
+        <span class="fa fa-dot-circle-o fa-stack-custom-large" ng-if="option.displayName === model.radio"></span>
+        {{option.displayName}}
+    </span>
 
-
-<span ng-show="false">
-    <label ng-repeat="option in displayOptions" class="radio-display-none">
-    <input type="radio" 
-           name="{{name}}"
-           ng-required="d2Required"
-           ng-disabled="d2Disabled"
-           ng-model="model.radio"
-           ng-attr-value="{{option.displayName}}"> {{option.displayName}}
-    </label>    
-</span>
+    <span ng-show="false">
+        <label ng-repeat="option in displayOptions" class="radio-display-none">
+        <input type="radio"
+            name="{{name}}"
+            ng-required="d2Required"
+            ng-disabled="d2Disabled"
+            ng-model="model.radio"
+            ng-attr-value="{{option.displayName}}"> {{option.displayName}}
+        </label>
+    </span>
+</div>

scripts/services.js

@@ -1418,9 +1418,18 @@ var trackerCaptureServices = angular.module('trackerCaptureServices', ['ngResour
                             att.mandatory = pAttribute.mandatory;
                             att.displayInListNoProgram = pAttribute.displayInList;
 
-                            if(pAttribute.renderOptionsAsRadio){
-                                att.renderOptionsAsRadio = pAttribute.renderOptionsAsRadio;
+                            att.renderOptionsAsRadio = false;
+                            if (pAttribute.renderType && pAttribute.renderType.DESKTOP) {
+                                const renderType = pAttribute.renderType.DESKTOP.type;
+                                if (renderType === 'VERTICAL_RADIOBUTTONS' || renderType === 'HORIZONTAL_RADIOBUTTONS') {
+                                    att.renderOptionsAsRadio = true;
+                                    att.renderRadioHorizontally = renderType === 'HORIZONTAL_RADIOBUTTONS';
+                                }
+                            } else if (pAttribute.renderOptionsAsRadio) {
+                                att.renderOptionsAsRadio = true;
+                                att.renderRadioHorizontally = false;
                             }
+
                             if(pAttribute.searchable)
                             {
                                 att.searchable = pAttribute.searchable;