From 8c8c7c9aeaebbf8e130f5b73f505e92ec5e5a521 Mon Sep 17 00:00:00 2001 From: Frostime Date: Mon, 23 Sep 2024 22:29:35 +0800 Subject: [PATCH] :art: File history support pagination navigation (#12563) --- app/appearance/langs/en_US.json | 1 + app/appearance/langs/es_ES.json | 1 + app/appearance/langs/fr_FR.json | 1 + app/appearance/langs/ja_JP.json | 1 + app/appearance/langs/zh_CHT.json | 1 + app/appearance/langs/zh_CN.json | 1 + app/src/history/history.ts | 106 ++++++++++++++++++++----------- 7 files changed, 74 insertions(+), 38 deletions(-) diff --git a/app/appearance/langs/en_US.json b/app/appearance/langs/en_US.json index c9030242de3..0d67e93f817 100644 --- a/app/appearance/langs/en_US.json +++ b/app/appearance/langs/en_US.json @@ -1,6 +1,7 @@ { "jumpToPage": "Jump to the specified page: 1 ~ ${x}", "pageCountAndSnapshotCount": "Total ${x} pages, ${y} snapshots", + "pageCountAndHistoryCount": "Total ${x} pages, ${y} histories", "visitCommunityShare": "Visit community share", "clearContextSucc": "The context has been cleared", "emptyMobilePlaceholder": "Record something", diff --git a/app/appearance/langs/es_ES.json b/app/appearance/langs/es_ES.json index 40352c65b09..330d9017923 100644 --- a/app/appearance/langs/es_ES.json +++ b/app/appearance/langs/es_ES.json @@ -1,6 +1,7 @@ { "jumpToPage": "Saltar a la página especificada: 1 ~ ${x}", "pageCountAndSnapshotCount": "Total ${x} páginas, ${y} instantáneas", + "pageCountAndHistoryCount": "Total ${x} páginas,${y} historias", "visitCommunityShare": "Visitar la comunidad compartida", "clearContextSucc": "Se ha borrado el contexto", "emptyMobilePlaceholder": "Grabar algo", diff --git a/app/appearance/langs/fr_FR.json b/app/appearance/langs/fr_FR.json index 44f7cc92dcc..4827c3c071a 100644 --- a/app/appearance/langs/fr_FR.json +++ b/app/appearance/langs/fr_FR.json @@ -1,6 +1,7 @@ { "jumpToPage": "Aller à la page spécifiée : 1 ~ ${x}", "pageCountAndSnapshotCount": "Total de ${x} pages, ${y} instantanés", + "pageCountAndHistoryCount": "Total de ${x} pages,${y} histoires", "visitCommunityShare": "Visiter le partage communautaire", "clearContextSucc": "Le contexte a été effacé", "emptyMobilePlaceholder": "Enregistrer quelque chose", diff --git a/app/appearance/langs/ja_JP.json b/app/appearance/langs/ja_JP.json index a3149e28371..202b74b3a89 100644 --- a/app/appearance/langs/ja_JP.json +++ b/app/appearance/langs/ja_JP.json @@ -1,6 +1,7 @@ { "jumpToPage": "指定されたページにジャンプ：1 ~ ${x}", "pageCountAndSnapshotCount": "合計 ${x} ページ、${y} スナップショット", + "pageCountAndHistoryCount": "合計 ${x} ページ、${y} 履歴", "visitCommunityShare": "コミュニティシェアを訪問", "clearContextSucc": "コンテキストがクリアされました", "emptyMobilePlaceholder": "何かを記録する", diff --git a/app/appearance/langs/zh_CHT.json b/app/appearance/langs/zh_CHT.json index 270b48cf4d5..07076f0edcb 100644 --- a/app/appearance/langs/zh_CHT.json +++ b/app/appearance/langs/zh_CHT.json @@ -1,6 +1,7 @@ { "jumpToPage": "跳轉到指定頁：1 ~ ${x}", "pageCountAndSnapshotCount": "共 ${x} 頁，${y} 個快照", + "pageCountAndHistoryCount": "共 ${x} 頁，${y} 個歷史紀錄", "visitCommunityShare": "訪問社區分享", "clearContextSucc": "上下文已清空", "emptyMobilePlaceholder": "記錄點什麼", diff --git a/app/appearance/langs/zh_CN.json b/app/appearance/langs/zh_CN.json index 13b54c63bef..318c71b6794 100644 --- a/app/appearance/langs/zh_CN.json +++ b/app/appearance/langs/zh_CN.json @@ -1,6 +1,7 @@ { "jumpToPage": "跳转到指定页：1 ~ ${x}", "pageCountAndSnapshotCount": "共 ${x} 页，${y} 个快照", + "pageCountAndHistoryCount": "共 ${x} 页，${y} 个历史版本", "visitCommunityShare": "访问社区分享", "clearContextSucc": "上下文已清空", "emptyMobilePlaceholder": "记录点什么", diff --git a/app/src/history/history.ts b/app/src/history/history.ts index fcf5e0d8427..94a4c605d7a 100644 --- a/app/src/history/history.ts +++ b/app/src/history/history.ts @@ -1,19 +1,19 @@ -import {Dialog} from "../dialog"; -import {confirmDialog} from "../dialog/confirmDialog"; -import {Constants} from "../constants"; -import {hasClosestByClassName} from "../protyle/util/hasClosest"; -import {renderAssetsPreview} from "../asset/renderAssets"; -import {Protyle} from "../protyle"; -import {disabledProtyle, onGet} from "../protyle/util/onGet"; +import { Dialog } from "../dialog"; +import { confirmDialog } from "../dialog/confirmDialog"; +import { Constants } from "../constants"; +import { hasClosestByClassName } from "../protyle/util/hasClosest"; +import { renderAssetsPreview } from "../asset/renderAssets"; +import { Protyle } from "../protyle"; +import { disabledProtyle, onGet } from "../protyle/util/onGet"; import * as dayjs from "dayjs"; -import {fetchPost} from "../util/fetch"; -import {escapeAttr, escapeHtml} from "../util/escape"; -import {isMobile} from "../util/functions"; -import {showDiff} from "./diff"; -import {setStorageVal} from "../protyle/util/compatibility"; -import {openModel} from "../mobile/menu/model"; -import {closeModel} from "../mobile/util/closePanel"; -import {App} from "../index"; +import { fetchPost } from "../util/fetch"; +import { escapeAttr, escapeHtml } from "../util/escape"; +import { isMobile } from "../util/functions"; +import { showDiff } from "./diff"; +import { setStorageVal } from "../protyle/util/compatibility"; +import { openModel } from "../mobile/menu/model"; +import { closeModel } from "../mobile/util/closePanel"; +import { App } from "../index"; let historyEditor: Protyle; @@ -26,6 +26,9 @@ const renderDoc = (element: HTMLElement, currentPage: number) => { } else { previousElement.setAttribute("disabled", "disabled"); } + const pageBtn = element.querySelector('button[data-type="jumpHistoryPage"]'); + pageBtn.textContent = `${currentPage}`; + const inputElement = element.querySelector(".b3-text-field") as HTMLInputElement; const opElement = element.querySelector('.b3-select[data-type="opselect"]') as HTMLSelectElement; const typeElement = element.querySelector('.b3-select[data-type="typeselect"]') as HTMLSelectElement; @@ -80,7 +83,10 @@ const renderDoc = (element: HTMLElement, currentPage: number) => { } else { nextElement.setAttribute("disabled", "disabled"); } - nextElement.nextElementSibling.nextElementSibling.textContent = `${currentPage}/${response.data.pageCount || 1}`; + pageBtn.setAttribute("data-totalpage", (response.data.pageCount || 1).toString()); + // nextElement.nextElementSibling.nextElementSibling.textContent = `${currentPage}/${response.data.pageCount || 1}`; + const titleElement = nextElement.nextElementSibling.nextElementSibling; + titleElement.textContent = `${window.siyuan.languages.pageCountAndHistoryCount.replace("${x}", response.data.pageCount).replace("${y}", response.data.totalCount || 1)}`; if (response.data.histories.length === 0) { listElement.innerHTML = `
  • ${window.siyuan.languages.emptyContent}
    • `; return; @@ -241,7 +247,7 @@ ${actionHTML} const renderRepo = (element: Element, currentPage: number) => { const selectValue = (element.querySelector(".b3-select") as HTMLSelectElement).value; element.lastElementChild.innerHTML = '
    • '; - const pageBtn = element.querySelector('button[data-type="jumpPage"]'); + const pageBtn = element.querySelector('button[data-type="jumpRepoPage"]'); pageBtn.textContent = `${currentPage}`; const previousElement = element.querySelector('[data-type="previous"]'); @@ -268,7 +274,7 @@ const renderRepo = (element: Element, currentPage: number) => { previousElement.setAttribute("disabled", "disabled"); } nextElement.setAttribute("disabled", "disabled"); - fetchPost(`/api/repo/${selectValue}`, {page: currentPage}, (response) => { + fetchPost(`/api/repo/${selectValue}`, { page: currentPage }, (response) => { if (currentPage < response.data.pageCount) { nextElement.removeAttribute("disabled"); } else { @@ -348,10 +354,10 @@ export const openHistory = (app: App) => {
    - + - 1/1 + ${window.siyuan.languages.pageCountAndHistoryCount}
    @@ -399,7 +405,7 @@ export const openHistory = (app: App) => {
    - + ${window.siyuan.languages.pageCountAndSnapshotCount} @@ -645,7 +651,7 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => { target.parentElement.querySelector(`.b3-list-item[data-id="${idJSON.splice(0, 1)[0].id}"]`)?.classList.remove("b3-list-item--focus"); } } - idJSON.push({id, time: target.querySelector('[data-type="hCreated"]').textContent}); + idJSON.push({ id, time: target.querySelector('[data-type="hCreated"]').textContent }); } if (idJSON.length === 2) { @@ -717,7 +723,7 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => { genRepoDialog.destroy(); }); btnsElement[1].addEventListener("click", () => { - fetchPost("/api/repo/createSnapshot", {memo: textareaElement.value}, () => { + fetchPost("/api/repo/createSnapshot", { memo: textareaElement.value }, () => { renderRepo(repoElement, 1); }); genRepoDialog.destroy(); @@ -728,7 +734,7 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => { } else if (type === "removeRepoTagSnapshot" || type === "removeCloudRepoTagSnapshot") { const tag = target.parentElement.getAttribute("data-tag"); confirmDialog(window.siyuan.languages.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} ${tag}?`, () => { - fetchPost("/api/repo/" + type, {tag}, () => { + fetchPost("/api/repo/" + type, { tag }, () => { renderRepo(repoElement, 1); }); }); @@ -803,24 +809,48 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => { event.stopPropagation(); event.preventDefault(); break; - } else if (type === "jumpPage") { + } else if (type === "jumpRepoPage") { const currentPage = parseInt(repoElement.getAttribute("data-page")); const totalPage = parseInt(repoElement.getAttribute("total-page") || "1"); - confirmDialog( - window.siyuan.languages.jumpToPage.replace("${x}", totalPage), - // eslint-disable-next-line quotes - ``, - (dialog: Dialog) => { - const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement; - if (inputElement.value === "") { - return; + if (totalPage > 1) { + confirmDialog( + window.siyuan.languages.jumpToPage.replace("${x}", totalPage), + // eslint-disable-next-line quotes + ``, + (dialog: Dialog) => { + const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement; + if (inputElement.value === "") { + return; + } + let page = parseInt(inputElement.value); + page = Math.max(1, Math.min(page, totalPage)); + renderRepo(repoElement, page); } - let page = parseInt(inputElement.value); - page = Math.max(1, Math.min(page, totalPage)); - renderRepo(repoElement, page); - } - ); + ); + } + } else if (type === "jumpHistoryPage") { + const currentPage = parseInt(target.textContent.trim()); + const totalPage = parseInt(target.getAttribute("data-totalpage") || "1"); + + if (totalPage > 1) { + confirmDialog( + window.siyuan.languages.jumpToPage.replace("${x}", totalPage), + // eslint-disable-next-line quotes + ``, + (dialog: Dialog) => { + const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement; + if (inputElement.value === "") { + return; + } + let page = parseInt(inputElement.value); + page = Math.max(1, Math.min(page, totalPage)); + renderDoc(firstPanelElement, page); + } + ); + } + + } else if ((type === "docprevious" || type === "docnext") && target.getAttribute("disabled") !== "disabled") { const currentPage = parseInt(firstPanelElement.getAttribute("data-page")); renderDoc(firstPanelElement, type === "docprevious" ? currentPage - 1 : currentPage + 1);