Extracts table into a reusable component
This commit is contained in:
parent
6483bc8ca6
commit
7af6982e5f
|
@ -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', {
|
||||||
|
|
||||||
<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>
|
|
||||||
<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 state.environments"
|
|
||||||
v-bind:model="model">
|
|
||||||
<tr is="environment-item"
|
|
||||||
:model="model"
|
|
||||||
:can-create-deployment="canCreateDeploymentParsed"
|
:can-create-deployment="canCreateDeploymentParsed"
|
||||||
:can-read-environment="canReadEnvironmentParsed"
|
:can-read-environment="canReadEnvironmentParsed"
|
||||||
:play-icon-svg="playIconSvg"
|
:play-icon-svg="playIconSvg"
|
||||||
:terminal-icon-svg="terminalIconSvg"
|
:terminal-icon-svg="terminalIconSvg"
|
||||||
:commit-icon-svg="commitIconSvg"></tr>
|
:commit-icon-svg="commitIconSvg">
|
||||||
</template>
|
</environment-table>
|
||||||
</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"
|
||||||
|
|
|
@ -0,0 +1,74 @@
|
||||||
|
/**
|
||||||
|
* 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>
|
||||||
|
`,
|
||||||
|
});
|
Loading…
Reference in New Issue