summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/groups_list.js
diff options
context:
space:
mode:
authorDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>2017-03-03 12:13:03 +0200
committerDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>2017-03-03 18:39:30 +0200
commit5bb6a85b902c6096970d6c82bb63cae7985e55e8 (patch)
tree4621bdcade58234a3c97d6198ff7adde776a4d45 /app/assets/javascripts/groups_list.js
parent8fd5aeee7fee7506c44674d61f794ff8685b90e6 (diff)
downloadgitlab-ce-5bb6a85b902c6096970d6c82bb63cae7985e55e8.tar.gz
Refactor projects filtering by name
Reuse same search form and behavior for dashboard#projects, group#projects and admin#projects. Repsect all other options like sorting, personal filter when search projects by name. Create FilterableList JS class to handle identical behaviour of projects and groups lists. This change also makes filtering and sorting availabe on explore#projects and explore#groups no matter if you are logged in or not. Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Diffstat (limited to 'app/assets/javascripts/groups_list.js')
-rw-r--r--app/assets/javascripts/groups_list.js44
1 files changed, 6 insertions, 38 deletions
diff --git a/app/assets/javascripts/groups_list.js b/app/assets/javascripts/groups_list.js
index 0ef81e49444..49b29affaa5 100644
--- a/app/assets/javascripts/groups_list.js
+++ b/app/assets/javascripts/groups_list.js
@@ -1,47 +1,15 @@
+import FilterableList from './filterable_list';
+
/**
- * Based on project list search.
* Makes search request for groups when user types a value in the search input.
* Updates the html content of the page with the received one.
*/
export default class GroupsList {
constructor() {
- this.groupsListFilterElement = document.querySelector('.js-groups-list-filter');
- this.groupsListHolderElement = document.querySelector('.js-groups-list-holder');
-
- this.initSearch();
- }
-
- initSearch() {
- this.debounceFilter = _.debounce(this.filterResults.bind(this), 500);
-
- this.groupsListFilterElement.removeEventListener('input', this.debounceFilter);
- this.groupsListFilterElement.addEventListener('input', this.debounceFilter);
- }
-
- filterResults() {
- const form = document.querySelector('form#group-filter-form');
- const groupFilterUrl = `${form.getAttribute('action')}?${$(form).serialize()}`;
-
- $(this.groupsListHolderElement).fadeTo(250, 0.5);
-
- return $.ajax({
- url: form.getAttribute('action'),
- data: $(form).serialize(),
- type: 'GET',
- dataType: 'json',
- context: this,
- complete() {
- $(this.groupsListHolderElement).fadeTo(250, 1);
- },
- success(data) {
- this.groupsListHolderElement.innerHTML = data.html;
-
- // Change url so if user reload a page - search results are saved
- return window.history.replaceState({
- page: groupFilterUrl,
+ var form = document.querySelector('form#group-filter-form');
+ var filter = document.querySelector('.js-groups-list-filter');
+ var holder = document.querySelector('.js-groups-list-holder');
- }, document.title, groupFilterUrl);
- },
- });
+ new FilterableList(form, filter, holder);
}
}