From 312d02ad6db5b38b7c393f9a84a73e9ead4adfe0 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Wed, 10 May 2017 13:30:30 -0500 Subject: [PATCH] Add GroupFilterableList to be used as filterable class MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- app/assets/javascripts/filterable_list.js | 46 +++++++++++-------- .../groups/groups_filterable_list.js | 29 ++++++++++++ app/assets/javascripts/groups/index.js | 6 ++- app/assets/javascripts/groups_list.js | 14 ------ config/webpack.config.js | 1 - 5 files changed, 60 insertions(+), 36 deletions(-) create mode 100644 app/assets/javascripts/groups/groups_filterable_list.js delete mode 100644 app/assets/javascripts/groups_list.js diff --git a/app/assets/javascripts/filterable_list.js b/app/assets/javascripts/filterable_list.js index e6d6400ca86..2c366abe1cf 100644 --- a/app/assets/javascripts/filterable_list.js +++ b/app/assets/javascripts/filterable_list.js @@ -4,44 +4,52 @@ */ export default class FilterableList { - constructor(form, filter, holder, store) { - this.store = store; + constructor(form, filter, holder) { this.filterForm = form; this.listFilterElement = filter; this.listHolderElement = holder; + this.filterUrl = `${this.filterForm.getAttribute('action')}?${$(this.filterForm).serialize()}`; } initSearch() { 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); } + unbindEvents() { + this.listFilterElement.removeEventListener('input', this.debounceFilter); + } + filterResults() { - const form = this.filterForm; - const filterUrl = `${form.getAttribute('action')}?${$(form).serialize()}`; $(this.listHolderElement).fadeTo(250, 0.5); return $.ajax({ - url: form.getAttribute('action'), - data: $(form).serialize(), + url: this.filterForm.getAttribute('action'), + data: $(this.filterForm).serialize(), type: 'GET', dataType: 'json', context: this, - complete() { - $(this.listHolderElement).fadeTo(250, 1); - }, - 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); - }, + complete: this.onFilterComplete, + success: this.onFilterSuccess, }); } + + 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); + } } diff --git a/app/assets/javascripts/groups/groups_filterable_list.js b/app/assets/javascripts/groups/groups_filterable_list.js new file mode 100644 index 00000000000..b120adb36b1 --- /dev/null +++ b/app/assets/javascripts/groups/groups_filterable_list.js @@ -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); + } +} diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js index 2b140f696c5..d136e64850f 100644 --- a/app/assets/javascripts/groups/index.js +++ b/app/assets/javascripts/groups/index.js @@ -1,7 +1,7 @@ /* eslint-disable no-unused-vars */ import Vue from 'vue'; -import GroupsList from '~/groups_list'; +import GroupFilterableList from './groups_filterable_list'; import GroupsComponent from './components/groups.vue'; import GroupFolder from './components/group_folder.vue'; import GroupItem from './components/group_item.vue'; @@ -47,7 +47,9 @@ $(() => { }, }, created() { - const groupFilterList = new GroupsList(form, filter, holder, store); + const groupFilterList = new GroupFilterableList(form, filter, holder, store); + groupFilterList.initSearch(); + this.fetchGroups(); eventHub.$on('toggleSubGroups', this.toggleSubGroups); diff --git a/app/assets/javascripts/groups_list.js b/app/assets/javascripts/groups_list.js deleted file mode 100644 index bc0ac9c3ebc..00000000000 --- a/app/assets/javascripts/groups_list.js +++ /dev/null @@ -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(); - } - } -} diff --git a/config/webpack.config.js b/config/webpack.config.js index 966b1e2283e..e4a014d97d7 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -33,7 +33,6 @@ var config = { graphs: './graphs/graphs_bundle.js', group: './group.js', groups: './groups/index.js', - groups_list: './groups_list.js', issuable: './issuable/issuable_bundle.js', issue_show: './issue_show/index.js', main: './main.js', -- GitLab