diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-02-09 15:18:47 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-02-12 16:56:05 +0300 |
commit | 991a7ae86055df2d0eb619e1d29a1e24e322c741 (patch) | |
tree | 1e01dc7ad63f9b130249dd4acb16d4e915c215fe /app/assets/javascripts/environments | |
parent | b8dbebce1d7e0ad4edf2ab09135457ade69c240c (diff) |
Adds pagination component
Diffstat (limited to 'app/assets/javascripts/environments')
-rw-r--r-- | app/assets/javascripts/environments/components/environment.js.es6 | 25 | ||||
-rw-r--r-- | app/assets/javascripts/environments/stores/environments_store.js.es6 | 13 |
2 files changed, 36 insertions, 2 deletions
diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 index 11a965fcddf..f89dbdbda1d 100644 --- a/app/assets/javascripts/environments/components/environment.js.es6 +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -6,11 +6,13 @@ Vue.use(require('vue-resource')); const EnvironmentsService = require('../services/environments_service'); const EnvironmentItem = require('./environment_item'); const Store = require('../stores/environments_store'); +require('../../vue_shared/components/table_pagination'); module.exports = Vue.component('environment-component', { components: { 'environment-item': EnvironmentItem, + 'table-pagination': gl.VueGlPagination, }, data() { @@ -34,6 +36,10 @@ module.exports = Vue.component('environment-component', { commitIconSvg: environmentsData.commitIconSvg, playIconSvg: environmentsData.playIconSvg, terminalIconSvg: environmentsData.terminalIconSvg, + + // Pagination Properties, + paginationInformation: {}, + pageNumber: 1, }; }, @@ -61,14 +67,18 @@ module.exports = Vue.component('environment-component', { */ created() { const scope = this.$options.getQueryParameter('scope') || this.visibility; - const endpoint = `${this.endpoint}?scope=${scope}`; + const pageNumber = this.$options.getQueryParameter('page') || this.pageNumber; + const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`; const service = new EnvironmentsService(endpoint); this.isLoading = true; return service.all() - .then(resp => resp.json()) + .then((resp) => { + debugger; + return resp.json(); + }) .then((json) => { this.store.storeAvailableCount(json.available_count); this.store.storeStoppedCount(json.stopped_count); @@ -111,6 +121,10 @@ module.exports = Vue.component('environment-component', { toggleRow(model) { return this.store.toggleFolder(model.name); }, + + changePage(pageNumber, scope) { + gl.utils.visitUrl(`?scope=${scope}&p=${pageNumber}`); + }, }, template: ` @@ -192,6 +206,13 @@ module.exports = Vue.component('environment-component', { </template> </tbody> </table> + + <table-pagination v-if="!isLoading && state.environments.length" + :pagenum="1" + :count="2" + :change="changePage" + :pageInfo="paginationInformation"> + </table-pagination> </div> </div> </div> diff --git a/app/assets/javascripts/environments/stores/environments_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6 index 749dd882188..e55b8624ac8 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js.es6 +++ b/app/assets/javascripts/environments/stores/environments_store.js.es6 @@ -1,3 +1,4 @@ +require('~/lib/utils/common_utils'); /** * Environments Store. * @@ -10,6 +11,7 @@ class EnvironmentsStore { this.state.environments = []; this.state.stoppedCounter = 0; this.state.availableCounter = 0; + this.state.paginationInformation = {}; return this; } @@ -41,6 +43,17 @@ class EnvironmentsStore { return filteredEnvironments; } + storePagination(pagination = {}) { + const normalizedHeaders = gl.utils.normalizedHeaders(pagination); + + const paginationInformation = { + + }; + + this.paginationInformation = paginationInformation; + return paginationInformation; + } + /** * Stores the number of available environments. * |