Add site-wide extra fields for reports, and admin UI to manage

 - Also provides an editor for the extra Open311 fields on contacts.
 - Adds .btn--small class for small buttons

Fixes #1743.

9 files changed, 195 insertions, 30 deletions

diff --git a/templates/web/base/admin/category_edit.html b/templates/web/base/admin/category_edit.html
index ea3fbaa79..7ae4e59b4 100644
--- a/templates/web/base/admin/category_edit.html
+++ b/templates/web/base/admin/category_edit.html
@@ -21,31 +21,6 @@
 
 [% INCLUDE 'admin/contact-form.html' %]
 
-[% IF contact.extra %]
-<h2>[% loc('Extra data:') %] </h2>
-<dl>
-  [% FOR pair IN contact.get_extra_metadata %]
-    <dt>[% pair.key %]</dt> <dd>[% pair.value %]</dd>
-  [% END %]
-</dl>
-<ul>
-  [% FOR meta IN contact.get_metadata_for_input %]
-    <li>
-        [% meta.order %], <code>[% meta.code %]</code>, [% meta.datatype %],
-        [% meta.required == 'true' ? loc('required') : loc('optional') %]
-        <br><small>[% meta.description %]</small>
-      [% IF meta.variable != 'false' AND meta.exists('values') %]
-        <ul>
-          [% FOR option IN meta.values %]
-            <li>[% option.name %] <small>([% option.key %])</small></li>
-          [% END %]
-        </ul>
-      [%- END %]
-    </li>
-  [%- END %]
-</ul>
-[% END %]
-
 <h2>[% loc('History') %]</h2>
 <table border="1">
     <tr>
diff --git a/templates/web/base/admin/contact-form.html b/templates/web/base/admin/contact-form.html
index 375b3eb99..1157e781e 100644
--- a/templates/web/base/admin/contact-form.html
+++ b/templates/web/base/admin/contact-form.html
@@ -137,4 +137,12 @@ as well.") %]
     <input type="hidden" name="token" value="[% csrf_token %]" >
     <input type="submit" class="btn" name="Create category" value="[% contact.in_storage ? loc('Save changes') : loc('Create category') %]" >
   </p>
+
+    <h2>[% loc('Extra data:') %] </h2>
+    <dl>
+      [% FOR pair IN contact.get_extra_metadata %]
+        <dt>[% pair.key %]</dt> <dd>[% pair.value %]</dd>
+      [% END %]
+    </dl>
+    [% INCLUDE 'admin/extra-metadata-form.html' metas=(contact.get_metadata_for_input OR []) %]
 </form>
