From 4d141cb30dfcad94db89bdc08f4ea907dc2f8bdf Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Thu, 1 Jun 2017 16:47:39 -0500 Subject: [PATCH] Use eventHub to update groups from GroupFilterableList class --- .../groups/groups_filterable_list.js | 13 ++++--- app/assets/javascripts/groups/index.js | 39 +++++++++++++------ .../groups/services/groups_service.js | 14 +++++-- .../javascripts/groups/stores/groups_store.js | 2 + 4 files changed, 46 insertions(+), 22 deletions(-) diff --git a/app/assets/javascripts/groups/groups_filterable_list.js b/app/assets/javascripts/groups/groups_filterable_list.js index d1347dc5a6e..f3c1b8ab545 100644 --- a/app/assets/javascripts/groups/groups_filterable_list.js +++ b/app/assets/javascripts/groups/groups_filterable_list.js @@ -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); } } diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js index 26b172f3e94..21a1c71ca77 100644 --- a/app/assets/javascripts/groups/index.js +++ b/app/assets/javascripts/groups/index.js @@ -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 diff --git a/app/assets/javascripts/groups/services/groups_service.js b/app/assets/javascripts/groups/services/groups_service.js index 8d67c0244f3..b893a38a494 100644 --- a/app/assets/javascripts/groups/services/groups_service.js +++ b/app/assets/javascripts/groups/services/groups_service.js @@ -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); diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js index 4f31efb67a7..d8353a92881 100644 --- a/app/assets/javascripts/groups/stores/groups_store.js +++ b/app/assets/javascripts/groups/stores/groups_store.js @@ -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,