Merge remote-tracking branch 'origin/infinite_scroll' into api

# Conflicts:
#	config/vuefilemanager.php
#	package-lock.json
#	package.json
#	public/mix-manifest.json
#	resources/js/store/modules/fileBrowser.js
#	resources/js/store/modules/sharing.js
#	resources/js/store/modules/teams.js
#	resources/js/store/modules/userAuth.js
#	src/App/Socialite/Controllers/SocialiteCallbackController.php
#	src/Domain/Browsing/Controllers/BrowseTrashContentController.php
#	src/Domain/Browsing/Controllers/VisitorBrowseFolderController.php
#	src/Domain/Files/Controllers/UploadFileController.php
#	src/Domain/Items/Controllers/RenameFileOrFolderController.php
#	src/Support/helpers.php

resources/js/components/EntriesView/FileBrowser.vue

@@ -11,6 +11,7 @@
         @dragover="dragEnter"
         @dragleave="dragLeave"
         @dragover.prevent
+        @scroll="infiniteScroll"
         tabindex="-1"
         @click.self="deselect"
     >
@@ -24,6 +25,15 @@
             :key="item.data.id"
             :item="item"
         />
+
+        <!-- Infinite Loader Element -->
+        <div
+            v-show="showInfiniteLoadSpinner"
+            class="relative h-16 md:my-0 my-4"
+			ref="infinityLoader"
+		>
+            <Spinner />
+        </div>
     </div>
 </template>
 
@@ -31,14 +41,17 @@
 import ItemHandler from './ItemHandler'
 import { events } from '../../bus'
 import { mapGetters } from 'vuex'
+import Spinner from './Spinner'
+import { debounce } from 'lodash'
 
 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 +62,39 @@ export default {
                 return this.clipboard
             }
         },
+        canLoadMoreEntries() {
+			return this.paginate?.currentPage !== this.paginate?.lastPage
+        },
+        showInfiniteLoadSpinner() {
+            return this.canLoadMoreEntries && this.entries.length !== 0 && this.paginate.perPage <= this.entries.length
+        },
     },
     data() {
         return {
             draggingId: undefined,
             isDragging: false,
+            isLoadingNewEntries: false,
         }
     },
     methods: {
+		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 &&
+                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')
@@ -81,7 +119,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) {
@@ -131,6 +169,11 @@ export default {
         },
     },
     created() {
+		// Track document scrolling to load new entries if needed
+		if (window.innerWidth <= 1024) {
+			document.addEventListener('scroll', this.infiniteScroll)
+		}
+
         events.$on('drop', () => {
             this.isDragging = false
 

resources/js/components/EntriesView/NavigationSharePanel.vue

@@ -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/components/EntriesView/PanelNavigationFiles.vue

@@ -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/components/Spotlight/Spotlight.vue

@@ -900,13 +900,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

@@ -350,19 +350,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

@@ -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

@@ -6,45 +6,50 @@ import i18n from '../../i18n'
 
 const defaultState = {
     currentFolder: undefined,
+    isMultiSelectMode: false,
     fastPreview: undefined,
     navigation: undefined,
-    isMultiSelectMode: false,
+    paginate: undefined,
     isLoading: true,
     clipboard: [],
     entries: [],
 }
 
 const actions = {
-    getFolder: ({ commit, getters }, id) => {
-        commit('LOADING_STATE', { loading: true, data: [] })
+    getFolder: ({ commit, getters },{page, id}) => {
+        return new Promise ((resolve, reject) => {
+            if(! page)
+                commit('LOADING_STATE', { loading: true, data: [] })
 
-        axios
-            .get(`${getters.api}/browse/folders/${id || 'all'}${getters.sorting.URI}`)
-            .then((response) => {
-                let folders = response.data.folders.data
-                let files = response.data.files.data
+            axios
+                .get(`${getters.api}/browse/folders/${id || 'all'}${getters.sorting.URI}&page=${currentPage}`)
+                .then((response) => {
+                    commit('SET_PAGINATE', response.data.meta.paginate)
 
-                commit('LOADING_STATE', {
-                    loading: false,
-                    data: folders.concat(files),
-                })
-                commit('SET_CURRENT_FOLDER', response.data.root)
-
-                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'),
+                    commit('LOADING_STATE', {
+                        loading: false,
+                        data: response.data.data,
                     })
-                }
-            })
+                    commit('SET_CURRENT_FOLDER', response.data.meta.root)
+
+                    events.$emit('scrollTop')
+
+                    resolve(response);
+                })
+                .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'),
+                        })
+                    }
+                })
+        })
     },
     getRecentUploads: ({ commit, getters }) => {
         commit('LOADING_STATE', { loading: true, data: [] })
@@ -125,8 +130,15 @@ const actions = {
 }
 
 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) {
@@ -220,6 +232,7 @@ const getters = {
     navigation: (state) => state.navigation,
     clipboard: (state) => state.clipboard,
     isLoading: (state) => state.isLoading,
+    paginate: (state) => state.paginate,
     entries: (state) => state.entries,
 }
 

resources/js/store/modules/uploadRequest.js

@@ -15,8 +15,8 @@ const actions = {
             axios
                 .get(`/api/file-request/${router.currentRoute.params.token}/browse/${id || 'all'}${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/views/FileView/Files.vue

@@ -254,7 +254,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')
@@ -266,7 +266,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

@@ -157,7 +157,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

@@ -234,7 +234,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

@@ -242,7 +242,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))
@@ -257,7 +257,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

@@ -281,7 +281,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')
@@ -293,7 +293,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

@@ -149,7 +149,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))