adds in radio_vertical that displays radio buttons in a vertical list…

… next to the label

CHANGELOG.md

@@ -1,5 +1,9 @@
 ### 0.11.0 (Major Release)
 
+#### Adds in a radio_vertical template tag
+This displays the label and then the radio
+buttons as a vertical list.
+
 #### Removes "episode_history" from episode serialization
 
 Serialised episodes previously contained a "shallow" copy of all other episodes in

opal/templates/_helpers/radio_vertical.html

@@ -0,0 +1,26 @@
+<div class="form-group"
+     {% if visibility %} {{ visibility|safe }} {% endif %}
+     >
+  <label class="control-label {% ifequal style "horizontal" %}col-sm-3{% endifequal %}">{{ label }}</label>
+  <div class="{% ifequal style "horizontal" %}col-sm-8{% endifequal %}"
+    ng-class="{'has-error': {{ formname }}.$submitted && {{ formname }}[{{ element_name }}].$error.required}"
+  >
+    <div ng-repeat="item in {{ lookuplist }}" class="row" >
+      <div class="col-md-12">
+      <label class="radio-inline">
+        <input {% if required %}required {% endif %}{% if change %} ng-change="{{ change }}" {% endif %}class="" type="radio" name="[[ {{ element_name }} ]]" value="[[ item ]]" ng-model="{{ model }}">
+        [[ item ]]
+      </label>
+      </div>
+    </div>
+    {% if required %}
+      <div class="row" ng-show="{{ formname }}.$submitted && {{ formname }}[{{ element_name }}].$error.required">
+        <div class="col-md-12">
+          <span class="help-block" >
+            {{ label }} is required
+          </span>
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</div>

opal/templatetags/forms.py

@@ -224,13 +224,22 @@ def timepicker(*args, **kwargs):
     return extract_common_args(kwargs)
 
 
-@register.inclusion_tag('_helpers/radio.html')
-def radio(*args, **kwargs):
+def _radio(*args, **kwargs):
     ctx = extract_common_args(kwargs)
     ctx["lookuplist"] = kwargs.pop("lookuplist", ctx.get("lookuplist", None))
     return ctx
 
 
+@register.inclusion_tag('_helpers/radio.html')
+def radio(*args, **kwargs):
+    return _radio(*args, **kwargs)
+
+
+@register.inclusion_tag('_helpers/radio_vertical.html')
+def radio_vertical(*args, **kwargs):
+    return _radio(*args, **kwargs)
+
+
 @register.inclusion_tag('_helpers/select.html')
 def select(*args, **kwargs):
     """

opal/tests/test_templatetags_forms.py

@@ -367,6 +367,58 @@ def test_show(self):
         self.assertIn('ng-hide="onions"', rendered)
 
 
+@patch("opal.templatetags.forms.extract_common_args")
+class RadioArgExractTestCase(TestCase):
+    def test_radio_lookuplists(self, extract_common_args):
+        extract_common_args.return_value = {}
+        result = forms._radio(lookuplist="something")
+        self.assertEqual(
+            result, dict(lookuplist="something")
+        )
+
+    def test_extract_common_args(self, extract_common_args):
+        extract_common_args.return_value = {"something": "else"}
+        self.assertEqual(
+            forms._radio(),
+            {"something": "else", "lookuplist": None}
+        )
+
+
+class RadioVerticalTestCase(TestCase):
+    def test_radio(self):
+        template = Template('{% load forms %}{% radio_vertical label="hai" model="bai"%}')
+        rendered = template.render(Context({}))
+        self.assertIn('ng-model="bai"', rendered)
+        self.assertIn('hai', rendered)
+
+    def test_radio_lookuplists(self):
+        template = Template('{% load forms %}{% radio_vertical field="FavouriteColour.name" lookuplist="[\'rainbow\']" %}')
+        rendered = template.render(Context({}))
+        self.assertIn('rainbow', rendered)
+        # make sure we're overwriting the existing choice field
+        self.assertNotIn('purple', rendered)
+
+    def test_radio_infer_lookuplists(self):
+        template = Template('{% load forms %}{% radio_vertical field="FavouriteColour.name" %}')
+        rendered = template.render(Context({}))
+        self.assertIn('purple', rendered)
+
+    def test_element_name(self):
+        tpl = Template('{% load forms %}{% radio_vertical label="hai" model="bai" element_name="onions"%}')
+        rendered = tpl.render(Context({}))
+        self.assertIn('name="[[ onions ]]"', rendered)
+
+    def test_element_name_required(self):
+        tpl = Template('{% load forms %}{% radio_vertical label="hai" model="bai" element_name="onions" required=True %}')
+        rendered = tpl.render(Context({}))
+        self.assertIn('form.$submitted && form[onions].$error.required"', rendered)
+
+    def test_change(self):
+        tpl = Template('{% load forms %}{% radio_vertical label="hai" change="doStuff" model="bai" element_name="onions"%}')
+        rendered = tpl.render(Context({}))
+        self.assertIn('ng-change="doStuff"', rendered)
+
+
 class RadioTestCase(TestCase):
 
     def test_radio(self):