Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Badgeyay also keeps record of all the badges generated by user and also gives option to directly download the previously generated badges.
All the badges appear on single page which creates problem when a user has generated lot of badges and all the badges listed on single page.
To resolve this issue and make Badgeyay more user friendly I have implemented pagination in listing badges so that if there are more number of badges, user can see the badges listed in multiple pages in my Pull Request.
To implement this, I have used actions and made the changes accordingly.
Let’s get started and understand it step by step.
Step 1:
We will use semantic icons in handlebars for changing pages.
Step 2:
I will add action for changing page to next and previous page.
// components/user-component/my-badges.js import Component from '@ember/component'; import Ember from 'ember'; const { inject } = Ember; export default Component.extend({ queryParams : ['page'], page : 1, notify : inject.service('notify'), actions : { nextPage() { // Action for Next Page let filter = {}; if (this.page > 1) { filter.page = this.page + 1; this.get('store').query('my-badges', filter) .then(records => { if (records.length > 0) { this.set('my-badges', records); this.set('page', this.page + 1); } else { this.notify.error('No More Badges found'); } }) .catch(err => { this.get('notify').error('Please try again!'); }); } else { this.notify.error('No More Badges Found'); } }, prevPage() { // Action for Previous Page let filter = {}; if (this.page - 1 > 0) { filter.page = this.page - 1; this.get('store').query('my-badges', filter) .then(records => { this.set('my-badges', records); this.set('page', this.page - 1); }) .catch(err => { this.get('notify').error('Please try again!'); }); } else { this.notify.error('No More Badges Found'); } } } });
Step 3:
Now, We have to make the query for all badges generated by a user on opening the my-badges route in Frontend.
import Route from '@ember/routing/route'; import Ember from 'ember'; const { set } = Ember; export default Route.extend({ beforeModel(transition) { this._super(...arguments); }, model(params) { let filter = {}; this.set('params', params); filter.state = 'all'; filter.page = params.page; return this.get('store').query('my-badges', filter); } });
I have implemented the pagination feature for listing all badges by the user.
Step 4:
Now run the server to see the implemented changes by following command.
My Badges Route with Pagination Feature:
Now we are done with implementing the pagination feature for listing all badges by the user.
Resources: