words now displaying in 3 columns

vipra-ui/app/html/topics/index.html

@@ -6,4 +6,6 @@
   <li ng-repeat="topic in topics">
     <a ui-sref="topics.show({id: topic.id})">{{topic.name}}</a>
   </li>
-</ul>
\ No newline at end of file
+</ul>
+
+<pagination total="topicsMeta.total" page="page" limit="limit" change="change"/>
\ No newline at end of file

vipra-ui/app/html/words/index.html

@@ -2,8 +2,28 @@
   Found <span ng-bind="wordsMeta.total"></span> words in the database <query-time/>.
 </p>
 
-<ul class="list-unstyled">
-  <li ng-repeat="word in words">
-    <a ui-sref="words.show({id: word.id})">{{word.id}}</a>
-  </li>
-</ul>
\ No newline at end of file
+<div class="row">
+  <div class="col-md-4">
+    <ul class="list-unstyled">
+      <li ng-repeat="word in words.slice(0,100)">
+        <a ui-sref="words.show({id: word.id})">{{word.id}}</a>
+      </li>
+    </ul>
+  </div>
+  <div class="col-md-4">
+    <ul class="list-unstyled">
+      <li ng-repeat="word in words.slice(100,200)">
+        <a ui-sref="words.show({id: word.id})">{{word.id}}</a>
+      </li>
+    </ul>
+  </div>
+  <div class="col-md-4">
+    <ul class="list-unstyled">
+      <li ng-repeat="word in words.slice(200,300)">
+        <a ui-sref="words.show({id: word.id})">{{word.id}}</a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<pagination total="wordsMeta.total" page="page" limit="limit" change="change"/>
\ No newline at end of file

vipra-ui/app/js/controllers.js

@@ -81,8 +81,8 @@
 
     $scope.change = function(page) {
       ArticleFactory.query({
-        skip: (page-1)*pageSize,
-        limit: pageSize
+        skip: (page-1)*$scope.limit,
+        limit: $scope.limit
       }, function(response) {
         $scope.articles = response.data;
         $scope.articlesMeta = response.meta;
@@ -140,14 +140,24 @@
    * Topic Controllers
    */
 
-  app.controller('TopicsIndexController', ['$scope', 'TopicFactory',
-    function($scope, TopicFactory) {
+  app.controller('TopicsIndexController', ['$scope', '$stateParams', 'TopicFactory',
+    function($scope, $stateParams, TopicFactory) {
 
-    TopicFactory.query(function(response) {
-      $scope.topics = response.data;
-      $scope.topicsMeta = response.meta;
-      $scope.queryTime = response.$queryTime;
-    });
+    $scope.page = Math.max($stateParams.page || 1, 1);
+    $scope.limit = pageSize;
+
+    $scope.change = function(page) {
+      TopicFactory.query({
+        skip: (page-1)*$scope.limit,
+        limit: $scope.limit
+      }, function(response) {
+        $scope.topics = response.data;
+        $scope.topicsMeta = response.meta;
+        $scope.queryTime = response.$queryTime;
+      });
+    };
+
+    $scope.change($scope.page);
 
   }]);
 
@@ -168,14 +178,24 @@
    * Word Controllers
    */
 
-  app.controller('WordsIndexController', ['$scope', 'WordFactory',
-    function($scope, WordFactory) {
+  app.controller('WordsIndexController', ['$scope', '$stateParams', 'WordFactory',
+    function($scope, $stateParams, WordFactory) {
 
-    WordFactory.query(function(response) {
-      $scope.words = response.data;
-      $scope.wordsMeta = response.meta;
-      $scope.queryTime = response.$queryTime;
-    });
+    $scope.page = Math.max($stateParams.page || 1, 1);
+    $scope.limit = 300;
+
+    $scope.change = function(page) {
+      WordFactory.query({
+        skip: (page-1)*$scope.limit,
+        limit: $scope.limit
+      }, function(response) {
+        $scope.words = response.data;
+        $scope.wordsMeta = response.meta;
+        $scope.queryTime = response.$queryTime;
+      });
+    };
+
+    $scope.change($scope.page);
 
   }]);