--- a/cms/app-client/app/routes/tabs/thematiques.js	Tue Dec 13 23:30:54 2016 +0100
+++ b/cms/app-client/app/routes/tabs/thematiques.js	Fri Dec 16 17:43:07 2016 +0100
@@ -3,64 +3,68 @@
 
 export default Ember.Route.extend({
 
-    player: Ember.inject.service(),
-    filter: Ember.inject.service(),
+  player: Ember.inject.service(),
+  filter: Ember.inject.service(),
 
-    index: 0,
-    limit: 40,
-    sort: 'alphabetical',
+  index: 0,
+  limit: 40,
+  sort: 'alphabetical',
+  isFetching: false,
 
-    themes: [],
+  themes: null,
+  total: 0,
 
-    model: Ember.observer('index', function() {
-        var self = this;
-        var filterQueryParams = _.clone(this.get('filter').get('queryParamsValues'));
-        var promise = this.store.query('theme', _.merge(filterQueryParams, {
-            '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() {
+    var filterQueryParams = _.clone(this.get('filter').get('queryParamsValues'));
+    var promise = this.get('store').query('theme', _.merge(filterQueryParams, {
+      'limit': this.get('limit'),
+      'index': this.get('index'),
+      'sort': this.get('sort')
+    }));
+    promise.then(response => {
+      console.log("MODEL", response, response.get('content'), response.get('meta').total);
+      this.set('themes', response.get('content'));
+      this.set('total', response.get('meta').total);
+    });
+    return promise;
+  },
+
+  activate: function () {
+    this.get('player').set('window', false);
+  },
 
-    setupController: function(controller) {
-        this._super(...arguments);
-        controller.set('themes', this.get('themes'));
+  actions: {
+
+    loadMore: function() {
+      if(this.get('isFetching') || (this.get('themes').length === this.get('total'))) {
+        return;
+      }
+      this.set('isFetching', true);
+      this.set('index', this.get('index') + 1);
+      var filterQueryParams = _.clone(this.get('filter').get('queryParamsValues'));
+      this.get('store').query('theme', _.merge(filterQueryParams, {
+        'limit': this.get('limit'),
+        'index': this.get('index'),
+        'sort': this.get('sort')
+      })).then(response => { // success
+        this.get('themes').pushObjects(response.get('content'));
+        this.set('isFetching', false);
+      }, () => { // fail
+        this.set('isFetching', false);
+      });
     },
 
-    deactivate: function () {
-        this.set('themes', []);
-    },
-
-    activate: function() {
-        this.get('player').set('window', false);
+    resetIndexQueryParams: function () {
+      this.set('index', 0);
+      this.refresh();
     },
 
-    actions: {
-
-        setIndexQueryparams: function() {
-            this.set('index', this.get('index') + 1);
-        },
-
-        setSortQueryparams: function(sort) {
-            this.set('sort', sort);
-            this.get('themes').get('content').clear();
-            if(this.get('index') === 0) {
-                // Force property reset to trigger request
-                this.propertyWillChange('index');
-                this.set('index', 0);
-                this.propertyDidChange('index');
-            } else {
-                this.set('index', 0);
-            }
-        }
-
+    setSortQueryparams: function (sort) {
+      this.set('sort', sort);
+      this.set('index', 0);
+      this.refresh();
     }
 
+  }
+
 });