Use eventHub to update groups from GroupFilterableList class

This commit is contained in:
Alfredo Sumaran 2017-06-01 16:47:39 -05:00
parent 0880094455
commit 4d141cb30d
4 changed files with 46 additions and 22 deletions

View file

@ -1,10 +1,10 @@
import FilterableList from '~/filterable_list';
import eventHub from './event_hub';
export default class GroupFilterableList extends FilterableList {
constructor({ form, filter, holder, store }) {
constructor(form, filter, holder) {
super(form, filter, holder);
this.store = store;
this.$dropdown = $('.js-group-filter-dropdown-wrap');
}
@ -41,15 +41,16 @@ export default class GroupFilterableList extends FilterableList {
onFilterSuccess(data, xhr) {
super.onFilterSuccess(data);
this.store.setGroups(data);
this.store.storePagination({
const paginationData = {
'X-Per-Page': xhr.getResponseHeader('X-Per-Page'),
'X-Page': xhr.getResponseHeader('X-Page'),
'X-Total': xhr.getResponseHeader('X-Total'),
'X-Total-Pages': xhr.getResponseHeader('X-Total-Pages'),
'X-Next-Page': xhr.getResponseHeader('X-Next-Page'),
'X-Prev-Page': xhr.getResponseHeader('X-Prev-Page'),
});
};
eventHub.$emit('updateGroups', data);
eventHub.$emit('updatePagination', paginationData);
}
}

View file

@ -10,11 +10,18 @@ import eventHub from './event_hub';
document.addEventListener('DOMContentLoaded', () => {
const el = document.querySelector('#dashboard-group-app');
// Don't do anything if element doesn't exist (No groups)
// This is for when the user enters directly to the page via URL
if (!el) {
return;
}
Vue.component('groups-component', GroupsComponent);
Vue.component('group-folder', GroupFolder);
Vue.component('group-item', GroupItem);
return new Vue({
// eslint-disable-next-line no-new
new Vue({
el,
data() {
this.store = new GroupsStore();
@ -31,20 +38,26 @@ document.addEventListener('DOMContentLoaded', () => {
let getGroups = null;
let page = null;
let pageParam = null;
let filterGroups = null;
let filterGroupsParam = null;
if (parentGroup) {
parentId = parentGroup.id;
}
pageParam = gl.utils.getParameterByName('page');
if (pageParam) {
page = pageParam;
}
getGroups = this.service.getGroups(parentId, page);
filterGroupsParam = gl.utils.getParameterByName('filter_groups');
if (filterGroupsParam) {
filterGroups = filterGroupsParam;
}
getGroups = this.service.getGroups(parentId, page, filterGroups);
getGroups.then((response) => {
this.store.setGroups(response.json(), parentGroup);
eventHub.$emit('updateGroups', response.json(), parentGroup);
})
.catch(() => {
// TODO: Handle error
@ -69,6 +82,12 @@ document.addEventListener('DOMContentLoaded', () => {
// TODO: Handle error
});
},
updateGroups(groups, parentGroup) {
this.store.setGroups(groups, parentGroup);
},
updatePagination(headers) {
this.store.storePagination(headers);
},
},
beforeMount() {
let groupFilterList = null;
@ -76,22 +95,18 @@ document.addEventListener('DOMContentLoaded', () => {
const filter = document.querySelector('.js-groups-list-filter');
const holder = document.querySelector('.js-groups-list-holder');
const options = {
form,
filter,
holder,
store: this.store,
};
groupFilterList = new GroupFilterableList(options);
groupFilterList = new GroupFilterableList(form, filter, holder);
groupFilterList.initSearch();
eventHub.$on('toggleSubGroups', this.toggleSubGroups);
eventHub.$on('leaveGroup', this.leaveGroup);
eventHub.$on('updateGroups', this.updateGroups);
eventHub.$on('updatePagination', this.updatePagination);
},
mounted() {
this.fetchGroups()
.then((response) => {
this.store.storePagination(response.headers);
eventHub.$emit('updatePagination', response.headers);
})
.catch(() => {
// TODO: Handle error

View file

@ -8,14 +8,20 @@ export default class GroupsService {
this.groups = Vue.resource(endpoint);
}
getGroups(parentId, page) {
getGroups(parentId, page, filterGroups) {
const data = {};
if (parentId) {
data.parent_id = parentId;
// Do not send this param for sub groups
} else if (page) {
data.page = page;
} else {
// Do not send the following param for sub groups
if (page) {
data.page = page;
}
if (filterGroups) {
data.filter_groups = filterGroups;
}
}
return this.groups.get(data);

View file

@ -18,6 +18,7 @@ export default class GroupsStore {
return tree;
}
// eslint-disable-next-line class-methods-use-this
resetGroups(parent) {
const parentGroup = parent;
parentGroup.subGroups = {};
@ -107,6 +108,7 @@ export default class GroupsStore {
return this.groups;
}
// eslint-disable-next-line class-methods-use-this
decorateGroup(rawGroup) {
return {
id: rawGroup.id,