Implementing Accepting and Rejecting Proposals in Open Event Frontend
This blog post will illustrate how to add buttons to accept and reject proposal and making them functional. Sessions tab in event dashboard communicates with the following APIs of Open Event Server.
- GET /v1/sessions
- PATCH /v1/sessions
What is meant by accepting or rejecting a session in open event?
Sessions are part of event which include one or many speakers. Speakers can propose one or many sessions for a event. Now it is duty of organizer to accept some proposals and reject others. Open event provides two options to accept or reject a proposal i.e. with email or without email.
For this we need to send a key value pair which includes whether we want to send email or not along with other parameters which include current state of session and other important properties. A typical request to alter state of session looks like this.
{ "data": { "attributes": { "title": "Micropython Session", "level": 1, "starts-at": "2017-06-01T10:00:00.500127+00:00", "ends-at": "2017-06-01T11:00:00.500127+00:00", "created-at": "2017-05-01T01:24:47.500127+00:00", "is-mail-sent": false, "send-email": true, }, "type": "session", "id": "1" } }
Implementing in frontend
We start by providing two buttons for a pending session. One to accept the session and other to reject the session.
On clicking either accept or reject button we get two options to choose i.e. with email and without email. Depending on what organizer chooses a action is fired from the template and sent to controller. Template code for these buttons looks something like this.
class=“ui vertical compact basic buttons”> {{#unless (eq record.state ‘accepted’)}} {{#ui-dropdown class=‘ui icon bottom right pointing dropdown button’}} class=“green checkmark icon”>
class=“menu”>
</div> {{/ui-dropdown}} {{/unless}} {{#unless (eq record.state 'rejected')}} {{#ui-dropdown class='ui icon bottom right pointing dropdown button'}} <i class="red remove icon"></i>
class=“menu”>
</div> {{/ui-dropdown}} {{/unless}} </div>
We can see that for with email button we trigger accept proposal button with two parameters record and true. Record contains the instance of session and true signifies that we are sending email. Similar is the case with without email button. Controller for these actions looks something like this.
acceptProposal(session, sendEmail) { session.set('sendEmail', sendEmail); session.set('state', 'accepted'); session.set('isMailSent', sendEmail); this.set('isLoading', true); session.save() .then(() => { sendEmail ? this.notify.success(this.get('l10n').t('Session has been accepted and speaker has been notified via email.')) : this.notify.success(this.get('l10n').t('Session has been accepted')); }) .catch(() => { this.notify.error(this.get('l10n').t('An unexpected error has occurred.')); }) .finally(() => { this.set('isLoading', false); }); }, rejectProposal(session, sendEmail) { session.set('sendEmail', sendEmail); session.set('state', 'rejected'); session.set('isMailSent', sendEmail); this.set('isLoading', true); session.save() .then(() => { sendEmail ? this.notify.success(this.get('l10n').t('Session has been rejected and speaker has been notified via email.')) : this.notify.success(this.get('l10n').t('Session has been rejected')); }) .catch(() => { this.notify.error(this.get('l10n').t('An unexpected error has occurred.')); }) .finally(() => { this.set('isLoading', false); }); }
For accepting with email we set sendEmail field to true and send the query to server. Similarly for reject proposal action we follow same procedure.
Conclusion
Implementing buttons like these, and defining proper actions like these we are able to change the state of session with options to send email or not.
Resources
- Open Event Server API Docs for sessions: https://open-event-api-dev.herokuapp.com/#sessions
- Link to PR showing its implementation: https://github.com/fossasia/open-event-frontend/pull/1266
You must be logged in to post a comment.