feat: add footer to file list

Signed-off-by: Vitor Mattos <vitor@php.rio>

src/views/FilesList/FilesListTableFooter.vue

@@ -0,0 +1,73 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<tr v-show="haveFiles">
+		<th class="files-list__row-checkbox">
+			<!-- TRANSLATORS Label for a table footer which summarizes the columns of the table -->
+			<span class="hidden-visually">{{ t('libresign', 'Total rows summary') }}</span>
+		</th>
+
+		<!-- Link to file -->
+		<td class="files-list__row-name">
+			<!-- Icon or preview -->
+			<span class="files-list__row-icon" />
+
+			<!-- Summary -->
+			<span>{{ summary }}</span>
+		</td>
+
+		<!-- Actions -->
+		<td class="files-list__row-actions" />
+	</tr>
+</template>
+
+<script>
+import { useFilesStore } from '../../store/files.js'
+
+export default {
+	name: 'FilesListTableFooter',
+	setup() {
+		const filesStore = useFilesStore()
+		return {
+			filesStore,
+		}
+	},
+	computed: {
+		totalFiles() {
+			return Object.keys(this.filesStore.files).length
+		},
+		summary() {
+			const fileCount = this.totalFiles
+			if (fileCount === 1) {
+				return t('libresign', '1 file')
+			}
+			return t('libresign', '{fileCount} files', { fileCount })
+		},
+		haveFiles() {
+			const fileCount = this.totalFiles
+			if (this.filesStore.loading) {
+				return false
+			}
+			return fileCount > 0
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+tr {
+	margin-bottom: max(25vh, var(--body-container-margin));
+	border-top: 1px solid var(--color-border);
+	// Prevent hover effect on the whole row
+	background-color: transparent !important;
+	border-bottom: none !important;
+
+	td {
+		user-select: none;
+		// Make sure the cell colors don't apply to column headers
+		color: var(--color-text-maxcontrast) !important;
+	}
+}
+</style>

src/views/FilesList/FilesListVirtual.vue

@@ -13,13 +13,17 @@
 			<FilesListTableHeader ref="thead"
 				:nodes="nodes" />
 		</template>
+		<template #footer>
+			<FilesListTableFooter />
+		</template>
 	</VirtualList>
 </template>
 
 <script>
 import FileEntry from './FileEntry/FileEntry.vue'
 import FileEntryGrid from './FileEntry/FileEntryGrid.vue'
 import FileListFilters from './FileListFilters.vue'
+import FilesListTableFooter from './FilesListTableFooter.vue'
 import FilesListTableHeader from './FilesListTableHeader.vue'
 import VirtualList from './VirtualList.vue'
 
@@ -32,6 +36,7 @@ export default {
 		VirtualList,
 		FileListFilters,
 		FilesListTableHeader,
+		FilesListTableFooter,
 		// eslint-disable-next-line vue/no-unused-components
 		FileEntry,
 		// eslint-disable-next-line vue/no-unused-components

src/views/FilesList/VirtualList.vue

@@ -23,7 +23,11 @@
 					:source="item"
 					:loading="loading" />
 			</tbody>
-			<tfoot ref="endOfList" />
+			<tfoot ref="endOfList"
+				class="files-list__tfoot"
+				data-cy-files-list-tfoot>
+				<slot name="footer" />
+			</tfoot>
 		</table>
 	</div>
 </template>