kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Updates Component with documentation and template with links for details

This commit is contained in:
Filipa Lacerda 2016-10-19 10:06:03 +01:00
parent 37a100c80f
commit 234c0415e4
3 changed files with 96 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/assets/javascripts/environments/components/environment_item.js.es6
View File

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

78
app/views/projects/environments/components/_environment.html.haml
View File

@ -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"}]}
{{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

34
app/views/projects/environments/index.html.haml
View File

@ -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}}
=render "projects/environments/components/environment"