[#558] Fix display of data contribution categories

Changes:

* Categories without groups appear in a group of their own name
* (Admin) Display "Group / category" instead of just category
* "Other" category is shown with an explanation
* Escape PostgreSQL double quotes on display

handlers/contribute-data.js

@@ -24,11 +24,26 @@ function _getContributeData(request, reply) {
         s3: s3.getSignedFormFields(additionalConditions),
         maxUploadSize: s3.MAX_UPLOAD_SIZE,
         redirectTo: request.headers.referer,
-        categories: categories.toJSON(),
+        categories: _mangleCategories(categories.toJSON()),
       })
     ));
 }
 
+function _mangleCategories(categories) {
+  // Dodging function param reassign by creating a working copy
+  const result = [];
+  categories.forEach((category, index) => {
+    result[index] = category;
+    if (!category.group) {
+      result[index].group = category.name;
+    }
+    if (category.name === 'Other') {
+      result[index].name = 'Other (please describe in the comments section)';
+    }
+  });
+  return result;
+}
+
 function _getDataUrl(s3Response) {
   if (s3Response === undefined) {
     return undefined;

test/handlers/contribute-data.js

@@ -21,7 +21,7 @@ describe('contribute-data handler', () => {
     it('adds the ordered data categories to the context', () => {
       let categories;
 
-      return factory.createMany('dataCategory', [{ name: 'z' }, { name: 'a' }])
+      return factory.createMany('dataCategory', [{ name: 'x', group: 'y' }, { name: 'a', group: 'b' }])
         .then(() => new DataCategory().orderBy('name').fetchAll())
         .then((_categories) => (categories = _categories))
         .then(() => server.inject('/contribute-data'))
@@ -31,6 +31,34 @@ describe('contribute-data handler', () => {
         });
     });
 
+    it('changes empty group names to match category name', () => {
+      const result = [
+        { group: 'Category' },
+      ];
+
+      factory.cleanup();
+      return factory.createMany('dataCategory', [{ name: 'Category' }])
+        .then(() => new DataCategory().orderBy('name').fetchAll())
+        .then(() => server.inject('/contribute-data'))
+        .then((response) => {
+          should(response.request.response.source.context.categories[0].group).equal(result[0].group);
+        });
+    });
+
+    it('changes the display name of "Other" category', () => {
+      const result = [
+        { name: 'Other (please describe in the comments section)' },
+      ];
+
+      factory.cleanup();
+      return factory.createMany('dataCategory', [{ name: 'Other' }])
+        .then(() => new DataCategory().orderBy('name').fetchAll())
+        .then(() => server.inject('/contribute-data'))
+        .then((response) => {
+          should(response.request.response.source.context.categories[0].name).equal(result[0].name);
+        });
+    });
+
     it('adds S3\'s signed form fields to the context', () => server.inject('/contribute-data')
         .then((response) => {
           const context = response.request.response.source.context;

views/admin/data-contributions.html

@@ -59,6 +59,9 @@
         {% endif %}
       </td>
       <td>
+        {% if dataContribution.category.group %}
+          {{ dataContribution.category.group }} /
+        {% endif %}
         {{ dataContribution.category.name }}
       </td>
       <td>

views/contribute-data.html

@@ -53,9 +53,15 @@ <h2>Contribution form</h2>
     <select id="data_category_id" name="data_category_id">
       <option value="" disabled selected>Which category best describes your contribution?</option>
       {% for group, categories in  categories | sort(false, false, 'group') | groupby("group") %}
+      {% if group %}
       <optgroup label="{{ group }}">
+      {% else %}
+      <optgroup label="{{ category.name }}">
+      {% endif %}
         {% for category in categories %}
-          <option value="{{ category.id }}">{{ category.name }}</option>
+        <option value="{{ category.id }}">
+          {{ category.name | replace("''", "'") }}
+        </option>
         {% endfor %}
       </optgroup>
       {% endfor %}