nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-29 03:10:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

added infinite scroll in browsing

Browse Source
This commit is contained in:
Milos Holba
2022-04-06 17:40:44 +02:00
parent 5531be6640
commit 4379daa079
31 changed files with 555 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/FileBrowser.vue
+47 -1
View File
@@ -11,6 +11,7 @@
@dragover="dragEnter"
@dragleave="dragLeave"
@dragover.prevent
@scroll="infiniteScroll"
tabindex="-1"
@click.self="deselect"
>
@@ -24,6 +25,14 @@
:key="item.data.id"
:item="item"
/>
<!-- Infinite Loader Element -->
<div
class="relative h-16"
v-if="showInfiniteLoadSpinner"
id='infinite-loader'>
<Spinner/>
</div>
</div>
</template>
@@ -31,14 +40,16 @@
import ItemHandler from './ItemHandler'
import { events } from '../../bus'
import { mapGetters } from 'vuex'
import Spinner from './Spinner'
export default {
name: 'FileBrowser',
components: {
ItemHandler,
Spinner
},
computed: {
...mapGetters(['isVisibleSidebar', 'currentFolder', 'itemViewType', 'clipboard', 'entries', 'config']),
...mapGetters(['isVisibleSidebar', 'currentFolder', 'itemViewType', 'clipboard', 'entries', 'config', 'paginate']),
draggedItems() {
// Set opacity for dragged items
if (!this.clipboard.includes(this.draggingId)) {
@@ -49,14 +60,46 @@ export default {
return this.clipboard
}
},
continueInfiniteScroll() {
if(this.paginate)
return this.paginate.paginate.currentPage !== this.paginate.paginate.lastPage
},
showInfiniteLoadSpinner() {
return this.continueInfiniteScroll && this.entries.length !== 0 && config.itemsPerPage <= this.entries.length
},
},
data() {
return {
draggingId: undefined,
isDragging: false,
infiniteScrollLoad: 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()
return (
rect.bottom > 0 &&
rect.right > 0 &&
rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
rect.top < (window.innerHeight || document.documentElement.clientHeight)
);
},
deleteItems() {
if ((this.clipboard.length > 0 && this.$checkPermission('master')) || this.$checkPermission('editor')) {
this.$store.dispatch('deleteItem')
@@ -133,6 +176,9 @@ export default {
},
},
created() {
if(this.$isMobile())
document.addEventListener('scroll', this.infiniteScroll, true)
events.$on('drop', () => {
this.isDragging = false
resources/js/components/Spotlight/Spotlight.vue
+3 -3
View File
@@ -839,13 +839,13 @@ export default {
.then((response) => {
// Show user result
if (this.activeFilter === 'users') {
this.results = response.data.data
this.results = response.data
}
// Show file result
if (!this.activeFilter) {
let files = response.data.files.data
let folders = response.data.folders.data
let files = response.data.files
let folders = response.data.folders
this.results = folders.concat(files)
}
resources/js/helpers/functionHelpers.js
Vendored
+10 -10
View File
@@ -325,19 +325,19 @@ const FunctionHelpers = {
}[this.$router.currentRoute.name]
}
Vue.prototype.$getDataByLocation = function () {
Vue.prototype.$getDataByLocation = async function (page) {
let routes = {
RequestUpload: ['getUploadRequestFolder', router.currentRoute.params.id || undefined ],
Public: ['getSharedFolder', router.currentRoute.params.id || undefined],
Files: ['getFolder', router.currentRoute.params.id || undefined],
RecentUploads: ['getRecentUploads'],
MySharedItems: ['getMySharedItems'],
Trash: ['getTrash', router.currentRoute.params.id || undefined],
TeamFolders: ['getTeamFolder', router.currentRoute.params.id || undefined],
SharedWithMe: ['getSharedWithMeFolder', router.currentRoute.params.id || undefined],
RequestUpload: ['getUploadRequestFolder', {page:page, id:router.currentRoute.params.id || undefined} ],
Public: ['getSharedFolder', {page:page, id:router.currentRoute.params.id || undefined}],
Files: ['getFolder', {page:page, id:router.currentRoute.params.id || undefined}],
RecentUploads: ['getRecentUploads', page],
MySharedItems: ['getMySharedItems', page],
Trash: ['getTrash', {page:page , id:router.currentRoute.params.id || undefined}],
TeamFolders: ['getTeamFolder',{page:page, id:router.currentRoute.params.id || undefined}],
SharedWithMe: ['getSharedWithMeFolder',{page:page, id:router.currentRoute.params.id || undefined}],
}
store.dispatch(...routes[router.currentRoute.name])
await store.dispatch(...routes[router.currentRoute.name])
}
Vue.prototype.$getPaymentLogo = function (driver) {
resources/js/helpers/itemHelpers.js
Vendored
+1 -1
View File
@@ -17,7 +17,7 @@ const itemHelpers = {
}
Vue.prototype.$toggleFavourites = function (entry) {
let favourites = store.getters.user.data.relationships.favourites.data
let favourites = store.getters.user.data.relationships.favourites
// Check if folder is in favourites and then add/remove from favourites
if (favourites && !favourites.find((el) => el.data.id === entry.data.id)) {
resources/js/store/modules/fileBrowser.js
Vendored
+139 -74
View File
@@ -12,93 +12,150 @@ const defaultState = {
isLoading: true,
clipboard: [],
entries: [],
paginate: undefined,
}
const actions = {
getFolder: ({ commit, getters }, id) => {
commit('LOADING_STATE', { loading: true, data: [] })
getFolder: ({ commit, getters },{page, id}) => {
return new Promise ((resolve, reject) => {
axios
.get(`${getters.api}/browse/folders/${id}/${getters.sorting.URI}`)
.then((response) => {
let folders = response.data.folders.data
let files = response.data.files.data
if( !page)
commit('LOADING_STATE', { loading: true, data: [] })
commit('LOADING_STATE', {
loading: false,
data: folders.concat(files),
})
commit('SET_CURRENT_FOLDER', response.data.root)
let currentPage = page || 1
events.$emit('scrollTop')
})
.catch((error) => {
// Redirect if unauthenticated
if ([401, 403].includes(error.response.status)) {
commit('SET_AUTHORIZED', false)
router.push({ name: 'SignIn' })
} else {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
axios
.get(`${getters.api}/browse/folders/${id}/${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
}
})
},
getRecentUploads: ({ commit, getters }) => {
commit('LOADING_STATE', { loading: true, data: [] })
axios
.get(getters.api + '/browse/latest')
.then((response) => {
commit('LOADING_STATE', {
loading: false,
data: response.data.files.data,
commit('LOADING_STATE', {
loading: false,
data: response.data.data,
})
commit('SET_CURRENT_FOLDER', response.data.meta.root)
events.$emit('scrollTop')
resolve(true);
})
commit('SET_CURRENT_FOLDER', undefined)
.catch((error) => {
// Redirect if unauthenticated
if ([401, 403].includes(error.response.status)) {
commit('SET_AUTHORIZED', false)
router.push({ name: 'SignIn' })
} else {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
}
events.$emit('scrollTop')
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
getMySharedItems: ({ commit, getters }) => {
commit('LOADING_STATE', { loading: true, data: [] })
axios
.get(getters.api + '/browse/share' + getters.sorting.URI)
.then((response) => {
let folders = response.data.folders.data
let files = response.data.files.data
commit('LOADING_STATE', {
loading: false,
data: folders.concat(files),
reject(error)
})
commit('SET_CURRENT_FOLDER', undefined)
events.$emit('scrollTop')
})
.catch(() => Vue.prototype.$isSomethingWrong())
})
},
getTrash: ({ commit, getters }, id) => {
commit('LOADING_STATE', { loading: true, data: [] })
getRecentUploads: ({ commit, getters }, page) => {
return new Promise ((resolve, reject) => {
axios
.get(`${getters.api}/browse/trash/${id}/${getters.sorting.URI}`)
.then((response) => {
let folders = response.data.folders.data
let files = response.data.files.data
if(! page)
commit('LOADING_STATE', { loading: true, data: [] })
let currentPage = page || 1
axios
.get(getters.api + `/browse/latest?page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('LOADING_STATE', {
loading: false,
data: response.data.data,
})
commit('SET_CURRENT_FOLDER', undefined)
events.$emit('scrollTop')
commit('LOADING_STATE', {
loading: false,
data: folders.concat(files),
resolve(true)
})
commit('SET_CURRENT_FOLDER', response.data.root)
.catch((error) => {
Vue.prototype.$isSomethingWrong()
events.$emit('scrollTop')
})
.catch(() => Vue.prototype.$isSomethingWrong())
reject(error)
})
})
},
getMySharedItems: ({ commit, getters }, page) => {
return new Promise ((resolve, reject) => {
if(! page)
commit('LOADING_STATE', { loading: true, data: [] })
let currentPage = page || 1
axios
.get(`${getters.api}/browse/share${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('LOADING_STATE', {
loading: false,
data: response.data.data,
})
commit('SET_CURRENT_FOLDER', undefined)
events.$emit('scrollTop')
resolve(true)
})
.catch((error) => {
Vue.prototype.$isSomethingWrong()
reject(error)
})
})
},
getTrash: ({ commit, getters },{page, id}) => {
return new Promise ((resolve, reject) => {
if(! page)
commit('LOADING_STATE', { loading: true, data: [] })
let currentPage = page || 1
axios
.get(`${getters.api}/browse/trash/${id}/${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('LOADING_STATE', {
loading: false,
data: response.data.data,
})
commit('SET_CURRENT_FOLDER', response.data.meta.root)
events.$emit('scrollTop')
resolve(true)
})
.catch((error) => {
Vue.prototype.$isSomethingWrong()
reject(error)
})
})
},
getFolderTree: ({ commit, getters }) => {
return new Promise((resolve, reject) => {
@@ -116,17 +173,24 @@ const actions = {
commit('UPDATE_FOLDER_TREE', response.data)
})
.catch((error) => {
reject(error)
Vue.prototype.$isSomethingWrong()
reject(error)
})
})
},
}
const mutations = {
SET_PAGINATE(state, payload) {
state.paginate = payload
},
LOADING_STATE(state, payload) {
state.entries = payload.data
if(payload.data.length === 0) {
state.entries = []
} else {
state.entries.push(...payload.data)
}
state.isLoading = payload.loading
},
SET_CURRENT_FOLDER(state, folder) {
@@ -221,6 +285,7 @@ const getters = {
clipboard: (state) => state.clipboard,
isLoading: (state) => state.isLoading,
entries: (state) => state.entries,
paginate: (state) => state.paginate
}
export default {
resources/js/store/modules/sharing.js
Vendored
+12 -7
View File
@@ -20,21 +20,26 @@ const defaultState = {
sharedFile: undefined,
}
const actions = {
getSharedFolder: ({ commit, getters }, id) => {
commit('LOADING_STATE', { loading: true, data: [] })
getSharedFolder: ({ commit, getters }, {page, id}) => {
if(! page)
commit('LOADING_STATE', { loading: true, data: [] })
let currentPage = page || 1
return new Promise((resolve, reject) => {
axios
.get(`/api/browse/folders/${id}/${router.currentRoute.params.token}${getters.sorting.URI}`)
.get(`/api/browse/folders/${id}/${router.currentRoute.params.token}${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
let folders = response.data.folders.data
let files = response.data.files.data
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
commit('LOADING_STATE', {
loading: false,
data: folders.concat(files),
data: response.data.data,
})
commit('SET_CURRENT_FOLDER', response.data.root)
commit('SET_CURRENT_FOLDER', response.data.meta.root)
events.$emit('scrollTop')
resources/js/store/modules/teams.js
Vendored
+99 -77
View File
@@ -9,89 +9,111 @@ const defaultState = {
}
const actions = {
getTeamFolder: ({ commit, getters }, id) => {
commit('LOADING_STATE', { loading: true, data: [] })
getTeamFolder: ({ commit, getters }, {page, id}) => {
return new Promise ((resolve, reject) => {
if (typeof id === 'undefined') {
commit('SET_CURRENT_TEAM_FOLDER', null)
}
if(! page)
commit('LOADING_STATE', { loading: true, data: [] })
if (typeof id === 'undefined') {
commit('SET_CURRENT_TEAM_FOLDER', null)
}
axios
.get(`${getters.api}/teams/folders/${id}/${getters.sorting.URI}`)
.then((response) => {
let folders = response.data.folders.data
let files = response.data.files.data
commit('LOADING_STATE', {
loading: false,
data: folders.concat(files),
})
commit('SET_CURRENT_FOLDER', response.data.root)
if (
!getters.currentTeamFolder ||
getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id
) {
commit('SET_CURRENT_TEAM_FOLDER', response.data.teamFolder)
}
events.$emit('scrollTop')
})
.catch((error) => {
// Redirect if unauthenticated
if ([401, 403].includes(error.response.status)) {
commit('SET_AUTHORIZED', false)
router.push({ name: 'SignIn' })
} else {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
let currentPage = page || 1
axios
.get(`${getters.api}/teams/folders/${id}/${getters.sorting.URI}&page=${currentPage}`)
.then((response) => {
commit('SET_PAGINATE', {
paginate: response.data.meta.paginate
})
}
})
commit('LOADING_STATE', {
loading: false,
data:response.data.data,
})
commit('SET_CURRENT_FOLDER', response.data.meta.root)
if (
!getters.currentTeamFolder ||
getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id
) {
commit('SET_CURRENT_TEAM_FOLDER', response.data.teamFolder)
}
events.$emit('scrollTop')
resolve(true)
})
.catch((error) => {
// Redirect if unauthenticated
if ([401, 403].includes(error.response.status)) {
commit('SET_AUTHORIZED', false)
router.push({ name: 'SignIn' })
} else {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
}
reject(error)
})
})
},
getSharedWithMeFolder: ({ commit, getters }, id) => {
commit('LOADING_STATE', { loading: true, data: [] })
getSharedWithMeFolder: ({ commit, getters }, {page, id}) => {
return new Promise ((resolve, reject) => {
if(! page)
commit('LOADING_STATE', { loading: true, data: [] })
if (typeof id === 'undefined') {
commit('SET_CURRENT_TEAM_FOLDER', null)
}
if (typeof id === 'undefined') {
commit('SET_CURRENT_TEAM_FOLDER', null)
}
axios
.get(`${getters.api}/teams/shared-with-me/${id}/${getters.sorting.URI}`)
.then((response) => {
let folders = response.data.folders.data
let files = response.data.files.data
commit('LOADING_STATE', {
loading: false,
data: folders.concat(files),
})
commit('SET_CURRENT_FOLDER', response.data.root)
if (
!getters.currentTeamFolder ||
getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id
) {
commit('SET_CURRENT_TEAM_FOLDER', response.data.teamFolder)
}
events.$emit('scrollTop')
})
.catch((error) => {
// Redirect if unauthenticated
if ([401, 403].includes(error.response.status)) {
commit('SET_AUTHORIZED', false)
router.push({ name: 'SignIn' })
} else {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
let currentPage = page || 1
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('LOADING_STATE', {
loading: false,
data: response.data.data,
})
commit('SET_CURRENT_FOLDER', response.data.meta.root)
if (
!getters.currentTeamFolder ||
getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id
) {
commit('SET_CURRENT_TEAM_FOLDER', response.data.teamFolder)
}
events.$emit('scrollTop')
resolve(true)
})
.catch((error) => {
// Redirect if unauthenticated
if ([401, 403].includes(error.response.status)) {
commit('SET_AUTHORIZED', false)
router.push({ name: 'SignIn' })
} else {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
}
reject(error)
})
})
},
getTeamFolderTree: ({ commit, getters }) => {
return new Promise((resolve, reject) => {
resources/js/store/modules/uploadRequest.js
Vendored
+7 -2
View File
@@ -15,8 +15,8 @@ const actions = {
axios
.get(`/api/upload-request/${router.currentRoute.params.token}/browse/${id}${getters.sorting.URI}`)
.then((response) => {
let folders = response.data.folders.data
let files = response.data.files.data
let folders = response.data.folders
let files = response.data.files
commit('LOADING_STATE', {
loading: false,
@@ -52,6 +52,11 @@ const actions = {
commit('SET_CURRENT_FOLDER', response.data.data.relationships.folder)
}
})
.catch((error) => {
Vue.prototype.$isSomethingWrong()
reject(error)
})
})
},
closeUploadRequest: ({ commit }) => {
resources/js/store/modules/userAuth.js
Vendored
+5 -5
View File
@@ -75,7 +75,7 @@ const actions = {
items.forEach((item) => {
if (item.data.type === 'folder') {
if (
context.getters.user.data.relationships.favourites.data.find((folder) => folder.id === item.data.id)
context.getters.user.data.relationships.favourites.find((folder) => folder.id === item.data.id)
)
return
@@ -92,7 +92,7 @@ const actions = {
// Check is favorites already don't include some of pushed folders
items.map((item) => {
if (!context.getters.user.data.relationships.favourites.data.find((folder) => folder.data.id === item.id)) {
if (!context.getters.user.data.relationships.favourites.find((folder) => folder.data.id === item.id)) {
pushToFavorites.push(item)
}
})
@@ -152,7 +152,7 @@ const mutations = {
},
ADD_TO_FAVOURITES(state, folder) {
folder.forEach((item) => {
state.user.data.relationships.favourites.data.push(item)
state.user.data.relationships.favourites.push(item)
})
},
UPDATE_FIRST_NAME(state, name) {
@@ -169,12 +169,12 @@ const mutations = {
}
},
REMOVE_ITEM_FROM_FAVOURITES(state, item) {
state.user.data.relationships.favourites.data = state.user.data.relationships.favourites.data.filter(
state.user.data.relationships.favourites = state.user.data.relationships.favourites.filter(
(folder) => folder.data.id !== item.data.id
)
},
UPDATE_NAME_IN_FAVOURITES(state, data) {
state.user.data.relationships.favourites.data.find((folder) => {
state.user.data.relationships.favourites.find((folder) => {
if (folder.id === data.id) {
folder.name = data.name
}
resources/js/views/FileView/Components/NavigationSharePanel.vue
+1 -1
View File
@@ -115,7 +115,7 @@ export default {
'isDarkMode',
]),
favourites() {
return this.user.data.relationships.favourites.data.attributes.folders
return this.user.data.relationships.favourites.attributes.folders
},
storage() {
return this.$store.getters.user.data.attributes.storage
resources/js/views/FileView/Components/PanelNavigationFiles.vue
+1 -1
View File
@@ -132,7 +132,7 @@ export default {
computed: {
...mapGetters(['isVisibleNavigationBars', 'navigation', 'clipboard', 'config', 'user']),
favourites() {
return this.user.data.relationships.favourites.data
return this.user.data.relationships.favourites
},
storage() {
return this.$store.getters.user.data.attributes.storage
resources/js/views/FileView/Files.vue
+2 -2
View File
@@ -251,7 +251,7 @@ export default {
return this.item && this.item.data.type === 'folder'
},
isInFavourites() {
return this.user.data.relationships.favourites.data.find((el) => el.data.id === this.item.data.id)
return this.user.data.relationships.favourites.find((el) => el.data.id === this.item.data.id)
},
hasFile() {
return this.clipboard.find((item) => item.data.type !== 'folder')
@@ -263,7 +263,7 @@ export default {
}
},
created() {
this.$store.dispatch('getFolder', this.$route.params.id)
this.$store.dispatch('getFolder', {page:null, id:this.$route.params.id})
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('context-menu:current-folder', (folder) => (this.item = folder))
resources/js/views/FileView/MySharedItems.vue
+1 -1
View File
@@ -152,7 +152,7 @@ export default {
return this.item && this.item.type === 'folder'
},
isInFavourites() {
return this.user.data.relationships.favourites.data.find((el) => el.id === this.item.id)
return this.user.data.relationships.favourites.find((el) => el.id === this.item.id)
},
hasFile() {
return this.clipboard.find((item) => item.type !== 'folder')
resources/js/views/FileView/Public.vue
+1 -1
View File
@@ -228,7 +228,7 @@ export default {
},
},
created() {
this.$store.dispatch('getSharedFolder', this.$route.params.id)
this.$store.dispatch('getSharedFolder', {page:null, id:this.$route.params.id})
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
resources/js/views/FileView/SharedWithMe.vue
+2 -2
View File
@@ -234,7 +234,7 @@ export default {
},
},
mounted() {
this.$store.dispatch('getSharedWithMeFolder', this.$route.params.id)
this.$store.dispatch('getSharedWithMeFolder',{page:null, id:this.$route.params.id})
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
@@ -249,7 +249,7 @@ export default {
if (this.$route.params.id) {
this.$router.push({ name: 'SharedWithMe' })
} else {
this.$store.dispatch('getSharedWithMeFolder', undefined)
this.$store.dispatch('getSharedWithMeFolder',{page:null, id:undefined})
}
events.$emit('toaster', {
resources/js/views/FileView/TeamFolders.vue
+2 -2
View File
@@ -275,7 +275,7 @@ export default {
return this.item && this.item.data.type === 'folder'
},
isInFavourites() {
return this.user.data.relationships.favourites.data.find((el) => el.id === this.item.id)
return this.user.data.relationships.favourites.find((el) => el.id === this.item.id)
},
hasFile() {
return this.clipboard.find((item) => item.type !== 'folder')
@@ -287,7 +287,7 @@ export default {
}
},
mounted() {
this.$store.dispatch('getTeamFolder', this.$route.params.id)
this.$store.dispatch('getTeamFolder', {page:null, id:this.$route.params.id})
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
resources/js/views/FileView/Trash.vue
+1 -1
View File
@@ -146,7 +146,7 @@ export default {
}
},
created() {
this.$store.dispatch('getTrash', this.$route.params.id)
this.$store.dispatch('getTrash', {page:null, id:this.$route.params.id})
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))