fix(files) selection store typing

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

apps/files/src/components/FileEntry.vue

@@ -100,7 +100,7 @@ import type { PropType } from 'vue'
 
 import { extname, join } from 'path'
 import { FileType, formatFileSize, Permission, Folder, File as NcFile, NodeStatus, Node, View } from '@nextcloud/files'
-import { getUploader } from '@nextcloud/upload'
+import { Upload, getUploader } from '@nextcloud/upload'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { vOnClickOutside } from '@vueuse/components'
@@ -229,7 +229,7 @@ export default defineComponent({
 			return this.$route.params?.fileid || this.$route.query?.fileid || null
 		},
 		fileid() {
-			return this.source?.fileid?.toString?.()
+			return this.source?.fileid
 		},
 		uniqueId() {
 			return hashCode(this.source.source)
@@ -304,7 +304,7 @@ export default defineComponent({
 			return this.selectionStore.selected
 		},
 		isSelected() {
-			return this.selectedFiles.includes(this.fileid)
+			return this.fileid && this.selectedFiles.includes(this.fileid)
 		},
 
 		isRenaming() {
@@ -315,7 +315,7 @@ export default defineComponent({
 		},
 
 		isActive() {
-			return this.fileid === this.currentFileId?.toString?.()
+			return this.fileid?.toString?.() === this.currentFileId?.toString?.()
 		},
 
 		canDrag() {
@@ -341,7 +341,7 @@ export default defineComponent({
 			}
 
 			// If the current folder is also being dragged, we can't drop it on itself
-			if (this.draggingFiles.includes(this.fileid)) {
+			if (this.fileid && this.draggingFiles.includes(this.fileid)) {
 				return false
 			}
 
@@ -350,7 +350,7 @@ export default defineComponent({
 
 		openedMenu: {
 			get() {
-				return this.actionsMenuStore.opened === this.uniqueId
+				return this.actionsMenuStore.opened === this.uniqueId.toString()
 			},
 			set(opened) {
 				// Only reset when opening a new menu
@@ -362,7 +362,7 @@ export default defineComponent({
 					root.style.removeProperty('--mouse-pos-y')
 				}
 
-				this.actionsMenuStore.opened = opened ? this.uniqueId : null
+				this.actionsMenuStore.opened = opened ? this.uniqueId.toString() : null
 			},
 		},
 	},
@@ -408,7 +408,7 @@ export default defineComponent({
 
 			// If the clicked row is in the selection, open global menu
 			const isMoreThanOneSelected = this.selectedFiles.length > 1
-			this.actionsMenuStore.opened = this.isSelected && isMoreThanOneSelected ? 'global' : this.uniqueId
+			this.actionsMenuStore.opened = this.isSelected && isMoreThanOneSelected ? 'global' : this.uniqueId.toString()
 
 			// Prevent any browser defaults
 			event.preventDefault()
@@ -460,7 +460,7 @@ export default defineComponent({
 
 		async onDragStart(event: DragEvent) {
 			event.stopPropagation()
-			if (!this.canDrag) {
+			if (!this.canDrag || !this.fileid) {
 				event.preventDefault()
 				event.stopPropagation()
 				return
@@ -545,7 +545,6 @@ export default defineComponent({
 
 				logger.debug('Files uploaded successfully')
 				showSuccess(t('files', 'Files uploaded successfully'))
-
 				return
 			}
 

apps/files/src/components/FileEntry/FileEntryCheckbox.vue

@@ -33,7 +33,7 @@
 <script lang="ts">
 import { Node, FileType } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
-import Vue, { PropType } from 'vue'
+import { type PropType, defineComponent } from 'vue'
 
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
@@ -42,7 +42,7 @@ import { useKeyboardStore } from '../../store/keyboard.ts'
 import { useSelectionStore } from '../../store/selection.ts'
 import logger from '../../logger.js'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FileEntryCheckbox',
 
 	components: {
@@ -52,7 +52,7 @@ export default Vue.extend({
 
 	props: {
 		fileid: {
-			type: String,
+			type: Number,
 			required: true,
 		},
 		isLoading: {
@@ -86,7 +86,7 @@ export default Vue.extend({
 			return this.selectedFiles.includes(this.fileid)
 		},
 		index() {
-			return this.nodes.findIndex((node: Node) => node.fileid === parseInt(this.fileid))
+			return this.nodes.findIndex((node: Node) => node.fileid === this.fileid)
 		},
 		isFile() {
 			return this.source.type === FileType.File
@@ -112,8 +112,9 @@ export default Vue.extend({
 
 				const lastSelection = this.selectionStore.lastSelection
 				const filesToSelect = this.nodes
-					.map(file => file.fileid?.toString?.())
+					.map(file => file.fileid)
 					.slice(start, end + 1)
+					.filter(Boolean) as number[]
 
 				// If already selected, update the new selection _without_ the current file
 				const selection = [...lastSelection, ...filesToSelect]

apps/files/src/components/FileEntryGrid.vue

@@ -77,12 +77,12 @@ import type { PropType } from 'vue'
 
 import { extname, join } from 'path'
 import { FileType, Permission, Folder, File as NcFile, NodeStatus, Node, View } from '@nextcloud/files'
-import { getUploader } from '@nextcloud/upload'
+import { Upload, getUploader } from '@nextcloud/upload'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { vOnClickOutside } from '@vueuse/components'
-import Vue from 'vue'
+import Vue, { defineComponent } from 'vue'
 
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
 import { getDragAndDropPreview } from '../utils/dragUtils.ts'
@@ -102,7 +102,7 @@ import logger from '../logger.js'
 
 Vue.directive('onClickOutside', vOnClickOutside)
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FileEntryGrid',
 
 	components: {
@@ -163,7 +163,7 @@ export default Vue.extend({
 			return this.$route.params?.fileid || this.$route.query?.fileid || null
 		},
 		fileid() {
-			return this.source?.fileid?.toString?.()
+			return this.source?.fileid
 		},
 		uniqueId() {
 			return hashCode(this.source.source)
@@ -194,7 +194,7 @@ export default Vue.extend({
 			return this.selectionStore.selected
 		},
 		isSelected() {
-			return this.selectedFiles.includes(this.fileid)
+			return this.fileid && this.selectedFiles.includes(this.fileid)
 		},
 
 		isRenaming() {
@@ -202,7 +202,7 @@ export default Vue.extend({
 		},
 
 		isActive() {
-			return this.fileid === this.currentFileId?.toString?.()
+			return this.fileid?.toString?.() === this.currentFileId?.toString?.()
 		},
 
 		canDrag() {
@@ -224,7 +224,7 @@ export default Vue.extend({
 			}
 
 			// If the current folder is also being dragged, we can't drop it on itself
-			if (this.draggingFiles.includes(this.fileid)) {
+			if (this.fileid && this.draggingFiles.includes(this.fileid)) {
 				return false
 			}
 
@@ -233,10 +233,19 @@ export default Vue.extend({
 
 		openedMenu: {
 			get() {
-				return this.actionsMenuStore.opened === this.uniqueId
+				return this.actionsMenuStore.opened === this.uniqueId.toString()
 			},
 			set(opened) {
-				this.actionsMenuStore.opened = opened ? this.uniqueId : null
+				// Only reset when opening a new menu
+				if (opened) {
+					// Reset any right click position override on close
+					// Wait for css animation to be done
+					const root = this.$root.$el as HTMLElement
+					root.style.removeProperty('--mouse-pos-x')
+					root.style.removeProperty('--mouse-pos-y')
+				}
+
+				this.actionsMenuStore.opened = opened ? this.uniqueId.toString() : null
 			},
 		},
 	},
@@ -327,13 +336,16 @@ export default Vue.extend({
 
 		async onDragStart(event: DragEvent) {
 			event.stopPropagation()
-			if (!this.canDrag) {
+			if (!this.canDrag || !this.fileid) {
 				event.preventDefault()
 				event.stopPropagation()
 				return
 			}
 
-			logger.debug('Drag started')
+			logger.debug('Drag started', { event })
+
+			// Make sure that we're not dragging a file like the preview
+			event.dataTransfer?.clearData?.()
 
 			// Reset any renaming
 			this.renamingStore.$reset()
@@ -409,7 +421,6 @@ export default Vue.extend({
 
 				logger.debug('Files uploaded successfully')
 				showSuccess(t('files', 'Files uploaded successfully'))
-
 				return
 			}
 

apps/files/src/components/FilesListTableHeader.vue

@@ -73,22 +73,21 @@
 <script lang="ts">
 import { translate as t } from '@nextcloud/l10n'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import Vue from 'vue'
+import { defineComponent, type PropType } from 'vue'
 
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
-import FilesListTableHeaderActions from './FilesListTableHeaderActions.vue'
 import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
 import filesSortingMixin from '../mixins/filesSorting.ts'
 import logger from '../logger.js'
+import type { Node } from '@nextcloud/files'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FilesListTableHeader',
 
 	components: {
 		FilesListTableHeaderButton,
 		NcCheckboxRadioSwitch,
-		FilesListTableHeaderActions,
 	},
 
 	mixins: [
@@ -105,7 +104,7 @@ export default Vue.extend({
 			default: false,
 		},
 		nodes: {
-			type: Array,
+			type: Array as PropType<Node[]>,
 			required: true,
 		},
 		filesListWidth: {
@@ -181,13 +180,13 @@ export default Vue.extend({
 				'files-list__column': true,
 				'files-list__column--sortable': !!column.sort,
 				'files-list__row-column-custom': true,
-				[`files-list__row-${this.currentView.id}-${column.id}`]: true,
+				[`files-list__row-${this.currentView?.id}-${column.id}`]: true,
 			}
 		},
 
 		onToggleAll(selected) {
 			if (selected) {
-				const selection = this.nodes.map(node => node.fileid.toString())
+				const selection = this.nodes.map(node => node.fileid).filter(Boolean) as number[]
 				logger.debug('Added all nodes to selection', { selection })
 				this.selectionStore.setLastIndex(null)
 				this.selectionStore.set(selection)

apps/files/src/components/FilesListTableHeaderActions.vue

@@ -42,25 +42,26 @@
 </template>
 
 <script lang="ts">
-import { NodeStatus, getFileActions } from '@nextcloud/files'
+import { Node, NodeStatus, View, getFileActions } from '@nextcloud/files'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate } from '@nextcloud/l10n'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import Vue from 'vue'
+import Vue, { defineComponent, type PropType } from 'vue'
 
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
 import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import logger from '../logger.js'
+import type { FileId } from '../types'
 
 // The registered actions list
 const actions = getFileActions()
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FilesListTableHeaderActions',
 
 	components: {
@@ -76,11 +77,11 @@ export default Vue.extend({
 
 	props: {
 		currentView: {
-			type: Object,
+			type: Object as PropType<View>,
 			required: true,
 		},
 		selectedNodes: {
-			type: Array,
+			type: Array as PropType<FileId[]>,
 			default: () => ([]),
 		},
 	},
@@ -117,7 +118,7 @@ export default Vue.extend({
 		nodes() {
 			return this.selectedNodes
 				.map(fileid => this.getNode(fileid))
-				.filter(node => node)
+				.filter(Boolean) as Node[]
 		},
 
 		areSomeNodesLoading() {

apps/files/src/services/DropService.ts

@@ -32,7 +32,7 @@ import { translate as t } from '@nextcloud/l10n'
 
 import logger from '../logger.js'
 
-export const handleDrop = async (data: DataTransfer) => {
+export const handleDrop = async (data: DataTransfer): Promise<Upload[]> => {
 	// TODO: Maybe handle `getAsFileSystemHandle()` in the future
 
 	const uploads = [] as Upload[]