Merge pull request #41 from apostrophecms/feature/form-group-edit-exp…

…erience

form group as area not array

i18n/en.json

@@ -61,11 +61,10 @@
   "group": "Group",
   "groupAdvanced": "Advanced",
   "groupAfterSubmission": "After submission",
+  "groupContents": "Group Contents",
+  "groupContentsHelp": "Contains all form widgets except groups",
   "groupForm": "Form",
-  "groupGroups": "Groups",
-  "groupGroupsContents": "Groups Contents",
-  "groupGroupsContentsHelp": "Contains all form widgets excepts groups",
-  "groupGroupsLabel": "Group Label",
+  "groupLabel": "Group Label",
   "notFoundForm": "No matching form was found",
   "queryParamKey": "Key",
   "queryParamLimit": "Limit Saved Parameter Value Length (characters)",

index.js

@@ -286,7 +286,7 @@ module.exports = {
             data,
             submission
           });
-          return self.db.insert(submission);
+          return self.db.insertOne(submission);
         },
         async emailSubmission (req, form, data) {
           await self.sendEmailSubmissions(req, form, data);

modules/@apostrophecms/form-group-widget/index.js

@@ -18,29 +18,18 @@ module.exports = {
 
     return {
       add: {
-        groups: {
-          label: 'aposForm:groupGroups',
-          type: 'array',
-          required: true,
-          titleField: 'label',
-          inline: true,
-          fields: {
-            add: {
-              label: {
-                label: 'aposForm:groupGroupsLabel',
-                type: 'string',
-                required: true
-              },
-              contents: {
-                label: 'aposForm:groupGroupsContents',
-                help: 'aposForm:groupGroupsContentsHelp',
-                type: 'area',
-                contextual: false,
-                options: {
-                  widgets: formWidgets
-                }
-              }
-            }
+        label: {
+          label: 'aposForm:groupLabel',
+          type: 'string',
+          required: true
+        },
+        contents: {
+          label: 'aposForm:groupContents',
+          help: 'aposForm:groupContentsHelp',
+          type: 'area',
+          contextual: false,
+          options: {
+            widgets: formWidgets
           }
         }
       }

modules/@apostrophecms/form-group-widget/views/widget.html

@@ -1,13 +1,9 @@
+{% set widget = data.widget %}
 {% set prependIfPrefix = apos.modules['@apostrophecms/form'].prependIfPrefix %}
 
-<div data-apos-form-groups class="apos-form-groups {{ prependIfPrefix('__groups') }}">
-  {% for group in data.widget.groups %}
-    <fieldset
-      class="apos-form-group {{ prependIfPrefix('__group') }}"
-      data-index="{{ loop.index }}"
-    >
-      <legend>{{ group.label }}</legend>
-      {% area group, 'contents' %}
-    </fieldset>
-  {% endfor %}
-</div>
+<fieldset
+  class="apos-form-group {{ prependIfPrefix('__group') }}"
+>
+  <legend>{{ widget.label }}</legend>
+  {% area widget, 'contents' %}
+</fieldset>

test/lib/file-utils.js

@@ -23,7 +23,7 @@ module.exports = {
 
     const db = await apos.db.collection('aposAttachments');
 
-    db.remove({});
+    db.deleteMany({});
   },
   insert: async function (filename, apos) {
     return apos.attachment.insert(apos.task.getReq(), {

test/test.js

@@ -1,4 +1,4 @@
-const assert = require('assert');
+const assert = require('assert').strict;
 const testUtil = require('apostrophe/test-lib/test');
 const fileUtils = require('./lib/file-utils');
 const FormData = require('form-data');
@@ -10,8 +10,8 @@ describe('Forms module', function () {
 
   this.timeout(25000);
 
-  after(async function () {
-    testUtil.destroy(apos);
+  after(function () {
+    return testUtil.destroy(apos);
   });
 
   // Existence
@@ -25,7 +25,8 @@ describe('Forms module', function () {
     '@apostrophecms/form-file-field-widget': {},
     '@apostrophecms/form-boolean-field-widget': {},
     '@apostrophecms/form-conditional-widget': {},
-    '@apostrophecms/form-divider-widget': {}
+    '@apostrophecms/form-divider-widget': {},
+    '@apostrophecms/form-group-widget': {}
   };
 
   let forms;
@@ -38,6 +39,7 @@ describe('Forms module', function () {
   let booleanWidgets;
   let conditionalWidgets;
   let dividerWidgets;
+  let groupWidgets;
 
   it('should be a property of the apos object', async function () {
     apos = await testUtil.create({
@@ -56,7 +58,22 @@ describe('Forms module', function () {
             }
           }
         },
-        '@apostrophecms/form': {},
+        '@apostrophecms/form': {
+          options: {
+            formWidgets: {
+              '@apostrophecms/form-text-field': {},
+              '@apostrophecms/form-textarea-field': {},
+              '@apostrophecms/form-select-field': {},
+              '@apostrophecms/form-radio-field': {},
+              '@apostrophecms/form-checkboxes-field': {},
+              '@apostrophecms/form-file-field': {},
+              '@apostrophecms/form-boolean-field': {},
+              '@apostrophecms/form-conditional': {},
+              '@apostrophecms/form-divider': {},
+              '@apostrophecms/form-group': {}
+            }
+          }
+        },
         ...formWidgets
       }
     });
@@ -73,6 +90,7 @@ describe('Forms module', function () {
     booleanWidgets = apos.modules[`${aposForm}-boolean-field-widget`];
     conditionalWidgets = apos.modules[`${aposForm}-conditional-widget`];
     dividerWidgets = apos.modules[`${aposForm}-divider-widget`];
+    groupWidgets = apos.modules[`${aposForm}-group-widget`];
 
     assert(forms.__meta.name === `${aposForm}`);
     assert(widgets.__meta.name === `${aposForm}-widget`);
@@ -85,6 +103,7 @@ describe('Forms module', function () {
     assert(booleanWidgets.__meta.name === `${aposForm}-boolean-field-widget`);
     assert(conditionalWidgets.__meta.name === `${aposForm}-conditional-widget`);
     assert(dividerWidgets.__meta.name === `${aposForm}-divider-widget`);
+    assert(groupWidgets.__meta.name === `${aposForm}-group-widget`);
   });
 
   // Submissions collection exists.
@@ -204,25 +223,30 @@ describe('Forms module', function () {
     assert(form.title === 'First test form');
   });
 
-  it('should have the same widgets in conditional widget areas', function () {
-    const formWidgets = forms.schema.find(field => {
-      return field.name === 'contents';
-    }).options.widgets;
+  it('should have the same widgets in conditional widget area as the main form widgets area, execpt conditional itself', function () {
+    const formWidgets = {
+      ...forms.schema.find(field => field.name === 'contents').options.widgets
+    };
 
-    // Main form widgets has the conditional widget as an option.
-    assert(formWidgets['@apostrophecms/form-conditional']);
+    const conditionalWidgetWidgets = conditionalWidgets.schema.find(field => field.name === 'contents').options.widgets;
 
-    delete formWidgets['@apostrophecms/form-conditional'];
+    const actual = (Object.keys(formWidgets)).sort();
+    const expected = (Object.keys(conditionalWidgetWidgets).concat('@apostrophecms/form-conditional')).sort();
 
-    const condWidgets = conditionalWidgets.schema.find(field => {
-      return field.name === 'contents';
-    }).options.widgets;
+    assert.deepEqual(actual, expected);
+  });
 
-    assert(Object.keys(formWidgets).length === Object.keys(condWidgets).length);
+  it('should have the same widgets in group widget area as the main form widgets area, execpt group itself', function () {
+    const formWidgets = {
+      ...forms.schema.find(field => field.name === 'contents').options.widgets
+    };
 
-    for (const widget in condWidgets) {
-      assert(formWidgets[widget]);
-    }
+    const groupWidgetWidgets = groupWidgets.schema.find(field => field.name === 'contents').options.widgets;
+
+    const actual = (Object.keys(formWidgets)).sort();
+    const expected = (Object.keys(groupWidgetWidgets).concat('@apostrophecms/form-group')).sort();
+
+    assert.deepEqual(actual, expected);
   });
 
   // Submitting gets 200 response