Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-09-22 22:15:29 +02:00
Code Issues Activity

Refactor search-box module to await-style chooseFromApi

Browse Source 
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
2026-04-26 21:05:36 +02:00
co-authored by Claude
parent cfe9e70e3e
commit 2ecee0bb0a
5 changed files with 164 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/js/features/comp/SearchRepoBox.ts
+12 -18
View File
@@ -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};
},
});
}
web_src/js/features/comp/SearchUserBox.ts
+24 -34
View File
@@ -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}));
}
}