From 25e60f879fc21e55902ad5c069a5de0a3e340db7 Mon Sep 17 00:00:00 2001
From: Regis <boudinot.regis@yahoo.com>
Date: Wed, 2 Nov 2016 18:54:04 -0600
Subject: [PATCH] basic pagination ^_^ - will make component dynamic soon
---
.../vue_pipelines_index/index.js.es6 | 1 +
.../vue_pipelines_index/pipelines.vue.js.es6 | 71 +++++++++++--------
.../vue_pipelines_index/store.js.es6 | 5 +-
.../vue_gl_pagination.vue.js.es6 | 54 ++++++++++++++
4 files changed, 99 insertions(+), 32 deletions(-)
create mode 100644 app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6
diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6
index b8bcfdb30c3..6ecbc1ba8ff 100644
--- a/app/assets/javascripts/vue_pipelines_index/index.js.es6
+++ b/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
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
index 86c18ace09e..4706ea61c8e 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
+++ b/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>
`,
});
diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6
index 66cb989030a..bf5fba45194 100644
--- a/app/assets/javascripts/vue_pipelines_index/store.js.es6
+++ b/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 = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6
new file mode 100644
index 00000000000..29d4a4df511
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6
@@ -0,0 +1,54 @@
+/* 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 = {}));
--
GitLab