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. Notifications are an important part of the project. We show each registered user notifications based on their activity. This blog post goes over the implementation of the notification action buttons in the notification panel.
Notification Action Model
The model for Notification action is very simple. It has the following variables:
- Subject: The subject of the notification. E.g. ‘event’, ‘order’ etc.
- actionType: The action that can be taken by the user for that notification. E.g: ‘view’, ‘submit’.
- subjectId: The id of the subject. In case of an event, it will store the event id. Similarly for other cases.
- Link: The link to be applied to the button.
import attr from 'ember-data/attr'; import ModelBase from 'open-event-frontend/models/base'; import { belongsTo } from 'ember-data/relationships'; export default ModelBase.extend({ subject : attr('string'), actionType : attr('string'), subjectId : attr('number'), link : attr('string'), notification: belongsTo('notification') });
Action Button Title
We make use of ember computed property to determine the action button title. The title of the button depends on the subject and the actionType defined in the notification-action model. The actionType can be one of ‘download’, ‘submit’ and ‘view’. If the action type is ‘download’ and the subject is ‘invoice’, then the button title will be “Download Invoice”. Similarly, for other cases, we do the same.
buttonTitle: computed('subject', 'actionType', function() { let action; const actionType = this.get('actionType'); switch (actionType) { case 'download': action = 'Download'; break; case 'submit': action = 'Submit'; break; default: action = 'View'; } let buttonSubject; const subject = this.get('subject'); switch (subject) { case 'event-export': buttonSubject = ' Event'; break; case 'event': buttonSubject = ' Event'; break; case 'invoice': buttonSubject = ' Invoice'; break; case 'order': buttonSubject = ' Order'; break; case 'tickets-pdf': buttonSubject = ' Tickets'; break; case 'event-role': buttonSubject = ' Invitation Link'; break; case 'session': buttonSubject = ' Session'; break; case 'call-for-speakers': if (this.get('actionType') === 'submit') { buttonSubject = ' Proposal'; } else { buttonSubject = ' Call for Speakers'; } break; default: // Nothing here. } return action + buttonSubject; })
Action Button Route
The route that the button will lead to depends on the subject of the action. If the link is provided in the notification action, we simply set it on the button otherwise we use the subject to derive the route name. For e.g., if the subject is an event, then the route will be “events.view”.
/** * The route name to which the action button will direct the user to. */ buttonRoute: computed('subject', function() { const subject = this.get('subject'); let routeName; switch (subject) { case 'event-export': routeName = 'events.view'; break; case 'event': routeName = 'events.view'; break; case 'invoice': routeName = 'orders.view'; break; case 'order': routeName = 'orders.view'; break; default: // Nothing here. } return routeName; })
Template
We simply check if the link exists or not. If it does then we simply use it otherwise we use the computed button route name.
{{#if action.link}}
{{#link-to action.link tagName='button' class='ui blue button'}}
{{t action.buttonTitle}}
{{/link-to}}
{{else}}
{{#link-to action.buttonRoute action.subjectId tagName='button' class='ui blue button'}}
{{t action.buttonTitle}}
{{/link-to}}
{{/if}}
References
- Ember-computed property: https://guides.emberjs.com/release/object-model/computed-properties/
- Ember components: https://guides.emberjs.com/release/components/defining-a-component/