Commit f716da65 authored by Filipa Lacerda's avatar Filipa Lacerda

Adds template for table row

parent 58f95c2c
......@@ -4,8 +4,12 @@
window.gl = window.gl || {};
window.gl.environmentsList = window.gl.environmentsList || {};
debugger;
gl.environmentsList.EnvironmentItem = Vue.extend({
template: '#environment-item-template',
props: {
model: Object
},
......@@ -19,10 +23,6 @@
computed: {
isFolder: function () {
return this.model.children && this.model.children.length
},
isOpen: function () {
return this.open;
}
},
......
......@@ -6,7 +6,7 @@
$(() => {
const $environmentsListApp = document.getElementById('environments-list-view');
const environmentsListApp = document.getElementById('environments-list-view');
const Store = gl.environmentsList.EnvironmentsStore;
window.gl = window.gl || {};
......@@ -17,7 +17,7 @@ $(() => {
gl.EnvironmentsListApp = new Vue({
el: $environmentsListApp,
el: '#environments-list-view',
components: {
'environment-item': gl.environmentsList.EnvironmentItem
......@@ -25,7 +25,7 @@ $(() => {
data: {
state: Store.state,
endpoint: $environmentsListApp.dataset.endpoint,
endpoint: environmentsListApp.dataset.endpoint,
loading: true
},
......
......@@ -72,6 +72,10 @@
margin-right: 0;
}
}
.environment-folder-name {
cursor: pointer;
}
}
.environments-list-loading {
......
%environment-item{"inline-template" => true,
"v-for" => "environment in state.environments",
":model" => "environment"}
.name{"click" => "toggle"}
%i{"v-if" => "isFolder && isOpen"}
.environment-folder-name{"@click" => "toggle"}
%span.icon-container{"v-if" => "isFolder"}
%i{"v-show" => "open"}
= icon("caret-down")
%i{"v-if" => "isFolder && !isOpen"}
%i{"v-show" => "!open"}
= icon("caret-right")
%span.name-container
{{model.name}}
// {"name":"review","children":[{"id":8,"project_id":10,"name":"review/app","created_at":"2016-10-13T14:15:33.550Z","updated_at":"2016-10-13T14:15:33.550Z","external_url":"http://gitlab.com","environment_type":"review","state":"opened"}]}
\ No newline at end of file
......@@ -25,11 +25,11 @@
= link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
New environment
.environments-container#environments-list-view{ "v-cloak" => true, data: environments_list_data }
#environments-list-view{ data: environments_list_data, class: "environments-container" }
.environments-list-loading.text-center{ "v-if" => "loading" }
= icon("spinner spin")
.blank-state.blank-state-no-icon{ "v-if" => "!loading && state.environments.length === 0" }
.blank-state.blank-state-no-icon{ "v-if" => "!loading && !state.environments.length" }
%h2.blank-state-title
You don't have any environments right now.
%p.blank-state-text
......@@ -42,13 +42,25 @@
New environment
.table-holder{ "v-if" => "!loading && state.environments.length" }
%table.table.ci-table.environments
%thead
%th Environment
%th Last Deployment
%th Build
%th Commit
%th
%th.hidden-xs
%tbody
=render "projects/environments/components/environment"
%table.table
%tr{"is"=>"environment-item",
"inline-template" => true,
"v-for" => "environment in state.environments",
":model" => "environment"}
%script#environment-item-template{"type"=> "text/x-template"}
%tr
%td.environment-folder-name{"@click" => "toggle"}
%span.icon-container{"v-if" => "isFolder"}
%i{"v-show" => "open"}
= icon("caret-down")
%i{"v-show" => "!open"}
= icon("caret-right")
%span.name-container
{{model.name}}
%tr{"v-show" => "open", "v-if"=>"isFolder"}
%td{"v-for" => "child in model.children",
":model" => "child"}
{{child.name}}
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