Commit 9c41191a authored by Filipa Lacerda's avatar Filipa Lacerda

Adds tab behavior to vue component

parent d697b9c8
......@@ -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"
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment