feat: Add attendee custom form option (#4480)

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     'plugin:ember-suave/recommended'
   ],
   env: {
+    es6: true,
     browser: true
   },
   rules: {

app/components/forms/orders/order-form.js

@@ -27,6 +27,7 @@ export default Component.extend(FormMixin, {
       attendee.set('firstname', '');
       attendee.set('lastname', '');
       attendee.set('email', '');
+      attendee.set('complexFieldValues', {});
     });
     return this.data.attendees;
   }),
@@ -471,6 +472,17 @@ export default Component.extend(FormMixin, {
       validationRules.fields[`facebook_required_${  index}`] = facebookRequiredValidation;
       validationRules.fields[`github_${  index}`] = githubValidation;
       validationRules.fields[`github_required_${  index}`] = githubRequiredValidation;
+      this.allFields.attendee.filter(field => field.isComplex && field.isRequired).forEach(field => {
+        validationRules.fields[`${field.fieldIdentifier}_required_${index}`] = {
+          rules: [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter ' + field.name)
+            }
+          ]
+        };
+      });
+
     });
     return validationRules;
   },

app/components/forms/wizard/attendee-step.js

@@ -1,7 +1,25 @@
 import Component from '@ember/component';
 import FormMixin from 'open-event-frontend/mixins/form';
