From f716da652d857b26dd5e424c77ac0898ae85bdb5 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 17 Oct 2016 18:03:19 +0100
Subject: [PATCH] Adds template for table row

---
 .../components/environment_item.js.es6        |  8 ++---
 .../environments/environments_bundle.js.es6   |  6 ++--
 .../stylesheets/pages/environments.scss       |  4 +++
 .../components/_environment.html.haml         | 17 +++++----
 .../projects/environments/index.html.haml     | 36 ++++++++++++-------
 5 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 70fab9b07d4..fd825842747 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/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;
       }
     },
 
diff --git a/app/assets/javascripts/environments/environments_bundle.js.es6 b/app/assets/javascripts/environments/environments_bundle.js.es6
index 89d2fad1215..2769f6899fe 100644
--- a/app/assets/javascripts/environments/environments_bundle.js.es6
+++ b/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
     },
     
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 495284fa2d7..f0bc2f635aa 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -72,6 +72,10 @@
       margin-right: 0;
     }
   }
+  
+  .environment-folder-name {
+    cursor: pointer;
+  }
 }
 
 .environments-list-loading {
diff --git a/app/views/projects/environments/components/_environment.html.haml b/app/views/projects/environments/components/_environment.html.haml
index 01e3cb3a290..8a0e7fb4349 100644
--- a/app/views/projects/environments/components/_environment.html.haml
+++ b/app/views/projects/environments/components/_environment.html.haml
@@ -1,9 +1,14 @@
 %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
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index 3483683bc2f..ec83399f480 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/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}}
-- 
GitLab