From 234c0415e4b1a7584d629d9cc9d8d8d884dc7b6a Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 19 Oct 2016 10:06:03 +0100 Subject: [PATCH] Updates Component with documentation and template with links for details --- .../components/environment_item.js.es6 | 27 ++++++- .../components/_environment.html.haml | 78 ++++++++++++++++--- .../projects/environments/index.html.haml | 34 ++------ 3 files changed, 96 insertions(+), 43 deletions(-) diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index fd825842747..a8298150ff5 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -1,11 +1,22 @@ (() => { + + /** + * Envrionment Item Component + * + * 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. + * + * See this [issue](https://gitlab.com/gitlab-org/gitlab-ce/issues/22539) + * for more information. + */ + const Store = gl.environmentsList.EnvironmentsStore; window.gl = window.gl || {}; window.gl.environmentsList = window.gl.environmentsList || {}; - debugger; - gl.environmentsList.EnvironmentItem = Vue.extend({ template: '#environment-item-template', @@ -21,12 +32,24 @@ }, computed: { + + /** + * If an item has a `children` entry it means it is a folder. + * Folder items have different behaviours - it is possible to toggle + * them and show their children. + * + * @returns {Number} The length of the children array + */ isFolder: function () { return this.model.children && this.model.children.length } }, methods: { + + /** + * Toggles the visibility of a folders' children. + */ toggle: function () { if (this.isFolder) { this.open = !this.open; diff --git a/app/views/projects/environments/components/_environment.html.haml b/app/views/projects/environments/components/_environment.html.haml index 8a0e7fb4349..2943e5ca2c6 100644 --- a/app/views/projects/environments/components/_environment.html.haml +++ b/app/views/projects/environments/components/_environment.html.haml @@ -1,14 +1,68 @@ -%environment-item{"inline-template" => true, - "v-for" => "environment in state.environments", - ":model" => "environment"} - .environment-folder-name{"@click" => "toggle"} - %span.icon-container{"v-if" => "isFolder"} - %i{"v-show" => "open"} - = icon("caret-down") +%script#environment-item-template{ "type"=> "text/x-template" } + %tr.environment + %td.environment-folder-name{ "@click" => "toggle" } + %a{ "v-if" => "!isFolder", + ":href" => "'#{namespace_project_environments_path(@project.namespace, @project)}/' + model.id" } + {{model.name}} + + %span{ "v-if" => "isFolder" } + %i{ "v-show" => "open" } + = icon("caret-down") - %i{"v-show" => "!open"} - = icon("caret-right") - %span.name-container - {{model.name}} + %i{ "v-show" => "!open" } + = icon("caret-right") - // {"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 + {{model.name}} + + %td.deployment-column + %span{ "v-if" => "model.last_deployment && model.last_deployment.iid" } + {{model.last_deployment.iid}} + by + %span{ "v-if" => "model.last_deployment.user" } + {{model.last_deployment.user}} + + %td + column 3 + + %td + column 4 + + %td + column 5 + + %td.hidden-xs + .pull-right + actions + -# = 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.environment-children{ "v-show" => "open", + "v-if"=>"isFolder", + "v-for" => "child in model.children", + ":model" => "child" } + + %td + %a{ ":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" } + {{child.last_deployment.iid}} + %span{ "v-if" => "child.last_deployment && child.last_deployment.user" } + {{child.last_deployment.user}} + /= user_avatar(user: "child.last_deployment.user", size: 20) + + %td + column 3 + + %td + column 4 + + %td + column 5 + + %td.hidden-xs + .pull-right + actions \ 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 f8e264ac6bf..4391271f5c7 100644 --- a/app/views/projects/environments/index.html.haml +++ b/app/views/projects/environments/index.html.haml @@ -3,7 +3,7 @@ = render "projects/pipelines/head" - content_for :page_specific_javascripts do - = page_specific_javascript_tag('environments/environments_bundle.js') + = page_specific_javascript_tag("environments/environments_bundle.js") %div{ class: container_class } .top-area @@ -22,7 +22,7 @@ - if can?(current_user, :create_environment, @project) && !@all_environments.blank? .nav-controls - = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do + = link_to new_namespace_project_environment_path(@project.namespace, @project), class: "btn btn-create" do New environment #environments-list-view{ data: environments_list_data, class: "environments-container" } @@ -51,33 +51,9 @@ %th %th.hidden-xs %tbody - %tr{"is"=>"environment-item", + %tr{ "is"=>"environment-item", "inline-template" => true, "v-for" => "environment in state.environments", - ":model" => "environment"} + ":model" => "environment" } - -%script#environment-item-template{"type"=> "text/x-template"} - %tr.environment - %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}} - %td - %a{{"v-if" => "model.last_deployment"}} - {{model.last_deployment.id}} - %tr.environment-children{"v-show" => "open", - "v-if"=>"isFolder", - "v-for" => "child in model.children", - ":model" => "child"} - %td - {{child.name}} - %td.deployment-column - %span{"v-if" => "child.last_deployment && child.last_deployment.iid"} - {{child.last_deployment.iid}} - \ No newline at end of file +=render "projects/environments/components/environment" \ No newline at end of file