--- a/cms/app-client/app/components/sorting-component.js Sat Jul 09 00:59:32 2016 +0200
+++ b/cms/app-client/app/components/sorting-component.js Tue Jul 12 09:48:11 2016 +0200
@@ -6,15 +6,25 @@
filterService: Ember.inject.service('filter'),
- sorting: ['label'],
- sortedThemes: Ember.computed.sort('themes', 'sorting'),
-
isAlphabetical: true,
isPopularity: Ember.computed('isAlphabetical', function() { return !this.get('isAlphabetical'); }),
minimum: Ember.computed('themes', function() { return Math.min(...this.themes.mapBy('count')); }),
maximum: Ember.computed('themes', function() { return Math.max(...this.themes.mapBy('count')); }),
+ loader: true,
+
+ themes: [],
+ themesObserver: Ember.observer('themes.@each', function() {
+ this.$('ul').on('scroll', Ember.run.bind(this, this.scrolling));
+ }),
+ scrolling: function(event) {
+ if(Ember.$(event.target).scrollTop() + Ember.$(event.target).height() > Ember.$(event.target).get(0).scrollHeight - 50) {
+ this.triggerAction({ action:'loadMore', target: this });
+ Ember.$(event.target).off('scroll');
+ }
+ },
+
actions: {
setQueryParameters: function(id) {
@@ -24,12 +34,17 @@
sortBy: function (type) {
if(type === 'alphabetical') {
this.set('isAlphabetical', true);
- this.set('sorting', ['label']);
+ this.sendAction('sort', 'alphabetical');
} else {
this.set('isAlphabetical', false);
- this.set('sorting', ['count:desc']);
+ this.sendAction('sort', 'descending');
}
- this.get('sortedThemes');
+ this.set('loader', true);
+ },
+
+ loadMore: function() {
+ this.sendAction('load');
+ this.set('loader', false);
}
}
--- a/cms/app-client/app/controllers/tabs/thematiques.js Sat Jul 09 00:59:32 2016 +0200
+++ b/cms/app-client/app/controllers/tabs/thematiques.js Tue Jul 12 09:48:11 2016 +0200
@@ -1,4 +1,5 @@
import Ember from 'ember';
export default Ember.Controller.extend({
+
});
--- a/cms/app-client/app/routes/tabs/thematiques.js Sat Jul 09 00:59:32 2016 +0200
+++ b/cms/app-client/app/routes/tabs/thematiques.js Tue Jul 12 09:48:11 2016 +0200
@@ -2,16 +2,49 @@
export default Ember.Route.extend({
- page: 0,
- limit: 40,
- sort: 'alphabetical',
+ index: 0,
+ limit: 40,
+ sort: 'alphabetical',
+
+ themes: [],
+
+ model: Ember.observer('index', function() {
+ var self = this;
+ var promise = this.store.query('theme', {
+ 'limit': this.get('limit'),
+ 'index': this.get('index'),
+ 'sort': this.get('sort')
+ });
+ promise.then(function(value) {
+ if (self.get('themes').length) {
+ value = self.get('themes').pushObjects(value.get('content'));
+ }
+ self.set('themes', value);
+ })
+ return promise;
+ }),
- model: function() {
- return this.store.query('theme', {
- 'limit': this.get('limit'),
- 'page': this.get('page'),
- 'sort': this.get('sort')
- });
+ setupController: function(controller, model) {
+ this._super(...arguments);
+ // Add ArrayProxy to template context.
+ controller.set('themes', this.get('themes'));
+ },
+
+ actions: {
+
+ setIndexQueryparams: function() {
+ this.set('index', this.get('index') + 1);
+ },
+
+ setSortQueryparams: function(sort) {
+ this.set('sort', sort);
+ this.get('themes').replaceContent(0, this.get('themes').get('content').length, null);
+ // Force property reset to trigger request.
+ this.propertyWillChange('index');
+ this.set('index', 0);
+ this.propertyDidChange('index');
+ }
+
}
});
--- a/cms/app-client/app/templates/components/sorting-component.hbs Sat Jul 09 00:59:32 2016 +0200
+++ b/cms/app-client/app/templates/components/sorting-component.hbs Tue Jul 12 09:48:11 2016 +0200
@@ -10,10 +10,9 @@
<div class="tags">
<ul>
- {{#each sortedThemes as |theme| }}
- {{#if theme.label}}
- <li {{ action 'setQueryParameters' theme.id }} class="{{ popularity theme.count minimum maximum }}">{{ theme.label }} ({{ theme.count }})</li>
- {{/if}}
- {{/each }}
+ {{#each themes as |theme|}}
+ <li {{ action 'setQueryParameters' theme.id }} class="{{ popularity theme.count minimum maximum }}">{{ theme.label }} ({{ theme.count }})</li>
+ {{/each }}
</ul>
+ {{#if loader}}<button {{ action 'loadMore' }}>More</button>{{/if}}
</div>
\ No newline at end of file
--- a/cms/app-client/app/templates/tabs/thematiques.hbs Sat Jul 09 00:59:32 2016 +0200
+++ b/cms/app-client/app/templates/tabs/thematiques.hbs Tue Jul 12 09:48:11 2016 +0200
@@ -1,4 +1,4 @@
<div id="tabs-thematiques">
{{ filtering-component themes=model }}
- {{ sorting-component themes=model }}
+ {{ sorting-component themes=model load='setIndexQueryparams' sort='setSortQueryparams' }}
</div>
\ No newline at end of file
--- a/cms/app-client/mirage/serializers/theme.js Sat Jul 09 00:59:32 2016 +0200
+++ b/cms/app-client/mirage/serializers/theme.js Tue Jul 12 09:48:11 2016 +0200
@@ -5,25 +5,26 @@
export default JSONAPISerializer.extend({
serialize: function(response, request) {
- // Remove models with no name
- response.models = response.models.filter(element => element.label);
- // Alphabetical order
- if(request.queryParams.sort === 'alphabetical') {
- response.models.sort(function(a, b) {
- var aLabel = a.label.toUpperCase();
- var bLabel = b.label.toUpperCase();
- if (aLabel < bLabel) return -1;
- if (aLabel > bLabel) return 1;
- return 0;
- });
- // Descending order
- } else if(request.queryParams.sort === 'descending') {
- response.models.sort(function(a, b) {
- return b.count - a.count;
- });
- }
- var index = request.queryParams.page * request.queryParams.limit;
- var slice = response.models.slice(index, index + request.queryParams.limit);
+ // Remove models with no name
+ response.models = response.models.filter(element => element.label);
+ // Alphabetical order
+ if(request.queryParams.sort === 'alphabetical') {
+ response.models.sort(function(a, b) {
+ var aLabel = a.label.toUpperCase();
+ var bLabel = b.label.toUpperCase();
+ if (aLabel < bLabel) return -1;
+ if (aLabel > bLabel) return 1;
+ return 0;
+ });
+ // Descending order
+ } else if(request.queryParams.sort === 'descending') {
+ response.models.sort(function(a, b) {
+ return b.count - a.count;
+ });
+ }
+ var begin = parseInt(request.queryParams.index * request.queryParams.limit);
+ var end = parseInt(begin + (request.queryParams.limit - 1));
+ var slice = response.models.slice(begin, end);
return _(slice).map((theme) => { return [theme.id, {count: theme.count, label: theme.label}];}).object().value();
}