diff options
Diffstat (limited to 'app/assets/javascripts/vue_pipelines_index/pipelines.js')
-rw-r--r-- | app/assets/javascripts/vue_pipelines_index/pipelines.js | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js new file mode 100644 index 00000000000..601ef41e917 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js @@ -0,0 +1,87 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +window.Vue = require('vue'); +require('../vue_shared/components/table_pagination'); +require('./store'); +require('../vue_shared/components/pipelines_table'); +const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_store'); + +((gl) => { + gl.VuePipelines = Vue.extend({ + + components: { + 'gl-pagination': gl.VueGlPagination, + 'pipelines-table-component': gl.pipelines.PipelinesTableComponent, + }, + + data() { + return { + pipelines: [], + timeLoopInterval: '', + intervalId: '', + apiScope: 'all', + pageInfo: {}, + pagenum: 1, + count: {}, + pageRequest: false, + }; + }, + props: ['scope', 'store'], + created() { + const pagenum = gl.utils.getParameterByName('page'); + const scope = gl.utils.getParameterByName('scope'); + if (pagenum) this.pagenum = pagenum; + if (scope) this.apiScope = scope; + + this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope); + }, + + beforeUpdate() { + if (this.pipelines.length && this.$children) { + CommitPipelinesStoreWithTimeAgo.startTimeAgoLoops.call(this, Vue); + } + }, + + methods: { + /** + * Will change the page number and update the URL. + * + * @param {Number} pageNumber desired page to go to. + */ + change(pageNumber) { + const param = gl.utils.setParamInURL('page', pageNumber); + + gl.utils.visitUrl(param); + return param; + }, + }, + template: ` + <div> + <div class="pipelines realtime-loading" v-if='pageRequest'> + <i class="fa fa-spinner fa-spin"></i> + </div> + + <div class="blank-state blank-state-no-icon" + v-if="!pageRequest && pipelines.length === 0"> + <h2 class="blank-state-title js-blank-state-title"> + No pipelines to show + </h2> + </div> + + <div class="table-holder" v-if='!pageRequest && pipelines.length'> + <pipelines-table-component :pipelines='pipelines'/> + </div> + + <gl-pagination + v-if='!pageRequest && pipelines.length && pageInfo.total > pageInfo.perPage' + :pagenum='pagenum' + :change='change' + :count='count.all' + :pageInfo='pageInfo' + > + </gl-pagination> + </div> + `, + }); +})(window.gl || (window.gl = {})); |