diff --git a/src/store/files.js b/src/store/files.js index 8b524405d6..e9ffa2ae1d 100644 --- a/src/store/files.js +++ b/src/store/files.js @@ -29,6 +29,10 @@ export const useFilesStore = function(...args) { filterActive: 'all', canRequestSign: loadState('libresign', 'can_request_sign', false), ordered: [], + paginationCurrent: '', + paginationNext: '', + paginationLast: '', + paginationLength: '', } }, @@ -222,6 +226,7 @@ export const useFilesStore = function(...args) { } }, async getAllFiles(filter) { + // Build filter params object if (!filter) filter = {} const { chips } = useFiltersStore() if (chips?.status?.length) { @@ -239,12 +244,28 @@ export const useFilesStore = function(...args) { if (sortingDirection) { filter.sortDirection = sortingDirection } - const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter }) - this.files = {} - this.ordered = [] + + // Build pagination params object + const pagination = {} + if (this.paginationNext) pagination.page = this.paginationNext + if (this.paginationLength) pagination.length = this.paginationNext + + // Call API + const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: {...filter, ...pagination} }) + + // Update state according to API response + if (!this.paginationCurrent) { + this.files = {} + this.ordered = [] + } response.data.ocs.data.data.forEach(file => { this.addFile(file) }) + const currentPaginationParams = new URLSearchParams(response.data.ocs.data.pagination.current.split('?')[1]) + this.paginationCurrent = currentPaginationParams.get('page') + this.paginationLength = currentPaginationParams.get('length') + this.paginationNext = new URLSearchParams(response.data.ocs.data.pagination.next.split('?')[1]).get('page') + this.paginationLast = new URLSearchParams(response.data.ocs.data.pagination.last.split('?')[1]).get('page') return this.files }, filesSorted() { diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue index e3cc011d8c..49b51245b5 100644 --- a/src/views/FilesList/VirtualList.vue +++ b/src/views/FilesList/VirtualList.vue @@ -47,5 +47,30 @@ export default { userConfigStore, } }, + data() { + return { + observer: null, + } + }, + mounted() { + this.observer = new IntersectionObserver(([entry]) => { + if (entry && entry.isIntersecting) { + this.filesStore.getAllFiles() + } + }) + // Is there a better way to target the last tr element? Maybe something like useRef? + if (this.$el.querySelector('table tbody tr:last-child')) { + this.observer.observe(this.$el.querySelector('table tbody tr:last-child')) + } + }, + beforeDestroy() { + if (this.observer) this.observer.disconnect() + }, + updated() { + if (this.observer) { + this.observer.disconnect() + this.observer.observe(this.$el.querySelector('table tbody tr:last-child')) + } + }, }