misc: use a django template to render form steps (#26562)

tests/test_form_pages.py

@@ -464,8 +464,9 @@ def test_form_items_submit(pub):
     assert data.data['0_display'] == 'Foo, Bar'
 
 def assert_current_page(resp, page_label):
-    assert re.findall('<li class=".*?current.*?">.*?<span class="label">(.*?)</span></li>',
-            resp.body)[0] == page_label
+    for li_tag in resp.html.findAll('li'):
+        if 'current' in li_tag.attrs['class']:
+            assert li_tag.find_all('span')[-1].text == page_label
 
 def test_form_multi_page(pub):
     for initial_condition in (None, 'True'):

wcs/backoffice/submission.py

@@ -79,6 +79,7 @@ class FormFillPage(PublicFormFillPage):
 
     filling_templates = ['wcs/formdata_filling.html']
     validation_templates = ['wcs/formdata_validation.html']
+    steps_templates = ['wcs/formdata_steps.html']
 
     def __init__(self, *args, **kwargs):
         super(FormFillPage, self).__init__(*args, **kwargs)

wcs/forms/root.py

@@ -177,6 +177,7 @@ class FormPage(Directory, FormTemplateMixin):
     do_not_call_in_templates = True
     filling_templates = ['wcs/front/formdata_filling.html', 'wcs/formdata_filling.html']
     validation_templates = ['wcs/front/formdata_validation.html', 'wcs/formdata_validation.html']
+    steps_templates = ['wcs/front/formdata_steps.html', 'wcs/formdata_steps.html']
 
     def __init__(self, component):
         try:
@@ -253,29 +254,12 @@ class FormPage(Directory, FormTemplateMixin):
         if self.has_confirmation_page() and not self.edit_mode:
             page_labels.append(_('Validating'))
 
-        r = TemplateIO(html=True)
-        r += htmltext('<div id="steps" class="steps-%s"><ol>') % len(page_labels)
-
-        for i, page_label in enumerate(page_labels):
-            classes = []
-            index = i + 1
-            if index == 1:
-                classes.append('first')
-            if index == len(page_labels):
-                classes.append('last')
-            if index == current_position:
-                classes.append('current')
-            elif index < current_position:
-                classes.append('step-before')
-            elif index > current_position:
-                classes.append('step-after')
-            r += htmltext('<li class="%s">') % ' '.join(classes)
-            r += htmltext('<span class="marker">%d</span> <span class="label">%s</span>') % (
-                    index, page_label)
-            r += htmltext('</li>')
-
-        r += htmltext('</ol></div>')
-        return r.getvalue()
+        return template.render(
+                list(self.get_formdef_template_variants(self.steps_templates)),
+                {
+                  'page_labels': page_labels,
+                  'current_page_no': current_position,
+                })
 
     def page(self, page, page_change=True, page_error_messages=None):
         displayed_fields = []

wcs/templates/wcs/formdata_steps.html

@@ -0,0 +1,16 @@
+<div id="steps" class="steps-{{page_labels|length}}">
+<ol>
+{% for page_label in page_labels %}
+{% spaceless %}
+<li class="{% if forloop.first %}first{% endif %}
+           {% if forloop.last %}last{% endif %}
+           {% if forloop.counter == current_page_no %}current{% endif %}
+           {% if forloop.counter < current_page_no %}step-before{% endif %}
+           {% if forloop.counter > current_page_no %}step-after{% endif %}" >
+  <span class="marker">{{ forloop.counter }}</span>
+  <span class="label">{{ page_label }}</span>
+</li>
+{% endspaceless %}
+{% endfor %}
+</ol>
+</div>