From f358a51e04a5a31c7bee2cf517141e27c46493df Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Sat, 23 Nov 2024 10:24:43 -0300
Subject: [PATCH 1/3] fix: order of actions

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/views/FilesList/FileEntry/FileEntry.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
index dc7512ba02..fd832d4fe8 100644
--- a/src/views/FilesList/FileEntry/FileEntry.vue
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -13,6 +13,13 @@
 				:extension="'.pdf'" />
 		</td>
 
+		<!-- Actions -->
+		<FileEntryActions ref="actions"
+			:class="`files-list__row-actions-${source.nodeId}`"
+			:opened.sync="openedMenu"
+			:source="source"
+			:loading="loading" />
+
 		<!-- Status -->
 		<td class="files-list__row-status"
 			@click="openDetailsIfAvailable">
@@ -26,13 +33,6 @@
 			@click="openDetailsIfAvailable">
 			<NcDateTime v-if="source.request_date" :timestamp="mtime" :ignore-seconds="true" />
 		</td>
-
-		<!-- Actions -->
-		<FileEntryActions ref="actions"
-			:class="`files-list__row-actions-${source.nodeId}`"
-			:opened.sync="openedMenu"
-			:source="source"
-			:loading="loading" />
 	</tr>
 </template>
 

From 19b4095907e5eb221fd66de445146c35d27f94a3 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Sat, 23 Nov 2024 12:16:35 -0300
Subject: [PATCH 2/3] feat: make possible select multiple files

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js                            |   9 ++
 src/store/keyboard.js                         |  47 ++++++
 src/store/selection.js                        |  57 +++++++
 src/views/FilesList/FileEntry/FileEntry.vue   |   6 +
 .../FilesList/FileEntry/FileEntryCheckbox.vue | 113 ++++++++++++++
 .../FilesList/FileEntry/FileEntryGrid.vue     |   6 +
 src/views/FilesList/FilesListTableHeader.vue  |  57 +++++++
 .../FilesList/FilesListTableHeaderActions.vue | 146 ++++++++++++++++++
 src/views/FilesList/FilesListVirtual.vue      |  37 +++++
 src/views/FilesList/VirtualList.vue           |   6 +-
 10 files changed, 483 insertions(+), 1 deletion(-)
 create mode 100644 src/store/keyboard.js
 create mode 100644 src/store/selection.js
 create mode 100644 src/views/FilesList/FileEntry/FileEntryCheckbox.vue
 create mode 100644 src/views/FilesList/FilesListTableHeaderActions.vue

diff --git a/src/store/files.js b/src/store/files.js
index b900382f68..4a5f270bea 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -231,6 +231,15 @@ export const useFilesStore = function(...args) {
 					this.ordered.splice(index, 1)
 				}
 			},
