Add GroupFilterableList to be used as filterable class
- GroupFilterableList extends from FilterableList which is used in other places that doesn’t use Vue. - GroupFilterableList interacts with a Vue store object. - Deleted groups_list.js since is not needed anymore, filtering is handled via ajax in GroupFilterableList
This commit is contained in:
parent
3b6ff7fcaf
commit
312d02ad6d
5 changed files with 60 additions and 36 deletions
|
@ -4,44 +4,52 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export default class FilterableList {
|
export default class FilterableList {
|
||||||
constructor(form, filter, holder, store) {
|
constructor(form, filter, holder) {
|
||||||
this.store = store;
|
|
||||||
this.filterForm = form;
|
this.filterForm = form;
|
||||||
this.listFilterElement = filter;
|
this.listFilterElement = filter;
|
||||||
this.listHolderElement = holder;
|
this.listHolderElement = holder;
|
||||||
|
this.filterUrl = `${this.filterForm.getAttribute('action')}?${$(this.filterForm).serialize()}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
initSearch() {
|
initSearch() {
|
||||||
this.debounceFilter = _.debounce(this.filterResults.bind(this), 500);
|
this.debounceFilter = _.debounce(this.filterResults.bind(this), 500);
|
||||||
|
|
||||||
this.listFilterElement.removeEventListener('input', this.debounceFilter);
|
this.unbindEvents();
|
||||||
|
this.bindEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
bindEvents() {
|
||||||
this.listFilterElement.addEventListener('input', this.debounceFilter);
|
this.listFilterElement.addEventListener('input', this.debounceFilter);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
unbindEvents() {
|
||||||
|
this.listFilterElement.removeEventListener('input', this.debounceFilter);
|
||||||
|
}
|
||||||
|
|
||||||
filterResults() {
|
filterResults() {
|
||||||
const form = this.filterForm;
|
|
||||||
const filterUrl = `${form.getAttribute('action')}?${$(form).serialize()}`;
|
|
||||||
|
|
||||||
$(this.listHolderElement).fadeTo(250, 0.5);
|
$(this.listHolderElement).fadeTo(250, 0.5);
|
||||||
|
|
||||||
return $.ajax({
|
return $.ajax({
|
||||||
url: form.getAttribute('action'),
|
url: this.filterForm.getAttribute('action'),
|
||||||
data: $(form).serialize(),
|
data: $(this.filterForm).serialize(),
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
context: this,
|
context: this,
|
||||||
complete() {
|
complete: this.onFilterComplete,
|
||||||
$(this.listHolderElement).fadeTo(250, 1);
|
success: this.onFilterSuccess,
|
||||||
},
|
|
||||||
success(data) {
|
|
||||||
this.store.setGroups(data);
|
|
||||||
|
|
||||||
// Change url so if user reload a page - search results are saved
|
|
||||||
return window.history.replaceState({
|
|
||||||
page: filterUrl,
|
|
||||||
|
|
||||||
}, document.title, filterUrl);
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onFilterSuccess(data) {
|
||||||
|
// Change url so if user reload a page - search results are saved
|
||||||
|
return window.history.replaceState({
|
||||||
|
page: this.filterUrl,
|
||||||
|
|
||||||
|
}, document.title, this.filterUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
onFilterComplete() {
|
||||||
|
$(this.listHolderElement).fadeTo(250, 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
29
app/assets/javascripts/groups/groups_filterable_list.js
Normal file
29
app/assets/javascripts/groups/groups_filterable_list.js
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
import FilterableList from '~/filterable_list';
|
||||||
|
|
||||||
|
|
||||||
|
export default class GroupFilterableList extends FilterableList {
|
||||||
|
constructor(form, filter, holder, store) {
|
||||||
|
super(form, filter, holder);
|
||||||
|
|
||||||
|
this.store = store;
|
||||||
|
}
|
||||||
|
|
||||||
|
bindEvents() {
|
||||||
|
super.bindEvents();
|
||||||
|
|
||||||
|
this.onFormSubmitWrapper = this.onFormSubmit.bind(this);
|
||||||
|
this.filterForm.addEventListener('submit', this.onFormSubmitWrapper);
|
||||||
|
}
|
||||||
|
|
||||||
|
onFormSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
this.filterResults();
|
||||||
|
}
|
||||||
|
|
||||||
|
onFilterSuccess(data) {
|
||||||
|
super.onFilterSuccess();
|
||||||
|
|
||||||
|
this.store.setGroups(data);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
/* eslint-disable no-unused-vars */
|
/* eslint-disable no-unused-vars */
|
||||||
|
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import GroupsList from '~/groups_list';
|
import GroupFilterableList from './groups_filterable_list';
|
||||||
import GroupsComponent from './components/groups.vue';
|
import GroupsComponent from './components/groups.vue';
|
||||||
import GroupFolder from './components/group_folder.vue';
|
import GroupFolder from './components/group_folder.vue';
|
||||||
import GroupItem from './components/group_item.vue';
|
import GroupItem from './components/group_item.vue';
|
||||||
|
@ -47,7 +47,9 @@ $(() => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
const groupFilterList = new GroupsList(form, filter, holder, store);
|
const groupFilterList = new GroupFilterableList(form, filter, holder, store);
|
||||||
|
groupFilterList.initSearch();
|
||||||
|
|
||||||
this.fetchGroups();
|
this.fetchGroups();
|
||||||
|
|
||||||
eventHub.$on('toggleSubGroups', this.toggleSubGroups);
|
eventHub.$on('toggleSubGroups', this.toggleSubGroups);
|
||||||
|
|
|
@ -1,14 +0,0 @@
|
||||||
import FilterableList from './filterable_list';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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(form, filter, holder, store) {
|
|
||||||
if (form && filter && holder && store) {
|
|
||||||
const list = new FilterableList(form, filter, holder, store);
|
|
||||||
list.initSearch();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -33,7 +33,6 @@ var config = {
|
||||||
graphs: './graphs/graphs_bundle.js',
|
graphs: './graphs/graphs_bundle.js',
|
||||||
group: './group.js',
|
group: './group.js',
|
||||||
groups: './groups/index.js',
|
groups: './groups/index.js',
|
||||||
groups_list: './groups_list.js',
|
|
||||||
issuable: './issuable/issuable_bundle.js',
|
issuable: './issuable/issuable_bundle.js',
|
||||||
issue_show: './issue_show/index.js',
|
issue_show: './issue_show/index.js',
|
||||||
main: './main.js',
|
main: './main.js',
|
||||||
|
|
Loading…
Reference in a new issue