feat: render options as radio

dhis2 · Sep 15, 2023 · 2417f21 · 2417f21
1 parent 9fa73b0
commit 2417f21
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 27 deletions.
diff --git a/components/dataentry/inner-form.html b/components/dataentry/inner-form.html
@@ -23,7 +23,8 @@
                     d2-options="optionSets[prStDe.dataElement.optionSet.id].options"
                     d2-required="prStDe.compulsory || mandatoryFields[currentEvent.event][prStDe.dataElement.id]"
                     d2-disabled="!dataElementEditable(prStDe)"
-                    d2-function="saveDataValueForRadio(prStDe, currentEvent, value)">                                                    
+                    d2-function="saveDataValueForRadio(prStDe, currentEvent, value)"
+                    d2-render-horizontally="prStDe.renderRadioHorizontally">
                 </d2-radio>
             </div>
         </div>

diff --git a/components/dataentry/section-inner-form.html b/components/dataentry/section-inner-form.html
@@ -24,7 +24,8 @@
                     d2-options="optionSets[prStDes[de.id].dataElement.optionSet.id].options"
                     d2-required="prStDesInStage[currentStage.id][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>

diff --git a/components/home/search/search.html b/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>

diff --git a/components/registration/default-registration-form.html b/components/registration/default-registration-form.html
@@ -54,7 +54,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">

diff --git a/core/tracker-capture.js b/core/tracker-capture.js
@@ -377,6 +377,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 ){

diff --git a/d2-tracker/dhis2.angular.directives.js b/d2-tracker/dhis2.angular.directives.js
@@ -1007,7 +1007,8 @@ var d2Directives = angular.module('d2Directives', [])
             d2Required: '=',
             d2Options: '=',
             d2CallbackFunction: '&d2Function',
-            d2OptionFilter: '='
+            d2OptionFilter: '=',
+            d2RenderHorizontally: '='
         },
         link: function (scope, element, attrs) {
 

diff --git a/d2-tracker/templates/radio-input.html b/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>
diff --git a/scripts/services.js b/scripts/services.js
@@ -1276,9 +1276,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;