Use eventHub to update groups from GroupFilterableList class
This commit is contained in:
parent
0880094455
commit
4d141cb30d
4 changed files with 46 additions and 22 deletions
|
@ -1,10 +1,10 @@
|
||||||
import FilterableList from '~/filterable_list';
|
import FilterableList from '~/filterable_list';
|
||||||
|
import eventHub from './event_hub';
|
||||||
|
|
||||||
export default class GroupFilterableList extends FilterableList {
|
export default class GroupFilterableList extends FilterableList {
|
||||||
constructor({ form, filter, holder, store }) {
|
constructor(form, filter, holder) {
|
||||||
super(form, filter, holder);
|
super(form, filter, holder);
|
||||||
|
|
||||||
this.store = store;
|
|
||||||
this.$dropdown = $('.js-group-filter-dropdown-wrap');
|
this.$dropdown = $('.js-group-filter-dropdown-wrap');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -41,15 +41,16 @@ export default class GroupFilterableList extends FilterableList {
|
||||||
|
|
||||||
onFilterSuccess(data, xhr) {
|
onFilterSuccess(data, xhr) {
|
||||||
super.onFilterSuccess(data);
|
super.onFilterSuccess(data);
|
||||||
|
const paginationData = {
|
||||||
this.store.setGroups(data);
|
|
||||||
this.store.storePagination({
|
|
||||||
'X-Per-Page': xhr.getResponseHeader('X-Per-Page'),
|
'X-Per-Page': xhr.getResponseHeader('X-Per-Page'),
|
||||||
'X-Page': xhr.getResponseHeader('X-Page'),
|
'X-Page': xhr.getResponseHeader('X-Page'),
|
||||||
'X-Total': xhr.getResponseHeader('X-Total'),
|
'X-Total': xhr.getResponseHeader('X-Total'),
|
||||||
'X-Total-Pages': xhr.getResponseHeader('X-Total-Pages'),
|
'X-Total-Pages': xhr.getResponseHeader('X-Total-Pages'),
|
||||||
'X-Next-Page': xhr.getResponseHeader('X-Next-Page'),
|
'X-Next-Page': xhr.getResponseHeader('X-Next-Page'),
|
||||||
'X-Prev-Page': xhr.getResponseHeader('X-Prev-Page'),
|
'X-Prev-Page': xhr.getResponseHeader('X-Prev-Page'),
|
||||||
});
|
};
|
||||||
|
|
||||||
|
eventHub.$emit('updateGroups', data);
|
||||||
|
eventHub.$emit('updatePagination', paginationData);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,11 +10,18 @@ import eventHub from './event_hub';
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const el = document.querySelector('#dashboard-group-app');
|
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('groups-component', GroupsComponent);
|
||||||
Vue.component('group-folder', GroupFolder);
|
Vue.component('group-folder', GroupFolder);
|
||||||
Vue.component('group-item', GroupItem);
|
Vue.component('group-item', GroupItem);
|
||||||
|
|
||||||
return new Vue({
|
// eslint-disable-next-line no-new
|
||||||
|
new Vue({
|
||||||
el,
|
el,
|
||||||
data() {
|
data() {
|
||||||
this.store = new GroupsStore();
|
this.store = new GroupsStore();
|
||||||
|
@ -31,20 +38,26 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
let getGroups = null;
|
let getGroups = null;
|
||||||
let page = null;
|
let page = null;
|
||||||
let pageParam = null;
|
let pageParam = null;
|
||||||
|
let filterGroups = null;
|
||||||
|
let filterGroupsParam = null;
|
||||||
|
|
||||||
if (parentGroup) {
|
if (parentGroup) {
|
||||||
parentId = parentGroup.id;
|
parentId = parentGroup.id;
|
||||||
}
|
}
|
||||||
|
|
||||||
pageParam = gl.utils.getParameterByName('page');
|
pageParam = gl.utils.getParameterByName('page');
|
||||||
|
|
||||||
if (pageParam) {
|
if (pageParam) {
|
||||||
page = 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) => {
|
getGroups.then((response) => {
|
||||||
this.store.setGroups(response.json(), parentGroup);
|
eventHub.$emit('updateGroups', response.json(), parentGroup);
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
// TODO: Handle error
|
// TODO: Handle error
|
||||||
|
@ -69,6 +82,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
// TODO: Handle error
|
// TODO: Handle error
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
updateGroups(groups, parentGroup) {
|
||||||
|
this.store.setGroups(groups, parentGroup);
|
||||||
|
},
|
||||||
|
updatePagination(headers) {
|
||||||
|
this.store.storePagination(headers);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
let groupFilterList = null;
|
let groupFilterList = null;
|
||||||
|
@ -76,22 +95,18 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
const filter = document.querySelector('.js-groups-list-filter');
|
const filter = document.querySelector('.js-groups-list-filter');
|
||||||
const holder = document.querySelector('.js-groups-list-holder');
|
const holder = document.querySelector('.js-groups-list-holder');
|
||||||
|
|
||||||
const options = {
|
groupFilterList = new GroupFilterableList(form, filter, holder);
|
||||||
form,
|
|
||||||
filter,
|
|
||||||
holder,
|
|
||||||
store: this.store,
|
|
||||||
};
|
|
||||||
groupFilterList = new GroupFilterableList(options);
|
|
||||||
groupFilterList.initSearch();
|
groupFilterList.initSearch();
|
||||||
|
|
||||||
eventHub.$on('toggleSubGroups', this.toggleSubGroups);
|
eventHub.$on('toggleSubGroups', this.toggleSubGroups);
|
||||||
eventHub.$on('leaveGroup', this.leaveGroup);
|
eventHub.$on('leaveGroup', this.leaveGroup);
|
||||||
|
eventHub.$on('updateGroups', this.updateGroups);
|
||||||
|
eventHub.$on('updatePagination', this.updatePagination);
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.fetchGroups()
|
this.fetchGroups()
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
this.store.storePagination(response.headers);
|
eventHub.$emit('updatePagination', response.headers);
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
// TODO: Handle error
|
// TODO: Handle error
|
||||||
|
|
|
@ -8,16 +8,22 @@ export default class GroupsService {
|
||||||
this.groups = Vue.resource(endpoint);
|
this.groups = Vue.resource(endpoint);
|
||||||
}
|
}
|
||||||
|
|
||||||
getGroups(parentId, page) {
|
getGroups(parentId, page, filterGroups) {
|
||||||
const data = {};
|
const data = {};
|
||||||
|
|
||||||
if (parentId) {
|
if (parentId) {
|
||||||
data.parent_id = parentId;
|
data.parent_id = parentId;
|
||||||
// Do not send this param for sub groups
|
} else {
|
||||||
} else if (page) {
|
// Do not send the following param for sub groups
|
||||||
|
if (page) {
|
||||||
data.page = page;
|
data.page = page;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (filterGroups) {
|
||||||
|
data.filter_groups = filterGroups;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return this.groups.get(data);
|
return this.groups.get(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -18,6 +18,7 @@ export default class GroupsStore {
|
||||||
return tree;
|
return tree;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line class-methods-use-this
|
||||||
resetGroups(parent) {
|
resetGroups(parent) {
|
||||||
const parentGroup = parent;
|
const parentGroup = parent;
|
||||||
parentGroup.subGroups = {};
|
parentGroup.subGroups = {};
|
||||||
|
@ -107,6 +108,7 @@ export default class GroupsStore {
|
||||||
return this.groups;
|
return this.groups;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line class-methods-use-this
|
||||||
decorateGroup(rawGroup) {
|
decorateGroup(rawGroup) {
|
||||||
return {
|
return {
|
||||||
id: rawGroup.id,
|
id: rawGroup.id,
|
||||||
|
|
Loading…
Reference in a new issue