From 7762325ebfe975b8fb34a9a57c235f3c539cd7a8 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 30 Mar 2026 22:32:31 +0800 Subject: [PATCH] reload page partially --- templates/repo/actions/workflow_dispatch.tmpl | 2 +- .../repo/issue/branch_selector_field.tmpl | 1 + templates/repo/issue/new_form.tmpl | 2 +- .../repo/issue/view_content/sidebar.tmpl | 2 +- .../features/repo-issue-sidebar-combolist.ts | 62 ++++++++++++------- web_src/js/features/repo-issue-sidebar.ts | 31 ++++++---- 6 files changed, 62 insertions(+), 38 deletions(-) diff --git a/templates/repo/actions/workflow_dispatch.tmpl b/templates/repo/actions/workflow_dispatch.tmpl index 8868bde96a..83b6e33e6f 100644 --- a/templates/repo/actions/workflow_dispatch.tmpl +++ b/templates/repo/actions/workflow_dispatch.tmpl @@ -9,7 +9,7 @@ -
+
{{svg "octicon-git-branch" 14}}
{{index .Branches 0}}
diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl index 2f3e792d64..2cf5b529af 100644 --- a/templates/repo/issue/branch_selector_field.tmpl +++ b/templates/repo/issue/branch_selector_field.tmpl @@ -16,6 +16,7 @@ Still needs to figure out: {{if and (not .Issue.IsPull) (not .PageIsComparePull)}}
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl index 5475224750..7d669fe4a7 100644 --- a/templates/repo/issue/new_form.tmpl +++ b/templates/repo/issue/new_form.tmpl @@ -46,7 +46,7 @@
-
+
{{template "repo/issue/branch_selector_field" $}}{{/* TODO: RemoveIssueRef: template "repo/issue/branch_selector_field" $*/}} {{if .PageIsComparePull}} diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index 987a882be7..4dff508495 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -1,4 +1,4 @@ -
+
{{template "repo/issue/branch_selector_field" $}}{{/* TODO: RemoveIssueRef: template "repo/issue/branch_selector_field" $*/}} {{if .Issue.IsPull}} diff --git a/web_src/js/features/repo-issue-sidebar-combolist.ts b/web_src/js/features/repo-issue-sidebar-combolist.ts index c4eef16d7c..7c9f4e951a 100644 --- a/web_src/js/features/repo-issue-sidebar-combolist.ts +++ b/web_src/js/features/repo-issue-sidebar-combolist.ts @@ -1,27 +1,8 @@ import {fomanticQuery} from '../modules/fomantic/base.ts'; -import {POST} from '../modules/fetch.ts'; +import {GET, POST} from '../modules/fetch.ts'; import {showErrorToast} from '../modules/toast.ts'; import {addDelegatedEventListener, queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts'; - -// if there are draft comments, confirm before reloading, to avoid losing comments -function issueSidebarReloadConfirmDraftComment() { - const commentTextareas = [ - document.querySelector('.edit-content-zone:not(.tw-hidden) textarea'), - document.querySelector('#comment-form textarea'), - ]; - for (const textarea of commentTextareas) { - // Most users won't feel too sad if they lose a comment with 10 chars, they can re-type these in seconds. - // But if they have typed more (like 50) chars and the comment is lost, they will be very unhappy. - if (textarea && textarea.value.trim().length > 10) { - textarea.parentElement!.scrollIntoView(); - if (!window.confirm('Page will be reloaded, but there are draft comments. Continuing to reload will discard the comments. Continue?')) { - return; - } - break; - } - } - window.location.reload(); -} +import {parseDom} from "../utils.ts"; export class IssueSidebarComboList { updateUrl: string; @@ -33,6 +14,9 @@ export class IssueSidebarComboList { initialValues: string[]; container: HTMLElement; + elIssueMainContent: HTMLElement; + elIssueSidebar: HTMLElement; + constructor(container: HTMLElement) { this.container = container; this.updateUrl = container.getAttribute('data-update-url')!; @@ -43,6 +27,9 @@ export class IssueSidebarComboList { this.elDropdown = container.querySelector(':scope > .ui.dropdown')!; this.elList = container.querySelector(':scope > .ui.list')!; this.elComboValue = container.querySelector(':scope > .combo-value')!; + + this.elIssueMainContent = document.querySelector('.issue-content-left')!; + this.elIssueSidebar = document.querySelector('.issue-content-right')!; } collectCheckedValues() { @@ -63,6 +50,34 @@ export class IssueSidebarComboList { toggleElem(elEmptyTip, !hasItems); } + async reloadPagePartially() { + const resp = await GET(window.location.href); + if (!resp.ok) throw new Error(`Failed to reload page: ${resp.statusText}`); + const doc = parseDom(await resp.text(), 'text/html'); + + // we can safely replace the whole right part (sidebar) because there are only some dropdowns and lists + const newSidebar = doc.querySelector('.issue-content-right')!; + this.elIssueSidebar.replaceWith(newSidebar); + + // for the main content (left side), at the moment we only support adding new timeline items + const newMainContent = doc.querySelector('.issue-content-left')!; + + // find the last ".timeline-item[id]" in current main content, and insert new items after it, some cases: + // * a new empty issue: "timeline-item comment first", "timeline-item comment form (optional)" + // * issue with timeline events: "timeline-item comment first", "timeline-item event"+id, "timeline-item comment form (optional)" + const timelineItemsWithId = this.elIssueMainContent.querySelectorAll('.timeline-item[id]'); + let lastTimelineItemForInsertion = timelineItemsWithId[timelineItemsWithId.length - 1] ?? this.elIssueMainContent.querySelector('.timeline-item'); + if (!lastTimelineItemForInsertion) return; + + const newTimelineItems = newMainContent.querySelectorAll(`.timeline-item[id]`); + for (const newItem of newTimelineItems) { + const newItemId = newItem.getAttribute('id')!; + if (this.elIssueMainContent.querySelector(`.timeline-item[id="${CSS.escape(newItemId)}"]`)) continue; + lastTimelineItemForInsertion.insertAdjacentElement('afterend', newItem); + lastTimelineItemForInsertion = newItem; + } + } + async sendRequestToBackend(changedValues: Array): Promise { if (!changedValues.length) throw new Error('No changed values to update'); let lastResp: Response | null = null; @@ -85,15 +100,18 @@ export class IssueSidebarComboList { async updateToBackend(changedValues: Array) { if (!changedValues.length) return; + this.elIssueSidebar.classList.add('is-loading'); try { const resp = await this.sendRequestToBackend(changedValues); if (!resp.ok) { showErrorToast(`Failed to update to backend: ${resp.statusText}`); return; } - issueSidebarReloadConfirmDraftComment(); + await this.reloadPagePartially(); } catch (e) { showErrorToast(`Failed to update to backend: ${e}`); + } finally { + this.elIssueSidebar.classList.remove('is-loading'); } } diff --git a/web_src/js/features/repo-issue-sidebar.ts b/web_src/js/features/repo-issue-sidebar.ts index 2ff077e6db..b7e355281e 100644 --- a/web_src/js/features/repo-issue-sidebar.ts +++ b/web_src/js/features/repo-issue-sidebar.ts @@ -1,18 +1,20 @@ import {POST} from '../modules/fetch.ts'; import {queryElems, toggleElem} from '../utils/dom.ts'; import {IssueSidebarComboList} from './repo-issue-sidebar-combolist.ts'; +import {registerGlobalInitFunc} from '../modules/observer.ts'; -function initBranchSelector() { - // TODO: RemoveIssueRef: see "repo/issue/branch_selector_field.tmpl" - const elSelectBranch = document.querySelector('.ui.dropdown.select-branch.branch-selector-dropdown'); - if (!elSelectBranch) return; - +function initBranchSelector(elSelectBranch: HTMLElement) { + // At the moment, 2 places: + // * Issue sidebar branch selector, TODO: RemoveIssueRef: see "repo/issue/branch_selector_field.tmpl" + // * Workflow dispatch branch selector const urlUpdateIssueRef = elSelectBranch.getAttribute('data-url-update-issueref'); const elBranchMenu = elSelectBranch.querySelector('.reference-list-menu')!; queryElems(elBranchMenu, '.item:not(.no-select)', (el) => el.addEventListener('click', async function (e) { e.preventDefault(); const selectedValue = this.getAttribute('data-id')!; // eg: "refs/heads/my-branch" const selectedText = this.getAttribute('data-name'); // eg: "my-branch" + + // the issue sidebar sets "urlUpdateIssueRef" for the dropdown if (urlUpdateIssueRef) { // for existing issue, send request to update issue ref, and reload page try { @@ -30,23 +32,26 @@ function initBranchSelector() { })); } -function initRepoIssueDue() { - const form = document.querySelector('.issue-due-form'); +function initRepoIssueDue(elSidebar: HTMLElement) { + const form = elSidebar.querySelector('.issue-due-form'); if (!form) return; const deadline = form.querySelector('input[name=deadline]')!; - document.querySelector('.issue-due-edit')?.addEventListener('click', () => { + elSidebar.querySelector('.issue-due-edit')?.addEventListener('click', () => { toggleElem(form); }); - document.querySelector('.issue-due-remove')?.addEventListener('click', () => { + elSidebar.querySelector('.issue-due-remove')?.addEventListener('click', () => { deadline.value = ''; form.dispatchEvent(new Event('submit', {cancelable: true, bubbles: true})); }); } export function initRepoIssueSidebar() { - initBranchSelector(); - initRepoIssueDue(); + // FIXME: legacy dirty design, the dropdown is reused on Actions page + registerGlobalInitFunc('initSelectBranchDropdown', initBranchSelector); - // init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions - queryElems(document, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init()); + registerGlobalInitFunc('initRepoIssueSidebar', (elSidebar) => { + initRepoIssueDue(elSidebar); + // init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions + queryElems(elSidebar, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init()); + }); }