The Open-Event-Frontend allows the event organiser to create tickets for his or her event. Other uses can buy these tickets in order to attend the event. When buying a ticket we ask for certain information from the buyer. Ideally the event organizer should get to choose what information they want to ask from the buyer. This blog post goes over the implementation of the attendee form builder in the Open Event Frontend.
Information to Collect
The event organizer can choose what details to ask from the order buyer. In order to specify the choices, we present a table with the entries of allowed fields that the organizer can ask for. Moreover there is an option to mark the field as required and hence making it compulsory for the order buyer to add that information in order to buy the tickets.
Route
The route is mainly responsible for fetching the required custom forms.
async model() {
let filterOptions = [{
name : 'form',
op : 'eq',
val : 'attendee'
}];
let data = {
event: this.modelFor('events.view')
};
data.customForms = await data.event.query('customForms', {
filter : filterOptions,
sort : 'id',
'page[size]' : 50
});
return data;
}
If they don’t exist then we create them in afterModel hook. We check if the size of the list of custom forms sent from the server is 3 or not. If it is 3 then we create the additional custom forms for the builder. Upon creating an event, the server automatically creates 3 custom forms for the builder. These 3 forms are firstName, lastName and email.
afterModel(data) {
/**
* Create the additional custom forms if only the compulsory forms exist.
*/
if (data.customForms.length === 3) {
let customForms = A();
for (const customForm of data.customForms ? data.customForms.toArray() : []) {
customForms.pushObject(customForm);
}
const createdCustomForms = this.getCustomAttendeeForm(data.event);
for (const customForm of createdCustomForms ? createdCustomForms : []) {
customForms.pushObject(customForm);
}
data.customForms = customForms;
}
}
Complete source code for reference can be found here.
Component Template
The component template for the form builder is supposed to show the forms and other options to the user in a presentable manner. Due to pre-existing components for handling custom forms, the template is extremely simple. We just loop over the list of custom forms and present the event organizer with a table comprising of the forms. Apart from the forms the organizer can specify the order expiry time. Lastly we present a save button in order to save the changes.
<form class="ui form {{if isLoading 'loading'}}" {{action 'submit' data on='submit'}} autocomplete="off"> <h3 class="ui dividing header"> <i class="checkmark box icon"></i> <div class="content"> {{t 'Information to Collect'}} </div> </h3> <div class="ui two column stackable grid"> <div class="column"> <table class="ui selectable celled table"> <thead> <tr> {{#if device.isMobile}} <th class="center aligned"> {{t 'Options'}} </th> {{else}} <th class="right aligned"> {{t 'Option'}} </th> <th class="center aligned"> {{t 'Include'}} </th> <th class="center aligned"> {{t 'Require'}} </th> {{/if}} </tr> </thead> <tbody> {{#each data.customForms as |field|}} <tr class="{{if field.isIncluded 'positive'}}"> <td class="{{if device.isMobile 'center' 'right'}} aligned"> <label class="{{if field.isFixed 'required'}}"> {{field.name}} </label> </td> <td class="center aligned"> {{ui-checkbox class='slider' checked=field.isIncluded disabled=field.isFixed onChange=(action (mut field.isIncluded)) label=(if device.isMobile (t 'Include'))}} </td> <td class="center aligned"> {{ui-checkbox class='slider' checked=field.isRequired disabled=field.isFixed onChange=(action (mut field.isRequired)) label=(if device.isMobile (t 'Require'))}} </td> </tr> {{/each}} </tbody> </table> </div> </div> <h3 class="ui dividing header"> <i class="options box icon"></i> <div class="content"> {{t 'Registration Options'}} </div> </h3> <div class="field"> <label>{{t 'REGISTRATION TIME LIMIT'}}</label> <div class="{{unless device.isMobile 'two wide'}} field"> {{input type='number' id='orderExpiryTime' value=data.event.orderExpiryTime min="1" max="60" step="1"}} </div> </div> <div class="ui hidden divider"></div> <button type="submit" class="ui teal submit button" name="submit">{{t 'Save'}}</button> </form>
Component
The component is responsible for saving the form. It also provides runtime validations to ensure that the entries entered in the fields of the form are valid.
import Component from '@ember/component'; import FormMixin from 'open-event-frontend/mixins/form'; export default Component.extend(FormMixin, { getValidationRules() { return { inline : true, delay : false, on : 'blur', fields : { orderExpiryTime: { identifier : 'orderExpiryTime', rules : [ { type : 'integer[1..60]', prompt : this.get('l10n').t('Please enter a valid registration time limit between 1 to 60 minutes.') } ] } } }; }, actions: { submit(data) { this.onValid(() => { this.save(data); }); } } });
References
- Ember Route: https://guides.emberjs.com/release/routing/defining-your-routes/
- Ember Components: https://guides.emberjs.com/release/components/defining-a-component/
- Semantic form validations: https://semantic-ui.com/behaviors/form.html