Adds template for table row

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -4,7 +4,11 @@
   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;
       }
     },
 

app/assets/javascripts/environments/environments_bundle.js.es6

@@ -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
     },
     

app/assets/stylesheets/pages/environments.scss

@@ -72,6 +72,10 @@
       margin-right: 0;
     }
   }
+  
+  .environment-folder-name {
+    cursor: pointer;
+  }
 }
 
 .environments-list-loading {

app/views/projects/environments/components/_environment.html.haml

 %environment-item{"inline-template" => true, 
   "v-for" => "environment in state.environments", 
   ":model" => "environment"}
-  .name{"click" => "toggle"}
-    %i{"v-if" => "isFolder && isOpen"}
-      = icon("caret-down")
-      %i{"v-if" => "isFolder && !isOpen"}
-      = icon("caret-right")
-    {{model.name}}
+  .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}}
+
+    //  {"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

app/views/projects/environments/index.html.haml

@@ -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}}