diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-03-27 19:37:26 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-03-28 16:10:31 +0300 |
commit | adec9194ef9b825a3a79dc262975987012639f23 (patch) | |
tree | 5f6fdbb87e3baadeff1b24931dcfcbae69402569 /app/assets/javascripts/environments | |
parent | f6f56dddfcfed352dfba8dc32dad554096552a7d (diff) |
Adds expandable folder back.
Makes request to get environments
Diffstat (limited to 'app/assets/javascripts/environments')
5 files changed, 100 insertions, 19 deletions
diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js index 51aab8460f6..57599876f5a 100644 --- a/app/assets/javascripts/environments/components/environment.js +++ b/app/assets/javascripts/environments/components/environment.js @@ -24,6 +24,7 @@ export default Vue.component('environment-component', { state: store.state, visibility: 'available', isLoading: false, + isLoadingFolderContent: false, cssContainerClass: environmentsData.cssClass, endpoint: environmentsData.environmentsDataEndpoint, canCreateDeployment: environmentsData.canCreateDeployment, @@ -68,15 +69,21 @@ export default Vue.component('environment-component', { this.fetchEnvironments(); eventHub.$on('refreshEnvironments', this.fetchEnvironments); + eventHub.$on('toggleFolder', this.toggleFolder); }, beforeDestroyed() { eventHub.$off('refreshEnvironments'); + eventHub.$off('toggleFolder'); }, methods: { - toggleRow(model) { - return this.store.toggleFolder(model.name); + toggleFolder(folder) { + this.store.toggleFolder(folder); + + if (!folder.isOpen) { + this.fetchChildEnvironments(folder); + } }, /** @@ -117,6 +124,24 @@ export default Vue.component('environment-component', { new Flash('An error occurred while fetching the environments.'); }); }, + + fetchChildEnvironments(folder) { + this.isLoadingFolderContent = true; + + this.service.getFolderContent(folder.folderName) + .then(resp => resp.json()) + .then((response) => { + console.log(response); + this.store.folderContent(folder, response.environments); + }) + .then(() => { + this.isLoadingFolderContent = false; + }) + .catch(() => { + this.isLoadingFolderContent = false; + new Flash('An error occurred while fetching the environments.'); + }); + }, }, template: ` diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js index 66ed10e19d1..8cfaeb69233 100644 --- a/app/assets/javascripts/environments/components/environment_item.js +++ b/app/assets/javascripts/environments/components/environment_item.js @@ -6,6 +6,7 @@ import StopComponent from './environment_stop'; import RollbackComponent from './environment_rollback'; import TerminalButtonComponent from './environment_terminal_button'; import CommitComponent from '../../vue_shared/components/commit'; +import eventHub from '../event_hub'; /** * Envrionment Item Component @@ -391,16 +392,6 @@ 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}`; - }, - }, /** @@ -418,6 +409,12 @@ export default { return true; }, + methods: { + onClickFolder() { + eventHub.$emit('toggleFolder', this.model); + }, + }, + template: ` <tr> <td> @@ -426,7 +423,21 @@ export default { :href="environmentPath"> {{model.name}} </a> - <a v-else class="folder-name" :href="folderUrl"> + <span v-else + class="folder-name" + @click="onClickFolder"> + + <span class="folder-icon"> + <i + v-show="model.isOpen" + class="fa fa-caret-down" + aria-hidden="true" /> + <i + v-show="!model.isOpen" + class="fa fa-caret-right" + aria-hidden="true"/> + </span> + <span class="folder-icon"> <i class="fa fa-folder" aria-hidden="true"></i> </span> @@ -438,7 +449,7 @@ export default { <span class="badge"> {{model.size}} </span> - </a> + </span> </td> <td class="deployment-column"> diff --git a/app/assets/javascripts/environments/components/environments_table.js b/app/assets/javascripts/environments/components/environments_table.js index 486389973d3..d59cb6500a2 100644 --- a/app/assets/javascripts/environments/components/environments_table.js +++ b/app/assets/javascripts/environments/components/environments_table.js @@ -54,11 +54,10 @@ export default { :can-read-environment="canReadEnvironment" :service="service"></tr> - <tr v-if="model.isOpen && model.children && model.children.length > 0" + <tr v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0" is="environment-item" v-for="children in model.children" :model="children" - :toggleRow="toggleRow.bind(children)" :can-create-deployment="canCreateDeploymentParsed" :can-read-environment="canReadEnvironmentParsed" :service="service"></tr> diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js index 07040bf0d73..d5729c9d1c5 100644 --- a/app/assets/javascripts/environments/services/environments_service.js +++ b/app/assets/javascripts/environments/services/environments_service.js @@ -6,7 +6,14 @@ Vue.use(VueResource); export default class EnvironmentsService { constructor(endpoint) { - this.environments = Vue.resource(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); } get(scope, page) { @@ -16,4 +23,9 @@ export default class EnvironmentsService { postAction(endpoint) { return Vue.http.post(endpoint, {}, { emulateJSON: true }); } + + getFolderContent(folderName) { + debugger + return this.environments.folderContent({ name: folderName }); + } } diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js index f05fe6e60ae..a1c0988f1f5 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js +++ b/app/assets/javascripts/environments/stores/environments_store.js @@ -38,7 +38,12 @@ export default class EnvironmentsStore { let filtered = {}; if (env.size > 1) { - filtered = Object.assign({}, env, { isFolder: true, folderName: env.name }); + filtered = Object.assign({}, env, { + isFolder: true, + folderName: env.name, + isOpen: false, + children: [], + }); } if (env.latest) { @@ -86,7 +91,36 @@ export default class EnvironmentsStore { return count; } - toggleRow(name) { + /** + * Toggles folder open property given the given folder. + * + * @param {String} envType + * @return {Array} + */ + toggleFolder(folder) { + return this.updateFolder(folder, 'isOpen', !folder.isOpen); + } + folderContent(folder, environments) { + debugger; + return this.updateFolder(folder, 'children', environments); } + + 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) { + updateEnv[prop] = newValue; + } + + return updateEnv; + }); + debugger; + + console.log(updatedEnvironments); + this.state.environments = updatedEnvironments; + } + } |