Adds tab behavior to vue component
This commit is contained in:
parent
d697b9c86d
commit
9c41191a00
|
@ -15,6 +15,15 @@ $(() => {
|
||||||
gl.EnvironmentsListApp.$destroy(true);
|
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({
|
gl.EnvironmentsListApp = new Vue({
|
||||||
|
|
||||||
el: '#environments-list-view',
|
el: '#environments-list-view',
|
||||||
|
@ -26,13 +35,33 @@ $(() => {
|
||||||
data: {
|
data: {
|
||||||
state: Store.state,
|
state: Store.state,
|
||||||
endpoint: environmentsListApp.dataset.endpoint,
|
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),
|
init: Store.create.bind(Store),
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
gl.environmentsService = new EnvironmentsService(this.endpoint);
|
gl.environmentsService = new EnvironmentsService(this.endpoint);
|
||||||
|
|
||||||
|
const scope = this.$options.getQueryParameter('scope');
|
||||||
|
if (scope) {
|
||||||
|
this.visibility = scope;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -45,6 +74,21 @@ $(() => {
|
||||||
|
|
||||||
this.loading = false;
|
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];
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -8,13 +8,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
|
||||||
|
|
||||||
def index
|
def index
|
||||||
@scope = params[:scope]
|
@scope = params[:scope]
|
||||||
@all_environments = project.environments
|
@environments = project.environments
|
||||||
@environments =
|
|
||||||
if @scope == 'stopped'
|
|
||||||
@all_environments.stopped
|
|
||||||
else
|
|
||||||
@all_environments.available
|
|
||||||
end
|
|
||||||
|
|
||||||
respond_to do |format|
|
respond_to do |format|
|
||||||
format.html
|
format.html
|
||||||
|
|
|
@ -5,27 +5,27 @@
|
||||||
- content_for :page_specific_javascripts do
|
- 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 }
|
#environments-list-view{ data: environments_list_data, class: container_class }
|
||||||
.top-area
|
.top-area
|
||||||
%ul.nav-links
|
%ul.nav-links{ "v-if" => "!loading" }
|
||||||
%li{class: ('active' if @scope.nil?)}
|
%li{class: ('active' if @scope.nil?)}
|
||||||
= link_to project_environments_path(@project) do
|
= link_to project_environments_path(@project) do
|
||||||
Available
|
Available
|
||||||
%span.badge.js-available-environments-count
|
%span.badge.js-available-environments-count
|
||||||
= number_with_delimiter(@all_environments.available.count)
|
{{counAvailable}}
|
||||||
|
|
||||||
%li{class: ('active' if @scope == 'stopped')}
|
%li{class: ('active' if @scope == 'stopped')}
|
||||||
= link_to project_environments_path(@project, scope: :stopped) do
|
= link_to project_environments_path(@project, scope: :stopped) do
|
||||||
Stopped
|
Stopped
|
||||||
%span.badge.js-stopped-environments-count
|
%span.badge.js-stopped-environments-count
|
||||||
= number_with_delimiter(@all_environments.stopped.count)
|
{{countStopped}}
|
||||||
|
|
||||||
- if can?(current_user, :create_environment, @project) && !@all_environments.blank?
|
- if can?(current_user, :create_environment, @project) && !@all_environments.blank?
|
||||||
.nav-controls
|
.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
|
New environment
|
||||||
|
|
||||||
#environments-list-view{ data: environments_list_data, class: "environments-container" }
|
.environments-container
|
||||||
.environments-list-loading.text-center{ "v-if" => "loading" }
|
.environments-list-loading.text-center{ "v-if" => "loading" }
|
||||||
= icon("spinner spin")
|
= icon("spinner spin")
|
||||||
|
|
||||||
|
@ -51,6 +51,6 @@
|
||||||
%th
|
%th
|
||||||
%th.hidden-xs
|
%th.hidden-xs
|
||||||
%tbody
|
%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"
|
=render "projects/environments/components/environment"
|
||||||
|
|
Loading…
Reference in New Issue