Added tweet pagination.

assets/js/tweets.js

@@ -1,5 +1,26 @@
 var apiURL = 'tweets/'
 
+Vue.component('pagination', {
+  props: [
+    'curPage',
+    'nextPage',
+    'prevPage',
+    'nextPageFunction',
+    'prevPageFunction'
+  ],
+
+  methods: {
+    getNextPage: function() {
+      this.nextPageFunction()
+    },
+    getPrevPage: function() {
+      this.prevPageFunction()
+    }
+  },
+
+  template: $('#pagination-template').html()
+})
+
 var tweets = new Vue({
   el: '#tweets',
 
@@ -40,6 +61,12 @@ var tweets = new Vue({
       }
 
       xhr.send()
+    },
+    fetchNextPage: function() {
+      this.page++
+    },
+    fetchPrevPage: function() {
+      this.page--
     }
   }
 })

assets/scss/main.scss

@@ -1,5 +1,10 @@
 @import '../vendor/bulma/bulma.sass';
 
+.hidden {
+    display: none;
+    visibility: hidden;
+}
+
 .wordcloud {
     display: inline-block;
     height: 100vh;

chirp/templates/chirp/filter_detail.html

@@ -40,6 +40,7 @@ <h2 class="subtitle">
         </div>
       </div>
       <div class="column is-one-quarter">
+        {% include 'chirp/includes/components.html' %}
         <div id="tweets">
           {% include 'chirp/includes/tweets.html' %}
         </div>
@@ -51,7 +52,7 @@ <h2 class="subtitle">
 
 {% block footer_scripts %}
 <script src="{% static 'vendor/chart.js/dist/Chart.min.js' %}"></script>
-<script src="{% static 'vendor/vue/dist/vue.min.js' %}"></script>
+<script src="{% static 'vendor/vue/dist/vue.js' %}"></script>
 <script src="{% static 'vendor/wordcloud2.js/src/wordcloud2.js' %}"></script>
 <script src="{% static 'js/charts.js' %}"></script>
 <script src="{% static 'js/tweets.js' %}"></script>

chirp/templates/chirp/includes/components.html

@@ -0,0 +1,23 @@
+<div class="hidden">
+    {% verbatim %}
+    <div id="pagination-template">
+        <p class="has-text-centered">
+            <button @click="getPrevPage" v-if="prevPage > 0" class="button is-active is-link" title="Previous page">
+                <i class="fa fa-angle-double-left"></i>
+            </button>
+            <button v-else disabled class="button" title="Previous page">
+                <i class="fa fa-angle-double-left"></i>
+            </button>
+
+            <span class="button is-info is-static" v-html="curPage"></span>
+
+            <button @click="getNextPage" v-if="nextPage > 0" class="button is-active is-link" title="Next page">
+                <i class="fa fa-angle-double-right"></i>
+            </button>
+            <button v-else disabled class="button" title="Next page">
+                <i class="fa fa-angle-double-right"></i>
+            </button>
+        </p>
+    </div>
+    {% endverbatim %}
+</div>

chirp/templates/chirp/includes/tweets.html

@@ -1,5 +1,10 @@
 {% verbatim %}
 <p class="title">Tweets <span v-if="tweets">({{ tweets.total }})</span></p>
+
+<pagination v-if="tweets" :cur-page="page" :next-page="tweets.next_page" :prev-page="tweets.prev_page" :next-page-function="fetchNextPage" :prev-page-function="fetchPrevPage"></pagination>
+
+<br>
+
 <ul v-if="tweets">
     <li v-for="tweet in tweets.tweets">
         <div class="card">
@@ -31,4 +36,8 @@
         </div>
     </li>
 </ul>
+
+<br>
+
+<pagination v-if="tweets" :cur-page="page" :next-page="tweets.next_page" :prev-page="tweets.prev_page" :next-page-function="fetchNextPage" :prev-page-function="fetchPrevPage"></pagination>
 {% endverbatim %}

chirp/views.py

@@ -55,10 +55,25 @@ def get_filters(request):
 def get_tweets(request, filter_id, page=1):
     f = Filter.objects.get(id=filter_id)
     query = _get_query(request)
-    results = f.get_tweets(query=query, page=page)
+
+    per_page = 20
+    results = f.get_tweets(query=query, page=page, per_page=per_page)
+
+    total = results.count()
+    next_page = 0
+    prev_page = 0
+
+    if total:
+        if page > 1:
+            prev_page = page - 1
+
+        if page * per_page < total:
+            next_page = page + 1
 
     tweets = {
-        'total': results.count(),
+        'total': total,
+        'next_page': next_page,
+        'prev_page': prev_page,
         'tweets': [
             json.loads(json.dumps(item, indent=4, default=json_util.default))
             for item in results