The Open-Event-Frontend allows the event organiser to create access codes for his or her event. Access codes can be used to password protect hidden tickets reserved for sponsors, members of the press and media. This blog post explains how we have integrated access codes creation in the frontend utilising the various features of Ember JS and Semantic UI.
Create Access code component
We will be creating a separate component for creating access code. To create it we will use the following command:
ember g component forms/events/view/create-access-code
This will create the following files:
- components/forms/events/view/create-access-code.js
- templates/components/forms/events/view/create-access-code.hbs
- tests/integration/components/forms/events/view/create-access-code-test.js
Create-access-code.hbs
This file includes the handlebar syntax to design the front end of the access code component. The whole template is nested inside the Semantic UI’s form class. Some of the helpers used are as follows:
- Ember Input Helper: It has been used extensively throughout the template in order to take input from the event organizer. For e.g.:
| {{input type=‘text’ name=‘access_code’ value=data.code}} |
- Semantic Radio Button: The semantic radio button has been used in order to allow the organizer to select the state of the access-code. He/She can choose if the access-code is active or inactive.
<div class="grouped inline fields"> <label class="required">{{t 'Status'}}</label> <div class="field"> {{ui-radio current=data.isActive name='status' label='Active' value='true' onChange=(action (mut data.isActive))}} </div> <div class="field"> {{ui-radio name='status' label='Inactive' value='false' current=data.isActive onChange=(action (mut data.isActive))}} </div> </div>
- Date Time Picker: The organizer can set the validity of the access code as well. We have used date-picker and time-picker components which were already created in the project. They have been used in the following way:
<div class="fields"> <div class="wide field {{if device.isMobile 'sixteen' 'five'}}"> <label>{{t 'Valid from'}}</label> {{widgets/forms/date-picker id='start_date' value=data.validFromDate rangePosition='start'}} <div class="ui hidden divider"></div> {{widgets/forms/time-picker id='start_time' value=data.validFromTime rangePosition='start'}} </div> <div class="wide field {{if device.isMobile 'sixteen' 'five'}}"> <label>{{t 'Expires on'}}</label> {{widgets/forms/date-picker id='end_date' value=data.validTillDate rangePosition='end'}} <div class="ui hidden divider"></div> {{widgets/forms/time-picker id='end_time' value=data.validTillTime rangePosition='end'}} </div> </div>
Create-access-code.js
We use this file as the core of the component and handle the following use cases:
- Validation of the input. We show warning if something is wrong.
- Actions used by the various elements of the templates.
- Providing the link for the access-code.
- Saving the access-code.
accessCode : '', accessUrl : computed('data.code', function() { const params = this.get('router._router.currentState.routerJsState.params'); this.set('data.accessUrl', location.origin + this.get('router').urlFor('public', params['events.view'].event_id, { queryParams: { access_code: this.get('data.code') } })) ; return this.get('data.accessUrl'); }), actions: { toggleAllSelection(allTicketTypesChecked) { this.set('allTicketTypesChecked', allTicketTypesChecked); if (allTicketTypesChecked) { this.set('data.tickets', this.get('data.event.tickets').slice()); } }, updateTicketSelections(newSelection) { if (newSelection.length === this.get('data.event.tickets').length) { this.set('allTicketTypesChecked', true); } else { this.set('allTicketTypesChecked', false); } }, submit(data) { this.onValid(() => { data.save() .then(() => { this.get('notify').success(this.get('l10n').t('Access code has been successfully created.')); this.get('router').transitionTo('events.view.tickets.access-codes'); }) .catch(() => { this.get('notify').error(this.get('l10n').t('An unexpected error has occurred. Access code cannot be created.')); }); }); } }
Create-access-code-test.js
We can specify the tests in order to test the compatibility of the component here. For now, we will just write a simple test which checks if the component is rendered or not.
import { module, test } from 'qunit'; import { setupTest } from 'ember-qunit'; module('Unit | Controller | events/view/tickets/access codes/create', function(hooks) { setupTest(hooks); test('it exists', function(assert) { let controller = this.owner.lookup('controller:events/view/tickets/access-codes/create'); assert.ok(controller); }); });
Now that we are done, setting up our component, we just need to add it in our application. We can achieve that using the following:
| {{forms/events/view/create-access-code data=model}} |
The model passed to the component is fetched from the create-access-code.js file.
References
- Semantic-forms: https://semantic-ui.com/collections/form.html
- Ember components: https://guides.emberjs.com/release/components/defining-a-component/