mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-27 12:53:57 +01:00
Use reactive store to share data between components (#23996)
Follow #23947 * Use reactive store to share data between components * Remove no-op `this.hashListener = window.addEventListener()` because `addEventListener` returns void/undefined. Reference: https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api Screenshot (the same as before): <details> <img width="565" alt="image" src="https://user-images.githubusercontent.com/2114189/230701282-bd61bfa3-7786-433b-9ad8-a88591112a02.png"> </details> --------- Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
parent
1380b87311
commit
6892e2b8ef
3 changed files with 15 additions and 15 deletions
|
@ -5,7 +5,7 @@
|
|||
>
|
||||
<!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
|
||||
<div class="ui list">
|
||||
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" :selected-file="selectedFile"/>
|
||||
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
|
||||
</div>
|
||||
<div v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
|
||||
<span class="gt-mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
|
||||
|
@ -17,6 +17,7 @@
|
|||
import DiffFileTreeItem from './DiffFileTreeItem.vue';
|
||||
import {doLoadMoreFiles} from '../features/repo-diff.js';
|
||||
import {toggleElem} from '../utils/dom.js';
|
||||
import {DiffTreeStore} from '../modules/stores.js';
|
||||
|
||||
const {pageData} = window.config;
|
||||
const LOCAL_STORAGE_KEY = 'diff_file_tree_visible';
|
||||
|
@ -28,7 +29,7 @@ export default {
|
|||
pageData.diffFileInfo.fileTreeIsVisible = fileTreeIsVisible;
|
||||
return {
|
||||
...pageData.diffFileInfo,
|
||||
selectedFile: ''
|
||||
store: DiffTreeStore,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -102,10 +103,10 @@ export default {
|
|||
document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility);
|
||||
|
||||
this.hashChangeListener = () => {
|
||||
this.selectedFile = window.location.hash;
|
||||
this.store.selectedItem = window.location.hash;
|
||||
};
|
||||
this.hashListener = window.addEventListener('hashchange', this.hashChangeListener);
|
||||
this.selectedFile = window.location.hash;
|
||||
this.hashChangeListener();
|
||||
window.addEventListener('hashchange', this.hashChangeListener);
|
||||
},
|
||||
unmounted() {
|
||||
document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', this.toggleVisibility);
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div v-show="show" :title="item.name">
|
||||
<!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
|
||||
<div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', selectedFile === genCompleteFileHash(item.file?.NameHash) ? 'selected' : '']">
|
||||
<div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', store.selectedItem === '#diff-' + item.file?.NameHash ? 'selected' : '']">
|
||||
<!-- Files -->
|
||||
<SvgIcon
|
||||
v-if="item.isFile"
|
||||
|
@ -32,7 +32,7 @@
|
|||
<span class="gt-ellipsis">{{ item.name }}</span>
|
||||
</div>
|
||||
<div v-show="!collapsed">
|
||||
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" :selected-file="selectedFile"/>
|
||||
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -40,6 +40,7 @@
|
|||
|
||||
<script>
|
||||
import {SvgIcon} from '../svg.js';
|
||||
import {DiffTreeStore} from '../modules/stores.js';
|
||||
|
||||
export default {
|
||||
components: {SvgIcon},
|
||||
|
@ -53,13 +54,9 @@ export default {
|
|||
required: false,
|
||||
default: true
|
||||
},
|
||||
selectedFile: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
store: DiffTreeStore,
|
||||
collapsed: false,
|
||||
}),
|
||||
methods: {
|
||||
|
@ -79,9 +76,6 @@ export default {
|
|||
};
|
||||
return diffTypes[pType];
|
||||
},
|
||||
genCompleteFileHash(hash) {
|
||||
return `#diff-${hash}`;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
5
web_src/js/modules/stores.js
Normal file
5
web_src/js/modules/stores.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
import {reactive} from 'vue';
|
||||
|
||||
export const DiffTreeStore = reactive({
|
||||
selectedItem: '',
|
||||
});
|
Loading…
Reference in a new issue