davrot/forgejo_backup
1
0
Fork 0
mirror of https://codeberg.org/davrot/forgejo.git synced 2025-05-18 17:00:02 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor diffFileInfo / DiffTreeStore (#24998)

Browse source 
Follow  #21012, #22399

Replace #24983, fix #24938

Help #24956

Now, the `window.config.pageData.diffFileInfo` itself is a reactive
store, so it's quite easy to sync values/states by it, no need to do
"doLoadMoreFiles" or "callback".

Screenshot: these two buttons both work. After complete loading, the UI
is also right.

<details>


![image](cc6310fd-7f27-45ea-ab4f-24952a87b421)


![image](4c11dd67-ac03-4568-8541-91204d27a4e3)


![image](38a22cec-41be-41e6-a209-f347b7a4c1de)

</details>
This commit is contained in:
wxiaoguang 2023-05-30 18:53:15 +08:00 • committed by GitHub
parent 32185efc14
commit ee99cf6313
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 76 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

52
templates/repo/diff/box.tmpl
View file

@ -45,33 +45,31 @@
{{end}}
</div>
</div>
<script id="diff-data-script">
(() => {
const diffData = {
files: [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}],
isIncomplete: {{.Diff.IsIncomplete}},
tooManyFilesMessage: "{{$.locale.Tr "repo.diff.too_many_files"}}",
binaryFileMessage: "{{$.locale.Tr "repo.diff.bin"}}",
showMoreMessage: "{{.locale.Tr "repo.diff.show_more"}}",
statisticsMessage: "{{.locale.Tr "repo.diff.stats_desc_file"}}",
fileTreeIsVisible: false,
fileListIsVisible: false,
isLoadingNewData: false,
diffEnd: {{.Diff.End}},
link: "{{$.Link}}"
};
if(window.config.pageData.diffFileInfo) {
// Page is already loaded - add the data to our existing data
window.config.pageData.diffFileInfo.files.push(...diffData.files);
window.config.pageData.diffFileInfo.isIncomplete = diffData.isIncomplete;
window.config.pageData.diffFileInfo.diffEnd = diffData.diffEnd;
window.config.pageData.diffFileInfo.link = diffData.link;
} else {
// new load of page - populate initial data
window.config.pageData.diffFileInfo = diffData;
}
})();
</script>
<script id="diff-data-script" type="module">
const diffDataFiles = [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}];
const diffData = {
isIncomplete: {{.Diff.IsIncomplete}},
tooManyFilesMessage: "{{$.locale.Tr "repo.diff.too_many_files"}}",
binaryFileMessage: "{{$.locale.Tr "repo.diff.bin"}}",
showMoreMessage: "{{.locale.Tr "repo.diff.show_more"}}",
statisticsMessage: "{{.locale.Tr "repo.diff.stats_desc_file"}}",
linkLoadMore: "{{$.Link}}?skip-to={{.Diff.End}}&file-only=true",
};
// for first time loading, the diffFileInfo is a plain object
// after the Vue component is mounted, the diffFileInfo is a reactive object
// keep in mind that this script block would be executed many times when loading more files, by "loadMoreFiles"
let diffFileInfo = window.config.pageData.diffFileInfo || {
files:[],
fileTreeIsVisible: false,
fileListIsVisible: false,
isLoadingNewData: false,
selectedItem: '',
};
diffFileInfo = Object.assign(diffFileInfo, diffData);
diffFileInfo.files.push(...diffDataFiles);
window.config.pageData.diffFileInfo = diffFileInfo;
</script>
<div id="diff-file-list"></div>
<div id="diff-container">
<div id="diff-file-tree" class="gt-hidden"></div>