Commit 7af6982e authored by Filipa Lacerda's avatar Filipa Lacerda

Extracts table into a reusable component

parent 6483bc8c
...@@ -4,14 +4,14 @@ ...@@ -4,14 +4,14 @@
const Vue = require('vue'); const Vue = require('vue');
Vue.use(require('vue-resource')); Vue.use(require('vue-resource'));
const EnvironmentsService = require('../services/environments_service'); const EnvironmentsService = require('../services/environments_service');
const EnvironmentItem = require('./environment_item'); const EnvironmentTable = require('./environments_table');
const Store = require('../stores/environments_store'); const Store = require('../stores/environments_store');
require('../../vue_shared/components/table_pagination'); require('../../vue_shared/components/table_pagination');
module.exports = Vue.component('environment-component', { module.exports = Vue.component('environment-component', {
components: { components: {
'environment-item': EnvironmentItem, 'environment-table': EnvironmentTable,
'table-pagination': gl.VueGlPagination, 'table-pagination': gl.VueGlPagination,
}, },
...@@ -209,30 +209,15 @@ module.exports = Vue.component('environment-component', { ...@@ -209,30 +209,15 @@ module.exports = Vue.component('environment-component', {
<div class="table-holder" <div class="table-holder"
v-if="!isLoading && state.environments.length > 0"> v-if="!isLoading && state.environments.length > 0">
<table class="table ci-table environments">
<thead> <environment-table
<tr> :environments="state.environments"
<th class="environments-name">Environment</th> :can-create-deployment="canCreateDeploymentParsed"
<th class="environments-deploy">Last deployment</th> :can-read-environment="canReadEnvironmentParsed"
<th class="environments-build">Job</th> :play-icon-svg="playIconSvg"
<th class="environments-commit">Commit</th> :terminal-icon-svg="terminalIconSvg"
<th class="environments-date">Updated</th> :commit-icon-svg="commitIconSvg">
<th class="hidden-xs environments-actions"></th> </environment-table>
</tr>
</thead>
<tbody>
<template v-for="model in state.environments"
v-bind:model="model">
<tr is="environment-item"
:model="model"
:can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed"
:play-icon-svg="playIconSvg"
:terminal-icon-svg="terminalIconSvg"
:commit-icon-svg="commitIconSvg"></tr>
</template>
</tbody>
</table>
<table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1" <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
:change="changePage" :change="changePage"
......
/**
* Render environments table.
*/
const Vue = require('vue');
const EnvironmentItem = require('./environment_item');
module.exports = Vue.component('environment-table-component', {
components: {
'environment-item': EnvironmentItem,
},
props: {
environments: {
type: Array,
required: true,
default: () => ([]),
},
canReadEnvironment: {
type: Boolean,
required: false,
default: false,
},
canCreateDeployment: {
type: Boolean,
required: false,
default: false,
},
commitIconSvg: {
type: String,
required: false,
},
playIconSvg: {
type: String,
required: false,
},
terminalIconSvg: {
type: String,
required: false,
},
},
template: `
<table class="table ci-table environments">
<thead>
<tr>
<th class="environments-name">Environment</th>
<th class="environments-deploy">Last deployment</th>
<th class="environments-build">Job</th>
<th class="environments-commit">Commit</th>
<th class="environments-date">Updated</th>
<th class="hidden-xs environments-actions"></th>
</tr>
</thead>
<tbody>
<template v-for="model in environments"
v-bind:model="model">
<tr is="environment-item"
:model="model"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
:play-icon-svg="playIconSvg"
:terminal-icon-svg="terminalIconSvg"
:commit-icon-svg="commitIconSvg"></tr>
</template>
</tbody>
</table>
`,
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment