# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1468309691 -7200
# Node ID 69a9f3687902e942a9d9d7ece8d22673bbde9978
# Parent  ac6928e86d14ce0834bf58567dde34408cfe578c
Scrolling system in thematiques: more button and append data on scroll

diff -r ac6928e86d14 -r 69a9f3687902 cms/app-client/app/components/sorting-component.js
--- 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);
         }
 
     }
diff -r ac6928e86d14 -r 69a9f3687902 cms/app-client/app/controllers/tabs/thematiques.js
--- 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({
+
 });
diff -r ac6928e86d14 -r 69a9f3687902 cms/app-client/app/routes/tabs/thematiques.js
--- 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');            
+        }
+        
     }
 
 });
diff -r ac6928e86d14 -r 69a9f3687902 cms/app-client/app/templates/components/sorting-component.hbs
--- 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
diff -r ac6928e86d14 -r 69a9f3687902 cms/app-client/app/templates/tabs/thematiques.hbs
--- 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
diff -r ac6928e86d14 -r 69a9f3687902 cms/app-client/mirage/serializers/theme.js
--- 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();
     }