feat: integrate files filtering and pagination, fix IntersectionObserver

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

lib/Helper/Pagination.php

@@ -59,7 +59,7 @@ public function getPagination(?int $page, ?int $length, array $filter = []): arr
 	}
 
 	private function linkToRoute(int $page, int $length, array $filter): string {
-		return $this->urlGenerator->linkToRoute(
+		return $this->urlGenerator->linkToRouteAbsolute(
 			$this->routeName,
 			array_merge(['page' => $page, 'length' => $length, 'apiVersion' => 'v1'], $filter)
 		);

package.json

@@ -41,6 +41,7 @@
     "blueimp-md5": "^2.19.0",
     "copy-webpack-plugin": "^12.0.2",
     "crypto-js": "^4.2.0",
+    "debounce": "^2.2.0",
     "js-confetti": "^0.12.0",
     "lodash-es": "^4.17.21",
     "pinia": "^2.2.5",

src/store/files.js

@@ -8,7 +8,7 @@ import { del, set } from 'vue'
 
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
-import { subscribe } from '@nextcloud/event-bus'
+import { emit, subscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import Moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -242,8 +242,10 @@ export const useFilesStore = function(...args) {
 					}
 				}
 				const { chips } = useFiltersStore()
-				if (chips?.status?.length) {
-					params.set('status', chips.status.map(c => c.id))
+				if (chips?.status) {
+					chips.status.forEach(status => {
+						params.append('status[]', status.id)
+					})
 				}
 				if (chips?.modified?.length) {
 					const { start, end } = chips.modified[0]
@@ -261,18 +263,22 @@ export const useFilesStore = function(...args) {
 				urlObj.search = params.toString()
 
 				const response = await axios.get(urlObj.toString())
+
+				if (!this.paginationNextUrl) {
+					this.files = {}
+					this.ordered = []
+				}
 				this.paginationNextUrl = response.data.ocs.data.pagination.next
 				this.loadedAll = !this.paginationNextUrl
-				this.files = {}
-				this.ordered = []
-				response.data.ocs.data.data.forEach(file => {
+				response.data.ocs.data.data.forEach((file) => {
 					this.addFile(file)
 				})
 				this.loading = false
+				emit('libresign:files:updated')
 				return this.files
 			},
 			async updateAllFiles() {
-				this.paginationNext = null
+				this.paginationNextUrl = null
 				this.loadedAll = false
 				return this.getAllFiles()
 			},

src/views/FilesList/FilesList.vue

@@ -285,16 +285,11 @@ export default {
 	},
 	methods: {
 		refresh() {
-			console.log('Need to implement refresh')
+			this.filesStore.updateAllFiles()
 		},
 		toggleGridView() {
 			this.userConfigStore.update('grid_view', !this.userConfigStore.grid_view)
 		},
-		filterDirContent() {
-			const nodes = this.filesStore.files
-			console.log('Implement filter here')
-			this.dirContentsFiltered = nodes
-		},
 		closeSidebar() {
 			this.filesStore.selectFile()
 		},

src/views/FilesList/VirtualList.vue

@@ -23,11 +23,16 @@
 					:source="item"
 					:loading="loading" />
 			</tbody>
+			<tfoot ref="endOfList" />
 		</table>
 	</div>
 </template>
 
 <script>
+import debounce from 'debounce'
+
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+
 import { useFilesStore } from '../../store/files.js'
 import { useUserConfigStore } from '../../store/userconfig.js'
 
@@ -57,24 +62,31 @@ export default {
 		}
 	},
 	mounted() {
-		this.observer = new IntersectionObserver(([entry]) => {
+		this.observer = new IntersectionObserver(debounce(([entry]) => {
 			if (entry && entry.isIntersecting) {
-				this.filesStore.getAllFiles()
+				this.getFilesIfNotLoading()
 			}
-		})
-		// 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'))
-		}
+		}, 100, false))
+		subscribe('libresign:files:updated', this.updateObserver)
 	},
 	beforeDestroy() {
-		if (this.observer) this.observer.disconnect()
+		this.observer.disconnect()
+		unsubscribe('libresign:files:updated')
 	},
-	updated() {
-		if (this.observer) {
+	methods: {
+		getFilesIfNotLoading() {
+			if (this.filesStore.loading) {
+				setTimeout(this.getFilesIfNotLoading, 100)
+			} else {
+				this.filesStore.getAllFiles()
+			}
+		},
+		updateObserver() {
+			const endOfListElement = this.$refs?.endOfList
+			if (!endOfListElement) return
 			this.observer.disconnect()
-			this.observer.observe(this.$el.querySelector('table tbody tr:last-child'))
-		}
+			this.observer.observe(endOfListElement)
+		},
 	},
 }
 </script>