diff --git a/templates/web/base/admin/extra-metadata-form.html b/templates/web/base/admin/extra-metadata-form.html
new file mode 100644
index 000000000..6a88a3c1e
--- /dev/null
+++ b/templates/web/base/admin/extra-metadata-form.html
@@ -0,0 +1,81 @@
+<ul class="js-metadata-items">
+  [% FOR meta IN metas.merge([{}]) %]
+    <li class="js-metadata-item [% IF loop.last %]hidden-js js-metadata-item-template[% END %]" data-index="[% loop.index %]">
+        <button class="btn btn--small js-metadata-item-remove hidden-nojs">[% loc('Remove field') %]</button>
+
+        <div class="admin-hint"><p>[% loc('The ordering of this field on the report page. Fields are shown in ascending order according to this value.') %]</p></div>
+        <label>
+            [% loc('Order') %]
+            <input name="metadata[[% loop.index %]].order" data-field-name="order" type=text value="[% meta.order | html %]">
+        </label>
+
+        <div class="admin-hint"><p>[% loc('The code used to store this field value in the database. e.g. <code>address</code> would be available as <code>problem.extra.address</code> in the templates.') %]</p></div>
+        <label>
+            [% loc('Code') %]
+            <input name="metadata[[% loop.index %]].code" data-field-name="code" type=text value="[% meta.code | html %]">
+        </label>
+
+        <div class="admin-hint"><p>[% loc('Whether the user is required to provide a value for this field.') %]</p></div>
+        <label>
+            [% loc('Required') %]
+            <input name="metadata[[% loop.index %]].required" data-field-name="required" type=checkbox [% meta.required == 'true' ? 'checked' : '' %]>
+        </label>
+
+        <div class="admin-hint"><p>[% loc('If ticked the user won’t see an input field, just the ‘Description’ text.') %]</p></div>
+        <label>
+            [% loc('Notice') %]
+            <input name="metadata[[% loop.index %]].notice" data-field-name="notice" type=checkbox [% meta.variable == 'false' ? 'checked' : '' %]>
+        </label>
+
+        <div class="admin-hint"><p>[% loc('The field name as shown to the user on the report form.') %]</p></div>
+        <label>
+            [% loc('Description') %]
+            <input name="metadata[[% loop.index %]].description" data-field-name="description" type=text value="[% meta.description | html %]">
+        </label>
+
+        <div class="admin-hint"><p>[% loc('Can be used to display extra text to the user alongside the field. The default template does not show this (<code>meta.datatype_description</code>), you must add it in <code>category_extras_fields.html</code>') %]</p></div>
+        <label>
+            [% loc('Hint') %]
+            <input name="metadata[[% loop.index %]].datatype_description" data-field-name="datatype_description" type=text value="[% meta.datatype_description | html %]">
+        </label>
+
+        <div class="admin-hint"><p>[% loc('The type of input field to show to the user. <strong>Text</strong> is a simple text field, <strong>List</strong> is a drop-down selection.') %]</p></div>
+        <label>
+            [% loc('Type') %]
+            <select name="metadata[[% loop.index %]].datatype" data-field-name="datatype" class="js-metadata-item-type">
+                <option value="string" [% meta.datatype == 'string' ? 'selected' : '' %]>[% loc('String') %]</option>
+                <option value="singlevaluelist" [% meta.datatype == 'singlevaluelist' ? 'selected' : '' %]>[% loc('List') %]</option>
+            </select>
+        </label>
+
+        <div class="js-metadata-options">
+            <div class="admin-hint"><p>[% loc('For each option, <strong>Key</strong> is the value which is stored in the database for that option and <strong>Name</strong> is the value displayed to the user.') %]</p></div>
+            [% loc('Options') %]<span class="hidden-js"> [% loc('(ignored if type is "String")') %]</span>
+            <ul>
+                [% outer_loop = loop %]
+                [% values = meta.values OR [] %]
+                [% FOREACH option IN values.merge([{}]) %]
+                [%# the .merge() call is so there's an empty one on the end %]
+                    <li class="js-metadata-option [% IF loop.last %]hidden-js js-metadata-option-template[% END %]">
+                        <label>
+                            [% loc('Key') %]
+                            <input class="js-metadata-option-key" name="metadata[[% outer_loop.index %]].values[[% loop.index %]].key" type="text" value="[% option.key | html %]">
+                        </label>
+                        <label>
+                            [% loc('Name') %]
+                            <input class="js-metadata-option-name" name="metadata[[% outer_loop.index %]].values[[% loop.index %]].name" type="text" value="[% option.name | html %]">
+                        </label>
+                        <button class="btn btn--small js-metadata-option-remove hidden-nojs">[% loc('Remove') %]</button>
+                    </li>
+                [% END %]
+                <li class="hidden-nojs">
+                    <button class="btn btn--small js-metadata-option-add">[% loc('Add option') %]</button>
+                </li>
+            </ul>
+        </div>
+    </li>
+  [%- END %]
+  <li class="hidden-nojs">
+      <button class="btn btn--small js-metadata-item-add">[% loc('Add field') %]</button>
+  </li>
+</ul>
diff --git a/templates/web/base/admin/reportextrafields/edit.html b/templates/web/base/admin/reportextrafields/edit.html
new file mode 100644
index 000000000..bc2f60ab3
--- /dev/null
+++ b/templates/web/base/admin/reportextrafields/edit.html
@@ -0,0 +1,68 @@
+[% INCLUDE 'admin/header.html' title=loc('Extra Fields') -%]
+
+<form method=post action="[% c.uri_for('', extra.id || 'new' ) %]">
+    <div class="admin-hint">
+      <p>
+        [% loc('Give this collection of fields a name. It is not shown publicly, just here in the admin.') %]
+      </p>
+    </div>
+    <p>
+        <label>
+            [% loc('Name') %]
+            <input type=text name="name" value="[% extra.name | html %]" />
+        </label>
+    </p>
+
+    [% IF cobrands.size > 1 %]
+        <div class="admin-hint">
+        <p>
+            [% loc('To limit this collection of fields to a single cobrand, select it here.') %]
+        </p>
+        </div>
+        <p>
+            <label>
+                [% loc('Cobrand') %]
+                <select name="cobrand">
+                    <option value="">[% loc('All cobrands') %]</option>
+                [% FOREACH cobrand IN cobrands %]
+                <option value="[% cobrand | html %]" [% IF cobrand == extra.cobrand %]selected[% END %]>[% cobrand | html %]</option>
+                [% END %]
+                </select>
+            </label>
+        </p>
+    [% ELSE %]
+        <input type=hidden name=cobrand value="[% extra.cobrand | html %]" />
+    [% END %]
+
+    [% IF languages.size > 1 %]
+        <div class="admin-hint">
+        <p>
+            [% loc('To limit this collection of fields to a single language, select it here.') %]
+        </p>
+        </div>
+        <p>
+            <label>
+                [% loc('Language') %]
+                <select name="language">
+                    <option value="">[% loc('All languages') %]</option>
+                    [% FOREACH lang IN languages.pairs %]
+                        <option value="[% lang.key | html %]" [% IF lang.key == extra.language %]selected[% END %]>[% lang.value.name | html %]</option>
+                    [% END %]
+                </select>
+            </label>
+        </p>
+    [% ELSE %]
+        <input type=hidden name=language value="[% extra.language | html %]" />
+    [% END %]
+    <p>
+        <label>[% loc('Fields') %]</label>
+        [% INCLUDE 'admin/extra-metadata-form.html' metas=extra.get_extra_fields %]
+    </p>
+
+    <p>
+      <input type="hidden" name="token" value="[% csrf_token %]" >
+      <input type="submit" class="btn" name="save" value="[% extra.in_storage ? loc('Save changes') : loc('Save new fields') %]">
+    </p>
+</form>
+
+[% INCLUDE 'admin/footer.html' %]
diff --git a/templates/web/base/admin/reportextrafields/index.html b/templates/web/base/admin/reportextrafields/index.html
new file mode 100644
index 000000000..14d6f60d4
--- /dev/null
+++ b/templates/web/base/admin/reportextrafields/index.html
@@ -0,0 +1,26 @@
+[% INCLUDE 'admin/header.html' title=loc('Extra Fields') -%]
+
+<table>
+    <thead>
+    <tr>
+        <th>[% loc('Name') %]</th>
+        <th>[% loc('Cobrand') %]</th>
+        <th>[% loc('Languages') %]</th>
+        <th>[% loc('Fields') %]</th>
+    </tr>
+    </thead>
+    <tbody>
+      [% FOR f IN extra_fields %]
+          <tr>
+              <td><a href="[% c.uri_for('', f.id) %]">[% f.name | html %]</a></td>
+              <td>[% f.cobrand | html %]</td>
+              <td>[% f.language | html %]</td>
+              <td>[% f.get_extra_fields.size %]</td>
+          </tr>
+      [% END %]
+    </tbody>
+</table>
+
+<a href="[% c.uri_for('', 'new') %]" class="btn">[% loc('Add extra fields') %]</a>
+
+[% INCLUDE 'admin/footer.html' %]
diff --git a/templates/web/base/report/_inspect.html b/templates/web/base/report/_inspect.html
index 91c2a8ad5..58b50a3ae 100644
--- a/templates/web/base/report/_inspect.html
+++ b/templates/web/base/report/_inspect.html
@@ -58,9 +58,9 @@
                data-defect-types='[% category_defect_types.$cat_name %]'
                data-templates='[% templates_by_category.$cat_name %]'>
               [% IF cat_name == problem.category %]
-                  [% INCLUDE 'report/new/category_extras_fields.html' %]
+                  [% INCLUDE 'report/new/category_extras_fields.html' metas=category_extras.$category %]
               [% ELSE %]
-                  [% INCLUDE 'report/new/category_extras_fields.html' report_meta='' %]
+                  [% INCLUDE 'report/new/category_extras_fields.html' metas=category_extras.$category report_meta='' %]
               [% END %]
             </p>
         [% END %]
diff --git a/templates/web/base/report/new/category_extras.html b/templates/web/base/report/new/category_extras.html
index 084dd2d93..fd2752388 100644
--- a/templates/web/base/report/new/category_extras.html
+++ b/templates/web/base/report/new/category_extras.html
@@ -15,7 +15,14 @@
         list_of_names.join( '</strong>' _ loc(' or ') _ '<strong>' )
       ); %]
     </p>