+import { slugify } from 'open-event-frontend/utils/text';
+import { computed } from '@ember/object';
+
+function getIdentifier(name, fields) {
+  const fieldIdentifiers = new Set(fields.map(field => field.fieldIdentifier));
+  let identifier = slugify(name, '_');
+  while (fieldIdentifiers.has(identifier)) {
+    identifier += '_';
+  }
+
+  return identifier;
+}
 
 export default Component.extend(FormMixin, {
+  identifier: computed('data.newFormField.name', 'data.customForms', function() {
+    return getIdentifier(this.data.newFormField.name, this.data.customForms);
+  }),
+  validIdentifier: computed('data.newFormField.name', 'identifier', function() {
+    return this.identifier.trim().length > 0 && this.data.newFormField.name.trim().length > 0;
+  }),
   actions: {
     saveDraft() {
       this.onValid(() => {
@@ -19,6 +37,21 @@ export default Component.extend(FormMixin, {
         this.set('data.event.state', 'published');
         this.sendAction('save', this.data);
       });
+    },
+    addFormField() {
+      if (!this.validIdentifier) {
+        return;
+      }
+      this.data.customForms.pushObject(this.store.createRecord('custom-form', {
+        fieldIdentifier : this.identifier,
+        name            : this.data.newFormField.name,
+        form            : 'attendee',
+        type            : this.data.newFormField.type,
+        isRequired      : false,
+        isIncluded      : false,
+        event           : this.data.event
+      }));
+      this.set('data.newFormField.name', '');
     }
   }
 });

app/models/custom-form.js

@@ -8,6 +8,7 @@ export default ModelBase.extend({
   fieldIdentifier : attr('string'),
   form            : attr('string'),
   type            : attr('string', { defaultValue: 'text' }),
+  name            : attr('string'),
   isRequired      : attr('boolean', { defaultValue: false }),
   isIncluded      : attr('boolean', { defaultValue: false }),
   isFixed         : attr('boolean', { defaultValue: false }),
@@ -83,18 +84,8 @@ export default ModelBase.extend({
     ageGroup        : 'Age Group'
   },
 
-  name: computed('fieldIdentifier', 'form', function() {
-    let name = this.fieldIdentifier;
-    if (!this.isComplex) {
-      if (this.form === 'session') {
-        name = this.get(`session.${name}`);
-      } else if (this.form === 'speaker') {
-        name = this.get(`speaker.${name}`);
-      } else {
-        name = this.get(`attendee.${name}`);
-      }
-    }
-    return name;
+  identifierPath: computed('isComplex', function() {
+    return !this.isComplex ? this.fieldIdentifier : 'complexFieldValues.' + this.fieldIdentifier;
   }),
 
   isLongText: computed('type', function() {

app/routes/events/view/edit/attendee.js

@@ -9,20 +9,25 @@ export default class AttendeeRoute extends Route.extend(CustomFormMixin) {
   }
 
   async model() {
-    let filterOptions = [{
+    const filterOptions = [{
       name : 'form',
       op   : 'eq',
       val  : 'attendee'
     }];
 
-    let data = {
-      event: this.modelFor('events.view')
+    const event = this.modelFor('events.view');
+    const data = {
+      event,
+      customForms: await event.query('customForms', {
+        filter       : filterOptions,
+        sort         : 'id',
+        'page[size]' : 50
+      }),
+      newFormField: {
+        name : '',
+        type : 'text'
+      }
     };
-    data.customForms = await data.event.query('customForms', {
-      filter       : filterOptions,
-      sort         : 'id',
-      'page[size]' : 50
-    });
 
     return data;
   }
@@ -32,7 +37,7 @@ export default class AttendeeRoute extends Route.extend(CustomFormMixin) {
      * Create the additional custom forms if only the compulsory forms exist.
      */
     if (data.customForms.length === 3) {
-      let customForms = A();
+      const customForms = A();
       for (const customForm of data.customForms ? data.customForms.toArray() : []) {
         customForms.pushObject(customForm);
       }

app/routes/orders/new.js

@@ -34,7 +34,14 @@ export default class NewRoute extends Route {
       event : eventDetails,
       tickets,
       form  : await eventDetails.query('customForms', {
-        'page[size]' : 50,
+        filter: [
+          {
+            name : 'form',
+            op   : 'eq',
+            val  : 'attendee'
+          }
+        ],
+        'page[size]' : 0,
         sort         : 'id'
       })
     };

app/templates/components/forms/orders/order-form.hbs

@@ -73,13 +73,13 @@
                   {{#if (and this.sameAsBuyer (eq index 0) (or (eq field.fieldIdentifier 'firstname') (eq field.fieldIdentifier 'lastname') (eq field.fieldIdentifier 'email')))}}
                     <Input
                       @type={{field.type}}
-                      @value={{mut (get holder field.fieldIdentifier)}}
+                      @value={{mut (get holder field.identifierPath)}}
                       @name={{if field.isRequired (concat field.fieldIdentifier "_required_" index) (concat field.fieldIdentifier "_" index)}}
                       @readonly="" />
                   {{else}}
                     <Input
                       @type={{field.type}}
-                      @value={{mut (get holder field.fieldIdentifier)}}
+                      @value={{mut (get holder field.identifierPath)}}
                       @name={{if field.isRequired (concat field.fieldIdentifier "_required_" index) (concat field.fieldIdentifier "_" index)}} />
                   {{/if}}
                 {{/if}}

app/templates/components/forms/wizard/attendee-step.hbs

@@ -46,6 +46,9 @@
                 <th class="right aligned">
                   {{t 'Option'}}
                 </th>
+                <th class="center aligned">
+                  {{t 'Type'}}
+                </th>
                 <th class="center aligned">
                   {{t 'Include'}}
                 </th>
@@ -63,6 +66,9 @@
                     {{field.name}}
                   </label>
                 </td>
+                <td class="center aligned">
+                  {{field.type}}
+                </td>
                 <td class="center aligned">
                   <UiCheckbox
                     @class="slider"
@@ -86,6 +92,27 @@
       </div>
     </div>
   {{/if}}
+  <div class="ui hidden divider"></div>
+  <h3 class="ui dividing header">
+    <i class="checkmark box icon"></i>
+    <div class="content">
+      {{t 'Add Custom Form Field'}}
+    </div>
+  </h3>
+  <div class="ui action input">
+    <Input type="text" placeholder="Field Name" @value={{this.data.newFormField.name}} />
+    <UiDropdown class="ui selection dropdown" @selected={{this.data.newFormField.type}} @onChange={{action (mut this.data.newFormField.type)}}>
+      <div class="default text">
+        {{ this.data.newFormField.type}}
+      </div>
+      <i class="dropdown icon"></i>
+      <div class="menu">
+        <div class="item" data-value="text">Text</div>
+        <div class="item" data-value="number">Number</div>
+      </div>
+    </UiDropdown>
+    <button class="ui button" {{action 'addFormField'}} disabled={{not this.validIdentifier}}>Add</button>
+  </div>
   <div class="spacer-50"></div>
   <div class="{{if this.device.isMobile 'mini four' 'right floated large'}} ui fields buttons">
     <button class="ui three field left labeled icon button {{if this.isLoading 'disabled'}}" type="button" {{action 'move' 'backwards'}}>

app/utils/text.ts

@@ -0,0 +1,6 @@
+export function slugify(string: string, sep: string = '-'): string {
+    return string.toLowerCase()
+        .replace(/[^\w\s-]/g, '') // remove non-word [a-z0-9_], non-whitespace, non-hyphen characters
+        .replace(/[\s_-]+/g, sep) // swap any length of whitespace, underscore, hyphen characters with a single -
+        .replace(/^-+|-+$/g, ''); // remove leading, trailing -
+}

tests/unit/utils/text-test.ts

@@ -0,0 +1,10 @@
+import { slugify } from 'open-event-frontend/utils/text';
+import { module, test } from 'qunit';
+
+module('Unit | Text | Slugify', function() {
+  test('test slugify', function(assert) {
+    assert.equal(slugify('Hello World'), 'hello-world');
+    assert.equal(slugify('Name and Age', '_'), 'name_and_age');
+    assert.equal(slugify('What is Suo Moto?'), 'what-is-suo-moto');
+  });
+});