A Badge generator like Badgeyay must be able to generate, store and export the user data as and when needed. This blog post covers the enhancement of pagination in the frontend of badgeyay project. There are small “next” and “previous” links to toggle between pages..

Enhancing the current way of links

The problem with the pagination links was that in case of no more badges/users etc, the links would always appear on the bottom right of the table. The previous link must not appear when no previous page is there and vice versa for the next link.

Step 1 : Adding the package to package.json

Image link is the link to the user’s uploaded image on remote firebase server.

{{#if allow}} <tfoot> <tr> <th colspan=“5”> <div class=“ui right floated pagination menu”> {{#if allow_prev}} <a class=“icon item” {{action ‘prevPage‘}}> <i class=“left chevron icon”></i> </a> {{/if}} {{#if allow_next}} <a class=“icon item” {{action ‘nextPage‘}}> <i class=“right chevron icon”></i> </a> {{/if}} </div> </th> </tr> </tfoot> {{/if}}

Step 2 : Initializing the variables in setupController

Once we have added the if construct to the badgeyay frontend then we need to add the variable initialization in the setupController method in EmberJS.

setupController(controller, model) { this._super(…arguments); set(controller, ‘reports’, model); if (model.length < 9) { set(controller, ‘allow_prev’, false); set(controller, ‘allow_next’, false); set(controller, ‘allow’, false); } }

Step 3 : Implementing state changed in the controllers

Now we need to handle the situation when a user clicks the links and there are more or less links to display. This is done by checking the length of the model in the controller.

if (this.page === 1) { this.set(‘allow_prev’, false); } else { this.set(‘allow_prev’, true); } this..set(‘allow_next’, true);

Same needs to be done for all the controllers that have pagination available.

And finally we need to pass these variables in the component template. One such example is given below.

<div class=“ui grid user-grid”> <div class=“row”> <div class=“sixteen wide column”> {{badge-table badges=badges user=user session=session sendbadgeId=(action ‘deleteBadge’ badge) prevPage=(action ‘prevPage’) nextPage=(action ‘nextPage’) allow_prev=allow_prev allow_next=allow_next allow=allow}} </div> </div> </div>

Finally, we have the pagination links working as desired..

Screenshot of changes

Resources

• The Pull Request for the same : https://github.com/fossasia/badgeyay/pull/1415
• The Issue for the same : https://github.com/fossasia/badgeyay/issues/1402
• Read about Ember data : https://www.emberjs.com/api/data/classes/DS.Model.html
• Read about Handlebars :   https://guides.emberjs.com/release/templates/handlebars-basics/