basic pagination ^_^ - will make component dynamic soon
This commit is contained in:
parent
e96c2ab0e4
commit
25e60f879f
4 changed files with 99 additions and 32 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
`,
|
||||
});
|
||||
|
|
|
@ -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 = {}));
|
||||
|
|
|
@ -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 = {}));
|
Loading…
Reference in a new issue