Ticket Ordering and Positioning (Front-end)

I have discussed about ticket ordering and positioning in the back-end in my other post, so for this post, we will be talking about how to implement the front-end part of rearranging tickets. We will essentially do it by using compute and methods in Vue.js.

The functionality that is expected in the front-end is: the Event Organizer should be able to move the tickets up or down the order and save that position so that it gets displayed later in that particular order.

Like I said, we will use two main functions of Vue.JS for this – Compute and Methods.

Compute

We will use Computer to get the sorted list of tickets based on the position key of the tickets, and use this sorted list to display the tickets in the event editing wizard. Whenever you change the value of the position for a ticket, it automatically updates the list to sorted list again, and hence the order of ticket in the front-end also updates. To add a compute function in Vue.js, inside the new Vue() object creation, we add an attribute computed, and inside that we put all the functions that we are going to use. In our case, the function is sortedTickets. We make use of the sort function of lodash to sort the tickets array based on it’s position attribute.

Now, while showing or looping over the tickets, we loop over sortedTickets rather than the original ticket array.

Methods

Method is called when the button is clicked to move tickets up or down. Method makes the calculations to determine the values of the position of the two tickets, which are being reordered, in a single click. To add a method, we do it in a similar way to computed, but we’ll be using the methods attribute instead. The methods we have written to move tickets up or down is moveTicket.

It has 3 parameters: ticket, index, and direction. When this function call is emitted, depending on the button, the direction is either “up”or “down” while the other two parameters are the ticket properties of the particular ticket. In this function, we can check the direction, and accordingly update the value of position for the tickets involved in the arranging. As we update the position here, the UI automatically updates to show the tickets in the new order thanks to the compute function.

Finally, after all arrangement is done, the position is always saved in a hidden input field which is then passed as form data and saved in the database. This ensures that the position value can be used in other pages for showing the ticket in order.

Show Ordered Ticket

In other pages, while showing the ordered ticket, we already receive the ticket array in sorted format based on the position key. Hence, we don’t need to worry about it in the front-end as it is automatically shown in sorted order.

This post was originally posted by the author on fossasia. This version has been edited for clarity and may appear different from the original post.