icon and status comps - pagination logic almost done

app/assets/javascripts/vue_pipeline_status/failed.js.es6

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueFailedPipeline = Vue.extend({
+    components: {
+      'vue-failed-icon': gl.VuePendingIcon,
+    },
+    props: [
+      'pipeline',
+      'pipelineurl',
+    ],
+    template: `
+      <td class="commit-link">
+        <a :href='pipelineurl(pipeline.id)'>
+          <span class="ci-status ci-failed">
+            <vue-failed-icon></vue-failed-icon>
+            &nbsp;failed
+          </span>
+        </a>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipeline_status/pending.js.es6

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePendingPipeline = Vue.extend({
+    components: {
+      'vue-pending-icon': gl.VuePendingIcon,
+    },
+    props: [
+      'pipeline',
+      'pipelineurl',
+    ],
+    template: `
+      <td class="commit-link">
+        <a :href='pipelineurl(pipeline.id)'>
+          <span class="ci-status ci-pending">
+            <vue-pending-icon></vue-pending-icon>
+            &nbsp;pending
+          </span>
+        </a>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipeline_status/running.js.es6

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueRunningPipeline = Vue.extend({
+    components: {
+      'vue-running-icon': gl.VueRunningIcon,
+    },
+    props: [
+      'pipeline',
+      'pipelineurl',
+    ],
+    template: `
+      <td class="commit-link">
+        <a :href='pipelineurl(pipeline.id)'>
+          <span class="ci-status ci-running">
+            <vue-running-icon></vue-running-icon>
+            &nbsp;running
+          </span>
+        </a>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipeline_status/status.js.es6

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueStatusPipeline = Vue.extend({
+    components: {
+      'vue-running-pipeline': gl.VueRunningPipeline,
+      'vue-pending-pipeline': gl.VuePendingPipeline,
+      'vue-failed-pipeline': gl.VueFailedPipeline,
+    },
+    props: [
+      'pipeline',
+      'pipelineurl',
+    ],
+    template: `
+      <td class="commit-link">
+        <vue-running-pipeline
+          v-if="pipeline.status === 'running'"
+          :pipeline='pipeline'
+          :pipelineurl='pipelineurl'
+        >
+        </vue-running-pipeline>
+        <vue-pending-pipeline
+          v-if="pipeline.status === 'pending'"
+          :pipeline='pipeline'
+          :pipelineurl='pipelineurl'
+        >
+        </vue-pending-pipeline>
+        <vue-failed-pipeline
+          v-if="pipeline.status === 'failed'"
+          :pipeline='pipeline'
+          :pipelineurl='pipelineurl'
+        >
+        </vue-failed-pipeline>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

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

@@ -14,6 +14,10 @@
         if (n - 1 === +this.pagenum) return 'active';
         return '';
       },
+      prevstatus() {
+        if (+this.pagenum > 1) return '';
+        return 'prev disabled';
+      },
     },
     computed: {
       last() {
@@ -29,33 +33,31 @@
         if (this.pagenum === 1) return 1;
         return this.pagenum - 1;
       },
-      next() {
-        if (this.pagenum === this.last) return `pipelines?p=${this.pagenum}`;
-        return `pipelines?p=${this.pagenum + 1}`;
-      },
     },
     template: `
       <div class="gl-pagination">
         <ul class="pagination clearfix" v-for='n in upcount'>
-          <li class="prev disabled" v-if='n === 1'>
-            <span>Prev</span>
+          <li :class='prevstatus(n)' v-if='n === 1'>
+            <span @click='changepage($event, {where: pagenum - 1})'>Prev</span>
           </li>
           <li :class='pagenumberstatus(n)' v-else>
-            <a @click='changepage($event)'>{{(n - 1)}}</a>
+            <span @click='changepage($event)'>{{(n - 1)}}</span>
           </li>
           <!--
             take a slice of current array (up to 5)
             if at end make dots dissapear
             if in second slice or more make dots appear in the front
           -->
-          <li v-if='n === upcount'>
+          <li v-if='n === upcount && upcount > 4'>
             <span class="gap">…</span>
           </li>
-          <li class="next" v-if='n === upcount'>
-            <a rel="next" :href='next'>Next</a>
+          <li class="next" v-if='n === upcount && pagenum !== last'>
+            <span @click='changepage($event, {where: pagenum + 1})'>
+              Next
+            </span>
           </li>
           <li class="last" v-if='n === upcount && pagenum !== last'>
-            <a @click='changepage($event, last)'>Last »</a>
+            <span @click='changepage($event, {last: last})'>Last »</span>
           </li>
         </ul>
       </div>

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

@@ -35,10 +35,12 @@
       shortsha(pipeline) {
         return pipeline.sha.slice(0, 8);
       },
-      changepage(event, last) {
-        if (last) this.pagenum = +last;
-        if (!last) this.pagenum = +event.target.innerText;
-        // use p instead of page to avoid rails tyring to make an actual request
+      changepage(event, page = {}) {
+        if (page) this.pagenum = +event.target.innerText;
+        if (page.last) this.pagenum = +page.last;
+        if (page.where) this.pagenum = +page.next;
+
+        // use p instead of page to avoid making an actual request
         window.history.pushState({}, null, `?p=${this.pagenum}`);
         clearInterval(this.intervalId);
         this.store.fetchDataLoop.call(this, Vue, this.pagenum);