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,50 +26,60 @@
     ],
     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 class="table-holder">
-        <table class="table ci-table">
-          <vue-pipeline-head></vue-pipeline-head>
-          <tbody>
-            <tr class="commit" v-for='pipeline in pipelines'>
-              <td class="commit-link" v-if="pipeline.status">
-                <vue-running-pipeline
+      <div>
+        <div class="table-holder">
+          <table class="table ci-table">
+            <vue-pipeline-head></vue-pipeline-head>
+            <tbody>
+              <tr class="commit" v-for='pipeline in pipelines'>
+                <td class="commit-link" v-if="pipeline.status">
+                  <vue-running-pipeline
+                    :pipeline='pipeline'
+                    :pipelineurl='pipelineurl'
+                  >
+                  </vue-running-pipeline>
+                </td>
+                <vue-pipeline-url
                   :pipeline='pipeline'
                   :pipelineurl='pipelineurl'
                 >
-                </vue-running-pipeline>
-              </td>
-              <vue-pipeline-url
-                :pipeline='pipeline'
-                :pipelineurl='pipelineurl'
-              >
-              </vue-pipeline-url>
-              <vue-branch-commit
-                :pipeline='pipeline'
-                :shortsha='shortsha'
-              >
-              </vue-branch-commit>
-              <vue-stages></vue-stages>
-              <td></td>
-              <vue-pipeline-actions></vue-pipeline-actions>
-            </tr>
-          </tbody>
-        </table>
+                </vue-pipeline-url>
+                <vue-branch-commit
+                  :pipeline='pipeline'
+                  :shortsha='shortsha'
+                >
+                </vue-branch-commit>
+                <vue-stages></vue-stages>
+                <td></td>
+                <vue-pipeline-actions></vue-pipeline-actions>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <vue-gl-pagination
+          :changepage='changepage'
+          :pages='pipelines.length'
+        >
+        </vue-gl-pagination>
       </div>
     `,
   });

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 = {}));