RA-1758: Fixed radio/checkbox handling for Other option at allergies …

…page (#36) Co-authored-by: Pawel Cieszko <pcieszko@soldevelo.com>
openmrs · Sep 19, 2023 · 855ed53 · 855ed53
1 parent 8c39e6e
commit 855ed53
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 17 deletions.
diff --git a/omod/src/main/compass/sass/allergy.scss b/omod/src/main/compass/sass/allergy.scss
@@ -33,7 +33,7 @@
  }
 
  #allergens {
- width: 55%;
+ width: 50%;
  }
 
  #reactions {
@@ -87,4 +87,4 @@
  }
  }
  }
-}
+}
diff --git a/omod/src/main/webapp/pages/allergy.gsp b/omod/src/main/webapp/pages/allergy.gsp
@@ -73,18 +73,16 @@ ${ ui.includeFragment("allergyui", "removeAllergyDialog") }
  <% allergens.each { allergen -> %>
  <li>
  <% if (allergen.id == otherNonCodedConcept.id) { %>
- <input id="allergen-${allergen.id}" type="radio" name="codedAllergen" value="${allergen.id}" class="coded_allergens" ng-model="allergen" ng-click="checkOtherRadioButton()"
- ${(allergy.allergen != null && allergen == allergy.allergen.codedAllergen) ? "checked=checked" : ""}/>
+ <input id="allergen-${ typeName }" type="radio" name="codedAllergen" value="${allergen.id}" ng-click="selectOtherAllergenRadioInput()" class="coded_allergens" ng-model="allergen" ${(allergy.allergen != null && allergen == allergy.allergen.codedAllergen) ? "checked=checked" : ""}/>
  <% } else { %>
- <input id="allergen-${allergen.id}" type="radio" name="codedAllergen" value="${allergen.id}" class="coded_allergens" ng-model="allergen"
- ${(allergy.allergen != null && allergen == allergy.allergen.codedAllergen) ? "checked=checked" : ""}/>
+ <input id="allergen-${allergen.id}" type="radio" name="codedAllergen" value="${allergen.id}" ng-click="controlOtherAllergenInputVisibility()" class="coded_allergens" ng-model="allergen" ${(allergy.allergen != null && allergen == allergy.allergen.codedAllergen) ? "checked=checked" : ""}/>
  <% } %>
  <label for="allergen-${allergen.id}" id="allergen-${allergen.id}-label" class="coded_allergens_label" ng-click="otherFieldFocus()">${ui.format(allergen)}</label>
 
  <% if (allergen.id == otherNonCodedConcept.id) { %>
  <% if(typeName == 'DRUG') { %>
  <input type="hidden" name="otherCodedAllergen" ng-value="otherCodedAllergen.concept ? 'CONCEPT:'+otherCodedAllergen.concept.uuid : 'NON_CODED:'+otherCodedAllergen.word">
- <coded-or-free-text-answer id="${typeName}otherCodedAllergen" concept-classes="8d490dfc-c2cc-11de-8d13-0010c6dffd0f,b4535251-9183-4175-959e-9ee67dc71e78" ng-model="otherCodedAllergen" ng-click="otherFieldFocus()" />
+ <coded-or-free-text-answer id="${typeName}otherCodedAllergen" concept-classes="8d490dfc-c2cc-11de-8d13-0010c6dffd0f,b4535251-9183-4175-959e-9ee67dc71e78" ng-model="otherCodedAllergen" ng-click="otherFieldFocus()" ng-init="controlOtherAllergenInputVisibility()"/>
  <% } else {%>
  <input type="text" maxlength="255" id="${typeName}nonCodedAllergen" name="nonCodedAllergen" ng-model="nonCodedAllergen" ng-focus="otherFieldFocus()"/>
  <% } %>
@@ -101,10 +99,13 @@ ${ ui.includeFragment("allergyui", "removeAllergyDialog") }
  <ul>
  <% reactionConcepts.each { reaction -> %>
  <li>
- <input ng-model="reaction${reaction.id}" type="checkbox" id="reaction-${reaction.id}" class="allergy-reaction" name="allergyReactionConcepts" value="${reaction.id}" ng-init="reaction${reaction.id} = ${ allergyReactionConcepts.contains(reaction) }" />
- <label for="reaction-${reaction.id}">${ui.format(reaction)}</label>
  <% if (reaction.id == otherNonCodedConcept.id) { %>
- <input type="text" maxlength="255" name="reactionNonCoded" ng-focus="otherReactionFocus(${reaction.id})" <% if (allergy.reactionNonCoded) { %> value="${allergy.reactionNonCoded}" <% } %>/>
+ <input ng-model="reaction${reaction.id}" type="checkbox" id="reaction-${reaction.id}" class="allergy-reaction" name="allergyReactionConcepts" value="${reaction.id}" ng-click="controlOtherReactionInputVisibility(${reaction.id})" ng-init="reaction${reaction.id} = ${allergyReactionConcepts.contains(reaction)}"/>
+ <label for="reaction-${reaction.id}" ng-click="controlOtherReactionInputVisibility(${reaction.id})">${ui.format(reaction)}</label>
+ <input type="text" maxlength="255" name="reactionNonCoded" ng-init="initOtherReactionInputVisibility(reaction${reaction.id})" ng-focus="otherReactionFocus(${reaction.id})" <% if (allergy.reactionNonCoded) { %> value="${allergy.reactionNonCoded}" <% } %>/>
+ <% } else { %>
+ <input ng-model="reaction${reaction.id}" type="checkbox" id="reaction-${reaction.id}" class="allergy-reaction" name="allergyReactionConcepts" value="${reaction.id}" ng-init="reaction${reaction.id} = ${allergyReactionConcepts.contains(reaction)}"/>
+ <label for="reaction-${reaction.id}">${ui.format(reaction)}</label>
  <% } %>
  </li>
  <% } %>

diff --git a/omod/src/main/webapp/resources/scripts/allergy.js b/omod/src/main/webapp/resources/scripts/allergy.js
@@ -1,5 +1,5 @@
 var app = angular.module("allergyApp", ['uicommons.widget.coded-or-free-text-answer']);
- 
+
 app.controller("allergyController", [ '$scope', function($scope) {
 
  $scope.allergen = null;
@@ -27,30 +27,68 @@ app.controller("allergyController", [ '$scope', function($scope) {
  $scope.allergen = null;
  $scope.nonCodedAllergen = null;
  $scope.otherCodedAllergen = null;
- $('.coded_allergens').attr('checked', false);
+ $('.coded_allergens').prop('checked', false);
+ $('[ng-model=otherCodedAllergen]').hide();
+ $('[ng-model=nonCodedAllergen]').hide();
  });
 
  $scope.$watch('allergen', function(newValue, oldValue) {
  // if you had already specified allergen, then change it, clear other fields
  if (oldValue) {
- $('input.allergy-reaction').attr('checked', false);
- $('input.allergy-severity').attr('checked', false);
+ $('input.allergy-reaction').prop('checked', false);
+ $('input.allergy-severity').prop('checked', false);
  $('#allergy-comment').val('');
+ $('[ng-model=otherCodedAllergen]').hide();
+ $('[name=reactionNonCoded]').hide();
 
  $scope.nonCodedAllergen = null;
  $scope.otherCodedAllergen = null;
  }
  });
 
+ $scope.controlOtherAllergenInputVisibility = function() {
+ if ($('#allergen-' + $scope.allergenType).prop('checked')) {
+ $('[ng-model=otherCodedAllergen]').show();
+ $('[ng-model=nonCodedAllergen]').show();
+ } else {
+ $('[ng-model=otherCodedAllergen]').hide();
+ $('[ng-model=nonCodedAllergen]').hide();
+ }
+ }
+
+ $scope.controlOtherReactionInputVisibility = function(reactionId) {
+ if ($('#reaction-' + reactionId).prop('checked')) {
+ $('[name=reactionNonCoded]').show();
+ } else {
+ $('[name=reactionNonCoded]').hide();
+ }
+ }
+
+ $scope.initOtherReactionInputVisibility = function(isOtherReactionEnabled) {
+ if (isOtherReactionEnabled) {
+ $('[name=reactionNonCoded]').show();
+ } else {
+ $('[name=reactionNonCoded]').hide();
+ }
+ }
+
  $scope.otherFieldFocus = function() {
- $('#allergen-' + $scope.allergenType).attr('checked', true);
+ $('#allergen-' + $scope.allergenType).prop('checked', true);
+ $scope.controlOtherAllergenInputVisibility();
  };
 
  $scope.checkOtherRadioButton = function() {
  document.getElementById('allergen-' + $scope.allergen).checked = true;
  }
 
+
  $scope.otherReactionFocus = function(reactionId) {
- $('#reaction-' + reactionId).attr('checked', true);
+ $('#reaction-' + reactionId).prop('checked', true);
+ $scope.controlOtherReactionInputVisibility(reactionId);
  };
-}]);
+
+ $scope.selectOtherAllergenRadioInput = function() {
+ $('#allergen-' + $scope.allergenType).prop('checked', true);
+ $scope.controlOtherAllergenInputVisibility();
+ }
+}]);