public/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-12-02 13:59:48 +09:00
Code Issues Packages Projects Releases Wiki Activity

Add "Go to file", "Delete Directory" to repo file list page (#35911)

Browse Source 
/claim #35898
Resolves #35898 

### Summary of key changes:

1. Add file name search/Go to file functionality to repo button row.
2. Add backend functionality to delete directory
3. Add context menu for directories with functionality to copy path & delete a directory
4. Move Add/Upload file dropdown to right for parity with Github UI
5. Add tree view to the edit/upload UI

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Bryan Mutai
2025-11-30 06:58:15 +03:00
committed by GitHub
parent b54af8811e
commit 7d6861ac54
33 changed files with 671 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web_src/js/features/repo-findfile.ts
View File

@@ -1,13 +1,8 @@
import {svg} from '../svg.ts';
import {toggleElem} from '../utils/dom.ts';
import {pathEscapeSegments} from '../utils/url.ts';
import {GET} from '../modules/fetch.ts';
import {createApp} from 'vue';
import RepoFileSearch from '../components/RepoFileSearch.vue';
import {registerGlobalInitFunc} from '../modules/observer.ts';
const threshold = 50;
let files: Array<string> = [];
let repoFindFileInput: HTMLInputElement;
let repoFindFileTableBody: HTMLElement;
let repoFindFileNoResult: HTMLElement;
// return the case-insensitive sub-match result as an array: [unmatched, matched, unmatched, matched, ...]
// res[even] is unmatched, res[odd] is matched, see unit tests for examples
@@ -73,48 +68,14 @@ export function filterRepoFilesWeighted(files: Array<string>, filter: string) {
return filterResult;
}
function filterRepoFiles(filter: string) {
const treeLink = repoFindFileInput.getAttribute('data-url-tree-link');
repoFindFileTableBody.innerHTML = '';
const filterResult = filterRepoFilesWeighted(files, filter);
toggleElem(repoFindFileNoResult, !filterResult.length);
for (const r of filterResult) {
const row = document.createElement('tr');
const cell = document.createElement('td');
const a = document.createElement('a');
a.setAttribute('href', `${treeLink}/${pathEscapeSegments(r.matchResult.join(''))}`);
a.innerHTML = svg('octicon-file', 16, 'tw-mr-2');
row.append(cell);
cell.append(a);
for (const [index, part] of r.matchResult.entries()) {
const span = document.createElement('span');
// safely escape by using textContent
span.textContent = part;
span.title = span.textContent;
// if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz']
// the matchResult[odd] is matched and highlighted to red.
if (index % 2 === 1) span.classList.add('ui', 'text', 'red');
a.append(span);
}
repoFindFileTableBody.append(row);
}
}
async function loadRepoFiles() {
const response = await GET(repoFindFileInput.getAttribute('data-url-data-link'));
files = await response.json();
filterRepoFiles(repoFindFileInput.value);
}
export function initFindFileInRepo() {
repoFindFileInput = document.querySelector('#repo-file-find-input');
if (!repoFindFileInput) return;
repoFindFileTableBody = document.querySelector('#repo-find-file-table tbody');
repoFindFileNoResult = document.querySelector('#repo-find-file-no-result');
repoFindFileInput.addEventListener('input', () => filterRepoFiles(repoFindFileInput.value));
loadRepoFiles();
export function initRepoFileSearch() {
registerGlobalInitFunc('initRepoFileSearch', (el) => {
createApp(RepoFileSearch, {
repoLink: el.getAttribute('data-repo-link'),
currentRefNameSubURL: el.getAttribute('data-current-ref-name-sub-url'),
treeListUrl: el.getAttribute('data-tree-list-url'),
noResultsText: el.getAttribute('data-no-results-text'),
placeholder: el.getAttribute('data-placeholder'),
}).mount(el);
});
}