Make class initialization configurable
This commit is contained in:
parent
1610912704
commit
bcb447bf31
|
@ -3,11 +3,11 @@ import DropLab from '~/droplab/drop_lab';
|
|||
import FilteredSearchContainer from './container';
|
||||
|
||||
class FilteredSearchDropdownManager {
|
||||
constructor(baseEndpoint = '', tokenizer, page) {
|
||||
constructor(baseEndpoint = '', tokenizer, page, isGroup, filteredSearchTokenKeys) {
|
||||
this.container = FilteredSearchContainer.container;
|
||||
this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
|
||||
this.tokenizer = tokenizer;
|
||||
this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
|
||||
this.filteredSearchTokenKeys = filteredSearchTokenKeys;
|
||||
this.filteredSearchInput = this.container.querySelector('.filtered-search');
|
||||
this.page = page;
|
||||
|
||||
|
@ -29,7 +29,15 @@ class FilteredSearchDropdownManager {
|
|||
}
|
||||
|
||||
setupMapping() {
|
||||
this.mapping = {
|
||||
const supportedTokens = this.filteredSearchTokenKeys.getKeys();
|
||||
const allowedMappings = {
|
||||
hint: {
|
||||
reference: null,
|
||||
gl: 'DropdownHint',
|
||||
element: this.container.querySelector('#js-dropdown-hint'),
|
||||
},
|
||||
};
|
||||
const availableMappings = {
|
||||
author: {
|
||||
reference: null,
|
||||
gl: 'DropdownUser',
|
||||
|
@ -64,12 +72,15 @@ class FilteredSearchDropdownManager {
|
|||
gl: 'DropdownEmoji',
|
||||
element: this.container.querySelector('#js-dropdown-my-reaction'),
|
||||
},
|
||||
hint: {
|
||||
reference: null,
|
||||
gl: 'DropdownHint',
|
||||
element: this.container.querySelector('#js-dropdown-hint'),
|
||||
},
|
||||
};
|
||||
|
||||
supportedTokens.forEach((type) => {
|
||||
if (availableMappings[type]) {
|
||||
allowedMappings[type] = availableMappings[type];
|
||||
}
|
||||
});
|
||||
|
||||
this.mapping = allowedMappings;
|
||||
}
|
||||
|
||||
static addWordToInput(tokenName, tokenValue = '', clicked = false) {
|
||||
|
|
|
@ -3,20 +3,33 @@ import { visitUrl } from '../lib/utils/url_utility';
|
|||
import Flash from '../flash';
|
||||
import FilteredSearchContainer from './container';
|
||||
import RecentSearchesRoot from './recent_searches_root';
|
||||
import FilteredSearchTokenKeys from './filtered_search_token_keys';
|
||||
import RecentSearchesStore from './stores/recent_searches_store';
|
||||
import RecentSearchesService from './services/recent_searches_service';
|
||||
import eventHub from './event_hub';
|
||||
import { addClassIfElementExists } from '../lib/utils/dom_utils';
|
||||
|
||||
class FilteredSearchManager {
|
||||
constructor(page) {
|
||||
constructor({
|
||||
page,
|
||||
filteredSearchTokenKeys = FilteredSearchTokenKeys,
|
||||
stateFiltersSelector = '.issues-state-filters',
|
||||
}) {
|
||||
this.isGroup = false;
|
||||
this.states = ['opened', 'closed', 'merged', 'all'];
|
||||
|
||||
this.page = page;
|
||||
this.container = FilteredSearchContainer.container;
|
||||
this.filteredSearchInput = this.container.querySelector('.filtered-search');
|
||||
this.filteredSearchInputForm = this.filteredSearchInput.form;
|
||||
this.clearSearchButton = this.container.querySelector('.clear-search');
|
||||
this.tokensContainer = this.container.querySelector('.tokens-container');
|
||||
this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
|
||||
this.filteredSearchTokenKeys = filteredSearchTokenKeys;
|
||||
this.stateFiltersSelector = stateFiltersSelector;
|
||||
this.recentsStorageKeyNames = {
|
||||
issues: 'issue-recent-searches',
|
||||
merge_requests: 'merge-request-recent-searches',
|
||||
};
|
||||
|
||||
this.recentSearchesStore = new RecentSearchesStore({
|
||||
isLocalStorageAvailable: RecentSearchesService.isAvailable(),
|
||||
|
@ -25,11 +38,7 @@ class FilteredSearchManager {
|
|||
this.searchHistoryDropdownElement = document.querySelector('.js-filtered-search-history-dropdown');
|
||||
const fullPath = this.searchHistoryDropdownElement ?
|
||||
this.searchHistoryDropdownElement.dataset.fullPath : 'project';
|
||||
let recentSearchesPagePrefix = 'issue-recent-searches';
|
||||
if (this.page === 'merge_requests') {
|
||||
recentSearchesPagePrefix = 'merge-request-recent-searches';
|
||||
}
|
||||
const recentSearchesKey = `${fullPath}-${recentSearchesPagePrefix}`;
|
||||
const recentSearchesKey = `${fullPath}-${this.recentsStorageKeyNames[this.page]}`;
|
||||
this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
|
||||
}
|
||||
|
||||
|
@ -58,7 +67,13 @@ class FilteredSearchManager {
|
|||
|
||||
if (this.filteredSearchInput) {
|
||||
this.tokenizer = gl.FilteredSearchTokenizer;
|
||||
this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', this.tokenizer, this.page);
|
||||
this.dropdownManager = new gl.FilteredSearchDropdownManager(
|
||||
this.filteredSearchInput.getAttribute('data-base-endpoint') || '',
|
||||
this.tokenizer,
|
||||
this.page,
|
||||
this.isGroup,
|
||||
this.filteredSearchTokenKeys,
|
||||
);
|
||||
|
||||
this.recentSearchesRoot = new RecentSearchesRoot(
|
||||
this.recentSearchesStore,
|
||||
|
@ -86,40 +101,33 @@ class FilteredSearchManager {
|
|||
}
|
||||
|
||||
bindStateEvents() {
|
||||
this.stateFilters = document.querySelector('.container-fluid .issues-state-filters');
|
||||
this.stateFilters = document.querySelector(`.container-fluid ${this.stateFiltersSelector}`);
|
||||
|
||||
if (this.stateFilters) {
|
||||
this.searchStateWrapper = this.searchState.bind(this);
|
||||
|
||||
this.stateFilters.querySelector('[data-state="opened"]')
|
||||
.addEventListener('click', this.searchStateWrapper);
|
||||
this.stateFilters.querySelector('[data-state="closed"]')
|
||||
.addEventListener('click', this.searchStateWrapper);
|
||||
this.stateFilters.querySelector('[data-state="all"]')
|
||||
.addEventListener('click', this.searchStateWrapper);
|
||||
|
||||
this.mergedState = this.stateFilters.querySelector('[data-state="merged"]');
|
||||
if (this.mergedState) {
|
||||
this.mergedState.addEventListener('click', this.searchStateWrapper);
|
||||
}
|
||||
this.applyToStateFilters((filterEl) => {
|
||||
filterEl.addEventListener('click', this.searchStateWrapper);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
unbindStateEvents() {
|
||||
if (this.stateFilters) {
|
||||
this.stateFilters.querySelector('[data-state="opened"]')
|
||||
.removeEventListener('click', this.searchStateWrapper);
|
||||
this.stateFilters.querySelector('[data-state="closed"]')
|
||||
.removeEventListener('click', this.searchStateWrapper);
|
||||
this.stateFilters.querySelector('[data-state="all"]')
|
||||
.removeEventListener('click', this.searchStateWrapper);
|
||||
|
||||
if (this.mergedState) {
|
||||
this.mergedState.removeEventListener('click', this.searchStateWrapper);
|
||||
}
|
||||
this.applyToStateFilters((filterEl) => {
|
||||
filterEl.removeEventListener('click', this.searchStateWrapper);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
applyToStateFilters(callback) {
|
||||
this.stateFilters.querySelectorAll('a[data-state]').forEach((filterEl) => {
|
||||
if (this.states.indexOf(filterEl.dataset.state) > -1) {
|
||||
callback(filterEl);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
this.handleFormSubmit = this.handleFormSubmit.bind(this);
|
||||
this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
|
||||
|
|
Loading…
Reference in New Issue