-    [% INCLUDE 'report/new/category_extras_fields.html' %]
+    [% INCLUDE 'report/new/category_extras_fields.html' metas=category_extras.$category %]
     </div>
   [%- END %]
+
+  [%- IF report_extra_fields %]
+    [% FOREACH extras IN report_extra_fields %]
+        [% cat_prefix = "extra[" _ extras.id _ "]" %]
+        [% INCLUDE 'report/new/category_extras_fields.html' metas=extras.get_extra_fields %]
+    [% END %]
+  [%- END %]
 </div>
diff --git a/templates/web/base/report/new/category_extras_fields.html b/templates/web/base/report/new/category_extras_fields.html
index 012007e06..9c2731730 100644
--- a/templates/web/base/report/new/category_extras_fields.html
+++ b/templates/web/base/report/new/category_extras_fields.html
@@ -1,4 +1,4 @@
-[%- FOR meta IN category_extras.$category %]
+[%- FOR meta IN metas %]
   [%- meta_name = meta.code -%]
 
   [% IF c.cobrand.category_extra_hidden(meta_name) %]
diff --git a/templates/web/base/report/new/category_wrapper.html b/templates/web/base/report/new/category_wrapper.html
index 0343f86e6..291f5e923 100644
--- a/templates/web/base/report/new/category_wrapper.html
+++ b/templates/web/base/report/new/category_wrapper.html
@@ -12,6 +12,6 @@
 [% END %]
 </div>
 
-[%- IF category_extras %]
+[%- IF category_extras OR report_extra_fields %]
     [% PROCESS "report/new/category_extras.html" %]
 [%- END %]