From c5c88f2f18d99a188357e0bcb837f94c9c41e79a Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 11 Oct 2021 06:40:03 +0800 Subject: Save and view issue/comment content history (#16909) * issue content history * Use timeutil.TimeStampNow() for content history time instead of issue/comment.UpdatedUnix (which are not updated in time) * i18n for frontend * refactor * clean up * fix refactor * re-format * temp refactor * follow db refactor * rename IssueContentHistory to ContentHistory, remove empty model tags * fix html * use avatar refactor to generate avatar url * add unit test, keep at most 20 history revisions. * re-format * syntax nit * Add issue content history table * Update models/migrations/v197.go Co-authored-by: 6543 <6543@obermui.de> * fix merge Co-authored-by: zeripath Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: Lauris BH --- web_src/js/features/issue-content-history.js | 135 +++++++++++++++++++++++++++ web_src/js/index.js | 2 + web_src/js/svg.js | 2 + 3 files changed, 139 insertions(+) create mode 100644 web_src/js/features/issue-content-history.js (limited to 'web_src/js') diff --git a/web_src/js/features/issue-content-history.js b/web_src/js/features/issue-content-history.js new file mode 100644 index 0000000000..6ead067417 --- /dev/null +++ b/web_src/js/features/issue-content-history.js @@ -0,0 +1,135 @@ +import {svg} from '../svg.js'; + +const {AppSubUrl, csrf} = window.config; + +let i18nTextEdited; +let i18nTextOptions; +let i18nTextDeleteFromHistory; +let i18nTextDeleteFromHistoryConfirm; + +function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleHtml) { + let $dialog = $('.content-history-detail-dialog'); + if ($dialog.length) return; + + $dialog = $(` +
+ +
+ ${itemTitleHtml} + +
+ +
+
+
+
`); + $dialog.appendTo($('body')); + $dialog.find('.dialog-header-options').dropdown({ + showOnFocus: false, + allowReselection: true, + onChange(_value, _text, $item) { + const optionItem = $item.data('option-item'); + if (optionItem === 'delete') { + if (window.confirm(i18nTextDeleteFromHistoryConfirm)) { + $.post(`${issueBaseUrl}/content-history/soft-delete?comment_id=${commentId}&history_id=${historyId}`, { + _csrf: csrf, + }).done((resp) => { + if (resp.ok) { + $dialog.modal('hide'); + } else { + alert(resp.message); + } + }); + } + } else { // required by eslint + window.alert(`unknown option item: ${optionItem}`); + } + }, + onHide() { + $(this).dropdown('clear', true); + } + }); + $dialog.modal({ + onShow() { + $.ajax({ + url: `${issueBaseUrl}/content-history/detail?comment_id=${commentId}&history_id=${historyId}`, + data: { + _csrf: csrf, + }, + }).done((resp) => { + $dialog.find('.content').html(resp.diffHtml); + // there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden. + if (resp.canSoftDelete) { + $dialog.find('.dialog-header-options').show(); + } + }); + }, + onHidden() { + $dialog.remove(); + }, + }).modal('show'); +} + +function showContentHistoryMenu(issueBaseUrl, $item, commentId) { + const $headerLeft = $item.find('.comment-header-left'); + const menuHtml = ` +
+ • ${i18nTextEdited} ${svg('octicon-triangle-down', 17)} +
+
+
`; + + $headerLeft.find(`.content-history-menu`).remove(); + $headerLeft.append($(menuHtml)); + $headerLeft.find('.dropdown').dropdown({ + action: 'hide', + apiSettings: { + cache: false, + url: `${issueBaseUrl}/content-history/list?comment_id=${commentId}`, + }, + saveRemoteData: false, + onHide() { + $(this).dropdown('change values', null); + }, + onChange(value, itemHtml, $item) { + if (value && !$item.find('[data-history-is-deleted=1]').length) { + showContentHistoryDetail(issueBaseUrl, commentId, value, itemHtml); + } + }, + }); +} + +export function initIssueContentHistory() { + const issueIndex = $('#issueIndex').val(); + const $itemIssue = $('.timeline-item.comment.first'); + if (!issueIndex || !$itemIssue.length) return; + + const repoLink = $('#repolink').val(); + const issueBaseUrl = `${AppSubUrl}/${repoLink}/issues/${issueIndex}`; + + $.ajax({ + url: `${issueBaseUrl}/content-history/overview`, + data: { + _csrf: csrf, + }, + }).done((resp) => { + i18nTextEdited = resp.i18n.textEdited; + i18nTextDeleteFromHistory = resp.i18n.textDeleteFromHistory; + i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm; + i18nTextOptions = resp.i18n.textOptions; + + if (resp.editedHistoryCountMap[0]) { + showContentHistoryMenu(issueBaseUrl, $itemIssue, '0'); + } + for (const [commentId, _editedCount] of Object.entries(resp.editedHistoryCountMap)) { + if (commentId === '0') continue; + const $itemComment = $(`#issuecomment-${commentId}`); + showContentHistoryMenu(issueBaseUrl, $itemComment, commentId); + } + }); +} diff --git a/web_src/js/index.js b/web_src/js/index.js index 868b3ad049..b607015800 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -21,6 +21,7 @@ import {createCodeEditor, createMonaco} from './features/codeeditor.js'; import {initMarkupAnchors} from './markup/anchors.js'; import {initNotificationsTable, initNotificationCount} from './features/notification.js'; import {initLastCommitLoader} from './features/lastcommitloader.js'; +import {initIssueContentHistory} from './features/issue-content-history.js'; import {initStopwatch} from './features/stopwatch.js'; import {showLineButton} from './code/linebutton.js'; import {initMarkupContent, initCommentContent} from './markup/content.js'; @@ -2873,6 +2874,7 @@ $(document).ready(async () => { initFileViewToggle(); initReleaseEditor(); initRelease(); + initIssueContentHistory(); const routes = { 'div.user.settings': initUserSettings, diff --git a/web_src/js/svg.js b/web_src/js/svg.js index 185c23c245..11be6b476c 100644 --- a/web_src/js/svg.js +++ b/web_src/js/svg.js @@ -13,6 +13,7 @@ import octiconProject from '../../public/img/svg/octicon-project.svg'; import octiconRepo from '../../public/img/svg/octicon-repo.svg'; import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg'; import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg'; +import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg'; import Vue from 'vue'; @@ -32,6 +33,7 @@ export const svgs = { 'octicon-repo': octiconRepo, 'octicon-repo-forked': octiconRepoForked, 'octicon-repo-template': octiconRepoTemplate, + 'octicon-triangle-down': octiconTriangleDown, }; const parser = new DOMParser(); -- cgit v1.2.3