mirror of
https://github.com/go-gitea/gitea.git
synced 2026-05-12 11:13:21 +02:00
Refactor search-box module to await-style chooseFromApi
Move web_src/js/modules/fomantic/search.ts to web_src/js/modules/search.ts
(no Fomantic dependency anymore). Replace the imperative
initSearchBox(el, opts) with chooseFromApi(el, url, parse) that returns
a Promise<SearchResult> resolving with the user's chosen item; callers
loop with `while (box.isConnected) { const pick = await ...; ... }` and
own writing back to whatever input/state they manage.
Cleanup is via a single AbortController whose signal is passed to all
listeners; the in-flight fetch has its own controller so a new keystroke
can cancel just the request without tearing down listeners.
Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
This commit is contained in:
silverwind
parent
cfe9e70e3e
commit
2ecee0bb0a
@ -1,26 +1,20 @@
|
||||
import {initSearchBox} from '../../modules/fomantic/search.ts';
|
||||
import {htmlEscape} from '../../utils/html.ts';
|
||||
import {chooseFromApi} from '../../modules/search.ts';
|
||||
|
||||
const {appSubUrl} = window.config;
|
||||
|
||||
export function initCompSearchRepoBox(el: HTMLElement) {
|
||||
export async function initCompSearchRepoBox(el: HTMLElement) {
|
||||
const uid = el.getAttribute('data-uid');
|
||||
const exclusive = el.getAttribute('data-exclusive');
|
||||
let url = `${appSubUrl}/repo/search?q={query}&uid=${uid}`;
|
||||
if (exclusive === 'true') {
|
||||
url += `&exclusive=true`;
|
||||
if (exclusive === 'true') url += `&exclusive=true`;
|
||||
const input = el.querySelector<HTMLInputElement>('input.prompt')!;
|
||||
|
||||
while (el.isConnected) {
|
||||
const pick = await chooseFromApi(el, url, (response: any) => response.data.map((item: any) => ({
|
||||
title: item.repository.full_name.split('/')[1],
|
||||
description: item.repository.full_name,
|
||||
})));
|
||||
input.value = pick.title;
|
||||
input.dispatchEvent(new Event('change', {bubbles: true}));
|
||||
}
|
||||
initSearchBox(el, {
|
||||
apiUrl: url,
|
||||
onResponse(response: any) {
|
||||
const items = [];
|
||||
for (const item of response.data) {
|
||||
items.push({
|
||||
title: htmlEscape(item.repository.full_name.split('/')[1]),
|
||||
description: htmlEscape(item.repository.full_name),
|
||||
});
|
||||
}
|
||||
return {results: items};
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,43 +1,33 @@
|
||||
import {htmlEscape} from '../../utils/html.ts';
|
||||
import {initSearchBox} from '../../modules/fomantic/search.ts';
|
||||
import {chooseFromApi, type SearchResult} from '../../modules/search.ts';
|
||||
|
||||
const {appSubUrl} = window.config;
|
||||
const looksLikeEmailAddressCheck = /^\S+@\S+$/;
|
||||
|
||||
export function initCompSearchUserBox() {
|
||||
const searchUserBox = document.querySelector<HTMLElement>('#search-user-box');
|
||||
if (!searchUserBox) return;
|
||||
export async function initCompSearchUserBox() {
|
||||
const box = document.querySelector<HTMLElement>('#search-user-box');
|
||||
if (!box) return;
|
||||
|
||||
const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true';
|
||||
const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined;
|
||||
const includeOrgs = searchUserBox.getAttribute('data-include-orgs') === 'true';
|
||||
initSearchBox(searchUserBox, {
|
||||
apiUrl: `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`,
|
||||
onResponse(response: any, searchQuery: string) {
|
||||
const resultItems = [];
|
||||
const searchQueryUppercase = searchQuery.toUpperCase();
|
||||
const allowEmailInput = box.getAttribute('data-allow-email') === 'true';
|
||||
const allowEmailDescription = box.getAttribute('data-allow-email-description') ?? undefined;
|
||||
const includeOrgs = box.getAttribute('data-include-orgs') === 'true';
|
||||
const url = `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`;
|
||||
const input = box.querySelector<HTMLInputElement>('input.prompt')!;
|
||||
|
||||
while (box.isConnected) {
|
||||
const pick = await chooseFromApi(box, url, (response: any, query: string) => {
|
||||
const items: SearchResult[] = [];
|
||||
const queryUpper = query.toUpperCase();
|
||||
for (const item of response.data) {
|
||||
const resultItem = {
|
||||
title: item.login,
|
||||
image: item.avatar_url,
|
||||
description: htmlEscape(item.full_name),
|
||||
};
|
||||
if (searchQueryUppercase === item.login.toUpperCase()) {
|
||||
resultItems.unshift(resultItem); // add the exact match to the top
|
||||
} else {
|
||||
resultItems.push(resultItem);
|
||||
}
|
||||
const result: SearchResult = {title: item.login, image: item.avatar_url, description: item.full_name};
|
||||
if (queryUpper === item.login.toUpperCase()) items.unshift(result); // exact match floats to top
|
||||
else items.push(result);
|
||||
}
|
||||
|
||||
if (allowEmailInput && !resultItems.length && looksLikeEmailAddressCheck.test(searchQuery)) {
|
||||
const resultItem = {
|
||||
title: searchQuery,
|
||||
description: allowEmailDescription,
|
||||
};
|
||||
resultItems.push(resultItem);
|
||||
if (allowEmailInput && !items.length && looksLikeEmailAddressCheck.test(query)) {
|
||||
items.push({title: query, description: allowEmailDescription});
|
||||
}
|
||||
|
||||
return {results: resultItems};
|
||||
},
|
||||
});
|
||||
return items;
|
||||
});
|
||||
input.value = pick.title;
|
||||
input.dispatchEvent(new Event('change', {bubbles: true}));
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts';
|
||||
import {POST} from '../modules/fetch.ts';
|
||||
import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
|
||||
import {fomanticQuery} from '../modules/fomantic/base.ts';
|
||||
import {initSearchBox} from '../modules/fomantic/search.ts';
|
||||
import {chooseFromApi} from '../modules/search.ts';
|
||||
import {globMatch} from '../utils/glob.ts';
|
||||
|
||||
const {appSubUrl} = window.config;
|
||||
@ -46,23 +46,20 @@ function initRepoSettingsCollaboration() {
|
||||
}
|
||||
}
|
||||
|
||||
function initRepoSettingsSearchTeamBox() {
|
||||
const searchTeamBox = document.querySelector<HTMLElement>('#search-team-box');
|
||||
if (!searchTeamBox) return;
|
||||
async function initRepoSettingsSearchTeamBox() {
|
||||
const box = document.querySelector<HTMLElement>('#search-team-box');
|
||||
if (!box) return;
|
||||
|
||||
initSearchBox(searchTeamBox, {
|
||||
apiUrl: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`,
|
||||
onResponse(response: any) {
|
||||
const items = [];
|
||||
for (const item of response.data) {
|
||||
items.push({
|
||||
title: item.name,
|
||||
description: `${item.permission} access`, // TODO: translate this string
|
||||
});
|
||||
}
|
||||
return {results: items};
|
||||
},
|
||||
});
|
||||
const url = `${appSubUrl}/org/${box.getAttribute('data-org-name')}/teams/-/search?q={query}`;
|
||||
const input = box.querySelector<HTMLInputElement>('input.prompt')!;
|
||||
while (box.isConnected) {
|
||||
const pick = await chooseFromApi(box, url, (response: any) => response.data.map((item: any) => ({
|
||||
title: item.name,
|
||||
description: `${item.permission} access`, // TODO: translate this string
|
||||
})));
|
||||
input.value = pick.title;
|
||||
input.dispatchEvent(new Event('change', {bubbles: true}));
|
||||
}
|
||||
}
|
||||
|
||||
function initRepoSettingsGitHook() {
|
||||
|
||||
@ -1,120 +0,0 @@
|
||||
import {debounce} from 'throttle-debounce';
|
||||
import {GET} from '../fetch.ts';
|
||||
import {html, htmlRaw} from '../../utils/html.ts';
|
||||
|
||||
export type SearchResult = {
|
||||
title: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
};
|
||||
|
||||
export type SearchOpts = {
|
||||
apiUrl: string;
|
||||
minCharacters?: number;
|
||||
onResponse: (raw: any, query: string) => {results: SearchResult[]};
|
||||
};
|
||||
|
||||
function buildResultHTML(result: SearchResult): string {
|
||||
const img = result.image ? html`<div class="image"><img src="${result.image}" alt=""></div>` : '';
|
||||
const desc = result.description ? html`<div class="description">${htmlRaw(result.description)}</div>` : '';
|
||||
return html`${htmlRaw(img)}<div class="content"><div class="title">${htmlRaw(result.title)}</div>${htmlRaw(desc)}</div>`;
|
||||
}
|
||||
|
||||
export function initSearchBox(container: HTMLElement, opts: SearchOpts): void {
|
||||
const minCharacters = opts.minCharacters ?? 2;
|
||||
const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input');
|
||||
if (!input) return;
|
||||
|
||||
let resultsEl = container.querySelector<HTMLElement>(':scope > .results');
|
||||
if (!resultsEl) {
|
||||
resultsEl = document.createElement('div');
|
||||
resultsEl.className = 'results';
|
||||
container.append(resultsEl);
|
||||
}
|
||||
|
||||
let abortCtrl: AbortController | null = null;
|
||||
|
||||
const items = () => resultsEl.querySelectorAll<HTMLElement>('.result');
|
||||
|
||||
const hide = () => {
|
||||
resultsEl.style.display = 'none';
|
||||
resultsEl.replaceChildren();
|
||||
};
|
||||
|
||||
const render = (results: SearchResult[]) => {
|
||||
if (!results.length) return hide();
|
||||
resultsEl.replaceChildren();
|
||||
for (const result of results) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'result';
|
||||
item.innerHTML = buildResultHTML(result);
|
||||
resultsEl.append(item);
|
||||
}
|
||||
resultsEl.style.display = 'block';
|
||||
};
|
||||
|
||||
const selectItem = (item: HTMLElement) => {
|
||||
input.value = item.querySelector<HTMLElement>('.title')!.textContent ?? '';
|
||||
input.dispatchEvent(new Event('change', {bubbles: true}));
|
||||
hide();
|
||||
input.focus();
|
||||
};
|
||||
|
||||
const performSearch = async (query: string) => {
|
||||
abortCtrl?.abort();
|
||||
if (query.length < minCharacters) return hide();
|
||||
abortCtrl = new AbortController();
|
||||
try {
|
||||
const response = await GET(opts.apiUrl.replaceAll('{query}', encodeURIComponent(query)), {signal: abortCtrl.signal});
|
||||
if (!response.ok) return hide();
|
||||
const {results} = opts.onResponse(await response.json(), query);
|
||||
if (input.value !== query) return; // stale response racing a newer keystroke
|
||||
render(results);
|
||||
} catch (err) {
|
||||
if ((err as Error).name !== 'AbortError') hide();
|
||||
}
|
||||
};
|
||||
|
||||
const debounced = debounce(200, (query: string) => { performSearch(query) });
|
||||
input.addEventListener('input', () => debounced(input.value));
|
||||
input.addEventListener('focus', () => {
|
||||
if (items().length) resultsEl.style.display = 'block';
|
||||
});
|
||||
|
||||
input.addEventListener('keydown', (event) => {
|
||||
const all = items();
|
||||
if (!all.length) return;
|
||||
const activeIndex = Array.from(all).findIndex((item) => item.classList.contains('active'));
|
||||
const move = (next: number) => {
|
||||
event.preventDefault();
|
||||
all[activeIndex]?.classList.remove('active');
|
||||
all[next].classList.add('active');
|
||||
};
|
||||
if (event.key === 'ArrowDown') {
|
||||
move((activeIndex + 1) % all.length);
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
move(activeIndex <= 0 ? all.length - 1 : activeIndex - 1);
|
||||
} else if (event.key === 'Enter' && activeIndex >= 0) {
|
||||
event.preventDefault();
|
||||
selectItem(all[activeIndex]);
|
||||
} else if (event.key === 'Escape') {
|
||||
hide();
|
||||
}
|
||||
});
|
||||
|
||||
// mousedown fires before input blur so the selection registers before blur-hide kicks in
|
||||
resultsEl.addEventListener('mousedown', (event) => {
|
||||
const target = (event.target as HTMLElement).closest<HTMLElement>('.result');
|
||||
if (!target) return;
|
||||
event.preventDefault();
|
||||
selectItem(target);
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!container.contains(event.target as Node)) hide();
|
||||
});
|
||||
|
||||
input.addEventListener('blur', () => {
|
||||
setTimeout(hide, 150); // deferred so a result mousedown can land first
|
||||
});
|
||||
}
|
||||
114
web_src/js/modules/search.ts
Normal file
114
web_src/js/modules/search.ts
Normal file
@ -0,0 +1,114 @@
|
||||
import {debounce} from 'throttle-debounce';
|
||||
import {GET} from './fetch.ts';
|
||||
import {html, htmlRaw} from '../utils/html.ts';
|
||||
|
||||
export type SearchResult = {
|
||||
title: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
};
|
||||
|
||||
function buildResultHTML(result: SearchResult): string {
|
||||
const img = result.image ? html`<div class="image"><img src="${result.image}" alt=""></div>` : '';
|
||||
const desc = result.description ? html`<div class="description">${result.description}</div>` : '';
|
||||
return html`${htmlRaw(img)}<div class="content"><div class="title">${result.title}</div>${htmlRaw(desc)}</div>`;
|
||||
}
|
||||
|
||||
// Awaits one user selection from an autocomplete attached to `container`. Resolves with
|
||||
// the chosen item; the caller writes it to whatever input/state it owns. Wrap in a loop
|
||||
// to keep the search box live across selections.
|
||||
export function chooseFromApi(container: HTMLElement, url: string, parse: (raw: any, query: string) => SearchResult[], {minCharacters = 2}: {minCharacters?: number} = {}): Promise<SearchResult> {
|
||||
return new Promise((resolve) => {
|
||||
const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input')!;
|
||||
|
||||
let resultsEl = container.querySelector<HTMLElement>(':scope > .results');
|
||||
if (!resultsEl) {
|
||||
resultsEl = document.createElement('div');
|
||||
resultsEl.className = 'results';
|
||||
container.append(resultsEl);
|
||||
}
|
||||
|
||||
let fetchController: AbortController | null = null;
|
||||
const lifecycleController = new AbortController();
|
||||
const itemResults = new Map<HTMLElement, SearchResult>();
|
||||
const items = () => resultsEl.querySelectorAll<HTMLElement>('.result');
|
||||
|
||||
const hide = () => {
|
||||
resultsEl.style.display = 'none';
|
||||
resultsEl.replaceChildren();
|
||||
itemResults.clear();
|
||||
};
|
||||
|
||||
const render = (results: SearchResult[]) => {
|
||||
if (!results.length) return hide();
|
||||
resultsEl.replaceChildren();
|
||||
itemResults.clear();
|
||||
for (const result of results) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'result';
|
||||
item.innerHTML = buildResultHTML(result);
|
||||
itemResults.set(item, result);
|
||||
resultsEl.append(item);
|
||||
}
|
||||
resultsEl.style.display = 'block';
|
||||
};
|
||||
|
||||
const finish = (item: HTMLElement) => {
|
||||
const picked = itemResults.get(item)!;
|
||||
hide();
|
||||
lifecycleController.abort();
|
||||
resolve(picked);
|
||||
};
|
||||
|
||||
const performSearch = async (query: string) => {
|
||||
fetchController?.abort();
|
||||
if (query.length < minCharacters) return hide();
|
||||
fetchController = new AbortController();
|
||||
try {
|
||||
const response = await GET(url.replaceAll('{query}', encodeURIComponent(query)), {signal: fetchController.signal});
|
||||
if (!response.ok) return hide();
|
||||
const results = parse(await response.json(), query);
|
||||
if (input.value !== query) return; // stale response racing a newer keystroke
|
||||
render(results);
|
||||
} catch (err) {
|
||||
if ((err as Error).name !== 'AbortError') hide();
|
||||
}
|
||||
};
|
||||
|
||||
const debounced = debounce(200, (query: string) => { performSearch(query) });
|
||||
|
||||
input.addEventListener('input', () => debounced(input.value), {signal: lifecycleController.signal});
|
||||
input.addEventListener('focus', () => { if (items().length) resultsEl.style.display = 'block'; }, {signal: lifecycleController.signal});
|
||||
input.addEventListener('keydown', (event) => {
|
||||
const all = items();
|
||||
if (!all.length) return;
|
||||
const activeIndex = Array.from(all).findIndex((it) => it.classList.contains('active'));
|
||||
const move = (next: number) => {
|
||||
event.preventDefault();
|
||||
all[activeIndex]?.classList.remove('active');
|
||||
all[next].classList.add('active');
|
||||
};
|
||||
if (event.key === 'ArrowDown') {
|
||||
move((activeIndex + 1) % all.length);
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
move(activeIndex <= 0 ? all.length - 1 : activeIndex - 1);
|
||||
} else if (event.key === 'Enter' && activeIndex >= 0) {
|
||||
event.preventDefault();
|
||||
finish(all[activeIndex]);
|
||||
} else if (event.key === 'Escape') {
|
||||
hide();
|
||||
}
|
||||
}, {signal: lifecycleController.signal});
|
||||
// mousedown fires before input blur so the selection registers before blur-hide kicks in
|
||||
resultsEl.addEventListener('mousedown', (event) => {
|
||||
const target = (event.target as HTMLElement).closest<HTMLElement>('.result');
|
||||
if (!target) return;
|
||||
event.preventDefault();
|
||||
finish(target);
|
||||
}, {signal: lifecycleController.signal});
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!container.contains(event.target as Node)) hide();
|
||||
}, {signal: lifecycleController.signal});
|
||||
input.addEventListener('blur', () => setTimeout(hide, 150), {signal: lifecycleController.signal}); // deferred so a result mousedown can land first
|
||||
});
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user