Perform filtered search when state tab is changed
This commit is contained in:
parent
5578506eb1
commit
63746d2d22
|
@ -77,6 +77,47 @@ class FilteredSearchManager {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
bindStateEvents() {
|
||||||
|
const stateFilters = document.querySelector('.container-fluid .issues-state-filters');
|
||||||
|
|
||||||
|
if (stateFilters) {
|
||||||
|
this.searchStateOpened = this.search.bind(this, 'opened');
|
||||||
|
this.searchStateMerged = this.search.bind(this, 'merged');
|
||||||
|
this.searchStateClosed = this.search.bind(this, 'closed');
|
||||||
|
this.searchStateAll = this.search.bind(this, 'all');
|
||||||
|
|
||||||
|
stateFilters.querySelector('.state-opened')
|
||||||
|
.addEventListener('click', this.searchStateOpened);
|
||||||
|
stateFilters.querySelector('.state-closed')
|
||||||
|
.addEventListener('click', this.searchStateClosed);
|
||||||
|
stateFilters.querySelector('.state-all')
|
||||||
|
.addEventListener('click', this.searchStateAll);
|
||||||
|
|
||||||
|
const mergedState = stateFilters.querySelector('.state-merged');
|
||||||
|
if (mergedState) {
|
||||||
|
mergedState.addEventListener('click', this.searchStateMerged);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
unbindStateEvents() {
|
||||||
|
const stateFilters = document.querySelector('.container-fluid .issues-state-filters');
|
||||||
|
|
||||||
|
if (stateFilters) {
|
||||||
|
stateFilters.querySelector('.state-opened')
|
||||||
|
.removeEventListener('click', this.searchStateOpened);
|
||||||
|
stateFilters.querySelector('.state-closed')
|
||||||
|
.removeEventListener('click', this.searchStateClosed);
|
||||||
|
stateFilters.querySelector('.state-all')
|
||||||
|
.removeEventListener('click', this.searchStateAll);
|
||||||
|
|
||||||
|
const mergedState = stateFilters.querySelector('.state-merged');
|
||||||
|
if (mergedState) {
|
||||||
|
mergedState.removeEventListener('click', this.searchStateMerged);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
bindEvents() {
|
bindEvents() {
|
||||||
this.handleFormSubmit = this.handleFormSubmit.bind(this);
|
this.handleFormSubmit = this.handleFormSubmit.bind(this);
|
||||||
this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
|
this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
|
||||||
|
@ -114,6 +155,8 @@ class FilteredSearchManager {
|
||||||
document.addEventListener('click', this.removeInputContainerFocusWrapper);
|
document.addEventListener('click', this.removeInputContainerFocusWrapper);
|
||||||
document.addEventListener('keydown', this.removeSelectedTokenKeydownWrapper);
|
document.addEventListener('keydown', this.removeSelectedTokenKeydownWrapper);
|
||||||
eventHub.$on('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
|
eventHub.$on('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
|
||||||
|
|
||||||
|
this.bindStateEvents();
|
||||||
}
|
}
|
||||||
|
|
||||||
unbindEvents() {
|
unbindEvents() {
|
||||||
|
@ -136,6 +179,8 @@ class FilteredSearchManager {
|
||||||
document.removeEventListener('click', this.removeInputContainerFocusWrapper);
|
document.removeEventListener('click', this.removeInputContainerFocusWrapper);
|
||||||
document.removeEventListener('keydown', this.removeSelectedTokenKeydownWrapper);
|
document.removeEventListener('keydown', this.removeSelectedTokenKeydownWrapper);
|
||||||
eventHub.$off('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
|
eventHub.$off('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
|
||||||
|
|
||||||
|
this.unbindStateEvents();
|
||||||
}
|
}
|
||||||
|
|
||||||
checkForBackspace(e) {
|
checkForBackspace(e) {
|
||||||
|
@ -459,7 +504,7 @@ class FilteredSearchManager {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
search() {
|
search(state = null) {
|
||||||
const paths = [];
|
const paths = [];
|
||||||
const searchQuery = gl.DropdownUtils.getSearchQuery();
|
const searchQuery = gl.DropdownUtils.getSearchQuery();
|
||||||
|
|
||||||
|
@ -467,7 +512,7 @@ class FilteredSearchManager {
|
||||||
|
|
||||||
const { tokens, searchToken }
|
const { tokens, searchToken }
|
||||||
= this.tokenizer.processTokens(searchQuery, this.filteredSearchTokenKeys.getKeys());
|
= this.tokenizer.processTokens(searchQuery, this.filteredSearchTokenKeys.getKeys());
|
||||||
const currentState = gl.utils.getParameterByName('state') || 'opened';
|
const currentState = state || gl.utils.getParameterByName('state') || 'opened';
|
||||||
paths.push(`state=${currentState}`);
|
paths.push(`state=${currentState}`);
|
||||||
|
|
||||||
tokens.forEach((token) => {
|
tokens.forEach((token) => {
|
||||||
|
|
|
@ -45,7 +45,8 @@
|
||||||
li {
|
li {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
a {
|
a,
|
||||||
|
.div-btn {
|
||||||
padding: $gl-btn-padding;
|
padding: $gl-btn-padding;
|
||||||
padding-bottom: 11px;
|
padding-bottom: 11px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -67,7 +68,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active a {
|
.div-btn {
|
||||||
|
padding-top: 16px;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active a,
|
||||||
|
&.active .div-btn {
|
||||||
border-bottom: 2px solid $link-underline-blue;
|
border-bottom: 2px solid $link-underline-blue;
|
||||||
color: $black;
|
color: $black;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
|
@ -1,25 +1,24 @@
|
||||||
- type = local_assigns.fetch(:type, :issues)
|
- type = local_assigns.fetch(:type, :issues)
|
||||||
- page_context_word = type.to_s.humanize(capitalize: false)
|
- page_context_word = type.to_s.humanize(capitalize: false)
|
||||||
- issuables = @issues || @merge_requests
|
- issuables = @issues || @merge_requests
|
||||||
|
- closed_title = 'Filter by issues that are currently closed.'
|
||||||
|
|
||||||
%ul.nav-links.issues-state-filters
|
%ul.nav-links.issues-state-filters
|
||||||
%li{ class: active_when(params[:state] == 'opened') }>
|
%li{ class: active_when(params[:state] == 'opened') }>
|
||||||
= link_to page_filter_path(state: 'opened', label: true), id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened." do
|
%div.div-btn.state-opened{ id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", role: 'button' }
|
||||||
#{issuables_state_counter_text(type, :opened)}
|
#{issuables_state_counter_text(type, :opened)}
|
||||||
|
|
||||||
- if type == :merge_requests
|
- if type == :merge_requests
|
||||||
%li{ class: active_when(params[:state] == 'merged') }>
|
%li{ class: active_when(params[:state] == 'merged') }>
|
||||||
= link_to page_filter_path(state: 'merged', label: true), id: 'state-merged', title: 'Filter by merge requests that are currently merged.' do
|
%div.div-btn.state-merged{ id: 'state-merged', title: 'Filter by merge requests that are currently merged.', role: 'button' }
|
||||||
#{issuables_state_counter_text(type, :merged)}
|
#{issuables_state_counter_text(type, :merged)}
|
||||||
|
|
||||||
%li{ class: active_when(params[:state] == 'closed') }>
|
- closed_title = 'Filter by merge requests that are currently closed and unmerged.'
|
||||||
= link_to page_filter_path(state: 'closed', label: true), id: 'state-closed', title: 'Filter by merge requests that are currently closed and unmerged.' do
|
|
||||||
#{issuables_state_counter_text(type, :closed)}
|
%li{ class: active_when(params[:state] == 'closed') }>
|
||||||
- else
|
%div.div-btn.state-closed{ id: 'state-closed', title: closed_title, role: 'button' }
|
||||||
%li{ class: active_when(params[:state] == 'closed') }>
|
#{issuables_state_counter_text(type, :closed)}
|
||||||
= link_to page_filter_path(state: 'closed', label: true), id: 'state-all', title: 'Filter by issues that are currently closed.' do
|
|
||||||
#{issuables_state_counter_text(type, :closed)}
|
|
||||||
|
|
||||||
%li{ class: active_when(params[:state] == 'all') }>
|
%li{ class: active_when(params[:state] == 'all') }>
|
||||||
= link_to page_filter_path(state: 'all', label: true), id: 'state-all', title: "Show all #{page_context_word}." do
|
%div.div-btn.state-all{ id: 'state-all', title: "Show all #{page_context_word}.", role: 'button' }
|
||||||
#{issuables_state_counter_text(type, :all)}
|
#{issuables_state_counter_text(type, :all)}
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Perform filtered search when state tab is changed
|
||||||
|
merge_request:
|
||||||
|
author:
|
Loading…
Reference in New Issue