Refactor issue filter (labels, poster, assignee) (#32771)

Rewrite a lot of legacy strange code, remove duplicate code, remove
jquery, and make these filters reusable.

Let's forget the old code, new code affects: 

* issue list open/close switch
* issue list filter (label, author, assignee)
* milestone list open/close switch
* milestone issue list filter (label, author, assignee)
* project view (label, assignee)
This commit is contained in:
wxiaoguang 2024-12-10 11:38:22 +08:00 committed by GitHub
parent 1b069dc94a
commit 90d20be541
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 293 additions and 320 deletions

View file

@ -1,7 +1,14 @@
import $ from 'jquery';
import {htmlEscape} from 'escape-goat';
import {createTippy, showTemporaryTooltip} from '../modules/tippy.ts';
import {addDelegatedEventListener, createElementFromHTML, hideElem, showElem, toggleElem} from '../utils/dom.ts';
import {
addDelegatedEventListener,
createElementFromHTML,
hideElem,
queryElems,
showElem,
toggleElem,
} from '../utils/dom.ts';
import {setFileFolding} from './file-fold.ts';
import {ComboMarkdownEditor, getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
import {parseIssuePageInfo, toAbsoluteUrl} from '../utils.ts';
@ -12,19 +19,6 @@ import {fomanticQuery} from '../modules/fomantic/base.ts';
const {appSubUrl} = window.config;
/**
* @param {HTMLElement} item
*/
function excludeLabel(item) {
const href = item.getAttribute('href');
const id = item.getAttribute('data-label-id');
const regStr = `labels=((?:-?[0-9]+%2c)*)(${id})((?:%2c-?[0-9]+)*)&`;
const newStr = 'labels=$1-$2$3&';
window.location.assign(href.replace(new RegExp(regStr), newStr));
}
export function initRepoIssueSidebarList() {
const issuePageInfo = parseIssuePageInfo();
const crossRepoSearch = $('#crossRepoSearch').val();
@ -58,24 +52,74 @@ export function initRepoIssueSidebarList() {
});
}
export function initRepoIssueLabelFilter() {
// the "label-filter" is used in 2 templates: projects/view, issue/filter_list (issue list page including the milestone page)
$('.ui.dropdown.label-filter a.label-filter-item').each(function () {
$(this).on('click', function (e) {
if (e.altKey) {
e.preventDefault();
excludeLabel(this);
}
function initRepoIssueLabelFilter(elDropdown: Element) {
const url = new URL(window.location.href);
const showArchivedLabels = url.searchParams.get('archived_labels') === 'true';
const queryLabels = url.searchParams.get('labels') || '';
const selectedLabelIds = new Set<string>();
for (const id of queryLabels ? queryLabels.split(',') : []) {
selectedLabelIds.add(`${Math.abs(parseInt(id))}`); // "labels" contains negative ids, which are excluded
}
const excludeLabel = (e: MouseEvent|KeyboardEvent, item: Element) => {
e.preventDefault();
e.stopPropagation();
const labelId = item.getAttribute('data-label-id');
let labelIds: string[] = queryLabels ? queryLabels.split(',') : [];
labelIds = labelIds.filter((id) => Math.abs(parseInt(id)) !== Math.abs(parseInt(labelId)));
labelIds.push(`-${labelId}`);
url.searchParams.set('labels', labelIds.join(','));
window.location.assign(url);
};
// alt(or option) + click to exclude label
queryElems(elDropdown, '.label-filter-query-item', (el) => {
el.addEventListener('click', (e: MouseEvent) => {
if (e.altKey) excludeLabel(e, el);
});
});
$('.ui.dropdown.label-filter').on('keydown', (e) => {
// alt(or option) + enter to exclude selected label
elDropdown.addEventListener('keydown', (e: KeyboardEvent) => {
if (e.altKey && e.key === 'Enter') {
const selectedItem = document.querySelector('.ui.dropdown.label-filter .menu .item.selected');
if (selectedItem) {
excludeLabel(selectedItem);
}
const selectedItem = elDropdown.querySelector('.label-filter-query-item.selected');
if (selectedItem) excludeLabel(e, selectedItem);
}
});
// no "labels" query parameter means "all issues"
elDropdown.querySelector('.label-filter-query-default').classList.toggle('selected', queryLabels === '');
// "labels=0" query parameter means "issues without label"
elDropdown.querySelector('.label-filter-query-not-set').classList.toggle('selected', queryLabels === '0');
// prepare to process "archived" labels
const elShowArchivedLabel = elDropdown.querySelector('.label-filter-archived-toggle');
if (!elShowArchivedLabel) return;
const elShowArchivedInput = elShowArchivedLabel.querySelector<HTMLInputElement>('input');
elShowArchivedInput.checked = showArchivedLabels;
const archivedLabels = elDropdown.querySelectorAll('.item[data-is-archived]');
// if no archived labels, hide the toggle and return
if (!archivedLabels.length) {
hideElem(elShowArchivedLabel);
return;
}
// show the archived labels if the toggle is checked or the label is selected
for (const label of archivedLabels) {
toggleElem(label, showArchivedLabels || selectedLabelIds.has(label.getAttribute('data-label-id')));
}
// update the url when the toggle is changed and reload
elShowArchivedInput.addEventListener('input', () => {
if (elShowArchivedInput.checked) {
url.searchParams.set('archived_labels', 'true');
} else {
url.searchParams.delete('archived_labels');
}
window.location.assign(url);
});
}
export function initRepoIssueFilterItemLabel() {
// the "label-filter" is used in 2 templates: projects/view, issue/filter_list (issue list page including the milestone page)
queryElems(document, '.ui.dropdown.label-filter', initRepoIssueLabelFilter);
}
export function initRepoIssueCommentDelete() {