diff --git a/web_src/js/features/comp/SearchRepoBox.ts b/web_src/js/features/comp/SearchRepoBox.ts index ca2a48e1b1..629f7cebbd 100644 --- a/web_src/js/features/comp/SearchRepoBox.ts +++ b/web_src/js/features/comp/SearchRepoBox.ts @@ -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('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}; - }, - }); } diff --git a/web_src/js/features/comp/SearchUserBox.ts b/web_src/js/features/comp/SearchUserBox.ts index c4529eee08..c812bc6b0e 100644 --- a/web_src/js/features/comp/SearchUserBox.ts +++ b/web_src/js/features/comp/SearchUserBox.ts @@ -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('#search-user-box'); - if (!searchUserBox) return; +export async function initCompSearchUserBox() { + const box = document.querySelector('#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('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})); + } } diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts index 50437b13c4..6fabb2b9c1 100644 --- a/web_src/js/features/repo-settings.ts +++ b/web_src/js/features/repo-settings.ts @@ -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('#search-team-box'); - if (!searchTeamBox) return; +async function initRepoSettingsSearchTeamBox() { + const box = document.querySelector('#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('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() { diff --git a/web_src/js/modules/fomantic/search.ts b/web_src/js/modules/fomantic/search.ts deleted file mode 100644 index e112bde5d3..0000000000 --- a/web_src/js/modules/fomantic/search.ts +++ /dev/null @@ -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`
` : ''; - const desc = result.description ? html`
${htmlRaw(result.description)}
` : ''; - return html`${htmlRaw(img)}
${htmlRaw(result.title)}
${htmlRaw(desc)}
`; -} - -export function initSearchBox(container: HTMLElement, opts: SearchOpts): void { - const minCharacters = opts.minCharacters ?? 2; - const input = container.querySelector('input.prompt') ?? container.querySelector('input'); - if (!input) return; - - let resultsEl = container.querySelector(':scope > .results'); - if (!resultsEl) { - resultsEl = document.createElement('div'); - resultsEl.className = 'results'; - container.append(resultsEl); - } - - let abortCtrl: AbortController | null = null; - - const items = () => resultsEl.querySelectorAll('.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('.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('.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 - }); -} diff --git a/web_src/js/modules/search.ts b/web_src/js/modules/search.ts new file mode 100644 index 0000000000..4e87da02c1 --- /dev/null +++ b/web_src/js/modules/search.ts @@ -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`
` : ''; + const desc = result.description ? html`
${result.description}
` : ''; + return html`${htmlRaw(img)}
${result.title}
${htmlRaw(desc)}
`; +} + +// 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 { + return new Promise((resolve) => { + const input = container.querySelector('input.prompt') ?? container.querySelector('input')!; + + let resultsEl = container.querySelector(':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(); + const items = () => resultsEl.querySelectorAll('.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('.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 + }); +}