Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
25e60f87
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
25e60f87
编写于
11月 02, 2016
作者:
R
Regis
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
basic pagination ^_^ - will make component dynamic soon
上级
e96c2ab0
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
99 addition
and
32 deletion
+99
-32
app/assets/javascripts/vue_pipelines_index/index.js.es6
app/assets/javascripts/vue_pipelines_index/index.js.es6
+1
-0
app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
...sets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
+41
-30
app/assets/javascripts/vue_pipelines_index/store.js.es6
app/assets/javascripts/vue_pipelines_index/store.js.es6
+3
-2
app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6
...ascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6
+54
-0
未找到文件。
app/assets/javascripts/vue_pipelines_index/index.js.es6
浏览文件 @
25e60f87
...
...
@@ -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
浏览文件 @
25e60f87
...
...
@@ -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
浏览文件 @
25e60f87
...
...
@@ -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);
}, 3000
0
);
}
};
})(window.gl || (window.gl = {}));
app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6
0 → 100644
浏览文件 @
25e60f87
/* 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 = {}));
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录