This blog post will illustrate how to add a helper to orders list and add action buttons to orders list to delete and cancel an order in Open Event Frontend. To cancel or delete an order item we need to communicate to the server. The API endpoints to which we communicate are:
- PATCH /v1/orders/{order_identifier}
- DELETE /v1/orders/{orders_identifier}
We will define the action buttons in ui-table component of open event frontend. We will use the cell-actions file to define the cell buttons that will be present in cell-actions column. The following handlebars code will render the buttons on website.
//components/ui-table/cell/events/view/tickets/orders/cell-actions.hbs
class="ui vertical compact basic buttons">
{{#if (and (not-eq record.status 'cancelled') (can-modify-order record))}}
{{#ui-popup content=(t 'Cancel order') click=(action (confirm (t 'Are you sure you would like to cancel this Order?') (action cancelOrder record))) class='ui icon button' position='left center'}}
class="delete icon">
{{/ui-popup}}
{{/if}}
{{#if (can-modify-order record)}}
{{#ui-popup content=(t 'Delete order') click=(action (confirm (t 'Are you sure you would like to delete this Order?') (action deleteOrder record))) class='ui icon button' position='left center'}}
class="trash icon">
{{/ui-popup}}
{{/if}}
{{#ui-popup content=(t 'Resend order confirmation') class='ui icon button' position='left center'}}
class="mail outline icon">
{{/ui-popup}}
In above code you can see two things. First is can-modify-order which is a helper. Helper is used to simplify conditional logics which cannot be easily placed in handlebars. Second thing is action. There are two actions defined: cancelOrder and deleteOrder. We will see implementation of these later. First let’s see how we define can-modify-order helper.
In can-modify-order helper we want to return true or false in case we want cancel button and delete button to display or not respectively. We write the code of can-modify-order in helpers/can-modify-order.js file. When we want to get result from this helper we call it from handlebars file and pass any parameter that we want to use in helper. Code for can-modify-order helper is given below.
// helpers/can-modify-order.js import Helper from '@ember/component/helper'; export function canModifyOrder(params) { let [order] = params; if (order.amount !== null && order.amount > 0) { // returns false if order is paid and completed return order.status !== 'completed'; } // returns true for free ticket return true; } export default Helper.helper(canModifyOrder);
We extract the parameter and store it in order variable. We see if it satisfies our conditions we return true else false.
Now lets see how we can define actions to perform delete and cancel action on a order. We define these actions in controllers section of app. After performing suitable operation with order we call save to update modified order and destroyRecord() to delete an order. Let see the code implementation for these actions.
actions: { deleteOrder(order) { this.set('isLoading', true); order.destroyRecord() .then(() => { this.get('model').reload(); this.notify.success(this.get('l10n').t('Order has been deleted successfully.')); }) .catch(() => { this.notify.error(this.get('l10n').t('An unexpected error has occurred.')); }) .finally(() => { this.set('isLoading', false); }); }, cancelOrder(order) { this.set('isLoading', true); order.set('status', 'cancelled'); order.save() .then(() => { this.notify.success(this.get('l10n').t('Order has been cancelled successfully.')); }) .catch(() => { this.notify.error(this.get('l10n').t('An unexpected error has occurred.')); }) .finally(() => { this.set('isLoading', false); }); }
After defining these actions, buttons in the orders list start working. In this way, we can make use of helper to simplify the conditional logic inside templates and define proper actions.
Resources:
- Orders API: https://open-event-api-dev.herokuapp.com/#orders
- Tickets API: https://open-event-api-dev.herokuapp.com/#tickets
- Attendees API: https://open-event-api-dev.herokuapp.com/#attendees
- Adding Helpers: https://handlebarsjs.com/block_helpers.htm