Skip to content

Commit

Permalink
Added Pagination in My Badges (#1151)
Browse files Browse the repository at this point in the history
  • Loading branch information
ParthS007 authored and yashLadha committed Jun 30, 2018
1 parent e4b544d commit 20203d2
Show file tree
Hide file tree
Showing 7 changed files with 336 additions and 310 deletions.
44 changes: 44 additions & 0 deletions frontend/app/components/user-component/my-badges.js
@@ -1,4 +1,48 @@
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() {
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() {
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');
}
}
}
});
7 changes: 7 additions & 0 deletions frontend/app/controllers/my-badges.js
@@ -0,0 +1,7 @@
import Controller from '@ember/controller';
import Ember from 'ember';

const { inject } = Ember;

export default Controller.extend({
});
16 changes: 14 additions & 2 deletions frontend/app/routes/my-badges.js
@@ -1,7 +1,19 @@
import Route from '@ember/routing/route';

import Ember from 'ember';

const { set } = Ember;

export default Route.extend({
model() {
return this.get('store').findAll('my-badges');
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);
}
});
64 changes: 28 additions & 36 deletions frontend/app/templates/components/user-component/my-badges.hbs
@@ -1,26 +1,21 @@
<div class="my-badge">
{{#if model.length}}
<div class="ui pointing menu">
<div class="active item">My Badges</div>
<div class="right menu">
{{#ui-dropdown class='item' action='hide'}}
<div>Sort By </div>&nbsp;
<i class="sort icon"></i>
<div class="menu profile-dropdown-menu">
<a class="item">First Created</a>
<a class="item">Recently Created</a>
</div>
{{/ui-dropdown}}
</div>
<div class="ui secondary pointing menu">
<a class="active item">
My Badges
</a>
</div>
<div class="ui bottom attached active tab segment">
<div class="ui segment">
{{#each model as |badge|}}
<div class="ui raised card">
<div class="ui basic orange card">
<div class="content">
<div class="header">Badge</div>
<div class="header">
Badge
</div>
</div>
<div class="content">
<h4 class="ui header">Badge Details:</h4>
<h4 class="ui header">
Badge Details:
</h4>
<div class="ui small feed">
<div class="event">
<div class="content">
Expand Down Expand Up @@ -52,34 +47,31 @@
</div>
</div>
</div>
<div class="ui bottom attached button">
<div class="ui bottom attached basic orange button">
<i class="download icon"></i>
<a href="{{badge.download_link}}">Download Badge</a>
<a href="{{badge.download_link}}">
Download Badge
</a>
</div>
</div>
{{/each}}
</div>
<div class="ui centered grid">
<div class="computer only row">
<div class="column"></div>
</div>
<div class="six wide tablet eight wide computer column">
<div class="ui menu">
<div class="ui pagination menu">
<a class="active item">
1
</a>
<div class="right menu">
<div class="disabled item">
...
<div class="ui horizontal divider"></div>
<div class="ui grid">
<div class="row">
<div class="column">
<div onclick={{action 'prevPage'}}>
<i class="angle left icon"></i>
</div>
</div>
<div class="column">
<div onclick={{action 'nextPage'}}>
<i class="angle right icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
{{else}}
{{else}}
<h2>Looks like you've not generated any badges yet!</h2>
<h3>Click <a href="{{href-to 'create-badges'}}">here</a> to generate some badges!</h3>
{{/if}}
</div>

0 comments on commit 20203d2

Please sign in to comment.