diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2016-11-14 15:38:41 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2016-11-16 11:58:19 +0000 |
commit | 09c4542946fb5ba8f7ac12bd8952f5669156a27e (patch) | |
tree | 5e9f4cb4b8d35ff1919403a425326936247d7c74 | |
parent | a7a13ed3ef281f36dcd0c15540437aaf9aac39dc (diff) | |
download | gitlab-ce-09c4542946fb5ba8f7ac12bd8952f5669156a27e.tar.gz |
Refactor to work with vue 2 with just one root element
3 files changed, 87 insertions, 47 deletions
diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 index 53fd9891a60..296e18ae8fd 100644 --- a/app/assets/javascripts/environments/components/environment.js.es6 +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -81,7 +81,9 @@ $(() => { * Toggles loading property. */ mounted() { - window.gl.environmentsService.all().then(resp => resp.json()).then((json) => { + window.gl.environmentsService.all() + .then(resp => resp.json()) + .then((json) => { this.store.storeEnvironments(json); this.loading = false; }); @@ -114,20 +116,30 @@ $(() => { return false; }, + methods: { + toggleRow(model) { + return this.store.toggleFolder(model.name); + }, + }, + template: ` - <div> + <div class="container-fluid container-limited"> <div class="top-area"> <ul v-if="!isLoading" class="nav-links"> <li v-bind:class="{ 'active': scope === undefined}"> <a :href="projectEnvironmentsPath"> Available - <span class="badge js-available-environments-count" v-html="state.availableCounter"></span> + <span + class="badge js-available-environments-count" + v-html="state.availableCounter"></span> </a> </li> - <li v-bind:class="{ 'active': scope === 'stopped'}"> + <li v-bind:class="{ 'active' : scope === 'stopped'}"> <a :href="projectStoppedEnvironmentsPath"> Stopped - <span class="badge js-stopped-environments-count" v-html="state.stoppedCounter"></span> + <span + class="badge js-stopped-environments-count" + v-html="state.stoppedCounter"></span> </a> </li> </ul> @@ -143,7 +155,9 @@ $(() => { <i class="fa fa-spinner spin"></i> </div> - <div class="blank-state blank-state-no-icon" v-if="!loading && state.environments.length === 0"> + <div + class="blank-state blank-state-no-icon" + v-if="!loading && state.environments.length === 0"> <h2 class="blank-state-title"> You don't have any environments right now. </h2> @@ -155,28 +169,48 @@ $(() => { <a :href="helpPagePath"> Read more about environments </a> - <a v-if="canCreateEnvironment" :href="newEnvironmentPath" class="btn btn-create"> + <a + v-if="canCreateEnvironment" + :href="newEnvironmentPath" + class="btn btn-create"> New Environment </a> </p> </div> - <div class="table-holder" v-if="!loading && state.environments.length > 0"> + <div + class="table-holder" + v-if="!loading && state.environments.length > 0"> <table class="table ci-table environments"> <thead> - <th>Environment</th> - <th>Last deployment</th> - <th>Build</th> - <th>Commit</th> - <th></th> - <th class="hidden-xs"></th> + <tr> + <th>Environment</th> + <th>Last deployment</th> + <th>Build</th> + <th>Commit</th> + <th></th> + <th class="hidden-xs"></th> + </tr> </thead> <tbody> - <tr is="environment-item" - v-for="model in filteredEnvironments" - :model="model" - :can-create-deployment="canCreateDeploymentParsed" - :can-read-environment="canReadEnvironmentParsed"></tr> + <template v-for="model in filteredEnvironments" + v-bind:model="model"> + + <tr + is="environment-item" + :model="model" + :toggleRow="toggleRow.bind(model)" + :can-create-deployment="canCreateDeploymentParsed" + :can-read-environment="canReadEnvironmentParsed"></tr> + + <tr v-if="model.isOpen && model.children && model.children.length > 0" + is="environment-item" + v-for="children in model.children" + :model="children" + :toggleRow="toggleRow.bind(children)"> + </tr> + + </template> </tbody> </table> </div> diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index 414bbd4d623..3f976ca19e8 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -31,11 +31,10 @@ 'rollback-component': window.gl.environmentsList.RollbackComponent, }, - props: ['model', 'can-create-deployment', 'can-read-environment'], + props: ['model', 'toggleRow', 'can-create-deployment', 'can-read-environment'], data() { return { - open: false, rowClass: { 'children-row': this.model['vue-isChildren'], }, @@ -282,30 +281,19 @@ return {}.hasOwnProperty.call(obj, key); }, - methods: { - /** - * Toggles the visibility of a folders' children. - */ - toggle() { - if (this.isFolder) { - this.open = !this.open; - } - }, - }, - template: ` <tr> - <td v-bind:class="{ 'children-row': isChildren}" class="col-sm-2"> + <td v-bind:class="{ 'children-row': isChildren}"> <a v-if="!isFolder" class="environment-name" :href="model.environment_url" v-html="model.name"> </a> - <span v-else v-on:click="toggle" class="folder-name"> + <span v-else v-on:click="toggleRow(model)" class="folder-name"> <span class="folder-icon"> - <i v-show="open" class="fa fa-caret-down"></i> - <i v-show="!open" class="fa fa-caret-right"></i> + <i v-show="model.isOpen" class="fa fa-caret-down"></i> + <i v-show="!model.isOpen" class="fa fa-caret-right"></i> </span> <span v-html="model.name"></span> @@ -314,7 +302,7 @@ </span> </td> - <td class="deployment-column col-sm-2"> + <td class="deployment-column"> <span v-if="!isFolder && model.last_deployment && model.last_deployment.iid" v-html="deploymentInternalId"> <span v-if="model.last_deployment.user"> @@ -329,7 +317,7 @@ </span> </td> - <td class="col-sm-2"> + <td> <a v-if="!isFolder && model.last_deployment && model.last_deployment.deployable" class="build-link" :href="model.last_deployment.deployable.build_url" @@ -337,7 +325,7 @@ </a> </td> - <td class="col-sm-2"> + <td> <div v-if="!isFolder && model.last_deployment"> <commit-component :tag="commitTag" @@ -353,7 +341,7 @@ </p> </td> - <td class="col-sm-1"> + <td> <span v-if="!isFolder && model.last_deployment" class="environment-created-date-timeago" @@ -361,7 +349,7 @@ </span> </td> - <td class="hidden-xs col-sm-3"> + <td class="hidden-xs"> <div v-if="!isFolder"> <div v-if="hasManualActions && canCreateDeployment" class="inline"> <actions-component @@ -390,12 +378,6 @@ </div> </td> </tr> - - <tr v-if="open && isFolder" - is="environment-item" - v-for="model in model.children" - :model="model"> - </tr> `, }); })(); diff --git a/app/assets/javascripts/environments/stores/environments_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6 index b8fe25ef313..928786f0741 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js.es6 +++ b/app/assets/javascripts/environments/stores/environments_store.js.es6 @@ -64,6 +64,8 @@ acc.push({ name: environment.environment_type, children: [environment], + isOpen: false, + 'vue-isChildren': environment['vue-isChildren'], }); } } else { @@ -79,6 +81,28 @@ }, /** + * Toggles folder open property given the environment type. + * + * @param {String} envType + * @return {Array} + */ + toggleFolder(envType) { + const environments = this.state.environments; + + const environmnetsCopy = environments.map((env) => { + if (env['vue-isChildren'] === true && env.name === envType) { + env.isOpen = !env.isOpen; + } + + return env; + }); + + this.state.environments = environmnetsCopy; + + return environmnetsCopy; + }, + + /** * Given an array of environments, returns the number of environments * that have the given state. * |