Recursive component

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

@@ -5,8 +5,7 @@
    * 
    * Used in a hierarchical structure to show folders with children
    * in a table.
-   * Based on [Tree View](https://vuejs.org/examples/tree-view.html) 
-   * The template used in this Component is non recursive.
+   * Recursive component based on [Tree View](https://vuejs.org/examples/tree-view.html) 
    * 
    * See this [issue](https://gitlab.com/gitlab-org/gitlab-ce/issues/22539) 
    * for more information.
@@ -17,7 +16,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
   
-  gl.environmentsList.EnvironmentItem = Vue.extend({
+  gl.environmentsList.EnvironmentItem = Vue.component("environment-item", {
     
     template: '#environment-item-template',
 
@@ -25,7 +24,7 @@
       model: Object
     },
 
-    data: function () {
+    data () {
       return {
         open: false
       };
@@ -40,7 +39,7 @@
        *
        * @returns {Number}  The length of the children array
        */
-      isFolder: function () {
+      isFolder () {
         return this.model.children && this.model.children.length
       }
     },
@@ -50,7 +49,7 @@
       /**
        * Toggles the visibility of a folders' children.
        */
-      toggle: function () {
+      toggle () {
         if (this.isFolder) {
           this.open = !this.open;
         }

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

@@ -20,7 +20,7 @@ $(() => {
     el: '#environments-list-view',
     
     components: {
-      'environment-item': gl.environmentsList.EnvironmentItem
+      'item': gl.environmentsList.EnvironmentItem
     },
 
     data: {

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

 %script#environment-item-template{ "type"=> "text/x-template" }
-  %tr.environment
-    %td.folder-name{ "@click" => "toggle" }
+  %tr
+    %td.folder-name
       %a{ "v-if" => "!isFolder",
         ":href" => "'#{namespace_project_environments_path(@project.namespace, @project)}/' + model.id" }
         {{model.name}}
+      %span{ "v-if" => "isFolder",
+        "@click" => "toggle" }
         
-      %span{ "v-if" => "isFolder" }
-        %i.folder-icon{ "v-show" => "open" }
-          = icon("caret-down")
-
-        %i.folder-icon{ "v-show" => "!open" }
-          = icon("caret-right")
+        %i.folder-icon{ "v-show" => "open"}
+          =icon ("caret-down")
+        %i.folder-icon{ "v-show" => "!open"}
+          =icon("caret-right")
         
         {{model.name}}
     
     %td.deployment-column
-      %span{ "v-if" => "!isFolder && model.last_deployment && model.last_deployment.iid" }
-        = precede '#' do
+      %span{ "v-if" => "!isFolder && model.last_deployment && model.last_deployment.iid"}
+        = precede "#" do
           {{model.last_deployment.iid}}
         
-        %span{ "v-if" => "model.last_deployment.user" }
+        %span{ "v-if" => "model.last_deployment.user"}
           by
           %a{":href" => "'/' + model.last_deployment.user.username"}
-
-            %img.avatar.has-tooltip.s20{ ":src" => "model.last_deployment.user.avatar_url",
-            ":alt" => "model.last_deployment.user.username + ' avatar'",
+            %img.avatar.has_tooltip.s20{ ":src" => "model.last_deployment.user.avatar_url",
+            ":alt" => "model.last_deployment.user.username + 'avatar'",
             ":title" => "model.last_deployment.user.username",
-            data: { container: 'body'},
-            width: 20, height: 20 }
+            data: {container: "body"},
+            width: 20, height: 20}
     
     %td
       %a.build-link{ "v-if" => "!isFolder && model.last_deployment && model.last_deployment.deployable",
-        ":href" => "'#{namespace_project_builds_path(@project.namespace, @project)}/' + model.last_deployment.deployable.id" }
-        {{model.last_deployment.deployable.name}}
-        = precede '#' do
-          ({{model.last_deployment.deployable.id}})
+        ":href" => "'#{namespace_project_builds_path(@project.namespace, @project)}/' + model.last_deployment.deployable.id"}
+        {{model.last_deployment.deployble.name}}
+        = precede "#" do
+          {{model.last_deployment.deployable.id}}
     
     %td
-      %a{ "v-if" => "!isFolder && model.last_deployment" }
-      -#  = render "projects/deployments/commit", deployment: "{{model.last_deployment}}"
+      %a{ "v-if" => "!isFolder && model.last_deployment"}
+        commit message goes here
       %p.commit-title{ "v-if" => "!isFolder && !model.last_deployment"}
         No deployments yet
     
     %td
-      %span{ "v-if" => "!isFolder && model.last_deployment" }
+      %span{ "v-if" => "!isFolder && model.last_deployment"}
         {{model.last_deployment.created_at}}
     
     %td.hidden-xs
       .pull-right{ "v-if" => "!isFolder"}
-        -# = render "projects/environments/external_url", environment: "{{model}}"
-        -# = render "projects/deployments/actions", deployment: "{{model.last_deployment}}"
-        -# = render "projects/environments/stop", environment: "{{model}}"
-        -# = render "projects/deployments/rollback", deployment: "{{model.last_deployment}}"
-
-  %tr{ "v-show" => "open", 
-    "v-if"=>"isFolder", 
-    "v-for" => "child in model.children", 
-    ":model" => "child" }
-
-    %td
-      %a.children-name{ ":href" => "'#{namespace_project_environments_path(@project.namespace, @project)}/' + child.id" }
-        {{child.name}}
-  
-    %td.deployment-column
-      %span{ "v-if" => "child.last_deployment && child.last_deployment.iid" }
-        = precede '#' do
-          {{child.last_deployment.iid}}
-
-        %span{ "v-if" => "child.last_deployment.user" }
-          by
-          %a{":href" => "'/' + child.last_deployment.user.username"}
+        actions will go here
       
-            %img.avatar.has-tooltip.s20{ ":src" => "child.last_deployment.user.avatar_url",
-            ":alt" => "child.last_deployment.user.username + ' avatar'",
-            ":title" => "child.last_deployment.user.username",
-            data: { container: 'body'},
-            width: 20, height: 20 }
-
-    %td
-      %a.build-link{ "v-if" => "child.last_deployment && child.last_deployment.deployable",
-        ":href" => "'#{namespace_project_builds_path(@project.namespace, @project)}/' + child.last_deployment.deployable.id" }
-        {{child.last_deployment.deployable.name}}  
-        = precede '#' do
-          ({{child.last_deployment.deployable.id}})
-
-    %td
-      %a{ "v-if" => "child.last_deployment" }
-      -#  = render "projects/deployments/commit", deployment: "{{child.last_deployment}}"
-      %p.commit-title{ "v-if" => "!child.last_deployment"}
-        No deployments yet
-
-    %td 
-      %span{ "v-if" => "child.last_deployment" }
-        {{child.last_deployment.created_at}}
-
-    %td.hidden-xs
-      .pull-right
-        -# = render "projects/environments/external_url", environment: "{{child}}"
-        -# = render "projects/deployments/actions", deployment: "{{child.last_deployment}}"
-        -# = render "projects/environments/stop", environment: "{{child}}"
-        -# = render "projects/deployments/rollback", deployment: "{{child.last_deployment}}"
+  %tr{"v-if" => "open && isFolder", "is" => "environment-item", "v-for" => "model in model.children", ":model" => "model"}

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

@@ -41,7 +41,7 @@
         = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
           New environment
           
-    .table-holder{ "v-if" => "!loading && state.environments.length" }
+    .table-holder{ "v-if" => "!loading && state.environments" }
       %table.table.ci-table.environments
         %thead
           %th Environment
@@ -51,9 +51,6 @@
           %th
           %th.hidden-xs
         %tbody
-          %tr{ "is"=>"environment-item",
-            "inline-template" => true, 
-            "v-for" => "environment in state.environments", 
-            ":model" => "environment" }
+          %tr{"is" => "environment-item", "v-for" => "model in state.environments", ":model" => "model"}
 
 =render "projects/environments/components/environment"