feat: implement lazy loading of files with pagination

Signed-off-by: Victor Bianchi <[email protected]>

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() {

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'))
+		}
+	},
 }
 </script>