Add support for fieldsets to forms

This makes it possible to define a fieldset which has a legend and a
description, to split up a large form into multiple visual components.

diff --git a/media/css/main.css b/media/css/main.css
index 2aeddd372d5752db45bb117265a25edd1dd0bd37..08f794a3f060285b7df992d71e0f36db8c41bac2 100644 (file)
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -1262,6 +1262,15 @@ th.formfieldnamecontainer {
   height: 3.5em;
 }
 
+fieldset.form-group {
+    border: 1px groove #ddd;
+}
+fieldset.form-group legend {
+    width:inherit;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
 /** This code is for pgarchives */
 
 /**

diff --git a/pgweb/core/templatetags/pgfilters.py b/pgweb/core/templatetags/pgfilters.py
index b2670a8094fbac7bb555e0251db5b69211566f00..213ff4d6f489b10bf14ce3e98212d813c0a7691e 100644 (file)
--- a/pgweb/core/templatetags/pgfilters.py
+++ b/pgweb/core/templatetags/pgfilters.py
@@ -70,6 +70,11 @@ def dictlookup(value, key):
     return value.get(key, None)
 
 
+@register.filter(name='keylookup')
+def keylookup(value, key):
+    return value[key]
+
+
 @register.filter(name='json')
 def tojson(value):
     return json.dumps(value)

diff --git a/templates/base/form_contents.html b/templates/base/form_contents.html
index 99053f50b5327cce7d1694451a3e49f4c333a65f..69083cf1c57aea9895035e15d573875412f4eea1 100644 (file)
--- a/templates/base/form_contents.html
+++ b/templates/base/form_contents.html
@@ -1,11 +1,24 @@
+{%load pgfilters%}
 <form class="form-horizontal" method="post" action=".">{%if not nocsrf%}{% csrf_token %}{%endif%}
   {%if form.errors %}
     <div class="alert alert-danger">
       Please correct the errors below, and re-submit the form.
     </div>
   {%endif%}
+{%if form.fieldsets%}
+{%for fieldset in form.fieldsets%}
+<fieldset id="{{fieldset.id}}" class="form-group">
+  <legend>{{fieldset.legend}}</legend>
+{%if fieldset.description%}<p>{{fieldset.description}}</p>{%endif%}
+{%for field in fieldset.fields%}
+  {%include "base/form_field.html" with field=form|keylookup:field %}
+{%endfor%}
+</fieldset>
+{%endfor%}
+{%else%}
   {% for field in form %}
 {%include "base/form_field.html" %}
   {%endfor%}
+{%endif%}
   <button type="submit" class="btn btn-primary">{{savebutton|default:"Save"}}</button>
 </form>