basic pagination ^_^ - will make component dynamic soon

app/assets/javascripts/vue_pipelines_index/index.js.es6

@@ -5,6 +5,7 @@
 //= require ./store.js.es6
 //= require ./pipeline_url.vue.js.es6
+//= require ./vue_gl_pagination.vue.js.es6
 //= require ./pipeline_head.vue.js.es6
 //= require ./running_icon.vue.js.es6
 //= require ./running.vue.js.es6

app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6

@@ -10,13 +10,14 @@
       'vue-branch-commit': gl.VueBranchCommit,
       'vue-pipeline-url': gl.VuePipelineUrl,
       'vue-pipeline-head': gl.VuePipelineHead,
+      'vue-gl-pagination': gl.VueGlPagination,
     },
     data() {
       return {
         pipelines: [],
         currentPage: '',
         intervalId: '',
-        pageNum: 'page=1',
+        pageNum: 1,
       };
     },
     props: [
@@ -25,22 +26,26 @@
     ],
     created() {
       const url = window.location.toString();
-      if (~url.indexOf('?')) this.pageNum = url.split('?')[1];
+      if (~url.indexOf('?')) this.pageNum = url.split('?')[1].split('=')[1];
       this.store.fetchDataLoop.call(this, Vue, this.pageNum);
     },
     methods: {
       shortsha(pipeline) {
         return pipeline.sha.slice(0, 8);
       },
-      changePage() {
-        // clearInterval(this.intervalId);
-        // this.store.fetchDataLoop.call(this, Vue, this.pageNum);
+      changepage(event) {
+        this.pageNum = +event.target.innerText;
+        // use p instead of page to avoid rails tyring to make an actual request
+        window.history.pushState({}, null, `?p=${this.pageNum}`);
+        clearInterval(this.intervalId);
+        this.store.fetchDataLoop.call(this, Vue, this.pageNum);
       },
       pipelineurl(id) {
         return `pipelines/${id}`;
       },
     },
     template: `
+      <div>
         <div class="table-holder">
           <table class="table ci-table">
             <vue-pipeline-head></vue-pipeline-head>
@@ -70,6 +75,12 @@
             </tbody>
           </table>
         </div>
+        <vue-gl-pagination
+          :changepage='changepage'
+          :pages='pipelines.length'
+        >
+        </vue-gl-pagination>
+      </div>
     `,
   });
 })(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_index/store.js.es6

@@ -3,11 +3,12 @@
 ((gl) => {
   const api = '/api/v3/projects';
+  const paginate = '?per_page=5&page=';
   gl.PipelineStore = class {
     fetchDataLoop(Vue, pageNum) {
       const goFetch = () =>
-        this.$http.get(`${api}/${this.scope}/pipelines?per_page=30&${pageNum}`)
+        this.$http.get(`${api}/${this.scope}/pipelines${paginate}${pageNum}`)
           .then((response) => {
             Vue.set(this, 'pipelines', JSON.parse(response.body));
           }, () => new Flash(
@@ -20,7 +21,7 @@
       // eventually clearInterval(this.intervalId)
       this.intervalId = setInterval(() => {
         goFetch();
-      }, 3000);
+      }, 30000);
     }
   };
 })(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueGlPagination = Vue.extend({
+    props: [
+      'changepage',
+      'pages',
+    ],
+    template: `
+      <div class="gl-pagination">
+        <ul class="pagination clearfix">
+          <li class="prev disabled">
+            <span>Prev</span>
+          </li>
+          <li class="page active">
+            <a @click='changepage($event)'>1</a>
+          </li>
+          <li class="page">
+            <a
+              rel="next"
+              @click='changepage($event)'
+            >
+              2
+            </a>
+          </li>
+          <li class="page">
+            <a @click='changepage($event)'>3</a>
+          </li>
+          <li class="page">
+            <a @click='changepage($event)'>4</a>
+          </li>
+          <li class="page">
+            <a @click='changepage($event)'>5</a>
+          </li>
+          <li class="page">
+            <span class="page gap">…</span>
+          </li>
+          <li class="next">
+            <a
+              rel="next"
+              href="pipelines?page=2"
+            >
+              Next
+            </a>
+          </li>
+          <li class="last">
+            <a href="pipelines?page=936">Last »</a>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));