Updates Component with documentation and template with links for details
This commit is contained in:
parent
37a100c80f
commit
234c0415e4
3 changed files with 96 additions and 43 deletions
|
@ -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;
|
||||
|
|
|
@ -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")
|
||||
|
||||
%i{"v-show" => "!open"}
|
||||
= icon("caret-right")
|
||||
%span.name-container
|
||||
%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}}
|
||||
|
||||
// {"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"}]}
|
||||
%span{ "v-if" => "isFolder" }
|
||||
%i{ "v-show" => "open" }
|
||||
= icon("caret-down")
|
||||
|
||||
%i{ "v-show" => "!open" }
|
||||
= icon("caret-right")
|
||||
|
||||
{{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
|
|
@ -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"}
|
||||
|
||||
|
||||
%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}}
|
||||
":model" => "environment" }
|
||||
|
||||
=render "projects/environments/components/environment"
|
Loading…
Reference in a new issue