diff options
Diffstat (limited to 'app/assets/javascripts/environments/components/environments_table.vue')
-rw-r--r-- | app/assets/javascripts/environments/components/environments_table.vue | 79 |
1 files changed, 56 insertions, 23 deletions
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index c04da4b81b7..b4eca47957e 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -30,63 +30,96 @@ export default { default: false, }, }, - methods: { folderUrl(model) { return `${window.location.pathname}/folders/${model.folderName}`; }, + shouldRenderFolderContent(env) { + return env.isFolder && + env.isOpen && + env.children && + env.children.length > 0; + }, }, }; </script> <template> - <div class="ci-table" role="grid"> - <div class="gl-responsive-table-row table-row-header" role="row"> - <div class="table-section section-10 environments-name" role="columnheader"> - {{s__("Environments|Environment")}} + <div + class="ci-table" + role="grid" + > + <div + class="gl-responsive-table-row table-row-header" + role="row" + > + <div + class="table-section section-10 environments-name" + role="columnheader" + > + {{ s__("Environments|Environment") }} </div> - <div class="table-section section-10 environments-deploy" role="columnheader"> - {{s__("Environments|Deployment")}} + <div + class="table-section section-10 environments-deploy" + role="columnheader" + > + {{ s__("Environments|Deployment") }} </div> - <div class="table-section section-15 environments-build" role="columnheader"> - {{s__("Environments|Job")}} + <div + class="table-section section-15 environments-build" + role="columnheader" + > + {{ s__("Environments|Job") }} </div> - <div class="table-section section-25 environments-commit" role="columnheader"> - {{s__("Environments|Commit")}} + <div + class="table-section section-25 environments-commit" + role="columnheader" + > + {{ s__("Environments|Commit") }} </div> - <div class="table-section section-10 environments-date" role="columnheader"> - {{s__("Environments|Updated")}} + <div + class="table-section section-10 environments-date" + role="columnheader" + > + {{ s__("Environments|Updated") }} </div> </div> <template - v-for="model in environments" - v-bind:model="model"> + v-for="(model, i) in environments" + :model="model"> <div is="environment-item" :model="model" :can-create-deployment="canCreateDeployment" :can-read-environment="canReadEnvironment" - /> + :key="i" + /> - <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> - <div v-if="model.isLoadingFolderContent"> + <template + v-if="shouldRenderFolderContent(model)" + > + <div + v-if="model.isLoadingFolderContent" + :key="`loading-item-${i}`"> <loading-icon size="2" /> </div> <template v-else> <div is="environment-item" - v-for="children in model.children" + v-for="(children, index) in model.children" :model="children" :can-create-deployment="canCreateDeployment" :can-read-environment="canReadEnvironment" - /> + :key="`env-item-${i}-${index}`" + /> - <div> + <div :key="`sub-div-${i}`"> <div class="text-center prepend-top-10"> <a :href="folderUrl(model)" - class="btn btn-default"> - {{s__("Environments|Show all")}} + class="btn btn-default" + > + {{ s__("Environments|Show all") }} </a> </div> </div> |