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.

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 */
 
 /**

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)

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>