NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-12-21 21:02:23 -06:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

#6732: Fix search filtering

Browse Source 
This was broken after implementing mobile screen size support in #6327
This commit is contained in:
checktheroads
2021-05-07 11:07:06 -07:00
parent 445adbd078
commit 63435f2ec1
5 changed files with 43 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
netbox/project-static/dist/netbox.js vendored
View File

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/netbox.js.map vendored
View File

File diff suppressed because one or more lines are too long

68
netbox/project-static/src/search.ts
View File

@@ -1,40 +1,44 @@
import debounce from 'just-debounce-it';
import { getElements, getRowValues, findFirstAdjacent } from './util';
import { getElements, getRowValues, findFirstAdjacent, isTruthy } from './util';
interface SearchFilterButton extends EventTarget {
dataset: { searchValue: string };
}
function isSearchButton(el: any): el is SearchFilterButton {
return el?.dataset?.searchValue ?? null !== null;
/**
* Change the display value and hidden input values of the search filter based on dropdown
* selection.
*
* @param event "click" event for each dropdown item.
* @param button Each dropdown item element.
*/
function handleSearchDropdownClick(event: Event, button: HTMLButtonElement) {
const dropdown = event.currentTarget as HTMLButtonElement;
const selectedValue = findFirstAdjacent<HTMLSpanElement>(dropdown, 'span.search-obj-selected');
const selectedType = findFirstAdjacent<HTMLInputElement>(dropdown, 'input.search-obj-type');
const searchValue = dropdown.getAttribute('data-search-value');
let selected = '' as string;
if (selectedValue !== null && selectedType !== null) {
if (isTruthy(searchValue) && selected !== searchValue) {
selected = searchValue;
selectedValue.innerHTML = button.textContent ?? 'Error';
selectedType.value = searchValue;
} else {
selected = '';
selectedType.innerHTML = 'All Objects';
selectedType.value = '';
}
}
}
/**
* Initialize Search Bar Elements.
*/
function initSearchBar() {
const dropdown = document.getElementById('object-type-selector');
const selectedValue = document.getElementById('selected-value') as HTMLSpanElement;
const selectedType = document.getElementById('search-obj-type') as HTMLInputElement;
let selected = '';
if (dropdown !== null) {
const buttons = dropdown.querySelectorAll('li > button.dropdown-item');
for (const button of buttons) {
if (button !== null) {
function handleClick(event: Event) {
if (isSearchButton(event.target)) {
const objectType = event.target.dataset.searchValue;
if (objectType !== '' && selected !== objectType) {
selected = objectType;
selectedValue.innerHTML = button.textContent ?? 'Error';
selectedType.value = objectType;
} else {
selected = '';
selectedType.innerHTML = 'All Objects';
selectedType.value = '';
}
}
}
button.addEventListener('click', handleClick);
}
for (const dropdown of getElements<HTMLUListElement>(
'div.search-container ul.search-obj-selector',
)) {
for (const button of dropdown.querySelectorAll<HTMLButtonElement>(
'li > button.dropdown-item',
)) {
button.addEventListener('click', event => handleSearchDropdownClick(event, button));
}
}
}