diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-02-13 19:11:11 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-02-15 22:57:48 +0300 |
commit | 1285d629064abce3aee8faafaa57492da6f8f163 (patch) | |
tree | 29f6e73839bd7fadfd7f98a0223b955b2c0165c6 /app/assets/javascripts/environments | |
parent | 73accafe430f56cd3065774c6118de3db0a45734 (diff) |
Move change page param to utility function
Add tests
Adds folder name in the top of the table
Diffstat (limited to 'app/assets/javascripts/environments')
4 files changed, 34 insertions, 72 deletions
diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 index 2cbfbcad023..e9ea6d91adb 100644 --- a/app/assets/javascripts/environments/components/environment.js.es6 +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -50,15 +50,15 @@ module.exports = Vue.component('environment-component', { }, canReadEnvironmentParsed() { - return this.$options.convertPermissionToBoolean(this.canReadEnvironment); + return gl.utils.convertPermissionToBoolean(this.canReadEnvironment); }, canCreateDeploymentParsed() { - return this.$options.convertPermissionToBoolean(this.canCreateDeployment); + return gl.utils.convertPermissionToBoolean(this.canCreateDeployment); }, canCreateEnvironmentParsed() { - return this.$options.convertPermissionToBoolean(this.canCreateEnvironment); + return gl.utils.convertPermissionToBoolean(this.canCreateEnvironment); }, }, @@ -97,15 +97,6 @@ module.exports = Vue.component('environment-component', { }); }, - /** - * Converts permission provided as strings to booleans. - * @param {String} string - * @returns {Boolean} - */ - convertPermissionToBoolean(string) { - return string === 'true'; - }, - methods: { toggleRow(model) { return this.store.toggleFolder(model.name); @@ -114,26 +105,11 @@ module.exports = Vue.component('environment-component', { /** * Will change the page number and update the URL. * - * If no search params are present, we'll add param for page - * If param for page is already present, we'll update it - * If there are params but none for page, we'll add it at the end. - * * @param {Number} pageNumber desired page to go to. + * @return {String} */ changePage(pageNumber) { - let param; - if (window.location.search.length === 0) { - param = `?page=${pageNumber}`; - } - - if (window.location.search.indexOf('page') !== -1) { - param = window.location.search.replace(/page=\d/g, `page=${pageNumber}`); - } - - if (window.location.search.length && - window.location.search.indexOf('page') === -1) { - param = `${window.location.search}&page=${pageNumber}`; - } + const param = gl.utils.setParamInURL('page', pageNumber); gl.utils.visitUrl(param); return param; diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index e40c97130ad..8401459977b 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -99,7 +99,7 @@ module.exports = Vue.component('environment-item', { * @returns {Boolean} */ hasStopAction() { - return this.model.latest['stop_action?']; + return this.model.latest && this.model.latest['stop_action?']; }, /** @@ -414,7 +414,7 @@ module.exports = Vue.component('environment-item', { * @return {String} */ folderUrl() { - return `${window.location.pathname}/folders/${this.model.latest.id}`; + return `${window.location.pathname}/folders/${this.model.name}`; }, }, diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 b/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 index d2ca465351a..29f704c1a37 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 +++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 @@ -1,4 +1,5 @@ const EnvironmentsFolderComponent = require('./environments_folder_view'); +require('../../vue_shared/vue_resource_interceptor'); $(() => { window.gl = window.gl || {}; diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 b/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 index c5d1e2d4d9f..f67e5eab64a 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 +++ b/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 @@ -6,6 +6,7 @@ Vue.use(require('vue-resource')); const EnvironmentsService = require('../services/environments_service'); const EnvironmentTable = require('../components/environments_table'); const Store = require('../stores/environments_store'); +require('../../vue_shared/components/table_pagination'); require('../../lib/utils/common_utils'); module.exports = Vue.component('environment-folder-view', { @@ -19,9 +20,11 @@ module.exports = Vue.component('environment-folder-view', { const environmentsData = document.querySelector('#environments-folder-list-view').dataset; const store = new Store(); const endpoint = `${window.location.pathname}.json`; + const folderName = window.location.pathname.substr(window.location.pathname.lastIndexOf('/') + 1); return { store, + folderName, endpoint, state: store.state, visibility: 'available', @@ -47,21 +50,30 @@ module.exports = Vue.component('environment-folder-view', { }, canReadEnvironmentParsed() { - return this.$options.convertPermissionToBoolean(this.canReadEnvironment); + return gl.utils.convertPermissionToBoolean(this.canReadEnvironment); }, canCreateDeploymentParsed() { - return this.$options.convertPermissionToBoolean(this.canCreateDeployment); + return gl.utils.convertPermissionToBoolean(this.canCreateDeployment); }, + /** + * URL to link in the stopped tab. + * + * @return {String} + */ stoppedPath() { return `${window.location.pathname}?scope=stopped`; }, + /** + * URL to link in the available tab. + * + * @return {String} + */ availablePath() { return window.location.pathname; }, - }, /** @@ -84,6 +96,8 @@ module.exports = Vue.component('environment-folder-view', { body: resp.json(), })) .then((response) => { + this.store.storeAvailableCount(response.body.available_count); + this.store.storeStoppedCount(response.body.stopped_count); this.store.storeEnvironments(response.body.environments); this.store.storePagination(response.headers); }) @@ -96,45 +110,14 @@ module.exports = Vue.component('environment-folder-view', { }); }, - /** - * Transforms the url parameter into an object and - * returns the one requested. - * - * @param {String} param - * @returns {String} The value of the requested parameter. - */ - getQueryParameter(parameter) { - return window.location.search.substring(1).split('&').reduce((acc, param) => { - const paramSplited = param.split('='); - acc[paramSplited[0]] = paramSplited[1]; - return acc; - }, {})[parameter]; - }, - methods: { /** * Will change the page number and update the URL. * - * If no search params are present, we'll add param for page - * If param for page is already present, we'll update it - * If there are params but none for page, we'll add it at the end. - * * @param {Number} pageNumber desired page to go to. */ changePage(pageNumber) { - let param; - if (window.location.search.length === 0) { - param = `?page=${pageNumber}`; - } - - if (window.location.search.indexOf('page') !== -1) { - param = window.location.search.replace(/page=\d/g, `page=${pageNumber}`); - } - - if (window.location.search.length && - window.location.search.indexOf('page') === -1) { - param = `${window.location.search}&page=${pageNumber}`; - } + const param = gl.utils.setParamInURL('page', pageNumber); gl.utils.visitUrl(param); return param; @@ -143,13 +126,15 @@ module.exports = Vue.component('environment-folder-view', { template: ` <div :class="cssContainerClass"> - <div class="top-area"> + <div class="top-area" v-if="!isLoading"> - <h3>FOLDER NAME</h3> + <h4 class="js-folder-name environments-folder-name"> + Environments / <b>{{folderName}}</b> + </h4> - <ul v-if="!isLoading" class="nav-links"> - <li v-bind:class="{ 'active': scope === undefined || scope === 'available' }"> - <a :href="availablePath"> + <ul class="nav-links"> + <li v-bind:class="{ 'active': scope === null || scope === 'available' }"> + <a :href="availablePath" class="js-available-environments-folder-tab"> Available <span class="badge js-available-environments-count"> {{state.availableCounter}} @@ -157,7 +142,7 @@ module.exports = Vue.component('environment-folder-view', { </a> </li> <li v-bind:class="{ 'active' : scope === 'stopped' }"> - <a :href="stoppedPath"> + <a :href="stoppedPath" class="js-stopped-environments-folder-tab"> Stopped <span class="badge js-stopped-environments-count"> {{state.stoppedCounter}} |