diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-03-28 11:56:24 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-03-28 14:11:04 +0100 |
commit | b64555d36a0b931dc087ddb48674c0fe36581e8c (patch) | |
tree | bd1fbd68b975728be0d086958ad955f80486f9f0 /app | |
parent | adec9194ef9b825a3a79dc262975987012639f23 (diff) | |
download | gitlab-ce-b64555d36a0b931dc087ddb48674c0fe36581e8c.tar.gz |
Adds show all button
Diffstat (limited to 'app')
6 files changed, 103 insertions, 35 deletions
diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js index 57599876f5a..9760b30f30c 100644 --- a/app/assets/javascripts/environments/components/environment.js +++ b/app/assets/javascripts/environments/components/environment.js @@ -78,11 +78,11 @@ export default Vue.component('environment-component', { }, methods: { - toggleFolder(folder) { + toggleFolder(folder, folderUrl) { this.store.toggleFolder(folder); if (!folder.isOpen) { - this.fetchChildEnvironments(folder); + this.fetchChildEnvironments(folder, folderUrl); } }, @@ -125,14 +125,13 @@ export default Vue.component('environment-component', { }); }, - fetchChildEnvironments(folder) { + fetchChildEnvironments(folder, folderUrl) { this.isLoadingFolderContent = true; - this.service.getFolderContent(folder.folderName) + this.service.getFolderContent(folderUrl) .then(resp => resp.json()) .then((response) => { - console.log(response); - this.store.folderContent(folder, response.environments); + this.store.setfolderContent(folder, response.environments); }) .then(() => { this.isLoadingFolderContent = false; @@ -204,7 +203,8 @@ export default Vue.component('environment-component', { :environments="state.environments" :can-create-deployment="canCreateDeploymentParsed" :can-read-environment="canReadEnvironmentParsed" - :service="service"/> + :service="service" + :is-loading-folder-content="isLoadingFolderContent" /> </div> <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1" diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js index 8cfaeb69233..3fe1042557e 100644 --- a/app/assets/javascripts/environments/components/environment_item.js +++ b/app/assets/javascripts/environments/components/environment_item.js @@ -392,6 +392,15 @@ export default { return ''; }, + + /** + * Constructs folder URL based on the current location and the folder id. + * + * @return {String} + */ + folderUrl() { + return `${window.location.pathname}/folders/${this.model.folderName}`; + }, }, /** @@ -411,12 +420,12 @@ export default { methods: { onClickFolder() { - eventHub.$emit('toggleFolder', this.model); + eventHub.$emit('toggleFolder', this.model, this.folderUrl); }, }, template: ` - <tr> + <tr :class="{ 'child-row': model.isChildren }"> <td> <a v-if="!model.isFolder" class="environment-name" diff --git a/app/assets/javascripts/environments/components/environments_table.js b/app/assets/javascripts/environments/components/environments_table.js index d59cb6500a2..5a1f28d0bdf 100644 --- a/app/assets/javascripts/environments/components/environments_table.js +++ b/app/assets/javascripts/environments/components/environments_table.js @@ -31,6 +31,18 @@ export default { type: Object, required: true, }, + + isLoadingFolderContent: { + type: Boolean, + required: false, + default: false, + }, + }, + + methods: { + folderUrl(model) { + return `${window.location.pathname}/folders/${model.folderName}`; + }, }, template: ` @@ -54,13 +66,30 @@ export default { :can-read-environment="canReadEnvironment" :service="service"></tr> - <tr v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0" - is="environment-item" - v-for="children in model.children" - :model="children" - :can-create-deployment="canCreateDeploymentParsed" - :can-read-environment="canReadEnvironmentParsed" - :service="service"></tr> + <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> + <tr v-if="isLoadingFolderContent"> + <td colspan="6" class="text-center"> + <i class="fa fa-spin fa-spinner" aria-hidden="true"/> + </td> + </tr> + + <tr v-if="!isLoadingFolderContent" + is="environment-item" + v-for="children in model.children" + :model="children" + :can-create-deployment="canCreateDeployment" + :can-read-environment="canReadEnvironment" + :service="service"></tr> + + <tr v-if="!isLoadingFolderContent"> + <td colspan="6" class="text-center"> + <a :href="folderUrl(model)" class="btn btn-default"> + Show all + </a> + </td> + </tr> + </template> + </template> </tbody> </table> diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js index d5729c9d1c5..4917df64a56 100644 --- a/app/assets/javascripts/environments/services/environments_service.js +++ b/app/assets/javascripts/environments/services/environments_service.js @@ -6,14 +6,7 @@ Vue.use(VueResource); export default class EnvironmentsService { constructor(endpoint) { - /** - * FIX ME: This should be sent by backend. - */ - const customActions = { - folderContent: { method: 'GET', url: `${window.location.pathname}/folders{/name}?perPage=2` }, - }; - - this.environments = Vue.resource(endpoint, {}, customActions); + this.environments = Vue.resource(endpoint); } get(scope, page) { @@ -24,8 +17,7 @@ export default class EnvironmentsService { return Vue.http.post(endpoint, {}, { emulateJSON: true }); } - getFolderContent(folderName) { - debugger - return this.environments.folderContent({ name: folderName }); + getFolderContent(folderUrl) { + return Vue.http.get(`${folderUrl}.json?per_page=3`); } } diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js index a1c0988f1f5..158e7922e3c 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js +++ b/app/assets/javascripts/environments/stores/environments_store.js @@ -92,23 +92,53 @@ export default class EnvironmentsStore { } /** - * Toggles folder open property given the given folder. + * Toggles folder open property for the given folder. * - * @param {String} envType + * @param {Object} folder * @return {Array} */ toggleFolder(folder) { return this.updateFolder(folder, 'isOpen', !folder.isOpen); } - folderContent(folder, environments) { - debugger; - return this.updateFolder(folder, 'children', environments); + /** + * Updates the folder with the received environments. + * + * + * @param {Object} folder Folder to update + * @param {Array} environments Received environments + * @return {Object} + */ + setfolderContent(folder, environments) { + const updatedEnvironments = environments.map((env) => { + let updated = env; + + if (env.latest) { + updated = Object.assign({}, env, env.latest); + delete updated.latest; + } else { + updated = env; + } + + updated.isChildren = true; + + return updated; + }); + + return this.updateFolder(folder, 'children', updatedEnvironments); } + /** + * Given a folder a prop and a new value updates the correct folder. + * + * @param {Object} folder + * @param {String} prop + * @param {String|Boolean|Object|Array} newValue + * @return {Array} + */ updateFolder(folder, prop, newValue) { const environments = this.state.environments; - debugger; + const updatedEnvironments = environments.map((env) => { const updateEnv = Object.assign({}, env); if (env.isFolder && env.id === folder.id) { @@ -117,10 +147,10 @@ export default class EnvironmentsStore { return updateEnv; }); - debugger; - console.log(updatedEnvironments); this.state.environments = updatedEnvironments; + + return updatedEnvironments; } } diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 25be7f408d0..b2ec8f38e6a 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -54,6 +54,14 @@ } } + .child-row td:first-child a { + margin-left: 17px; + } + + .environments-show-all { + text-align: center; + } + .btn-group { > a { |