Merge pull request #45585 from nextcloud/fix/files-filelist-table

refactor(files): Adjust some Typescript code in virtual files list

apps/files/src/components/FilesListTableFooter.vue

@@ -41,20 +41,24 @@
 </template>
 
 <script lang="ts">
-import { formatFileSize } from '@nextcloud/files'
+import type { Node } from '@nextcloud/files'
+import type { PropType } from 'vue'
+
+import { View, formatFileSize } from '@nextcloud/files'
 import { translate } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
 import { useFilesStore } from '../store/files.ts'
 import { usePathsStore } from '../store/paths.ts'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FilesListTableFooter',
 
-	components: {
-	},
-
 	props: {
+		currentView: {
+			type: View,
+			required: true,
+		},
 		isMtimeAvailable: {
 			type: Boolean,
 			default: false,
@@ -64,7 +68,7 @@ export default Vue.extend({
 			default: false,
 		},
 		nodes: {
-			type: Array,
+			type: Array as PropType<Node[]>,
 			required: true,
 		},
 		summary: {
@@ -87,10 +91,6 @@ export default Vue.extend({
 	},
 
 	computed: {
-		currentView() {
-			return this.$navigation.active
-		},
-
 		dir() {
 			// Remove any trailing slash but leave root slash
 			return (this.$route?.query?.dir || '/').replace(/^(.+)\/$/, '$1')
@@ -104,7 +104,7 @@ export default Vue.extend({
 			if (this.dir === '/') {
 				return this.filesStore.getRoot(this.currentView.id)
 			}
-			const fileId = this.pathsStore.getPath(this.currentView.id, this.dir)
+			const fileId = this.pathsStore.getPath(this.currentView.id, this.dir)!
 			return this.filesStore.getNode(fileId)
 		},
 
@@ -123,7 +123,7 @@ export default Vue.extend({
 			}
 
 			// Otherwise let's compute it
-			return formatFileSize(this.nodes.reduce((total, node) => total + node.size || 0, 0), true)
+			return formatFileSize(this.nodes.reduce((total, node) => total + (node.size ?? 0), 0), true)
 		},
 	},
 

apps/files/src/components/FilesListVirtual.vue

@@ -43,7 +43,8 @@
 
 		<!-- Tfoot-->
 		<template #footer>
-			<FilesListTableFooter :files-list-width="filesListWidth"
+			<FilesListTableFooter :current-view="currentView"
+				:files-list-width="filesListWidth"
 				:is-mtime-available="isMtimeAvailable"
 				:is-size-available="isSizeAvailable"
 				:nodes="nodes"
@@ -54,13 +55,13 @@
 
 <script lang="ts">
 import type { Node as NcNode } from '@nextcloud/files'
-import type { PropType } from 'vue'
+import type { ComponentPublicInstance, PropType } from 'vue'
 import type { UserConfig } from '../types'
 
 import { getFileListHeaders, Folder, View, getFileActions, FileType } from '@nextcloud/files'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import { translate as t, translatePlural as n } from '@nextcloud/l10n'
+import { translate as t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
@@ -280,18 +281,19 @@ export default defineComponent({
 			event.preventDefault()
 			event.stopPropagation()
 
-			const tableTop = this.$refs.table.$el.getBoundingClientRect().top
-			const tableBottom = tableTop + this.$refs.table.$el.getBoundingClientRect().height
+			const tableElement = (this.$refs.table as ComponentPublicInstance<typeof VirtualList>).$el
+			const tableTop = tableElement.getBoundingClientRect().top
+			const tableBottom = tableTop + tableElement.getBoundingClientRect().height
 
 			// If reaching top, scroll up. Using 100 because of the floating header
 			if (event.clientY < tableTop + 100) {
-				this.$refs.table.$el.scrollTop = this.$refs.table.$el.scrollTop - 25
+				tableElement.scrollTop = tableElement.scrollTop - 25
 				return
 			}
 
 			// If reaching bottom, scroll down
 			if (event.clientY > tableBottom - 50) {
-				this.$refs.table.$el.scrollTop = this.$refs.table.$el.scrollTop + 25
+				tableElement.scrollTop = tableElement.scrollTop + 25
 			}
 		},
 

apps/files/src/mixins/filesListWidth.ts

@@ -3,26 +3,31 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
-			filesListWidth: null as number | null,
+			filesListWidth: 0,
 		}
 	},
+
 	mounted() {
 		const fileListEl = document.querySelector('#app-content-vue')
-		this.filesListWidth = fileListEl?.clientWidth ?? null
+		this.filesListWidth = fileListEl?.clientWidth ?? 0
 
+		// @ts-expect-error The resize observer is just now attached to the object
 		this.$resizeObserver = new ResizeObserver((entries) => {
 			if (entries.length > 0 && entries[0].target === fileListEl) {
 				this.filesListWidth = entries[0].contentRect.width
 			}
 		})
+		// @ts-expect-error The resize observer was attached right before to the this object
 		this.$resizeObserver.observe(fileListEl as Element)
 	},
+
 	beforeDestroy() {
+		// @ts-expect-error mounted must have been called before the destroy, so the resize
 		this.$resizeObserver.disconnect()
 	},
 })