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 */
import FilteredSearchBoards from '../../filtered_search_boards';
import { FilteredSearchContainer } from '../../../filtered_search/container';
export default {
name: 'modal-filters',
mounted() {
this.filteredSearch = new FilteredSearchBoards({path: ''}, false, this.$el);
FilteredSearchContainer.container = this.$el;
this.filteredSearch = new FilteredSearchBoards({path: ''}, false);
},
destroyed() {
FilteredSearchContainer.container = document;
gl.issueBoards.ModalStore.setDefaultFilter();
},
template: '#js-board-modal-filter',
......
app/assets/javascripts/boards/filtered_search_boards.js
export default class FilteredSearchBoards extends gl.FilteredSearchManager {
constructor(store, updateUrl = false, container = document) {
super('boards', container);
constructor(store, updateUrl = false) {
super('boards');
this.store = store;
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');
}
init() {
console.log(this.input);
console.log(this.dropdown);
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 {
static getEscapedText(text) {
......@@ -85,7 +87,8 @@
// Determines the full search query (visual tokens + input)
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 = [];
if (untilInput) {
......
app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
/* global DropLab */
import { FilteredSearchContainer } from './container';
(() => {
class FilteredSearchDropdownManager {
constructor(baseEndpoint = '', page, container) {
this.container = container;
constructor(baseEndpoint = '', page) {
this.container = FilteredSearchContainer.container;
this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
this.tokenizer = gl.FilteredSearchTokenizer;
this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
......@@ -59,10 +60,10 @@
};
}
static addWordToInput(tokenName, tokenValue = '', clicked = false, container = document) {
const input = container.querySelector('.filtered-search');
static addWordToInput(tokenName, tokenValue = '', clicked = false) {
const input = FilteredSearchContainer.container.querySelector('.filtered-search');
gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue, container);
gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
input.value = '';
if (clicked) {
......@@ -103,7 +104,6 @@
// Passing glArguments to `new gl[glClass](<arguments>)`
mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
mappingKey.reference.container = this.container;
}
if (firstLoad) {
......
app/assets/javascripts/filtered_search/filtered_search_manager.js
import { FilteredSearchContainer } from './container';
(() => {
class FilteredSearchManager {
constructor(page, container = document) {
this.container = container;
constructor(page) {
this.container = FilteredSearchContainer.container;
this.filteredSearchInput = this.container.querySelector('.filtered-search');
this.clearSearchButton = this.container.querySelector('.clear-search');
this.tokensContainer = this.container.querySelector('.tokens-container');
......@@ -9,7 +11,7 @@
if (this.filteredSearchInput) {
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.loadSearchParamsFromURL();
......
app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
import { FilteredSearchContainer } from './container';
class FilteredSearchVisualTokens {
static getLastVisualTokenBeforeInput() {
const inputLi = document.querySelector('.input-token');
const inputLi = FilteredSearchContainer.container.querySelector('.input-token');
const lastVisualToken = inputLi && inputLi.previousElementSibling;
return {
......@@ -10,7 +12,7 @@ class FilteredSearchVisualTokens {
}
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'));
}
......@@ -24,7 +26,7 @@ class FilteredSearchVisualTokens {
}
static removeSelectedToken() {
const selected = document.querySelector('.js-visual-token .selected');
const selected = FilteredSearchContainer.container.querySelector('.js-visual-token .selected');
if (selected) {
const li = selected.closest('.js-visual-token');
......@@ -41,7 +43,7 @@ class FilteredSearchVisualTokens {
`;
}
static addVisualTokenElement(name, value, isSearchTerm, container) {
static addVisualTokenElement(name, value, isSearchTerm) {
const li = document.createElement('li');
li.classList.add('js-visual-token');
li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
......@@ -54,8 +56,8 @@ class FilteredSearchVisualTokens {
}
li.querySelector('.name').innerText = name;
const tokensContainer = container.querySelector('.tokens-container');
const input = container.querySelector('.filtered-search');
const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
const input = FilteredSearchContainer.container.querySelector('.filtered-search');
tokensContainer.insertBefore(li, input.parentElement);
}
......@@ -71,20 +73,20 @@ class FilteredSearchVisualTokens {
}
}
static addFilterVisualToken(tokenName, tokenValue, container) {
static addFilterVisualToken(tokenName, tokenValue) {
const { lastVisualToken, isLastVisualTokenValid }
= FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
const addVisualTokenElement = FilteredSearchVisualTokens.addVisualTokenElement;
if (isLastVisualTokenValid) {
addVisualTokenElement(tokenName, tokenValue, false, container);
addVisualTokenElement(tokenName, tokenValue, false);
} else {
const previousTokenName = lastVisualToken.querySelector('.name').innerText;
const tokensContainer = container.querySelector('.tokens-container');
const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
tokensContainer.removeChild(lastVisualToken);
const value = tokenValue || tokenName;
addVisualTokenElement(previousTokenName, value, false, container);
addVisualTokenElement(previousTokenName, value, false);
}
}
......@@ -129,7 +131,7 @@ class FilteredSearchVisualTokens {
}
static tokenizeInput() {
const input = document.querySelector('.filtered-search');
const input = FilteredSearchContainer.container.querySelector('.filtered-search');
const { isLastVisualTokenValid } =
gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
......@@ -145,7 +147,7 @@ class FilteredSearchVisualTokens {
}
static editToken(token) {
const input = document.querySelector('.filtered-search');
const input = FilteredSearchContainer.container.querySelector('.filtered-search');
FilteredSearchVisualTokens.tokenizeInput();
......@@ -174,9 +176,9 @@ class FilteredSearchVisualTokens {
}
static moveInputToTheRight() {
const input = document.querySelector('.filtered-search');
const input = FilteredSearchContainer.container.querySelector('.filtered-search');
const inputLi = input.parentElement;
const tokenContainer = document.querySelector('.tokens-container');
const tokenContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
FilteredSearchVisualTokens.tokenizeInput();
......
app/views/shared/issuable/_search_bar.html.haml
......@@ -15,7 +15,7 @@
.scroll-container
%ul.tokens-container.list-unstyled
%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')
%button.clear-search.hidden{ type: 'button' }
= 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