nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-05 18:23:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Čarodej
2022-05-24 10:01:07 +02:00
parent f75c20e5a7
commit 36c5e51b4f
9 changed files with 218 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
resources/js/components/FilesView/FileBrowser.vue
View File

@@ -25,13 +25,14 @@
:key="item.data.id"
:item="item"
/>
<!-- Infinite Loader Element -->
<div
class="relative h-16"
v-if="showInfiniteLoadSpinner"
id='infinite-loader'>
<Spinner/>
<div
v-show="showInfiniteLoadSpinner"
class="relative h-16 md:my-0 my-4"
ref="infinityLoader"
>
<Spinner />
</div>
</div>
</template>
@@ -41,6 +42,7 @@ import ItemHandler from './ItemHandler'
import { events } from '../../bus'
import { mapGetters } from 'vuex'
import Spinner from './Spinner'
import { debounce } from 'lodash'
export default {
name: 'FileBrowser',
@@ -60,38 +62,31 @@ export default {
return this.clipboard
}
},
continueInfiniteScroll() {
if(this.paginate)
return this.paginate.paginate.currentPage !== this.paginate.paginate.lastPage
canLoadMoreEntries() {
return this.paginate?.currentPage !== this.paginate?.lastPage
},
showInfiniteLoadSpinner() {
return this.continueInfiniteScroll && this.entries.length !== 0 && this.paginate.paginate.perPage <= this.entries.length
return this.canLoadMoreEntries && this.entries.length !== 0 && this.paginate.perPage <= this.entries.length
},
},
data() {
return {
draggingId: undefined,
isDragging: false,
infiniteScrollLoad: false,
isLoadingNewEntries: false,
}
},
methods: {
infiniteScroll() {
if( this.continueInfiniteScroll && this.elementInViewport() ) {
if(! this.infiniteScrollLoad) {
this.infiniteScrollLoad = true
this.$getDataByLocation(this.paginate.paginate.currentPage + 1).then(() => {
this.infiniteScrollLoad = false
})
}
}
},
elementInViewport() {
var item = document.getElementById('infinite-loader')
var rect = item.getBoundingClientRect()
infiniteScroll: debounce(function () {
if (this.isInfinityLoaderAtBottomPage() && this.canLoadMoreEntries && !this.isLoadingNewEntries) {
this.isLoadingNewEntries = true
this.$getDataByLocation(this.paginate.currentPage + 1)
.then(() => this.isLoadingNewEntries = false)
}
}, 150),
isInfinityLoaderAtBottomPage() {
let rect = this.$refs.infinityLoader.getBoundingClientRect()
return (
rect.bottom > 0 &&
@@ -126,7 +121,7 @@ export default {
// Store dragged folder
this.draggingId = data
// TODO: founded issue on firefox
// TODO: found issue on firefox
},
dragFinish(data, event) {
if (event.dataTransfer.items.length === 0) {
@@ -176,8 +171,10 @@ export default {
},
},
created() {
if(this.$isMobile())
document.addEventListener('scroll', this.infiniteScroll, true)
// Track document scrolling to load new entries if needed
if (window.innerWidth <= 1024) {
document.addEventListener('scroll', this.infiniteScroll)
}
events.$on('drop', () => {
this.isDragging = false

18
resources/js/store/modules/fileBrowser.js vendored
View File

@@ -19,7 +19,7 @@ const actions = {
getFolder: ({ commit, getters },{page, id}) => {
return new Promise ((resolve, reject) => {
if( !page)
if(!page)
commit('LOADING_STATE', { loading: true, data: [] })
let currentPage = page || 1
@@ -27,9 +27,7 @@ const actions = {
axios
.get(`${getters.api}/browse/folders/${id}/${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('SET_PAGINATE', response.data.meta.paginate)
commit('LOADING_STATE', {
loading: false,
@@ -70,9 +68,7 @@ const actions = {
.get(getters.api + `/browse/latest?page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('SET_PAGINATE', response.data.meta.paginate)
commit('LOADING_STATE', {
loading: false,
@@ -103,9 +99,7 @@ const actions = {
.get(`${getters.api}/browse/share${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('SET_PAGINATE', response.data.meta.paginate)
commit('LOADING_STATE', {
loading: false,
@@ -136,9 +130,7 @@ const actions = {
.get(`${getters.api}/browse/trash/${id}/${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('SET_PAGINATE', response.data.meta.paginate)
commit('LOADING_STATE', {
loading: false,

4
resources/js/store/modules/sharing.js vendored
View File

@@ -31,9 +31,7 @@ const actions = {
axios
.get(`/api/browse/folders/${id}/${router.currentRoute.params.token}${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('SET_PAGINATE', response.data.meta.paginate)
commit('LOADING_STATE', {
loading: false,

8
resources/js/store/modules/teams.js vendored
View File

@@ -24,9 +24,7 @@ const actions = {
axios
.get(`${getters.api}/teams/folders/${id}/${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('SET_PAGINATE', response.data.meta.paginate)
commit('LOADING_STATE', {
loading: false,
@@ -77,9 +75,7 @@ const actions = {
axios
.get(`${getters.api}/teams/shared-with-me/${id}/${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('SET_PAGINATE', response.data.meta.paginate)
commit('LOADING_STATE', {
loading: false,