Commit cb33856e authored by Clement Ho's avatar Clement Ho

Add dropdowns for assignee

parent a1ca5c76
/* eslint-disable no-param-reassign */
/*= require filtered_search/filtered_search_dropdown */
((global) => {
class DropdownAssignee extends gl.FilteredSearchDropdown {
constructor(dropdown, input) {
super(dropdown, input);
this.listId = 'js-dropdown-assignee';
}
itemClicked(e) {
console.log('assignee clicked');
}
renderContent() {
droplab.addData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=');
}
}
global.DropdownAssignee = DropdownAssignee;
})(window.gl || (window.gl = {}));
/* eslint-disable no-param-reassign */
/*= require filtered_search/filtered_search_dropdown */
((global) => {
const dropdownData = [{
icon: 'fa-search',
......@@ -22,34 +24,11 @@
tag: '<label>',
}];
class DropdownHint {
constructor(dropdown, input) {
this.input = input;
this.dropdown = dropdown;
this.bindEvents();
}
bindEvents() {
this.dropdown.addEventListener('click.dl', this.itemClicked.bind(this));
}
unbindEvents() {
this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this));
}
// cleanup() {
// this.unbindEvents();
// droplab.setConfig({'filtered-search': {}});
// droplab.setData('filtered-search', []);
// this.dropdown.style.display = 'hidden';
// }
getSelectedText(selectedToken) {
// TODO: Get last word from FilteredSearchTokenizer
const lastWord = this.input.value.split(' ').last();
const lastWordIndex = selectedToken.indexOf(lastWord);
return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length);
class DropdownHint extends gl.FilteredSearchDropdown {
constructor(dropdown, input, filterKeyword) {
super(dropdown, input);
this.listId = 'js-dropdown-hint';
this.filterKeyword = filterKeyword;
}
itemClicked(e) {
......@@ -68,37 +47,9 @@
this.input.dispatchEvent(new Event('input'));
}
dismissDropdown() {
this.input.removeAttribute('data-dropdown-trigger');
droplab.setConfig({'filtered-search': {}});
droplab.setData('filtered-search', []);
this.unbindEvents();
}
setAsDropdown() {
this.input.setAttribute('data-dropdown-trigger', '#js-dropdown-hint');
// const hookId = 'filtered-search';
// const listId = 'js-dropdown-hint';
// const hook = droplab.hooks.filter((h) => {
// return h.id === hookId;
// })[0];
// if (hook.list.list.id !== listId) {
// droplab.changeHookList(hookId, `#${listId}`);
// }
}
render() {
console.log('render dropdown hint');
this.setAsDropdown();
droplab.setConfig({
'filtered-search': {
text: 'hint'
}
});
droplab.setData('filtered-search', dropdownData);
renderContent() {
super.renderContent();
droplab.setData(this.hookId, dropdownData);
}
}
......
/* eslint-disable no-param-reassign */
((global) => {
const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
class FilteredSearchDropdown {
constructor(dropdown, input) {
this.hookId = 'filtered-search';
this.input = input;
this.dropdown = dropdown;
this.bindEvents();
}
bindEvents() {
this.dropdown.addEventListener('click.dl', this.itemClicked.bind(this));
}
unbindEvents() {
this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this));
}
getSelectedText(selectedToken) {
// TODO: Get last word from FilteredSearchTokenizer
const lastWord = this.input.value.split(' ').last();
const lastWordIndex = selectedToken.indexOf(lastWord);
return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length);
}
itemClicked(e) {
// Overridden by dropdown sub class
}
getFilterConfig(filterKeyword) {
const config = {};
const filterConfig = {
text: filterKeyword,
};
config[this.hookId] = filterKeyword ? filterConfig : {};
return config;
}
dismissDropdown() {
this.input.removeAttribute(DATA_DROPDOWN_TRIGGER);
droplab.setConfig(this.getFilterConfig());
droplab.setData(this.hookId, []);
this.unbindEvents();
}
setAsDropdown() {
this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.listId}`);
}
getCurrentHook() {
return droplab.hooks.filter(h => h.id === this.hookId)[0];
}
renderContent() {
droplab.setConfig(this.getFilterConfig(this.filterKeyword));
}
render() {
this.setAsDropdown();
const firstTimeInitialized = this.getCurrentHook() === undefined;
if (firstTimeInitialized) {
this.renderContent();
} else if(this.getCurrentHook().list.list.id !== this.listId) {
droplab.changeHookList(this.hookId, `#${this.listId}`);
this.renderContent();
}
}
}
global.FilteredSearchDropdown = FilteredSearchDropdown;
})(window.gl || (window.gl = {}));
......@@ -78,6 +78,7 @@
}
let dropdownHint;
let dropdownAssignee;
class FilteredSearchManager {
constructor() {
......@@ -99,19 +100,38 @@
if (match && this.currentDropdown !== match.key) {
console.log(`🦄 load ${match.key} dropdown`);
this.dismissCurrentDropdown();
this.currentDropdown = match.key;
if (match.key === 'assignee') {
if (!dropdownAssignee) {
// document.querySelector('.filtered-search').setAttribute('data-dropdown-trigger', '#js-dropdown-assignee');
dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), document.querySelector('.filtered-search'));
}
dropdownAssignee.render();
}
} else if (!match && this.currentDropdown !== 'hint') {
console.log('🦄 load hint dropdown');
this.dismissCurrentDropdown();
this.currentDropdown = 'hint';
if (!dropdownHint) {
dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search'))
dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search'), 'hint');
}
dropdownHint.render();
}
}
dismissCurrentDropdown() {
if (this.currentDropdown === 'hint') {
dropdownHint.dismissDropdown();
}
}
setDropdown() {
const { lastToken } = this.tokenizer.processTokens(document.querySelector('.filtered-search').value);
......
......@@ -16,6 +16,23 @@
= icon('filter')
%button.clear-search.hidden{ type: 'button' }
= icon('times')
%ul#js-dropdown-hint.dropdown-menu{ 'data-dynamic' => true }
%li
%button.btn.btn-link
%i.fa{ 'class': '{{icon}}'}
%span.js-filter-hint
{{hint}}
%span.js-filter-tag
{{tag}}
#js-dropdown-assignee.dropdown-menu{ 'data-dropdown' => true }
%ul{ 'data-dynamic' => true }
%li
%button.btn.btn-link
%img.avatar.avatar-inline{ 'src': '{{avatar_url}}', width: '30' }
%strong
{{name}}
%span
{{username}}
.pull-right
- if boards_page
#js-boards-seach.issue-boards-search
......
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