wip

Author: iamareebjamal

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,6 +1,10 @@
 import Component from '@ember/component';
 import FormMixin from 'open-event-frontend/mixins/form';
 
+function getIdentifier(name, fields) {
+  return name.toLowerCase();
+}
+
 export default Component.extend(FormMixin, {
   actions: {
     saveDraft() {
@@ -19,6 +23,18 @@ export default Component.extend(FormMixin, {
         this.set('data.event.state', 'published');
         this.sendAction('save', this.data);
       });
+    },
+    addFormField() {
+      this.data.customForms.pushObject(this.store.createRecord('custom-form', {
+        fieldIdentifier : getIdentifier(this.data.newFormField.name),
+        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

@@ -15,14 +15,19 @@ export default class AttendeeRoute extends Route.extend(CustomFormMixin) {
       val  : 'attendee'
     }];
 
+    const event = this.modelFor('events.view');
     const data = {
-      event: this.modelFor('events.view')
+      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;
   }

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

@@ -92,6 +92,18 @@
       </div>
     </div>
   {{/if}}
+  <Input id="firstname" @type="text" @value={{this.data.newFormField.name}} />
+  <UiDropdown @class="label" @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="http">text</div>
+      <div class="item" data-value="https">number</div>
+    </div>
+  </UiDropdown>
+  <button class="ui button" {{action 'addFormField'}}>Add</button>
   <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'}}>