+			changeStatus(files, status) {
+				Object.entries(files).filter(([key, file]) => {
+					set(
+						this.files[file.nodeId],
+						'status',
+						status,
+					)
+				})
+			},
 			async getAllFiles(filter) {
 				if (this.loading || this.loadedAll) {
 					if (!filter) {
diff --git a/src/store/keyboard.js b/src/store/keyboard.js
new file mode 100644
index 0000000000..20693a71d5
--- /dev/null
+++ b/src/store/keyboard.js
@@ -0,0 +1,47 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { defineStore } from 'pinia'
+import { set } from 'vue'
+
+/**
+ * Observe various events and save the current
+ * special keys states. Useful for checking the
+ * current status of a key when executing a method.
+ * @param {...any} args properties
+ */
+export const useKeyboardStore = function(...args) {
+	const store = defineStore('keyboard', {
+		state: () => ({
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			shiftKey: false,
+		}),
+
+		actions: {
+			onEvent(event) {
+				if (!event) {
+					event = window.event
+				}
+				set(this, 'altKey', !!event.altKey)
+				set(this, 'ctrlKey', !!event.ctrlKey)
+				set(this, 'metaKey', !!event.metaKey)
+				set(this, 'shiftKey', !!event.shiftKey)
+			},
+		},
+	})
+
+	const keyboardStore = store(...args)
+	// Make sure we only register the listeners once
+	if (!keyboardStore._initialized) {
+		window.addEventListener('keydown', keyboardStore.onEvent)
+		window.addEventListener('keyup', keyboardStore.onEvent)
+		window.addEventListener('mousemove', keyboardStore.onEvent)
+
+		keyboardStore._initialized = true
+	}
+
+	return keyboardStore
+}
diff --git a/src/store/selection.js b/src/store/selection.js
new file mode 100644
index 0000000000..a6e6ed3b1f
--- /dev/null
+++ b/src/store/selection.js
@@ -0,0 +1,57 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { defineStore } from 'pinia'
+import { set } from 'vue'
+
+import { subscribe } from '@nextcloud/event-bus'
+
+export const useSelectionStore = function(...args) {
+	const store = defineStore('selection', {
+		state: () => ({
+			selected: [],
+			lastSelection: [],
+			lastSelectedIndex: null,
+		}),
+
+		actions: {
+			/**
+			 * Set the selection of fileIds
+			 * @param {Array} selection Selected files
+			 */
+			set(selection = []) {
+				set(this, 'selected', [...new Set(selection)])
+			},
+
+			/**
+			 * Set the last selected index
+			 * @param {number | null} lastSelectedIndex Position of last selected file
+			 */
+			setLastIndex(lastSelectedIndex = null) {
+				// Update the last selection if we provided a new selection starting point
+				set(this, 'lastSelection', lastSelectedIndex ? this.selected : [])
+				set(this, 'lastSelectedIndex', lastSelectedIndex)
+			},
+
+			/**
+			 * Reset the selection
+			 */
+			reset() {
+				set(this, 'selected', [])
+				set(this, 'lastSelection', [])
+				set(this, 'lastSelectedIndex', null)
+			},
+		},
+	})
+
+	const selectionStore = store(...args)
+
+	// Make sure we only register the listeners once
+	if (!selectionStore._initialized) {
+		subscribe('libresign:filters:update', selectionStore.reset)
+		selectionStore._initialized = true
+	}
+
+	return selectionStore
+}
diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
index fd832d4fe8..69e4c57e2f 100644
--- a/src/views/FilesList/FileEntry/FileEntry.vue
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -5,6 +5,10 @@
 <template>
 	<tr class="files-list__row"
 		@contextmenu="onRightClick">
+		<!-- Checkbox -->
+		<FileEntryCheckbox :is-loading="filesStore.loading"
+			:source="source" />
+
 		<td class="files-list__row-name"
 			@click="openDetailsIfAvailable">
 			<FileEntryPreview :source="source" />
@@ -40,6 +44,7 @@
 import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
 
 import FileEntryActions from './FileEntryActions.vue'
+import FileEntryCheckbox from './FileEntryCheckbox.vue'
 import FileEntryName from './FileEntryName.vue'
 import FileEntryPreview from './FileEntryPreview.vue'
 import FileEntryStatus from './FileEntryStatus.vue'
@@ -53,6 +58,7 @@ export default {
 	components: {
 		NcDateTime,
 		FileEntryActions,
+		FileEntryCheckbox,
 		FileEntryName,
 		FileEntryPreview,
 		FileEntryStatus,
diff --git a/src/views/FilesList/FileEntry/FileEntryCheckbox.vue b/src/views/FilesList/FileEntry/FileEntryCheckbox.vue
new file mode 100644
index 0000000000..c577e79156
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryCheckbox.vue
@@ -0,0 +1,113 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<td class="files-list__row-checkbox"
+		@keyup.esc.exact="resetSelection">
+		<NcLoadingIcon v-if="isLoading" :name="loadingLabel" />
+		<NcCheckboxRadioSwitch v-else
+			:aria-label="ariaLabel"
+			:checked="isSelected"
+			@update:checked="onSelectionChange" />
+	</td>
+</template>
+
+<script>
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
+import logger from '../../../logger.js'
+import { useFilesStore } from '../../../store/files.js'
+import { useKeyboardStore } from '../../../store/keyboard.js'
+import { useSelectionStore } from '../../../store/selection.js'
+
+export default {
+	name: 'FileEntryCheckbox',
+
+	components: {
+		NcCheckboxRadioSwitch,
+		NcLoadingIcon,
+	},
+
+	props: {
+		isLoading: {
+			type: Boolean,
+			default: false,
+		},
+		source: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	setup() {
+		const filesStore = useFilesStore()
+		const keyboardStore = useKeyboardStore()
+		const selectionStore = useSelectionStore()
+		return {
+			filesStore,
+			keyboardStore,
+			selectionStore,
+		}
+	},
+
+	computed: {
+		selectedFiles() {
+			return this.selectionStore.selected
+		},
+		isSelected() {
+			return this.selectedFiles.includes(this.source.nodeId)
+		},
+		index() {
+			return this.filesStore.ordered.findIndex(nodeId => Number(nodeId) === this.source.nodeId)
+		},
+		ariaLabel() {
+			return t('libresign', 'Toggle selection for file "{displayName}"', { displayName: this.source.basename })
+		},
+		loadingLabel() {
+			return t('libresign', 'File is loading')
+		},
+	},
+
+	methods: {
+		onSelectionChange(selected) {
+			const newSelectedIndex = this.index
+			const lastSelectedIndex = this.selectionStore.lastSelectedIndex
+
+			// Get the last selected and select all files in between
+			if (this.keyboardStore?.shiftKey && lastSelectedIndex !== null) {
+				const isAlreadySelected = this.selectedFiles.includes(this.source.nodeId)
+
+				const start = Math.min(newSelectedIndex, lastSelectedIndex)
+				const end = Math.max(lastSelectedIndex, newSelectedIndex)
+
+				const lastSelection = this.selectionStore.lastSelection
+				const filesToSelect = this.filesStore.ordered
+					.slice(start, end + 1)
+
+				// If already selected, update the new selection _without_ the current file
+				const selection = [...new Set([...lastSelection, ...filesToSelect])]
+					.filter(nodeId => !isAlreadySelected || nodeId !== this.source.nodeId)
+
+				logger.debug('Shift key pressed, selecting all files in between', { start, end, filesToSelect, isAlreadySelected })
+				// Keep previous lastSelectedIndex to be use for further shift selections
+				this.selectionStore.set(selection)
+				return
+			}
+
+			const selection = selected
+				? [...this.selectedFiles, this.source.nodeId]
+				: this.selectedFiles.filter(nodeId => nodeId !== this.source.nodeId)
+
+			logger.debug('Updating selection', { selection })
+			this.selectionStore.set(selection)
+			this.selectionStore.setLastIndex(newSelectedIndex)
+		},
+
+		resetSelection() {
+			this.selectionStore.reset()
+		},
+	},
+}
+</script>
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index e810debe8f..cb0006c97e 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -13,6 +13,10 @@
 				:extension="'.pdf'" />
 		</td>
 
+		<!-- Checkbox -->
+		<FileEntryCheckbox :is-loading="filesStore.loading"
+			:source="source" />
+
 		<!-- Status -->
 		<td class="files-list__row-status"
 			@click="openDetailsIfAvailable">
@@ -40,6 +44,7 @@
 import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
 
 import FileEntryActions from './FileEntryActions.vue'
+import FileEntryCheckbox from './FileEntryCheckbox.vue'
 import FileEntryName from './FileEntryName.vue'
 import FileEntryPreview from './FileEntryPreview.vue'
 import FileEntryStatus from './FileEntryStatus.vue'
@@ -53,6 +58,7 @@ export default {
 	components: {
 		NcDateTime,
 		FileEntryActions,
+		FileEntryCheckbox,
 		FileEntryName,
 		FileEntryPreview,
 		FileEntryStatus,
diff --git a/src/views/FilesList/FilesListTableHeader.vue b/src/views/FilesList/FilesListTableHeader.vue
index 19211678b1..c73f9ef490 100644
--- a/src/views/FilesList/FilesListTableHeader.vue
+++ b/src/views/FilesList/FilesListTableHeader.vue
@@ -4,6 +4,11 @@
 -->
 <template>
 	<tr class="files-list__row-head">
+		<th class="files-list__column files-list__row-checkbox"
+			@keyup.esc.exact="resetSelection">
+			<NcCheckboxRadioSwitch v-bind="selectAllBind" @update:checked="onToggleAll" />
+		</th>
+
 		<!-- Columns display -->
 
 		<!-- Link to file -->
@@ -33,12 +38,19 @@
 </template>
 
 <script>
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+
 import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
 
+import logger from '../../logger.js'
+import { useFilesStore } from '../../store/files.js'
+import { useSelectionStore } from '../../store/selection.js'
+
 export default {
 	name: 'FilesListTableHeader',
 
 	components: {
+		NcCheckboxRadioSwitch,
 		FilesListTableHeaderButton,
 	},
 
@@ -48,6 +60,14 @@ export default {
 			required: true,
 		},
 	},
+	setup() {
+		const filesStore = useFilesStore()
+		const selectionStore = useSelectionStore()
+		return {
+			filesStore,
+			selectionStore,
+		}
+	},
 	data() {
 		return {
 			isAscSorting: false,
@@ -66,6 +86,29 @@ export default {
 			],
 		}
 	},
+	computed: {
+		selectAllBind() {
+			const label = t('libresign', 'Toggle selection for all files')
+			return {
+				'aria-label': label,
+				checked: this.isAllSelected,
+				indeterminate: this.isSomeSelected,
+				title: label,
+			}
+		},
+		selectedNodes() {
+			return this.selectionStore.selected
+		},
+		isAllSelected() {
+			return this.selectedNodes.length === this.filesStore.ordered.length
+		},
+		isNoneSelected() {
+			return this.selectedNodes.length === 0
+		},
+		isSomeSelected() {
+			return !this.isAllSelected && !this.isNoneSelected
+		},
+	},
 	methods: {
 		ariaSortForMode(mode) {
 			if (this.sortingMode === mode) {
@@ -81,6 +124,20 @@ export default {
 				[`files-list__row-${column.id}`]: true,
 			}
 		},
+		onToggleAll(selected) {
+			if (selected) {
+				const selection = this.filesStore.ordered
+				logger.debug('Added all nodes to selection', { selection })
+				this.selectionStore.setLastIndex(null)
+				this.selectionStore.set(selection)
+			} else {
+				logger.debug('Cleared selection')
+				this.selectionStore.reset()
+			}
+		},
+		resetSelection() {
+			this.selectionStore.reset()
+		},
 	},
 }
 </script>
diff --git a/src/views/FilesList/FilesListTableHeaderActions.vue b/src/views/FilesList/FilesListTableHeaderActions.vue
new file mode 100644
index 0000000000..df54eecc90
--- /dev/null
+++ b/src/views/FilesList/FilesListTableHeaderActions.vue
@@ -0,0 +1,146 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="files-list__column files-list__row-actions-batch" data-cy-files-list-selection-actions>
+		<NcActions ref="actionsMenu"
+			container="#app-content-vue"
+			:disabled="!!loading || areFilesLoading"
+			:force-name="true"
+			:menu-name="null">
+			<NcActionButton v-for="action in enabledMenuActions"
+				:key="action.id"
+				:aria-label="action.displayName(selectionStore.selected) + ' ' + t('libresign', '(selected)') /** TRANSLATORS: Selected like 'selected files' */"
+				:class="'files-list__row-actions-batch-' + action.id"
+				@click="onActionClick(action)">
+				<template #icon>
+					<NcLoadingIcon v-if="loading === action.id" :size="18" />
+					<NcIconSvgWrapper v-else :svg="action.iconSvgInline(selectionStore.selected)" />
+				</template>
+				{{ action.displayName(selectionStore.selected) }}
+			</NcActionButton>
+		</NcActions>
+	</div>
+</template>
+
+<script>
+import svgDelete from '@mdi/svg/svg/delete.svg?raw'
+
+import { showError, showSuccess } from '@nextcloud/dialogs'
+
+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 logger from '../../logger.js'
+import { useFilesStore } from '../../store/files.js'
+import { useSelectionStore } from '../../store/selection.js'
+
+export default {
+	name: 'FilesListTableHeaderActions',
+
+	components: {
+		NcActions,
+		NcActionButton,
+		NcIconSvgWrapper,
+		NcLoadingIcon,
+	},
+
+	setup() {
+		const filesStore = useFilesStore()
+		const selectionStore = useSelectionStore()
+
+		return {
+			filesStore,
+			selectionStore,
+		}
+	},
+
+	data() {
+		return {
+			enabledMenuActions: [],
+			loading: null,
+		}
+	},
+	computed: {
+		areFilesLoading() {
+			return this.filesStore.loading
+		},
+	},
+	mounted() {
+		this.registerAction({
+			id: 'delete',
+			displayName: () => t('libresign', 'Delete'),
+			iconSvgInline: () => svgDelete,
+			execBatch: (files) => {
+			},
+		})
+	},
+	methods: {
+		registerAction(action) {
+			this.enabledMenuActions = [...this.enabledMenuActions, action]
+		},
+		async onActionClick(action) {
+			const displayName = action.displayName(this.selectionStore.selected)
+			const selectionSources = this.selectionStore.selected
+			try {
+				// Set loading markers
+				this.loading = action.id
+				this.changeStatusOfSelectedFiles('loading')
+
+				// Dispatch action execution
+				const results = await action.execBatch(this.selectionStore.selected)
+
+				// Check if all actions returned null
+				if (!results.some(result => result !== null)) {
+					// If the actions returned null, we stay silent
+					this.selectionStore.reset()
+					return
+				}
+
+				// Handle potential failures
+				if (results.some(result => result === false)) {
+					// Remove the failed ids from the selection
+					const failedSources = selectionSources
+						.filter((source, index) => results[index] === false)
+					this.selectionStore.set(failedSources)
+
+					if (results.some(result => result === null)) {
+						// If some actions returned null, we assume that the dev
+						// is handling the error messages and we stay silent
+						return
+					}
+
+					showError(this.t('libresign', '"{displayName}" failed on some elements ', { displayName }))
+					return
+				}
+
+				// Show success message and clear selection
+				showSuccess(this.t('libresign', '"{displayName}" batch action executed successfully', { displayName }))
+				this.selectionStore.reset()
+			} catch (e) {
+				logger.error('Error while executing action', { action, e })
+				showError(this.t('libresign', '"{displayName}" action failed', { displayName }))
+			} finally {
+				// Remove loading markers
+				this.loading = null
+				this.changeStatusOfSelectedFiles()
+			}
+		},
+		changeStatusOfSelectedFiles(status) {
+			this.selectionStore.selected.forEach(nodeId => {
+				this.filesStore.files[nodeId].status = status
+			})
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list__row-actions-batch {
+	flex: 1 1 100% !important;
+	max-width: 100%;
+}
+</style>
diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
index 611146ce8a..67afa72dd6 100644
--- a/src/views/FilesList/FilesListVirtual.vue
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -8,6 +8,10 @@
 		<template #filters>
 			<FileListFilters />
 		</template>
+		<template v-if="!isNoneSelected" #header-overlay>
+			<span class="files-list__selected">{{ n('libresign', '{count} selected', '{count} selected', selectionStore.selected.length, { count: selectionStore.selected.length }) }}</span>
+			<FilesListTableHeaderActions />
+		</template>
 		<template #header>
 			<!-- Table header and sort buttons -->
 			<FilesListTableHeader ref="thead"
@@ -25,9 +29,11 @@ import FileEntryGrid from './FileEntry/FileEntryGrid.vue'
 import FileListFilters from './FileListFilters.vue'
 import FilesListTableFooter from './FilesListTableFooter.vue'
 import FilesListTableHeader from './FilesListTableHeader.vue'
+import FilesListTableHeaderActions from './FilesListTableHeaderActions.vue'
 import VirtualList from './VirtualList.vue'
 
 import { useFilesStore } from '../../store/files.js'
+import { useSelectionStore } from '../../store/selection.js'
 import { useUserConfigStore } from '../../store/userconfig.js'
 
 export default {
@@ -36,6 +42,7 @@ export default {
 		VirtualList,
 		FileListFilters,
 		FilesListTableHeader,
+		FilesListTableHeaderActions,
 		FilesListTableFooter,
 		// eslint-disable-next-line vue/no-unused-components
 		FileEntry,
@@ -54,9 +61,11 @@ export default {
 	},
 	setup() {
 		const filesStore = useFilesStore()
+		const selectionStore = useSelectionStore()
 		const userConfigStore = useUserConfigStore()
 		return {
 			filesStore,
+			selectionStore,
 			userConfigStore,
 		}
 	},
@@ -66,6 +75,11 @@ export default {
 			FileEntryGrid,
 		}
 	},
+	computed: {
+		isNoneSelected() {
+			return this.selectionStore.selected.length === 0
+		},
+	},
 }
 </script>
 
@@ -110,6 +124,11 @@ export default {
 			}
 		}
 
+		.files-list__selected {
+			padding-inline-end: 12px;
+			white-space: nowrap;
+		}
+
 		.files-list__table {
 			display: block;
 
@@ -132,6 +151,24 @@ export default {
 			width: 100%;
 		}
 
+		.files-list__thead-overlay {
+			// Pinned on top when scrolling
+			position: sticky;
+			top: var(--fixed-block-start-position);
+			// Save space for a row checkbox
+			margin-inline-start: var(--row-height);
+			// More than .files-list__thead
+			z-index: 20;
+
+			display: flex;
+			align-items: center;
+
+			// Reuse row styles
+			background-color: var(--color-main-background);
+			border-block-end: 1px solid var(--color-border);
+			height: var(--row-height);
+		}
+
 		.files-list__thead,
 		.files-list__tfoot {
 			display: flex;
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index 2ea534afd8..e28bc7b4ab 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/src/views/FilesList/VirtualList.vue
@@ -8,7 +8,11 @@
 			<slot name="filters" />
 		</div>
 
-		<table class="files-list__table">
+		<div v-if="!!$scopedSlots['header-overlay']" class="files-list__thead-overlay">
+			<slot name="header-overlay" />
+		</div>
+
+		<table class="files-list__table" :class="{ 'files-list__table--with-thead-overlay': !!$scopedSlots['header-overlay'] }">
 			<!-- Header -->
 			<thead ref="thead" class="files-list__thead">
 				<slot name="header" />

From 308c242d94d1a83d637fd6e6e8908851a27d7e52 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Mon, 25 Nov 2024 13:02:04 -0300
Subject: [PATCH 3/3] feat: implement delete multiple action

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js                            | 26 +++++----
 .../FilesList/FilesListTableHeaderActions.vue | 57 +++++++++++++++++--
 2 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/src/store/files.js b/src/store/files.js
index 4a5f270bea..b6fa3abc29 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -223,22 +223,24 @@ export const useFilesStore = function(...args) {
 					await axios.delete(generateOcsUrl(url, {
 						fileId: file.nodeId,
 					}))
+						.then(() => {
+							del(this.files, file.nodeId)
+							const index = this.ordered.indexOf(file.nodeId)
+							if (index > -1) {
+								this.ordered.splice(index, 1)
+							}
+						})
 				}
-				del(this.files, file.nodeId)
 
-				const index = this.ordered.indexOf(file.nodeId)
-				if (index > -1) {
-					this.ordered.splice(index, 1)
-				}
 			},
-			changeStatus(files, status) {
-				Object.entries(files).filter(([key, file]) => {
-					set(
-						this.files[file.nodeId],
-						'status',
-						status,
-					)
+			async deleteMultiple(nodeIds, deleteFile) {
+				this.loading = true
+				nodeIds.forEach(async nodeId => {
+					await this.delete(this.files[nodeId], deleteFile)
 				})
+				const toRemove = nodeIds.filter(nodeId => (!this.files[nodeId]?.uuid))
+				del(this.files, ...toRemove)
+				this.loading = false
 			},
 			async getAllFiles(filter) {
 				if (this.loading || this.loadedAll) {
diff --git a/src/views/FilesList/FilesListTableHeaderActions.vue b/src/views/FilesList/FilesListTableHeaderActions.vue
index df54eecc90..590d34d3d7 100644
--- a/src/views/FilesList/FilesListTableHeaderActions.vue
+++ b/src/views/FilesList/FilesListTableHeaderActions.vue
@@ -21,6 +21,32 @@
 				{{ action.displayName(selectionStore.selected) }}
 			</NcActionButton>
 		</NcActions>
+		<NcDialog v-if="confirmDelete"
+			:name="t('libresign', 'Confirm')"
+			:can-close="!deleting"
+			:open.sync="confirmDelete">
+			{{ t('libresign', 'The signature request will be deleted. Do you confirm this action?') }}
+			<NcCheckboxRadioSwitch type="switch"
+				:checked.sync="deleteFile"
+				:disabled="deleting">
+				{{ t('libresign', 'Also delete the file.') }}
+			</NcCheckboxRadioSwitch>
+			<template #actions>
+				<NcButton type="primary"
+					:disabled="deleting"
+					@click="doDelete()">
+					<template #icon>
+						<NcLoadingIcon v-if="deleting" :size="20" />
+					</template>
+					{{ t('libresign', 'Ok') }}
+				</NcButton>
+				<NcButton type="secondary"
+					:disabled="deleting"
+					@click="confirmDelete = false">
+					{{ t('libresign', 'Cancel') }}
+				</NcButton>
+			</template>
+		</NcDialog>
 	</div>
 </template>
 
@@ -31,6 +57,9 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
@@ -44,6 +73,9 @@ export default {
 	components: {
 		NcActions,
 		NcActionButton,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcDialog,
 		NcIconSvgWrapper,
 		NcLoadingIcon,
 	},
@@ -62,6 +94,10 @@ export default {
 		return {
 			enabledMenuActions: [],
 			loading: null,
+			toDelete: [],
+			confirmDelete: false,
+			deleteFile: true,
+			deleting: false,
 		}
 	},
 	computed: {
@@ -75,6 +111,9 @@ export default {
 			displayName: () => t('libresign', 'Delete'),
 			iconSvgInline: () => svgDelete,
 			execBatch: (files) => {
+				this.confirmDelete = true
+				this.toDelete = files
+				return files.map(() => (null))
 			},
 		})
 	},
@@ -82,13 +121,22 @@ export default {
 		registerAction(action) {
 			this.enabledMenuActions = [...this.enabledMenuActions, action]
 		},
+		doDelete() {
+			this.deleting = true
+			this.filesStore.deleteMultiple(this.toDelete, this.deleteFile)
+				.then(() => {
+					this.toDelete = []
+					this.selectionStore.reset()
+					this.deleting = false
+				})
+		},
 		async onActionClick(action) {
 			const displayName = action.displayName(this.selectionStore.selected)
 			const selectionSources = this.selectionStore.selected
 			try {
 				// Set loading markers
 				this.loading = action.id
-				this.changeStatusOfSelectedFiles('loading')
+				this.changeLoadingStatusOfSelectedFiles('loading')
 
 				// Dispatch action execution
 				const results = await action.execBatch(this.selectionStore.selected)
@@ -96,7 +144,6 @@ export default {
 				// Check if all actions returned null
 				if (!results.some(result => result !== null)) {
 					// If the actions returned null, we stay silent
-					this.selectionStore.reset()
 					return
 				}
 
@@ -126,12 +173,12 @@ export default {
 			} finally {
 				// Remove loading markers
 				this.loading = null
-				this.changeStatusOfSelectedFiles()
+				this.changeLoadingStatusOfSelectedFiles()
 			}
 		},
-		changeStatusOfSelectedFiles(status) {
+		changeLoadingStatusOfSelectedFiles(status) {
 			this.selectionStore.selected.forEach(nodeId => {
-				this.filesStore.files[nodeId].status = status
+				this.filesStore.files[nodeId].loading = status
 			})
 		},
 	},