BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 09f7b9dc by Phil Hughes
Options

Created a container class for filtered search

This class returns the correct container the filtered search should be run in At the moment it doesn't allow for multiple to be used at once, need to look at a way to fix this [ci skip]
parent a9deabea
Showing with 54 additions and 28 deletions
app/assets/javascripts/boards/components/modal/filters.js
/* global Vue */ /* global Vue */
import FilteredSearchBoards from '../../filtered_search_boards'; import FilteredSearchBoards from '../../filtered_search_boards';
import { FilteredSearchContainer } from '../../../filtered_search/container';
export default { export default {
name: 'modal-filters', name: 'modal-filters',
mounted() { mounted() {
this.filteredSearch = new FilteredSearchBoards({path: ''}, false, this.$el); FilteredSearchContainer.container = this.$el;
this.filteredSearch = new FilteredSearchBoards({path: ''}, false);
}, },
destroyed() { destroyed() {
FilteredSearchContainer.container = document;
gl.issueBoards.ModalStore.setDefaultFilter(); gl.issueBoards.ModalStore.setDefaultFilter();
}, },
template: '#js-board-modal-filter', template: '#js-board-modal-filter',
......
app/assets/javascripts/boards/filtered_search_boards.js
export default class FilteredSearchBoards extends gl.FilteredSearchManager { export default class FilteredSearchBoards extends gl.FilteredSearchManager {
constructor(store, updateUrl = false, container = document) { constructor(store, updateUrl = false) {
super('boards', container); super('boards');
this.store = store; this.store = store;
this.updateUrl = updateUrl; this.updateUrl = updateUrl;
......
app/assets/javascripts/filtered_search/container.js 0 → 100644
let _container = document;
class FilteredSearchContainerClass {
set container(container) {
_container = container;
}
get container() {
return _container;
}
}
export let FilteredSearchContainer = new FilteredSearchContainerClass();
app/assets/javascripts/filtered_search/dropdown_user.js
...@@ -56,6 +56,8 @@ require('./filtered_search_dropdown'); ...@@ -56,6 +56,8 @@ require('./filtered_search_dropdown');
} }
init() { init() {
console.log(this.input);
console.log(this.dropdown);
this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init(); this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
} }
} }
......
app/assets/javascripts/filtered_search/dropdown_utils.js
import { FilteredSearchContainer } from './container';
(() => { (() => {
class DropdownUtils { class DropdownUtils {
static getEscapedText(text) { static getEscapedText(text) {
...@@ -85,7 +87,8 @@ ...@@ -85,7 +87,8 @@
// Determines the full search query (visual tokens + input) // Determines the full search query (visual tokens + input)
static getSearchQuery(untilInput = false) { static getSearchQuery(untilInput = false) {
const tokens = [].slice.call(document.querySelectorAll('.tokens-container li')); const container = FilteredSearchContainer.container;
const tokens = [].slice.call(container.querySelectorAll('.tokens-container li'));
const values = []; const values = [];
if (untilInput) { if (untilInput) {
......
app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
/* global DropLab */ /* global DropLab */
import { FilteredSearchContainer } from './container';
(() => { (() => {
class FilteredSearchDropdownManager { class FilteredSearchDropdownManager {
constructor(baseEndpoint = '', page, container) { constructor(baseEndpoint = '', page) {
this.container = container; this.container = FilteredSearchContainer.container;
this.baseEndpoint = baseEndpoint.replace(/\/$/, ''); this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
this.tokenizer = gl.FilteredSearchTokenizer; this.tokenizer = gl.FilteredSearchTokenizer;
this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys; this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
...@@ -59,10 +60,10 @@ ...@@ -59,10 +60,10 @@
}; };
} }
static addWordToInput(tokenName, tokenValue = '', clicked = false, container = document) { static addWordToInput(tokenName, tokenValue = '', clicked = false) {
const input = container.querySelector('.filtered-search'); const input = FilteredSearchContainer.container.querySelector('.filtered-search');
gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue, container); gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
input.value = ''; input.value = '';
if (clicked) { if (clicked) {
...@@ -103,7 +104,6 @@ ...@@ -103,7 +104,6 @@
// Passing glArguments to `new gl[glClass](<arguments>)` // Passing glArguments to `new gl[glClass](<arguments>)`
mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))(); mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
mappingKey.reference.container = this.container;
} }
if (firstLoad) { if (firstLoad) {
......
app/assets/javascripts/filtered_search/filtered_search_manager.js
import { FilteredSearchContainer } from './container';
(() => { (() => {
class FilteredSearchManager { class FilteredSearchManager {
constructor(page, container = document) { constructor(page) {
this.container = container; this.container = FilteredSearchContainer.container;
this.filteredSearchInput = this.container.querySelector('.filtered-search'); this.filteredSearchInput = this.container.querySelector('.filtered-search');
this.clearSearchButton = this.container.querySelector('.clear-search'); this.clearSearchButton = this.container.querySelector('.clear-search');
this.tokensContainer = this.container.querySelector('.tokens-container'); this.tokensContainer = this.container.querySelector('.tokens-container');
...@@ -9,7 +11,7 @@ ...@@ -9,7 +11,7 @@
if (this.filteredSearchInput) { if (this.filteredSearchInput) {
this.tokenizer = gl.FilteredSearchTokenizer; this.tokenizer = gl.FilteredSearchTokenizer;
this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page, container); this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
this.bindEvents(); this.bindEvents();
this.loadSearchParamsFromURL(); this.loadSearchParamsFromURL();
......
app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
import { FilteredSearchContainer } from './container';
class FilteredSearchVisualTokens { class FilteredSearchVisualTokens {
static getLastVisualTokenBeforeInput() { static getLastVisualTokenBeforeInput() {
const inputLi = document.querySelector('.input-token'); const inputLi = FilteredSearchContainer.container.querySelector('.input-token');
const lastVisualToken = inputLi && inputLi.previousElementSibling; const lastVisualToken = inputLi && inputLi.previousElementSibling;
return { return {
...@@ -10,7 +12,7 @@ class FilteredSearchVisualTokens { ...@@ -10,7 +12,7 @@ class FilteredSearchVisualTokens {
} }
static unselectTokens() { static unselectTokens() {
const otherTokens = document.querySelectorAll('.js-visual-token .selectable.selected'); const otherTokens = FilteredSearchContainer.container.querySelectorAll('.js-visual-token .selectable.selected');
[].forEach.call(otherTokens, t => t.classList.remove('selected')); [].forEach.call(otherTokens, t => t.classList.remove('selected'));
} }
...@@ -24,7 +26,7 @@ class FilteredSearchVisualTokens { ...@@ -24,7 +26,7 @@ class FilteredSearchVisualTokens {
} }
static removeSelectedToken() { static removeSelectedToken() {
const selected = document.querySelector('.js-visual-token .selected'); const selected = FilteredSearchContainer.container.querySelector('.js-visual-token .selected');
if (selected) { if (selected) {
const li = selected.closest('.js-visual-token'); const li = selected.closest('.js-visual-token');
...@@ -41,7 +43,7 @@ class FilteredSearchVisualTokens { ...@@ -41,7 +43,7 @@ class FilteredSearchVisualTokens {
`; `;
} }
static addVisualTokenElement(name, value, isSearchTerm, container) { static addVisualTokenElement(name, value, isSearchTerm) {
const li = document.createElement('li'); const li = document.createElement('li');
li.classList.add('js-visual-token'); li.classList.add('js-visual-token');
li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token'); li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
...@@ -54,8 +56,8 @@ class FilteredSearchVisualTokens { ...@@ -54,8 +56,8 @@ class FilteredSearchVisualTokens {
} }
li.querySelector('.name').innerText = name; li.querySelector('.name').innerText = name;
const tokensContainer = container.querySelector('.tokens-container'); const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
const input = container.querySelector('.filtered-search'); const input = FilteredSearchContainer.container.querySelector('.filtered-search');
tokensContainer.insertBefore(li, input.parentElement); tokensContainer.insertBefore(li, input.parentElement);
} }
...@@ -71,20 +73,20 @@ class FilteredSearchVisualTokens { ...@@ -71,20 +73,20 @@ class FilteredSearchVisualTokens {
} }
} }
static addFilterVisualToken(tokenName, tokenValue, container) { static addFilterVisualToken(tokenName, tokenValue) {
const { lastVisualToken, isLastVisualTokenValid } const { lastVisualToken, isLastVisualTokenValid }
= FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
const addVisualTokenElement = FilteredSearchVisualTokens.addVisualTokenElement; const addVisualTokenElement = FilteredSearchVisualTokens.addVisualTokenElement;
if (isLastVisualTokenValid) { if (isLastVisualTokenValid) {
addVisualTokenElement(tokenName, tokenValue, false, container); addVisualTokenElement(tokenName, tokenValue, false);
} else { } else {
const previousTokenName = lastVisualToken.querySelector('.name').innerText; const previousTokenName = lastVisualToken.querySelector('.name').innerText;
const tokensContainer = container.querySelector('.tokens-container'); const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
tokensContainer.removeChild(lastVisualToken); tokensContainer.removeChild(lastVisualToken);
const value = tokenValue || tokenName; const value = tokenValue || tokenName;
addVisualTokenElement(previousTokenName, value, false, container); addVisualTokenElement(previousTokenName, value, false);
} }
} }
...@@ -129,7 +131,7 @@ class FilteredSearchVisualTokens { ...@@ -129,7 +131,7 @@ class FilteredSearchVisualTokens {
} }
static tokenizeInput() { static tokenizeInput() {
const input = document.querySelector('.filtered-search'); const input = FilteredSearchContainer.container.querySelector('.filtered-search');
const { isLastVisualTokenValid } = const { isLastVisualTokenValid } =
gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
...@@ -145,7 +147,7 @@ class FilteredSearchVisualTokens { ...@@ -145,7 +147,7 @@ class FilteredSearchVisualTokens {
} }
static editToken(token) { static editToken(token) {
const input = document.querySelector('.filtered-search'); const input = FilteredSearchContainer.container.querySelector('.filtered-search');
FilteredSearchVisualTokens.tokenizeInput(); FilteredSearchVisualTokens.tokenizeInput();
...@@ -174,9 +176,9 @@ class FilteredSearchVisualTokens { ...@@ -174,9 +176,9 @@ class FilteredSearchVisualTokens {
} }
static moveInputToTheRight() { static moveInputToTheRight() {
const input = document.querySelector('.filtered-search'); const input = FilteredSearchContainer.container.querySelector('.filtered-search');
const inputLi = input.parentElement; const inputLi = input.parentElement;
const tokenContainer = document.querySelector('.tokens-container'); const tokenContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
FilteredSearchVisualTokens.tokenizeInput(); FilteredSearchVisualTokens.tokenizeInput();
......
app/views/shared/issuable/_search_bar.html.haml
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
.scroll-container .scroll-container
%ul.tokens-container.list-unstyled %ul.tokens-container.list-unstyled
%li.input-token %li.input-token
%input.form-control.filtered-search{ placeholder: 'Search or filter results...', data: { id: 'filtered-search', 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } } %input.form-control.filtered-search{ placeholder: 'Search or filter results...', data: { id: "filtered-search-#{type.to_s}", 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } }
= icon('filter') = icon('filter')
%button.clear-search.hidden{ type: 'button' } %button.clear-search.hidden{ type: 'button' }
= icon('times') = icon('times')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment