Adds tab behavior to vue component
This commit is contained in:
parent
d697b9c86d
commit
9c41191a00
|
@ -15,6 +15,15 @@ $(() => {
|
|||
gl.EnvironmentsListApp.$destroy(true);
|
||||
}
|
||||
|
||||
const filters = {
|
||||
stopped (environments) {
|
||||
return environments.filter((env) => env.state === 'stopped')
|
||||
},
|
||||
available (environments) {
|
||||
return environments.filter((env) => env.state === 'available')
|
||||
}
|
||||
};
|
||||
|
||||
gl.EnvironmentsListApp = new Vue({
|
||||
|
||||
el: '#environments-list-view',
|
||||
|
@ -26,13 +35,33 @@ $(() => {
|
|||
data: {
|
||||
state: Store.state,
|
||||
endpoint: environmentsListApp.dataset.endpoint,
|
||||
loading: true
|
||||
loading: true,
|
||||
visibility: 'available'
|
||||
},
|
||||
|
||||
computed: {
|
||||
filteredEnvironments () {
|
||||
return filters[this.visibility](this.state.environments);
|
||||
},
|
||||
|
||||
countStopped () {
|
||||
return filters['stopped'](this.state.environments).length;
|
||||
},
|
||||
|
||||
counAvailable () {
|
||||
return filters['available'](this.state.environments).length;
|
||||
}
|
||||
},
|
||||
|
||||
init: Store.create.bind(Store),
|
||||
|
||||
created() {
|
||||
gl.environmentsService = new EnvironmentsService(this.endpoint);
|
||||
|
||||
const scope = this.$options.getQueryParameter('scope');
|
||||
if (scope) {
|
||||
this.visibility = scope;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -45,6 +74,21 @@ $(() => {
|
|||
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Transforms the url parameter into an object and
|
||||
* returns the one requested.
|
||||
*
|
||||
* @param {String} param
|
||||
* @returns {String} The value of the requested parameter.
|
||||
*/
|
||||
getQueryParameter(param) {
|
||||
return window.location.search.substring(1).split('&').reduce((acc, param) => {
|
||||
acc[param.split('=')[0]] = param.split('=')[1];
|
||||
return acc;
|
||||
}, {})[param];
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
@ -82,7 +82,7 @@
|
|||
|
||||
return acc;
|
||||
}, []).sort(this.sortByName);
|
||||
|
||||
|
||||
this.state.environments = environmentsTree;
|
||||
|
||||
return environmentsTree;
|
||||
|
|
|
@ -8,14 +8,8 @@ class Projects::EnvironmentsController < Projects::ApplicationController
|
|||
|
||||
def index
|
||||
@scope = params[:scope]
|
||||
@all_environments = project.environments
|
||||
@environments =
|
||||
if @scope == 'stopped'
|
||||
@all_environments.stopped
|
||||
else
|
||||
@all_environments.available
|
||||
end
|
||||
|
||||
@environments = project.environments
|
||||
|
||||
respond_to do |format|
|
||||
format.html
|
||||
format.json do
|
||||
|
|
|
@ -4,28 +4,28 @@
|
|||
|
||||
- content_for :page_specific_javascripts do
|
||||
= page_specific_javascript_tag("environments/environments_bundle.js")
|
||||
|
||||
%div{ class: container_class }
|
||||
|
||||
#environments-list-view{ data: environments_list_data, class: container_class }
|
||||
.top-area
|
||||
%ul.nav-links
|
||||
%ul.nav-links{ "v-if" => "!loading" }
|
||||
%li{class: ('active' if @scope.nil?)}
|
||||
= link_to project_environments_path(@project) do
|
||||
Available
|
||||
%span.badge.js-available-environments-count
|
||||
= number_with_delimiter(@all_environments.available.count)
|
||||
{{counAvailable}}
|
||||
|
||||
%li{class: ('active' if @scope == 'stopped')}
|
||||
= link_to project_environments_path(@project, scope: :stopped) do
|
||||
Stopped
|
||||
%span.badge.js-stopped-environments-count
|
||||
= number_with_delimiter(@all_environments.stopped.count)
|
||||
{{countStopped}}
|
||||
|
||||
- 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
|
||||
New environment
|
||||
|
||||
#environments-list-view{ data: environments_list_data, class: "environments-container" }
|
||||
.environments-container
|
||||
.environments-list-loading.text-center{ "v-if" => "loading" }
|
||||
= icon("spinner spin")
|
||||
|
||||
|
@ -51,6 +51,6 @@
|
|||
%th
|
||||
%th.hidden-xs
|
||||
%tbody
|
||||
%tr{"is" => "environment-item", "v-for" => "model in state.environments", ":model" => "model"}
|
||||
%tr{"is" => "environment-item", "v-for" => "model in filteredEnvironments", ":model" => "model"}
|
||||
|
||||
=render "projects/environments/components/environment"
|
||||
|
|
Loading…
Reference in New Issue