From e424bb763a254356287c1c1d72ba26657df76073 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Fri, 20 Sep 2024 18:41:00 -0300
Subject: [PATCH 01/48] feat: rewrite file list

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 package-lock.json                             |   2 +
 package.json                                  |   2 +
 src/helpers/logger.js                         |  11 +
 src/router/router.js                          |   5 +
 src/store/filters.js                          |  27 ++
 .../FileListFilter/FileListFilter.vue         |  58 +++++
 .../FileListFilter/FileListFilterModified.vue | 128 ++++++++++
 .../FileListFilter/FileListFilterStatus.vue   | 136 ++++++++++
 src/views/FilesList/FileListFilters.vue       |  74 ++++++
 src/views/FilesList/FilesList.vue             | 232 ++++++++++++++++++
 src/views/FilesList/FilesListVirtual.vue      |  57 +++++
 src/views/FilesList/VirtualList.vue           |  13 +
 tsconfig.json                                 |   2 +-
 13 files changed, 746 insertions(+), 1 deletion(-)
 create mode 100644 src/helpers/logger.js
 create mode 100644 src/store/filters.js
 create mode 100644 src/views/FilesList/FileListFilter/FileListFilter.vue
 create mode 100644 src/views/FilesList/FileListFilter/FileListFilterModified.vue
 create mode 100644 src/views/FilesList/FileListFilter/FileListFilterStatus.vue
 create mode 100644 src/views/FilesList/FileListFilters.vue
 create mode 100644 src/views/FilesList/FilesList.vue
 create mode 100644 src/views/FilesList/FilesListVirtual.vue
 create mode 100644 src/views/FilesList/VirtualList.vue

diff --git a/package-lock.json b/package-lock.json
index c500a32e88..5a47c132c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
         "@fontsource/dancing-script": "^5.1.0",
         "@libresign/vue-pdf-editor": "^1.3.7",
         "@marionebl/option": "^1.0.8",
+        "@mdi/js": "^7.4.47",
+        "@mdi/svg": "^7.4.47",
         "@nextcloud/auth": "^2.4.0",
         "@nextcloud/axios": "^2.5.1",
         "@nextcloud/dialogs": "^6.0.1",
diff --git a/package.json b/package.json
index 71bfd80e7c..1c9f622b1c 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
     "@fontsource/dancing-script": "^5.1.0",
     "@libresign/vue-pdf-editor": "^1.3.7",
     "@marionebl/option": "^1.0.8",
+    "@mdi/js": "^7.4.47",
+    "@mdi/svg": "^7.4.47",
     "@nextcloud/auth": "^2.4.0",
     "@nextcloud/axios": "^2.5.1",
     "@nextcloud/dialogs": "^6.0.1",
diff --git a/src/helpers/logger.js b/src/helpers/logger.js
new file mode 100644
index 0000000000..c9565f4ba2
--- /dev/null
+++ b/src/helpers/logger.js
@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2020-2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getLoggerBuilder } from '@nextcloud/logger'
+
+export default getLoggerBuilder()
+	.setApp('libresign')
+	.detectUser()
+	.build()
diff --git a/src/router/router.js b/src/router/router.js
index 2784e180a5..bec603b178 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -141,6 +141,11 @@ const router = new Router({
 			name: 'timeline',
 			component: () => import('../views/Timeline/Timeline.vue'),
 		},
+		{
+			path: '/f/filelist/sign',
+			name: 'fileslist',
+			component: () => import('../views/FilesList/FilesList.vue'),
+		},
 		{
 			path: '/f/request',
 			name: 'requestFiles',
diff --git a/src/store/filters.js b/src/store/filters.js
new file mode 100644
index 0000000000..c081bc0efd
--- /dev/null
+++ b/src/store/filters.js
@@ -0,0 +1,27 @@
+/**
+ * SPDX-FileCopyrightText: 2020-2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import logger from '../helpers/logger.js'
+
+export const useFiltersStore = defineStore('filter', {
+	state: () => ({
+		chips: {},
+	}),
+
+	getters: {
+		activeChips(state) {
+			return Object.values(state.chips).flat()
+		},
+	},
+
+	actions: {
+		onFilterUpdateChips(event) {
+			this.chips = { ...this.chips, [event.id]: [...event.detail] }
+
+			logger.debug('File list filter chips updated', { chips: event.detail })
+		},
+	},
+})
diff --git a/src/views/FilesList/FileListFilter/FileListFilter.vue b/src/views/FilesList/FileListFilter/FileListFilter.vue
new file mode 100644
index 0000000000..776461d3e3
--- /dev/null
+++ b/src/views/FilesList/FileListFilter/FileListFilter.vue
@@ -0,0 +1,58 @@
+<template>
+	<NcActions force-menu
+		:type="isActive ? 'secondary' : 'tertiary'"
+		:menu-name="filterName">
+		<template #icon>
+			<slot name="icon" />
+		</template>
+		<slot />
+
+		<template v-if="isActive">
+			<NcActionSeparator />
+			<NcActionButton class="files-list-filter__clear-button"
+				close-after-click
+				@click="$emit('reset-filter')">
+				{{ t('files', 'Clear filter') }}
+			</NcActionButton>
+		</template>
+	</NcActions>
+</template>
+
+<script>
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+
+export default {
+	name: 'FileListFilter',
+	components: {
+		NcActions,
+		NcActionButton,
+		NcActionSeparator,
+	},
+	props: {
+		isActive: {
+			type: Boolean,
+			required: true,
+		},
+		filterName: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list-filter__clear-button :deep(.action-button__text) {
+	color: var(--color-error-text);
+}
+
+:deep(.button-vue) {
+	font-weight: normal !important;
+
+	* {
+		font-weight: normal !important;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileListFilter/FileListFilterModified.vue b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
new file mode 100644
index 0000000000..7e355d864b
--- /dev/null
+++ b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
@@ -0,0 +1,128 @@
+<template>
+	<FileListFilter :is-active="isActive"
+		:filter-name="t('libresign', 'Modified')"
+		@reset-filter="resetFilter">
+		<template #icon>
+			<NcIconSvgWrapper :path="mdiCalendarRange" />
+		</template>
+		<NcActionButton v-for="preset of timePresets"
+			:key="preset.id"
+			type="radio"
+			close-after-click
+			:model-value.sync="selectedOption"
+			:value="preset.id">
+			{{ preset.label }}
+		</NcActionButton>
+	</FileListFilter>
+</template>
+
+<script>
+import { mdiCalendarRange } from '@mdi/js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import calendarSvg from '@mdi/svg/svg/calendar.svg?raw'
+import FileListFilter from './FileListFilter.vue'
+import { useFiltersStore } from '../../../store/filters.js'
+
+const startOfToday = () => (new Date()).setHours(0, 0, 0, 0)
+
+export default {
+	name: 'FileListFilterModified',
+	components: {
+		FileListFilter,
+		NcActionButton,
+		NcIconSvgWrapper,
+	},
+	setup() {
+		const filtersStore = useFiltersStore()
+		return {
+			// icons used in template
+			mdiCalendarRange,
+			filtersStore,
+		}
+	},
+	data() {
+		return {
+			selectedOption: null,
+			timeRangeEnd: null,
+			timeRangeStart: null,
+			timePresets: [
+				{
+					id: 'today',
+					label: t('libresign', 'Today'),
+					filter: (time) => time > startOfToday(),
+				},
+				{
+					id: 'last-7',
+					label: t('libresign', 'Last 7 days'),
+					filter: (time) => time > (startOfToday() - (7 * 24 * 60 * 60 * 1000)),
+				},
+				{
+					id: 'last-30',
+					label: t('libresign', 'Last 30 days'),
+					filter: (time) => time > (startOfToday() - (30 * 24 * 60 * 60 * 1000)),
+				},
+				{
+					id: 'this-year',
+					label: t('libresign', 'This year ({year})', { year: (new Date()).getFullYear() }),
+					filter: (time) => time > (new Date(startOfToday())).setMonth(0, 1),
+				},
+				{
+					id: 'last-year',
+					label: t('libresign', 'Last year ({year})', { year: (new Date()).getFullYear() - 1 }),
+					filter: (time) => (time > (new Date(startOfToday())).setFullYear((new Date()).getFullYear() - 1, 0, 1)) && (time < (new Date(startOfToday())).setMonth(0, 1)),
+				},
+			],
+		}
+	},
+	computed: {
+		isActive() {
+			return this.selectedOption !== null
+		},
+		currentPreset() {
+			return this.timePresets.find(({ id }) => id === this.selectedOption) ?? null
+		},
+	},
+	watch: {
+		selectedOption() {
+			if (this.selectedOption === null) {
+				this.selectedOption = null
+				this.setPreset()
+			} else {
+				this.setPreset(this.currentPreset)
+
+			}
+		},
+	},
+	methods: {
+		setPreset(preset) {
+			const chips = []
+			if (preset) {
+				chips.push({
+					icon: calendarSvg,
+					text: preset.label,
+					onclick: () => this.setPreset(),
+				})
+			} else {
+				this.resetFilter()
+			}
+			this.filtersStore.onFilterUpdateChips({ detail: chips, id: 'modified' })
+		},
+		resetFilter() {
+			if (this.selectedOption !== null) {
+				this.selectedOption = null
+				this.timeRangeEnd = null
+				this.timeRangeStart = null
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list-filter-time {
+	&__clear-button :deep(.action-button__text) {
+		color: var(--color-error-text);
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
new file mode 100644
index 0000000000..5387855747
--- /dev/null
+++ b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
@@ -0,0 +1,136 @@
+<template>
+	<FileListFilter class="file-list-filter-status"
+		:is-active="isActive"
+		:filter-name="t('libresign', 'Status')"
+		@reset-filter="resetFilter">
+		<template #icon>
+			<NcIconSvgWrapper :path="mdiListStatus" />
+		</template>
+		<NcActionButton v-for="status of statusPresets"
+			:key="status.id"
+			type="checkbox"
+			:model-value="selectedOptions.includes(status)"
+			@click="toggleOption(status)">
+			<template #icon>
+				<NcIconSvgWrapper :svg="status.icon" />
+			</template>
+			{{ status.label }}
+		</NcActionButton>
+	</FileListFilter>
+</template>
+
+<script>
+import { mdiListStatus } from '@mdi/js'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import svgFile from '@mdi/svg/svg/file.svg?raw'
+import svgSignature from '@mdi/svg/svg/signature.svg?raw'
+import svgFractionOneHalf from '@mdi/svg/svg/fraction-one-half.svg?raw'
+import svgSignatureFreehand from '@mdi/svg/svg/signature-freehand.svg?raw'
+import svgDelete from '@mdi/svg/svg/delete.svg?raw'
+import FileListFilter from './FileListFilter.vue'
+import { useFiltersStore } from '../../../store/filters.js'
+
+const colorize = (svg, color) => {
+	return svg.replace('<path ', `<path fill="${color}" `)
+}
+
+export default {
+	name: 'FileListFilterStatus',
+	components: {
+		FileListFilter,
+		NcActionButton,
+		NcIconSvgWrapper,
+	},
+	setup() {
+		const filtersStore = useFiltersStore()
+		return {
+			mdiListStatus,
+			filtersStore,
+		}
+	},
+	data() {
+		return {
+			selectedOptions: [],
+			statusPresets: [
+				{
+					id: 0,
+					icon: colorize(svgFile, '#E0E0E0'),
+					label: t('libresign', 'draft'),
+				},
+				{
+					id: 1,
+					icon: colorize(svgSignature, '#B2E0B2'),
+					label: t('libresign', 'available for signature'),
+				},
+				{
+					id: 2,
+					icon: colorize(svgFractionOneHalf, '#F0E68C'),
+					label: t('libresign', 'partially signed'),
+				},
+				{
+					id: 3,
+					icon: colorize(svgSignatureFreehand, '#A0C4FF'),
+					label: t('libresign', 'signed'),
+				},
+				{
+					id: 4,
+					icon: colorize(svgDelete, '#FFB2B2'),
+					label: t('libresign', 'deleted'),
+				},
+			],
+		}
+	},
+	computed: {
+		isActive() {
+			return this.selectedOptions.length > 0
+		},
+	},
+	watch: {
+		selectedOptions(newValue, oldValue) {
+			if (newValue.length === 0) {
+				this.setPreset()
+			} else {
+				this.setPreset(newValue)
+			}
+		},
+	},
+	methods: {
+		setPreset(presets) {
+			const chips = []
+			if (presets && presets.length > 0) {
+				for (const preset of presets) {
+					chips.push({
+						icon: preset.icon,
+						text: preset.label,
+						onclick: () => this.setPreset(presets.filter(({ id }) => id !== preset.id)),
+					})
+				}
+			} else {
+				this.resetFilter()
+			}
+			this.filtersStore.onFilterUpdateChips({ detail: chips, id: 'status' })
+		},
+		resetFilter() {
+			if (this.selectedOptions.length > 0) {
+				this.selectedOptions = []
+			}
+		},
+		toggleOption(option) {
+			const idx = this.selectedOptions.indexOf(option)
+			if (idx !== -1) {
+				this.selectedOptions.splice(idx, 1)
+			} else {
+				this.selectedOptions.push(option)
+			}
+		},
+	},
+}
+</script>
+
+<style>
+.file-list-filter-status {
+	max-width: 220px;
+}
+</style>
diff --git a/src/views/FilesList/FileListFilters.vue b/src/views/FilesList/FileListFilters.vue
new file mode 100644
index 0000000000..48d174122f
--- /dev/null
+++ b/src/views/FilesList/FileListFilters.vue
@@ -0,0 +1,74 @@
+<template>
+	<div class="file-list-filters">
+		<div class="file-list-filters__filter">
+			<div class="file-list-filters__filter">
+				<FileListFilterModified />
+				<FileListFilterStatus />
+			</div>
+		</div>
+		<ul v-if="filtersStore.activeChips.length > 0" class="file-list-filters__active" :aria-label="t('libresign', 'Active filters')">
+			<li v-for="(chip, index) of filtersStore.activeChips" :key="index">
+				<NcChip :aria-label-close="t('libresign', 'Remove filter')"
+					:icon-svg="chip.icon"
+					:text="chip.text"
+					@close="chip.onclick">
+					<template v-if="chip.user" #icon>
+						<NcAvatar disable-menu
+							:show-user-status="false"
+							:size="24"
+							:user="chip.user" />
+					</template>
+				</NcChip>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import FileListFilterModified from './FileListFilter/FileListFilterModified.vue'
+import FileListFilterStatus from './FileListFilter/FileListFilterStatus.vue'
+import { useFiltersStore } from '../../store/filters.js'
+
+export default {
+	name: 'FileListFilters',
+	components: {
+		NcChip,
+		NcAvatar,
+		FileListFilterModified,
+		FileListFilterStatus,
+	},
+	setup() {
+		const filtersStore = useFiltersStore()
+		return { filtersStore }
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.file-list-filters {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+	height: 100%;
+	width: 100%;
+
+	&__filter {
+		display: flex;
+		align-items: start;
+		justify-content: start;
+		gap: calc(var(--default-grid-baseline, 4px) * 2);
+
+		> * {
+			flex: 0 1 fit-content;
+		}
+	}
+
+	&__active {
+		display: flex;
+		flex-direction: row;
+		gap: calc(var(--default-grid-baseline, 4px) * 2);
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
new file mode 100644
index 0000000000..b654ef6a2c
--- /dev/null
+++ b/src/views/FilesList/FilesList.vue
@@ -0,0 +1,232 @@
+<template>
+	<NcAppContent :page-heading="t('libresign', 'Files')">
+		<div class="files-list__header">
+			<NcBreadcrumbs class="files-list__breadcrumbs">
+				<NcBreadcrumb :name="t('libresign', 'Files')"
+					:title="t('libresign', 'Files')"
+					:exact="true"
+					:force-icon-text="true"
+					:to="{ name: 'fileslist' }"
+					:aria-description="t('libresign', 'Files')"
+					:disable-drop="true"
+					@click.native="refresh()">
+					<template #icon>
+						<NcIconSvgWrapper :size="20"
+							:svg="viewIcon" />
+					</template>
+				</NcBreadcrumb>
+				<template #actions>
+					<NcActions :menu-name="t('libresign', 'Request')">
+						<template #icon>
+							<PlusIcon :size="20" />
+						</template>
+						<NcActionButton>
+							<template #icon>
+								<LinkIcon :size="20" />
+							</template>
+							{{ t('libresign', 'Upload from URL') }}
+						</NcActionButton>
+						<NcActionButton>
+							<template #icon>
+								<FolderIcon :size="20" />
+							</template>
+							{{ t('libresign', 'Choose from Files') }}
+						</NcActionButton>
+						<NcActionButton>
+							<template #icon>
+								<NcLoadingIcon v-if="isUploading" :size="20" />
+								<UploadIcon v-else :size="20" />
+							</template>
+							{{ t('libresign', 'Upload') }}
+						</NcActionButton>
+					</NcActions>
+				</template>
+			</NcBreadcrumbs>
+
+			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
+
+			<NcButton :aria-label="gridViewButtonLabel"
+				:title="gridViewButtonLabel"
+				class="files-list__header-grid-button"
+				type="tertiary"
+				@click="toggleGridView">
+				<template #icon>
+					<ListViewIcon v-if="userConfig.grid_view" />
+					<ViewGridIcon v-else />
+				</template>
+			</NcButton>
+		</div>
+		<NcLoadingIcon v-if="loading && !isRefreshing"
+			class="files-list__loading-icon"
+			:size="38"
+			:name="t('libresign', 'Loading …')" />
+		<NcEmptyContent v-else-if="!loading && isEmptyDir"
+			:name="t('libresign', 'There are no documents')"
+			:description="t('libresign', 'Choose the file to request signatures.')">
+			<template #icon>
+				<FolderIcon />
+			</template>
+		</NcEmptyContent>
+		<FilesListVirtual v-else
+			:nodes="dirContentsSorted" />
+	</NcAppContent>
+</template>
+
+<script>
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+
+import HomeSvg from '@mdi/svg/svg/home.svg?raw'
+import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
+import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import LinkIcon from 'vue-material-design-icons/Link.vue'
+import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
+import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import FilesListVirtual from './FilesListVirtual.vue'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import { useFilesStore } from '../../store/files.js'
+
+export default {
+	name: 'FilesList',
+	components: {
+		NcAppContent,
+		NcButton,
+		PlusIcon,
+		ListViewIcon,
+		ViewGridIcon,
+		NcLoadingIcon,
+		FolderIcon,
+		UploadIcon,
+		LinkIcon,
+		NcBreadcrumb,
+		NcBreadcrumbs,
+		NcActions,
+		NcActionButton,
+		NcIconSvgWrapper,
+		FilesListVirtual,
+		NcEmptyContent,
+	},
+	setup() {
+		const filesStore = useFilesStore()
+		return { filesStore }
+	},
+	data() {
+		return {
+			isUploading: false,
+			loading: false,
+			userConfig: {
+				grid_view: false,
+			},
+			dirContentsFiltered: [],
+		}
+	},
+	computed: {
+		viewIcon() {
+			return HomeSvg
+		},
+		gridViewButtonLabel() {
+			return this.userConfig.grid_view
+				? t('libresign', 'Switch to list view')
+				: t('libresign', 'Switch to grid view')
+		},
+		dirContentsSorted() {
+			if (!this.isEmptyDir) {
+				return []
+			}
+			return this.dirContentsFiltered
+		},
+		isEmptyDir() {
+			return this.filesStore.files.length === 0
+		},
+		isRefreshing() {
+			return !this.isEmptyDir
+				&& this.loading
+		},
+	},
+	async created() {
+		await this.filesStore.getAllFiles()
+	},
+	methods: {
+		refresh() {
+			console.log('Need to implement refresh')
+		},
+		toggleGridView() {
+			this.userConfig.grid_view = !this.userConfig.grid_view
+			console.log('Need to implement toggle')
+			// this.userConfigStore.update('grid_view', !this.userConfig.grid_view)
+		},
+		filterDirContent() {
+			const nodes = this.filesStore.files
+			console.log('Implement filter here')
+			this.dirContentsFiltered = nodes
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.app-content {
+	// Virtual list needs to be full height and is scrollable
+	display: flex;
+	overflow: hidden;
+	flex-direction: column;
+	max-height: 100%;
+	position: relative !important;
+}
+
+.files-list__breadcrumbs {
+	// Take as much space as possible
+	flex: 1 1 100% !important;
+	width: 100%;
+	height: 100%;
+	margin-block: 0;
+	margin-inline: 10px;
+	min-width: 0;
+
+	:deep() {
+		a {
+			cursor: pointer !important;
+		}
+	}
+
+	&--with-progress {
+		flex-direction: column !important;
+		align-items: flex-start !important;
+	}
+}
+
+.files-list {
+	&__header {
+		display: flex;
+		align-items: center;
+		// Do not grow or shrink (vertically)
+		flex: 0 0;
+		max-width: 100%;
+		// Align with the navigation toggle icon
+		margin-block: var(--app-navigation-padding, 4px);
+		margin-inline: calc(var(--default-clickable-area, 44px) + 2 * var(--app-navigation-padding, 4px)) var(--app-navigation-padding, 4px);
+
+		>* {
+			// Do not grow or shrink (horizontally)
+			flex: 0 0;
+		}
+	}
+
+	&__refresh-icon {
+		flex: 0 0 var(--default-clickable-area);
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
+	}
+
+	&__loading-icon {
+		margin: auto;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
new file mode 100644
index 0000000000..2a0e385d6f
--- /dev/null
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -0,0 +1,57 @@
+<template>
+	<VirtualList>
+		<template #filters>
+			<FileListFilters />
+		</template>
+	</VirtualList>
+</template>
+
+<script>
+import VirtualList from './VirtualList.vue'
+import FileListFilters from './FileListFilters.vue'
+export default {
+	name: 'FilesListVirtual',
+	components: {
+		VirtualList,
+		FileListFilters,
+	},
+	props: {
+		nodes: {
+			type: Array,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list {
+	--row-height: 55px;
+	--cell-margin: 14px;
+
+	--checkbox-padding: calc((var(--row-height) - var(--checkbox-size)) / 2);
+	--checkbox-size: 24px;
+	--clickable-area: var(--default-clickable-area);
+	--icon-preview-size: 32px;
+
+	--fixed-block-start-position: var(--default-clickable-area);
+
+	overflow: auto;
+	height: 100%;
+	will-change: scroll-position;
+	& :deep() {
+		.files-list__filters {
+			// Pinned on top when scrolling above table header
+			position: sticky;
+			top: 0;
+			// ensure there is a background to hide the file list on scroll
+			background-color: var(--color-main-background);
+			z-index: 10;
+			// fixed the size
+			padding-inline: var(--row-height) var(--default-grid-baseline, 4px);
+			height: var(--fixed-block-start-position);
+			width: 100%;
+		}
+	}
+}
+</style>
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
new file mode 100644
index 0000000000..941ddf47b3
--- /dev/null
+++ b/src/views/FilesList/VirtualList.vue
@@ -0,0 +1,13 @@
+<template>
+	<div class="files-list">
+		<div class="files-list__filters">
+			<slot name="filters" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'VirtualList',
+}
+</script>
diff --git a/tsconfig.json b/tsconfig.json
index 4176c09e07..3d0d2e6764 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,4 +12,4 @@
 	"vueCompilerOptions": {
 		"target": 2.7,
 	}
-}
\ No newline at end of file
+}

From f32e23fcf234a7ae0d97025351f7a80f04ac9f1c Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Mon, 23 Sep 2024 19:11:23 -0300
Subject: [PATCH 02/48] chore: start to implement FileEntry component

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/Components/LeftSidebar/LeftSidebar.vue    |   8 +
 src/helpers/logger.js                         |   2 +-
 src/store/filters.js                          |   3 +-
 src/store/userconfig.js                       |  18 +
 src/views/FilesList/FileEntry/FileEntry.vue   |  15 +
 .../FilesList/FileEntry/FileEntryGrid.vue     |  28 ++
 .../FilesList/FileEntry/FileEntryPreview.vue  |  86 ++++
 .../FileListFilter/FileListFilter.vue         |   2 +-
 .../FileListFilter/FileListFilterModified.vue |   5 +-
 .../FileListFilter/FileListFilterStatus.vue   |  12 +-
 src/views/FilesList/FileListFilters.vue       |   4 +-
 src/views/FilesList/FilesList.vue             |  42 +-
 src/views/FilesList/FilesListTableHeader.vue  | 105 +++++
 .../FilesList/FilesListTableHeaderButton.vue  |  74 ++++
 src/views/FilesList/FilesListVirtual.vue      | 392 +++++++++++++++++-
 src/views/FilesList/VirtualList.vue           |  33 ++
 16 files changed, 798 insertions(+), 31 deletions(-)
 create mode 100644 src/store/userconfig.js
 create mode 100644 src/views/FilesList/FileEntry/FileEntry.vue
 create mode 100644 src/views/FilesList/FileEntry/FileEntryGrid.vue
 create mode 100644 src/views/FilesList/FileEntry/FileEntryPreview.vue
 create mode 100644 src/views/FilesList/FilesListTableHeader.vue
 create mode 100644 src/views/FilesList/FilesListTableHeaderButton.vue

diff --git a/src/Components/LeftSidebar/LeftSidebar.vue b/src/Components/LeftSidebar/LeftSidebar.vue
index 8880abfd0a..9b24041108 100644
--- a/src/Components/LeftSidebar/LeftSidebar.vue
+++ b/src/Components/LeftSidebar/LeftSidebar.vue
@@ -23,6 +23,14 @@
 					<FolderIcon :size="20" />
 				</template>
 			</NcAppNavigationItem>
+			<NcAppNavigationItem id="fileslist"
+				:to="{ name: 'fileslist' }"
+				:name="t('libresign', 'New files')"
+				@click="unselectFile">
+				<template #icon>
+					<FolderIcon :size="20" />
+				</template>
+			</NcAppNavigationItem>
 			<NcAppNavigationItem id="validation"
 				:to="{name: 'validation'}"
 				:name="t('libresign', 'Validate')"
diff --git a/src/helpers/logger.js b/src/helpers/logger.js
index c9565f4ba2..14d74a5d63 100644
--- a/src/helpers/logger.js
+++ b/src/helpers/logger.js
@@ -1,5 +1,5 @@
 /**
- * SPDX-FileCopyrightText: 2020-2024 LibreCode coop and contributors
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
diff --git a/src/store/filters.js b/src/store/filters.js
index c081bc0efd..cb8c13e1a9 100644
--- a/src/store/filters.js
+++ b/src/store/filters.js
@@ -1,9 +1,10 @@
 /**
- * SPDX-FileCopyrightText: 2020-2024 LibreCode coop and contributors
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
 import { defineStore } from 'pinia'
+
 import logger from '../helpers/logger.js'
 
 export const useFiltersStore = defineStore('filter', {
diff --git a/src/store/userconfig.js b/src/store/userconfig.js
new file mode 100644
index 0000000000..2b371cbe86
--- /dev/null
+++ b/src/store/userconfig.js
@@ -0,0 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import Vue from 'vue'
+
+export const useUserConfigStore = defineStore('userconfig', {
+	state: () => ({
+		grid_view: true,
+	}),
+	actions: {
+		async update(key, value) {
+			Vue.set(this, key, value)
+		},
+	},
+})
diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
new file mode 100644
index 0000000000..dc93584abf
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -0,0 +1,15 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<tr />
+</template>
+
+<script>
+
+export default {
+	name: 'FileEntry',
+}
+</script>
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
new file mode 100644
index 0000000000..e578746397
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -0,0 +1,28 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<tr>
+		<td class="files-list__row-name">
+			<FileEntryPreview :source="source" />
+		</td>
+	</tr>
+</template>
+
+<script>
+import FileEntryPreview from './FileEntryPreview.vue'
+export default {
+	name: 'FileEntryGrid',
+	components: {
+		FileEntryPreview,
+	},
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+	},
+}
+</script>
diff --git a/src/views/FilesList/FileEntry/FileEntryPreview.vue b/src/views/FilesList/FileEntry/FileEntryPreview.vue
new file mode 100644
index 0000000000..5ea56f7725
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryPreview.vue
@@ -0,0 +1,86 @@
+<template>
+	<span class="files-list__row-icon">
+		<!-- Decorative images, should not be aria documented -->
+		<span v-if="previewUrl" class="files-list__row-icon-preview-container">
+			<img v-if="backgroundFailed !== true"
+				ref="previewImg"
+				alt=""
+				class="files-list__row-icon-preview"
+				:class="{'files-list__row-icon-preview--loaded': backgroundFailed === false}"
+				loading="lazy"
+				:src="previewUrl"
+				@error="backgroundFailed = true"
+				@load="backgroundFailed = false">
+		</span>
+
+		<FileIcon v-else v-once />
+
+		<!-- Favorite icon -->
+		<span v-if="isFavorite" class="files-list__row-icon-favorite">
+			<FavoriteIcon v-once />
+		</span>
+	</span>
+</template>
+
+<script>
+import FileIcon from 'vue-material-design-icons/File.vue'
+
+import { generateUrl, generateOcsUrl } from '@nextcloud/router'
+
+import { useUserConfigStore } from '../../../store/userconfig.js'
+
+export default {
+	name: 'FileEntryPreview',
+
+	components: {
+		FileIcon,
+	},
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+	},
+	setup() {
+		const userConfigStore = useUserConfigStore()
+		return { userConfigStore }
+	},
+	data() {
+		return {
+			backgroundFailed: false,
+		}
+	},
+	computed: {
+		isFavorite() {
+			return this.source?.attributes?.favorite === 1
+		},
+		previewUrl() {
+			if (this.backgroundFailed === true) {
+				return null
+			}
+
+			let previewUrl = ''
+			if (this.source?.uuid?.length > 0) {
+				previewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/{nodeId}', {
+					nodeId: this.source.nodeId,
+				})
+			} else {
+				previewUrl = window.location.origin + generateUrl('/core/preview?fileId={fileid}', {
+					fileid: this.source.nodeId,
+				})
+			}
+
+			const url = new URL(previewUrl)
+
+			// Request tiny previews
+			url.searchParams.set('x', this.userConfigStore.grid_view ? '128' : '32')
+			url.searchParams.set('y', this.userConfigStore.grid_view ? '128' : '32')
+			url.searchParams.set('mimeFallback', 'true')
+
+			// Handle cropping
+			url.searchParams.set('a', this.cropPreviews === true ? '0' : '1')
+			return url
+		},
+	},
+}
+</script>
diff --git a/src/views/FilesList/FileListFilter/FileListFilter.vue b/src/views/FilesList/FileListFilter/FileListFilter.vue
index 776461d3e3..d235074b5e 100644
--- a/src/views/FilesList/FileListFilter/FileListFilter.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilter.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 
 export default {
diff --git a/src/views/FilesList/FileListFilter/FileListFilterModified.vue b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
index 7e355d864b..8634199086 100644
--- a/src/views/FilesList/FileListFilter/FileListFilterModified.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
@@ -18,10 +18,13 @@
 
 <script>
 import { mdiCalendarRange } from '@mdi/js'
+import calendarSvg from '@mdi/svg/svg/calendar.svg?raw'
+
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
-import calendarSvg from '@mdi/svg/svg/calendar.svg?raw'
+
 import FileListFilter from './FileListFilter.vue'
+
 import { useFiltersStore } from '../../../store/filters.js'
 
 const startOfToday = () => (new Date()).setHours(0, 0, 0, 0)
diff --git a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
index 5387855747..d68fa5fda7 100644
--- a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
@@ -21,15 +21,17 @@
 
 <script>
 import { mdiListStatus } from '@mdi/js'
-
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import svgDelete from '@mdi/svg/svg/delete.svg?raw'
 import svgFile from '@mdi/svg/svg/file.svg?raw'
-import svgSignature from '@mdi/svg/svg/signature.svg?raw'
 import svgFractionOneHalf from '@mdi/svg/svg/fraction-one-half.svg?raw'
 import svgSignatureFreehand from '@mdi/svg/svg/signature-freehand.svg?raw'
-import svgDelete from '@mdi/svg/svg/delete.svg?raw'
+import svgSignature from '@mdi/svg/svg/signature.svg?raw'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+
 import FileListFilter from './FileListFilter.vue'
+
 import { useFiltersStore } from '../../../store/filters.js'
 
 const colorize = (svg, color) => {
diff --git a/src/views/FilesList/FileListFilters.vue b/src/views/FilesList/FileListFilters.vue
index 48d174122f..1f24a1420f 100644
--- a/src/views/FilesList/FileListFilters.vue
+++ b/src/views/FilesList/FileListFilters.vue
@@ -25,10 +25,12 @@
 </template>
 
 <script>
-import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
+
 import FileListFilterModified from './FileListFilter/FileListFilterModified.vue'
 import FileListFilterStatus from './FileListFilter/FileListFilterStatus.vue'
+
 import { useFiltersStore } from '../../store/filters.js'
 
 export default {
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
index b654ef6a2c..9dc04f48f8 100644
--- a/src/views/FilesList/FilesList.vue
+++ b/src/views/FilesList/FilesList.vue
@@ -51,7 +51,7 @@
 				type="tertiary"
 				@click="toggleGridView">
 				<template #icon>
-					<ListViewIcon v-if="userConfig.grid_view" />
+					<ListViewIcon v-if="userConfigStore.grid_view" />
 					<ViewGridIcon v-else />
 				</template>
 			</NcButton>
@@ -73,25 +73,30 @@
 </template>
 
 <script>
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import HomeSvg from '@mdi/svg/svg/home.svg?raw'
-import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
-import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
-import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
 import FilesListVirtual from './FilesListVirtual.vue'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+
 import { useFilesStore } from '../../store/files.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
 
 export default {
 	name: 'FilesList',
@@ -115,15 +120,16 @@ export default {
 	},
 	setup() {
 		const filesStore = useFilesStore()
-		return { filesStore }
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
 	},
 	data() {
 		return {
 			isUploading: false,
 			loading: false,
-			userConfig: {
-				grid_view: false,
-			},
 			dirContentsFiltered: [],
 		}
 	},
@@ -132,7 +138,7 @@ export default {
 			return HomeSvg
 		},
 		gridViewButtonLabel() {
-			return this.userConfig.grid_view
+			return this.userConfigStore.grid_view
 				? t('libresign', 'Switch to list view')
 				: t('libresign', 'Switch to grid view')
 		},
@@ -158,9 +164,7 @@ export default {
 			console.log('Need to implement refresh')
 		},
 		toggleGridView() {
-			this.userConfig.grid_view = !this.userConfig.grid_view
-			console.log('Need to implement toggle')
-			// this.userConfigStore.update('grid_view', !this.userConfig.grid_view)
+			this.userConfigStore.update('grid_view', !this.userConfigStore.grid_view)
 		},
 		filterDirContent() {
 			const nodes = this.filesStore.files
diff --git a/src/views/FilesList/FilesListTableHeader.vue b/src/views/FilesList/FilesListTableHeader.vue
new file mode 100644
index 0000000000..e1d109bf64
--- /dev/null
+++ b/src/views/FilesList/FilesListTableHeader.vue
@@ -0,0 +1,105 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<tr class="files-list__row-head">
+		<th class="files-list__column files-list__row-checkbox">
+			<NcCheckboxRadioSwitch />
+		</th>
+
+		<!-- Columns display -->
+
+		<!-- Link to file -->
+		<th class="files-list__column files-list__row-name files-list__column--sortable">
+			<!-- Icon or preview -->
+			<span class="files-list__row-icon" />
+
+			<!-- Name -->
+			<FilesListTableHeaderButton :name="t('files', 'Name')" mode="basename" />
+		</th>
+
+		<!-- Actions -->
+		<th class="files-list__row-actions" />
+
+		<!-- Custom views columns -->
+		<th v-for="column in columns"
+			:key="column.id"
+			:class="classForColumn(column)"
+			:aria-sort="ariaSortForMode(column.id)">
+			<FilesListTableHeaderButton v-if="!!column.sort" :name="column.title" :mode="column.id" />
+			<span v-else>
+				{{ column.title }}
+			</span>
+		</th>
+	</tr>
+</template>
+
+<script>
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+
+import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
+
+export default {
+	name: 'FilesListTableHeader',
+
+	components: {
+		FilesListTableHeaderButton,
+		NcCheckboxRadioSwitch,
+	},
+
+	props: {
+		nodes: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			isAscSorting: false,
+			sortingMode: 'name',
+			columns: [
+				{
+					title: t('libresign', 'Status'),
+					id: 'status',
+					sort: true,
+				},
+				{
+					title: t('libresign', 'Modified'),
+					id: 'modified',
+					sort: true,
+				},
+			],
+		}
+	},
+	methods: {
+		ariaSortForMode(mode) {
+			if (this.sortingMode === mode) {
+				return this.isAscSorting ? 'ascending' : 'descending'
+			}
+			return null
+		},
+		classForColumn(column) {
+			return {
+				'files-list__column': true,
+				'files-list__column--sortable': !!column.sort,
+				'files-list__row-column-custom': true,
+				[`files-list__row-${column.id}`]: true,
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list__column {
+	user-select: none;
+	// Make sure the cell colors don't apply to column headers
+	color: var(--color-text-maxcontrast) !important;
+
+	&--sortable {
+		cursor: pointer;
+	}
+}
+
+</style>
diff --git a/src/views/FilesList/FilesListTableHeaderButton.vue b/src/views/FilesList/FilesListTableHeaderButton.vue
new file mode 100644
index 0000000000..982d41617d
--- /dev/null
+++ b/src/views/FilesList/FilesListTableHeaderButton.vue
@@ -0,0 +1,74 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcButton :alignment="mode === 'size' ? 'end' : 'start-reverse'"
+		type="tertiary">
+		<template #icon>
+			<MenuUp v-if="true" class="files-list__column-sort-button-icon" />
+			<MenuDown v-else class="files-list__column-sort-button-icon" />
+		</template>
+		<span class="files-list__column-sort-button-text">{{ name }}</span>
+	</NcButton>
+</template>
+
+<script>
+
+import MenuDown from 'vue-material-design-icons/MenuDown.vue'
+import MenuUp from 'vue-material-design-icons/MenuUp.vue'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+
+export default {
+	name: 'FilesListTableHeaderButton',
+
+	components: {
+		MenuDown,
+		MenuUp,
+		NcButton,
+	},
+
+	props: {
+		name: {
+			type: String,
+			required: true,
+		},
+		mode: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list__column-sort-button {
+	// Compensate for cells margin
+	margin: 0 calc(var(--button-padding, var(--cell-margin)) * -1);
+	min-width: calc(100% - 3 * var(--cell-margin))!important;
+
+	&-text {
+		color: var(--color-text-maxcontrast);
+		font-weight: normal;
+	}
+
+	&-icon {
+		color: var(--color-text-maxcontrast);
+		opacity: 0;
+		transition: opacity var(--animation-quick);
+		inset-inline-start: -10px;
+	}
+
+	&--size &-icon {
+		inset-inline-start: 10px;
+	}
+
+	&--active &-icon,
+	&:hover &-icon,
+	&:focus &-icon,
+	&:active &-icon {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
index 2a0e385d6f..735ce7d983 100644
--- a/src/views/FilesList/FilesListVirtual.vue
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -1,19 +1,34 @@
 <template>
-	<VirtualList>
+	<VirtualList :data-component="userConfigStore.grid_view ? FileEntryGrid : FileEntry">
 		<template #filters>
 			<FileListFilters />
 		</template>
+		<template #header>
+			<!-- Table header and sort buttons -->
+			<FilesListTableHeader ref="thead"
+				:nodes="nodes" />
+		</template>
 	</VirtualList>
 </template>
 
 <script>
-import VirtualList from './VirtualList.vue'
+import FileEntry from './FileEntry/FileEntry.vue'
+import FileEntryGrid from './FileEntry/FileEntryGrid.vue'
 import FileListFilters from './FileListFilters.vue'
+import FilesListTableHeader from './FilesListTableHeader.vue'
+import VirtualList from './VirtualList.vue'
+
+import { useFilesStore } from '../../store/files.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
+
 export default {
 	name: 'FilesListVirtual',
 	components: {
 		VirtualList,
 		FileListFilters,
+		FilesListTableHeader,
+		FileEntry,
+		FileEntryGrid,
 	},
 	props: {
 		nodes: {
@@ -21,6 +36,20 @@ export default {
 			required: true,
 		},
 	},
+	setup() {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
+	},
+	data() {
+		return {
+			FileEntry,
+			FileEntryGrid,
+		}
+	},
 }
 </script>
 
@@ -39,7 +68,41 @@ export default {
 	overflow: auto;
 	height: 100%;
 	will-change: scroll-position;
+
+	&:has(.file-list-filters__active) {
+		--fixed-block-start-position: calc(var(--default-clickable-area) + var(--default-grid-baseline) + var(--clickable-area-small));
+	}
+
 	& :deep() {
+		// Table head, body and footer
+		tbody {
+			will-change: padding;
+			contain: layout paint style;
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			// Necessary for virtual scrolling absolute
+			position: relative;
+
+			/* Hover effect on tbody lines only */
+			tr {
+				contain: strict;
+				&:hover,
+				&:focus {
+					background-color: var(--color-background-dark);
+				}
+			}
+		}
+
+		.files-list__table {
+			display: block;
+
+			&.files-list__table--with-thead-overlay {
+				// Hide the table header below the overlay
+				margin-block-start: calc(-1 * var(--row-height));
+			}
+		}
+
 		.files-list__filters {
 			// Pinned on top when scrolling above table header
 			position: sticky;
@@ -52,6 +115,331 @@ export default {
 			height: var(--fixed-block-start-position);
 			width: 100%;
 		}
+
+		.files-list__thead,
+		.files-list__tfoot {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			background-color: var(--color-main-background);
+
+		}
+
+		// Table header
+		.files-list__thead {
+			// Pinned on top when scrolling
+			position: sticky;
+			z-index: 10;
+			top: var(--fixed-block-start-position);
+		}
+
+		tr {
+			position: relative;
+			display: flex;
+			align-items: center;
+			width: 100%;
+			user-select: none;
+			border-block-end: 1px solid var(--color-border);
+			box-sizing: border-box;
+			user-select: none;
+			height: var(--row-height);
+		}
+
+		td, th {
+			display: flex;
+			align-items: center;
+			flex: 0 0 auto;
+			justify-content: start;
+			width: var(--row-height);
+			height: var(--row-height);
+			margin: 0;
+			padding: 0;
+			color: var(--color-text-maxcontrast);
+			border: none;
+
+			// Columns should try to add any text
+			// node wrapped in a span. That should help
+			// with the ellipsis on overflow.
+			span {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+
+		.files-list__row-checkbox {
+			justify-content: center;
+
+			.checkbox-radio-switch {
+				display: flex;
+				justify-content: center;
+
+				--icon-size: var(--checkbox-size);
+
+				label.checkbox-radio-switch__label {
+					width: var(--clickable-area);
+					height: var(--clickable-area);
+					margin: 0;
+					padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2);
+				}
+
+				.checkbox-radio-switch__icon {
+					margin: 0 !important;
+				}
+			}
+		}
+
+		.files-list__row {
+			&:hover, &:focus, &:active, &--active, &--dragover {
+				// WCAG AA compliant
+				background-color: var(--color-background-hover);
+				// text-maxcontrast have been designed to pass WCAG AA over
+				// a white background, we need to adjust then.
+				--color-text-maxcontrast: var(--color-main-text);
+				> * {
+					--color-border: var(--color-border-dark);
+				}
+
+				// Hover state of the row should also change the favorite markers background
+				.favorite-marker-icon svg path {
+					stroke: var(--color-background-hover);
+				}
+			}
+
+			&--dragover * {
+				// Prevent dropping on row children
+				pointer-events: none;
+			}
+		}
+
+		// Entry preview or mime icon
+		.files-list__row-icon {
+			position: relative;
+			display: flex;
+			overflow: visible;
+			align-items: center;
+			// No shrinking or growing allowed
+			flex: 0 0 var(--icon-preview-size);
+			justify-content: center;
+			width: var(--icon-preview-size);
+			height: 100%;
+			// Show same padding as the checkbox right padding for visual balance
+			margin-inline-end: var(--checkbox-padding);
+			color: var(--color-primary-element);
+
+			// Icon is also clickable
+			* {
+				cursor: pointer;
+			}
+
+			& > span {
+				justify-content: flex-start;
+
+				&:not(.files-list__row-icon-favorite) svg {
+					width: var(--icon-preview-size);
+					height: var(--icon-preview-size);
+				}
+
+				// Slightly increase the size of the folder icon
+				&.folder-icon,
+				&.folder-open-icon {
+					margin: -3px;
+					svg {
+						width: calc(var(--icon-preview-size) + 6px);
+						height: calc(var(--icon-preview-size) + 6px);
+					}
+				}
+			}
+
+			&-preview-container {
+				position: relative; // Needed for the blurshash to be positioned correctly
+				overflow: hidden;
+				width: var(--icon-preview-size);
+				height: var(--icon-preview-size);
+				border-radius: var(--border-radius);
+			}
+
+			&-blurhash {
+				position: absolute;
+				inset-block-start: 0;
+				inset-inline-start: 0;
+				height: 100%;
+				width: 100%;
+				object-fit: cover;
+			}
+
+			&-preview {
+				// Center and contain the preview
+				object-fit: contain;
+				object-position: center;
+
+				height: 100%;
+				width: 100%;
+
+				/* Preview not loaded animation effect */
+				&:not(.files-list__row-icon-preview--loaded) {
+					background: var(--color-loading-dark);
+					// animation: preview-gradient-fade 1.2s ease-in-out infinite;
+				}
+			}
+
+			&-favorite {
+				position: absolute;
+				top: 0px;
+				inset-inline-end: -10px;
+			}
+
+			// File and folder overlay
+			&-overlay {
+				position: absolute;
+				max-height: calc(var(--icon-preview-size) * 0.5);
+				max-width: calc(var(--icon-preview-size) * 0.5);
+				color: var(--color-primary-element-text);
+				// better alignment with the folder icon
+				margin-block-start: 2px;
+
+				// Improve icon contrast with a background for files
+				&--file {
+					color: var(--color-main-text);
+					background: var(--color-main-background);
+					border-radius: 100%;
+				}
+			}
+		}
+
+		// Entry link
+		.files-list__row-name {
+			// Prevent link from overflowing
+			overflow: hidden;
+			// Take as much space as possible
+			flex: 1 1 auto;
+		}
+
+		.files-list__row-actions {
+			// take as much space as necessary
+			width: auto;
+
+			// Add margin to all cells after the actions
+			& ~ td,
+			& ~ th {
+				margin: 0 var(--cell-margin);
+			}
+
+			button {
+				.button-vue__text {
+					// Remove bold from default button styling
+					font-weight: normal;
+				}
+			}
+		}
+
+		.files-list__row-column-custom {
+			width: calc(var(--row-height) * 2);
+		}
+	}
+
+}
+</style>
+
+<style lang="scss">
+// Grid mode
+tbody.files-list__tbody.files-list__tbody--grid {
+	--half-clickable-area: calc(var(--clickable-area) / 2);
+	--item-padding: 16px;
+	--icon-preview-size: 166px;
+	--name-height: 32px;
+	--mtime-height: 16px;
+	--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
+	--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
+	--checkbox-padding: 0px;
+
+	display: grid;
+	grid-template-columns: repeat(auto-fill, var(--row-width));
+
+	align-content: center;
+	align-items: center;
+	justify-content: space-around;
+	justify-items: center;
+
+	tr {
+		display: flex;
+		flex-direction: column;
+		width: var(--row-width);
+		height: var(--row-height);
+		border: none;
+		border-radius: var(--border-radius-large);
+		padding: var(--item-padding);
+	}
+
+	// Checkbox in the top left
+	.files-list__row-checkbox {
+		position: absolute;
+		z-index: 9;
+		top: calc(var(--item-padding)/2);
+		inset-inline-start: calc(var(--item-padding)/2);
+		overflow: hidden;
+		--checkbox-container-size: 44px;
+		width: var(--checkbox-container-size);
+		height: var(--checkbox-container-size);
+
+		// Add a background to the checkbox so we do not see the image through it.
+		.checkbox-radio-switch__content::after {
+			content: '';
+			width: 16px;
+			height: 16px;
+			position: absolute;
+			inset-inline-start: 50%;
+			margin-inline-start: -8px;
+			z-index: -1;
+			background: var(--color-main-background);
+		}
+	}
+
+	// Star icon in the top right
+	.files-list__row-icon-favorite {
+		position: absolute;
+		top: 0;
+		inset-inline-end: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--clickable-area);
+		height: var(--clickable-area);
+	}
+
+	.files-list__row-name {
+		display: flex;
+		flex-direction: column;
+		width: var(--icon-preview-size);
+		height: calc(var(--icon-preview-size) + var(--name-height));
+		// Ensure that the name outline is visible.
+		overflow: visible;
+
+		span.files-list__row-icon {
+			width: var(--icon-preview-size);
+			height: var(--icon-preview-size);
+		}
+
+		.files-list__row-name-text {
+			margin: 0;
+			// Ensure that the outline is not too close to the text.
+			margin-inline-start: -4px;
+			padding: 0px 4px;
+		}
+	}
+
+	.files-list__row-mtime {
+		width: var(--icon-preview-size);
+		height: var(--mtime-height);
+		font-size: calc(var(--default-font-size) - 4px);
+	}
+
+	.files-list__row-actions {
+		position: absolute;
+		inset-inline-end: calc(var(--half-clickable-area) / 2);
+		inset-block-end: calc(var(--mtime-height) / 2);
+		width: var(--clickable-area);
+		height: var(--clickable-area);
 	}
 }
 </style>
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index 941ddf47b3..fddcaa33ac 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/src/views/FilesList/VirtualList.vue
@@ -3,11 +3,44 @@
 		<div class="files-list__filters">
 			<slot name="filters" />
 		</div>
+
+		<table class="files-list__table">
+			<!-- Header -->
+			<thead ref="thead" class="files-list__thead">
+				<slot name="header" />
+			</thead>
+			<!-- Body -->
+			<tbody class="files-list__tbody"
+				:class="userConfigStore.grid_view ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
+				data-cy-files-list-tbody>
+				<component :is="dataComponent"
+					v-for="item in filesStore.files"
+					:key="item.nodeId"
+					:source="item" />
+			</tbody>
+		</table>
 	</div>
 </template>
 
 <script>
+import { useFilesStore } from '../../store/files.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
+
 export default {
 	name: 'VirtualList',
+	props: {
+		dataComponent: {
+			type: [Object, Function],
+			required: true,
+		},
+	},
+	setup() {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
+	},
 }
 </script>

From 09fba66c85552d960fd5ca08d0def7148feca4a6 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Tue, 24 Sep 2024 11:55:30 -0300
Subject: [PATCH 03/48] fix: linter

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/userconfig.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store/userconfig.js b/src/store/userconfig.js
index 2b371cbe86..7e70f4808f 100644
--- a/src/store/userconfig.js
+++ b/src/store/userconfig.js
@@ -4,7 +4,7 @@
  */
 
 import { defineStore } from 'pinia'
-import Vue from 'vue'
+import { set } from 'vue'
 
 export const useUserConfigStore = defineStore('userconfig', {
 	state: () => ({
@@ -12,7 +12,7 @@ export const useUserConfigStore = defineStore('userconfig', {
 	}),
 	actions: {
 		async update(key, value) {
-			Vue.set(this, key, value)
+			set(this, key, value)
 		},
 	},
 })

From eb7b5d1a638d00688b5fa964a24022cbc3802feb Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Tue, 24 Sep 2024 11:55:48 -0300
Subject: [PATCH 04/48] feat: add FileEntryName component

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 .../FilesList/FileEntry/FileEntryGrid.vue     | 35 ++++++++++
 .../FilesList/FileEntry/FileEntryName.vue     | 70 +++++++++++++++++++
 src/views/FilesList/FilesListVirtual.vue      | 42 +++++++++++
 3 files changed, 147 insertions(+)
 create mode 100644 src/views/FilesList/FileEntry/FileEntryName.vue

diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index e578746397..3f9cd6a715 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -7,15 +7,28 @@
 	<tr>
 		<td class="files-list__row-name">
 			<FileEntryPreview :source="source" />
+			<FileEntryName ref="name"
+				:basename="source.name"
+				:extension="'.pdf'" />
+		</td>
+
+		<!-- Mtime -->
+		<td :style="mtimeOpacity"
+			class="files-list__row-mtime">
+			<NcDateTime v-if="source.request_date" :timestamp="mtime" :ignore-seconds="true" />
 		</td>
 	</tr>
 </template>
 
 <script>
+import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
+import FileEntryName from './FileEntryName.vue'
 import FileEntryPreview from './FileEntryPreview.vue'
 export default {
 	name: 'FileEntryGrid',
 	components: {
+		NcDateTime,
+		FileEntryName,
 		FileEntryPreview,
 	},
 	props: {
@@ -24,5 +37,27 @@ export default {
 			required: true,
 		},
 	},
+	computed: {
+		mtime() {
+			return Date.parse(this?.source?.request_date)
+		},
+		mtimeOpacity() {
+			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
+
+			const mtime = this.mtime?.getTime?.()
+			if (!mtime) {
+				return {}
+			}
+
+			// 1 = today, 0 = 31 days ago
+			const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
+			if (ratio < 0) {
+				return {}
+			}
+			return {
+				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
+			}
+		},
+	}
 }
 </script>
diff --git a/src/views/FilesList/FileEntry/FileEntryName.vue b/src/views/FilesList/FileEntry/FileEntryName.vue
new file mode 100644
index 0000000000..578a82f54e
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryName.vue
@@ -0,0 +1,70 @@
+<template>
+	<component :is="linkTo.is"
+		ref="basename"
+		class="files-list__row-name-link"
+		v-bind="linkTo.params"
+		dir="auto">
+		<!-- Filename -->
+		<span class="files-list__row-name-text">
+			<!-- Keep the filename stuck to the extension to avoid whitespace rendering issues-->
+			<span class="files-list__row-name-" v-text="basename" />
+			<span class="files-list__row-name-ext" v-text="extension" />
+		</span>
+	</component>
+</template>
+
+<script>
+
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+
+export default {
+	name: 'FileEntryName',
+
+	components: {
+		NcTextField,
+	},
+
+	props: {
+		/**
+		 * The filename without extension
+		 */
+		basename: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * The extension of the filename
+		 */
+		extension: {
+			type: String,
+			required: true,
+		},
+	},
+
+	computed: {
+		linkTo() {
+			return {
+				is: 'button',
+				params: {
+					'aria-label': this.basename,
+					title: this.basename,
+					tabindex: '0',
+				},
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+button.files-list__row-name-link {
+	background-color: unset;
+	border: none;
+	font-weight: normal;
+
+	&:active {
+		// No active styles - handled by the row entry
+		background-color: unset !important;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
index 735ce7d983..b81a58ea17 100644
--- a/src/views/FilesList/FilesListVirtual.vue
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -313,6 +313,48 @@ export default {
 			overflow: hidden;
 			// Take as much space as possible
 			flex: 1 1 auto;
+
+			button.files-list__row-name-link {
+				display: flex;
+				align-items: center;
+				text-align: start;
+				// Fill cell height and width
+				width: 100%;
+				height: 100%;
+				// Necessary for flex grow to work
+				min-width: 0;
+				margin: 0;
+				padding: 0;
+
+				// Already added to the inner text, see rule below
+				&:focus-visible {
+					outline: none !important;
+				}
+
+				// Keyboard indicator a11y
+				&:focus .files-list__row-name-text {
+					outline: var(--border-width-input-focused) solid var(--color-main-text) !important;
+					border-radius: var(--border-radius-element);
+				}
+				&:focus:not(:focus-visible) .files-list__row-name-text {
+					outline: none !important;
+				}
+			}
+
+			.files-list__row-name-text {
+				color: var(--color-main-text);
+				// Make some space for the outline
+				padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
+				padding-inline-start: -10px;
+				// Align two name and ext
+				display: inline-flex;
+			}
+
+			.files-list__row-name-ext {
+				color: var(--color-text-maxcontrast);
+				// always show the extension
+				overflow: visible;
+			}
 		}
 
 		.files-list__row-actions {

From bd55cc4def8c623ebef7bd9057e523f1dd5faeab Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Tue, 24 Sep 2024 13:11:20 -0300
Subject: [PATCH 05/48] chore: add component EntryAction

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/actionsmenu.js                      |  12 ++
 .../FilesList/FileEntry/FileEntryActions.vue  | 125 ++++++++++++++++++
 .../FilesList/FileEntry/FileEntryGrid.vue     |  33 ++++-
 src/views/FilesList/FilesList.vue             |   3 +-
 src/views/FilesList/FilesListVirtual.vue      |   9 +-
 src/views/FilesList/VirtualList.vue           |   7 +-
 6 files changed, 185 insertions(+), 4 deletions(-)
 create mode 100644 src/store/actionsmenu.js
 create mode 100644 src/views/FilesList/FileEntry/FileEntryActions.vue

diff --git a/src/store/actionsmenu.js b/src/store/actionsmenu.js
new file mode 100644
index 0000000000..16676167f2
--- /dev/null
+++ b/src/store/actionsmenu.js
@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+export const useActionsMenuStore = defineStore('actionsmenu', {
+	state: () => ({
+		opened: null,
+	}),
+})
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
new file mode 100644
index 0000000000..df92fbd66c
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -0,0 +1,125 @@
+<template>
+	<td class="files-list__row-actions">
+		<!-- Menu actions -->
+		<NcActions ref="actionsMenu"
+			:force-name="true"
+			type="tertiary"
+			:open.sync="openedMenu"
+			@close="openedSubmenu = null">
+			<!-- Default actions list-->
+			<NcActionButton v-for="action in enabledMenuActions"
+				:key="action.id"
+				:ref="`action-${action.id}`"
+				:class="{
+					[`files-list__row-action-${action.id}`]: true,
+				}"
+				:aria-label="action.title"
+				:title="action.title">
+				<template #icon>
+					<NcLoadingIcon v-if="loading === action.id" :size="18" />
+					<NcIconSvgWrapper v-else :svg="action.iconSvgInline" />
+				</template>
+				{{ action.title }}
+			</NcActionButton>
+		</NcActions>
+	</td>
+</template>
+
+<script>
+import svgFile from '@mdi/svg/svg/file.svg?raw'
+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 { useActionsMenuStore } from '../../../store/actionsmenu.js'
+
+export default {
+	name: 'FileEntryActions',
+	components: {
+		NcActionButton,
+		NcActions,
+		NcIconSvgWrapper,
+		NcLoadingIcon,
+	},
+	props: {
+		opened: {
+			type: Boolean,
+			default: false,
+		},
+		source: {
+			type: Object,
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		return { actionsMenuStore }
+	},
+	data() {
+		return {
+			openedSubmenu: null,
+			enabledMenuActions: [
+				{
+					id: 'id-teste0',
+					title: 'title 0',
+					iconSvgInline: svgFile,
+				},
+				{
+					id: 'id-teste1',
+					title: 'title 1',
+					iconSvgInline: svgFile,
+				},
+				{
+					id: 'id-teste2',
+					title: 'title 2',
+					iconSvgInline: svgFile,
+				},
+			],
+		}
+	},
+	computed: {
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === this.source.nodeId
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? this.source.nodeId : null
+			},
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+// Allow right click to define the position of the menu
+// only if defined
+main.app-content[style*="mouse-pos-x"] .v-popper__popper {
+	transform: translate3d(var(--mouse-pos-x), var(--mouse-pos-y), 0px) !important;
+
+	// If the menu is too close to the bottom, we move it up
+	&[data-popper-placement="top"] {
+		// 34px added to align with the top of the cursor
+		transform: translate3d(var(--mouse-pos-x), calc(var(--mouse-pos-y) - 50vh + 34px), 0px) !important;
+	}
+	// Hide arrow if floating
+	.v-popper__arrow-container {
+		display: none;
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+:deep(.button-vue--icon-and-text, .files-list__row-action-sharing-status) {
+	.button-vue__text {
+		color: var(--color-primary-element);
+	}
+	.button-vue__icon {
+		color: var(--color-primary-element);
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index 3f9cd6a715..1b643771c0 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -17,17 +17,30 @@
 			class="files-list__row-mtime">
 			<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>
 
 <script>
 import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
+
+import FileEntryActions from './FileEntryActions.vue'
 import FileEntryName from './FileEntryName.vue'
 import FileEntryPreview from './FileEntryPreview.vue'
+
+import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+
 export default {
 	name: 'FileEntryGrid',
 	components: {
 		NcDateTime,
+		FileEntryActions,
 		FileEntryName,
 		FileEntryPreview,
 	},
@@ -36,11 +49,29 @@ export default {
 			type: Object,
 			required: true,
 		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		return { actionsMenuStore }
 	},
 	computed: {
 		mtime() {
 			return Date.parse(this?.source?.request_date)
 		},
+
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === this.source.nodeId
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? this.source.nodeId : null
+			},
+		},
+
 		mtimeOpacity() {
 			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
 
@@ -58,6 +89,6 @@ export default {
 				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
 			}
 		},
-	}
+	},
 }
 </script>
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
index 9dc04f48f8..5be7eaab20 100644
--- a/src/views/FilesList/FilesList.vue
+++ b/src/views/FilesList/FilesList.vue
@@ -68,7 +68,8 @@
 			</template>
 		</NcEmptyContent>
 		<FilesListVirtual v-else
-			:nodes="dirContentsSorted" />
+			:nodes="dirContentsSorted"
+			:loading="loading" />
 	</NcAppContent>
 </template>
 
diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
index b81a58ea17..f5df3f5792 100644
--- a/src/views/FilesList/FilesListVirtual.vue
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -1,5 +1,6 @@
 <template>
-	<VirtualList :data-component="userConfigStore.grid_view ? FileEntryGrid : FileEntry">
+	<VirtualList :data-component="userConfigStore.grid_view ? FileEntryGrid : FileEntry"
+		:loading="loading">
 		<template #filters>
 			<FileListFilters />
 		</template>
@@ -12,7 +13,9 @@
 </template>
 
 <script>
+// eslint-disable-next-line vue/no-unused-components
 import FileEntry from './FileEntry/FileEntry.vue'
+// eslint-disable-next-line vue/no-unused-components
 import FileEntryGrid from './FileEntry/FileEntryGrid.vue'
 import FileListFilters from './FileListFilters.vue'
 import FilesListTableHeader from './FilesListTableHeader.vue'
@@ -35,6 +38,10 @@ export default {
 			type: Array,
 			required: true,
 		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
 	},
 	setup() {
 		const filesStore = useFilesStore()
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index fddcaa33ac..e7a9a6c013 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/src/views/FilesList/VirtualList.vue
@@ -16,7 +16,8 @@
 				<component :is="dataComponent"
 					v-for="item in filesStore.files"
 					:key="item.nodeId"
-					:source="item" />
+					:source="item"
+					:loading="loading" />
 			</tbody>
 		</table>
 	</div>
@@ -33,6 +34,10 @@ export default {
 			type: [Object, Function],
 			required: true,
 		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
 	},
 	setup() {
 		const filesStore = useFilesStore()

From 7732407136c6687123d790db195dd5bd4f7bf18c Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Wed, 25 Sep 2024 10:57:01 -0300
Subject: [PATCH 06/48] feat: trigger opened menu on right click

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 .../FilesList/FileEntry/FileEntryActions.vue  | 40 +++++++++++--------
 .../FilesList/FileEntry/FileEntryGrid.vue     | 24 ++++++++++-
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index df92fbd66c..fe5f7a43ef 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -63,23 +63,7 @@ export default {
 	data() {
 		return {
 			openedSubmenu: null,
-			enabledMenuActions: [
-				{
-					id: 'id-teste0',
-					title: 'title 0',
-					iconSvgInline: svgFile,
-				},
-				{
-					id: 'id-teste1',
-					title: 'title 1',
-					iconSvgInline: svgFile,
-				},
-				{
-					id: 'id-teste2',
-					title: 'title 2',
-					iconSvgInline: svgFile,
-				},
-			],
+			enabledMenuActions: [],
 		}
 	},
 	computed: {
@@ -92,6 +76,28 @@ export default {
 			},
 		},
 	},
+	mounted() {
+		this.registerAction({
+			id: 'id-teste0',
+			title: 'Validate',
+			iconSvgInline: svgFile,
+		})
+		this.registerAction({
+			id: 'id-teste1',
+			title: 'Sign',
+			iconSvgInline: svgFile,
+		})
+		this.registerAction({
+			id: 'id-teste2',
+			title: 'Delete',
+			iconSvgInline: svgFile,
+		})
+	},
+	methods: {
+		registerAction(action) {
+			this.enabledMenuActions = [...this.enabledMenuActions, action]
+		},
+	},
 }
 </script>
 
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index 1b643771c0..8e1f3c2e2a 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -4,7 +4,9 @@
 -->
 
 <template>
-	<tr>
+	<tr
+		class="files-list__row"
+		@contextmenu="onRightClick">
 		<td class="files-list__row-name">
 			<FileEntryPreview :source="source" />
 			<FileEntryName ref="name"
@@ -90,5 +92,25 @@ export default {
 			}
 		},
 	},
+	methods: {
+		// Open the actions menu on right click
+		onRightClick(event) {
+			// If already opened, fallback to default browser
+			if (this.openedMenu) {
+				return
+			}
+
+			// Reset any right menu position potentially set
+			const root = this.$el?.closest('main.app-content')
+			root.style.removeProperty('--mouse-pos-x')
+			root.style.removeProperty('--mouse-pos-y')
+
+			this.actionsMenuStore.opened = this.source.nodeId
+
+			// Prevent any browser defaults
+			event.preventDefault()
+			event.stopPropagation()
+		},
+	}
 }
 </script>

From 2a9c598e28103e18dcd1913e1d64cbee30c678b1 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Wed, 25 Sep 2024 11:11:40 -0300
Subject: [PATCH 07/48] chore: make FileEntry at table mode to work

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/views/FilesList/FileEntry/FileEntry.vue   | 45 ++++++++++++-
 .../FilesList/FileEntry/FileEntryGrid.vue     | 66 ++-----------------
 .../FilesList/FileEntry/FileEntryMixin.js     | 64 ++++++++++++++++++
 3 files changed, 112 insertions(+), 63 deletions(-)
 create mode 100644 src/views/FilesList/FileEntry/FileEntryMixin.js

diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
index dc93584abf..fa36861f97 100644
--- a/src/views/FilesList/FileEntry/FileEntry.vue
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -4,12 +4,55 @@
 -->
 
 <template>
-	<tr />
+	<tr
+		class="files-list__row"
+		@contextmenu="onRightClick">
+		<td class="files-list__row-name">
+			<FileEntryPreview :source="source" />
+			<FileEntryName ref="name"
+				:basename="source.name"
+				:extension="'.pdf'" />
+		</td>
+
+		<!-- Mtime -->
+		<td :style="mtimeOpacity"
+			class="files-list__row-mtime">
+			<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>
 
 <script>
+import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
+
+import FileEntryActions from './FileEntryActions.vue'
+import FileEntryName from './FileEntryName.vue'
+import FileEntryPreview from './FileEntryPreview.vue'
+
+import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import FileEntryMixin from './FileEntryMixin.js'
 
 export default {
 	name: 'FileEntry',
+	components: {
+		NcDateTime,
+		FileEntryActions,
+		FileEntryName,
+		FileEntryPreview,
+	},
+	mixins: [
+		FileEntryMixin,
+	],
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		return { actionsMenuStore }
+	},
 }
 </script>
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index 8e1f3c2e2a..5fc7429bb7 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -37,6 +37,7 @@ import FileEntryName from './FileEntryName.vue'
 import FileEntryPreview from './FileEntryPreview.vue'
 
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import FileEntryMixin from './FileEntryMixin.js'
 
 export default {
 	name: 'FileEntryGrid',
@@ -46,71 +47,12 @@ export default {
 		FileEntryName,
 		FileEntryPreview,
 	},
-	props: {
-		source: {
-			type: Object,
-			required: true,
-		},
-		loading: {
-			type: Boolean,
-			required: true,
-		},
-	},
+	mixins: [
+		FileEntryMixin,
+	],
 	setup() {
 		const actionsMenuStore = useActionsMenuStore()
 		return { actionsMenuStore }
 	},
-	computed: {
-		mtime() {
-			return Date.parse(this?.source?.request_date)
-		},
-
-		openedMenu: {
-			get() {
-				return this.actionsMenuStore.opened === this.source.nodeId
-			},
-			set(opened) {
-				this.actionsMenuStore.opened = opened ? this.source.nodeId : null
-			},
-		},
-
-		mtimeOpacity() {
-			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
-
-			const mtime = this.mtime?.getTime?.()
-			if (!mtime) {
-				return {}
-			}
-
-			// 1 = today, 0 = 31 days ago
-			const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
-			if (ratio < 0) {
-				return {}
-			}
-			return {
-				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
-			}
-		},
-	},
-	methods: {
-		// Open the actions menu on right click
-		onRightClick(event) {
-			// If already opened, fallback to default browser
-			if (this.openedMenu) {
-				return
-			}
-
-			// Reset any right menu position potentially set
-			const root = this.$el?.closest('main.app-content')
-			root.style.removeProperty('--mouse-pos-x')
-			root.style.removeProperty('--mouse-pos-y')
-
-			this.actionsMenuStore.opened = this.source.nodeId
-
-			// Prevent any browser defaults
-			event.preventDefault()
-			event.stopPropagation()
-		},
-	}
 }
 </script>
diff --git a/src/views/FilesList/FileEntry/FileEntryMixin.js b/src/views/FilesList/FileEntry/FileEntryMixin.js
new file mode 100644
index 0000000000..2a938b6ae9
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryMixin.js
@@ -0,0 +1,64 @@
+export default {
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	computed: {
+		mtime() {
+			return Date.parse(this?.source?.request_date)
+		},
+
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === this.source.nodeId
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? this.source.nodeId : null
+			},
+		},
+
+		mtimeOpacity() {
+			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
+
+			const mtime = this.mtime?.getTime?.()
+			if (!mtime) {
+				return {}
+			}
+
+			// 1 = today, 0 = 31 days ago
+			const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
+			if (ratio < 0) {
+				return {}
+			}
+			return {
+				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
+			}
+		},
+	},
+	methods: {
+		// Open the actions menu on right click
+		onRightClick(event) {
+			// If already opened, fallback to default browser
+			if (this.openedMenu) {
+				return
+			}
+
+			// Reset any right menu position potentially set
+			const root = this.$el?.closest('main.app-content')
+			root.style.removeProperty('--mouse-pos-x')
+			root.style.removeProperty('--mouse-pos-y')
+
+			this.actionsMenuStore.opened = this.source.nodeId
+
+			// Prevent any browser defaults
+			event.preventDefault()
+			event.stopPropagation()
+		},
+	},
+}

From eaad0066750e6a70d2aa802c905d5453966a780c Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Wed, 25 Sep 2024 11:30:44 -0300
Subject: [PATCH 08/48] chore: remove checkbox

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

diff --git a/src/views/FilesList/FilesListTableHeader.vue b/src/views/FilesList/FilesListTableHeader.vue
index e1d109bf64..32d8ea8a3c 100644
--- a/src/views/FilesList/FilesListTableHeader.vue
+++ b/src/views/FilesList/FilesListTableHeader.vue
@@ -4,14 +4,11 @@
 -->
 <template>
 	<tr class="files-list__row-head">
-		<th class="files-list__column files-list__row-checkbox">
-			<NcCheckboxRadioSwitch />
-		</th>
-
 		<!-- Columns display -->
 
 		<!-- Link to file -->
-		<th class="files-list__column files-list__row-name files-list__column--sortable">
+		<th class="files-list__column files-list__row-name files-list__column--sortable"
+			:aria-sort="ariaSortForMode('basename')">
 			<!-- Icon or preview -->
 			<span class="files-list__row-icon" />
 
@@ -36,8 +33,6 @@
 </template>
 
 <script>
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-
 import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
 
 export default {
@@ -45,7 +40,6 @@ export default {
 
 	components: {
 		FilesListTableHeaderButton,
-		NcCheckboxRadioSwitch,
 	},
 
 	props: {

From 4b42a5fddbe8d118d4583ff9a007cace31cd07b3 Mon Sep 17 00:00:00 2001
From: Victor Bianchi <vbianchi@protonmail.com>
Date: Wed, 25 Sep 2024 14:18:04 -0300
Subject: [PATCH 09/48] fix: header sorting arrow icon

Signed-off-by: Victor Bianchi <vbianchi@protonmail.com>
---
 src/store/filesSorting.js                     | 32 +++++++++++++++++++
 src/views/FilesList/FileEntry/FileEntry.vue   |  5 ++-
 .../FilesList/FileEntry/FileEntryActions.vue  |  1 +
 .../FilesList/FileEntry/FileEntryGrid.vue     |  5 ++-
 .../FilesList/FilesListTableHeaderButton.vue  | 20 ++++++++++--
 5 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 src/store/filesSorting.js

diff --git a/src/store/filesSorting.js b/src/store/filesSorting.js
new file mode 100644
index 0000000000..05549f7b8c
--- /dev/null
+++ b/src/store/filesSorting.js
@@ -0,0 +1,32 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+const DEFAULT_SORTING_DIRECTION = 'asc'
+
+export const useFilesSortingStore = defineStore('filesSorting', {
+	state: () => ({
+		sortingMode: 'basename',
+		sortingDirection: DEFAULT_SORTING_DIRECTION,
+	}),
+
+	actions: {
+		toggleSortingDirection() {
+			this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc'
+		},
+
+		toggleSortBy(key) {
+			// If we're already sorting by this key, flip the direction
+			if (this.sortingMode === key) {
+				this.toggleSortingDirection()
+				return
+			}
+			// else sort ASC by this new key
+			this.sortingMode = key
+			this.sortingDirection = DEFAULT_SORTING_DIRECTION
+		},
+	},
+})
diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
index fa36861f97..9ef7d49d3b 100644
--- a/src/views/FilesList/FileEntry/FileEntry.vue
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -4,8 +4,7 @@
 -->
 
 <template>
-	<tr
-		class="files-list__row"
+	<tr class="files-list__row"
 		@contextmenu="onRightClick">
 		<td class="files-list__row-name">
 			<FileEntryPreview :source="source" />
@@ -36,8 +35,8 @@ import FileEntryActions from './FileEntryActions.vue'
 import FileEntryName from './FileEntryName.vue'
 import FileEntryPreview from './FileEntryPreview.vue'
 
-import { useActionsMenuStore } from '../../../store/actionsmenu.js'
 import FileEntryMixin from './FileEntryMixin.js'
+import { useActionsMenuStore } from '../../../store/actionsmenu.js'
 
 export default {
 	name: 'FileEntry',
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index fe5f7a43ef..a9724e5ebd 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -27,6 +27,7 @@
 
 <script>
 import svgFile from '@mdi/svg/svg/file.svg?raw'
+
 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'
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index 5fc7429bb7..3d70e5fb6e 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -4,8 +4,7 @@
 -->
 
 <template>
-	<tr
-		class="files-list__row"
+	<tr class="files-list__row"
 		@contextmenu="onRightClick">
 		<td class="files-list__row-name">
 			<FileEntryPreview :source="source" />
@@ -36,8 +35,8 @@ import FileEntryActions from './FileEntryActions.vue'
 import FileEntryName from './FileEntryName.vue'
 import FileEntryPreview from './FileEntryPreview.vue'
 
-import { useActionsMenuStore } from '../../../store/actionsmenu.js'
 import FileEntryMixin from './FileEntryMixin.js'
+import { useActionsMenuStore } from '../../../store/actionsmenu.js'
 
 export default {
 	name: 'FileEntryGrid',
diff --git a/src/views/FilesList/FilesListTableHeaderButton.vue b/src/views/FilesList/FilesListTableHeaderButton.vue
index 982d41617d..66f0e3c9da 100644
--- a/src/views/FilesList/FilesListTableHeaderButton.vue
+++ b/src/views/FilesList/FilesListTableHeaderButton.vue
@@ -3,10 +3,15 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcButton :alignment="mode === 'size' ? 'end' : 'start-reverse'"
-		type="tertiary">
+	<NcButton :class="['files-list__column-sort-button', {
+			'files-list__column-sort-button--active': filesSortingStore.sortingMode === mode,
+			'files-list__column-sort-button--size': filesSortingStore.sortingMode === 'size',
+		}]"
+		:alignment="mode === 'size' ? 'end' : 'start-reverse'"
+		type="tertiary"
+		@click="filesSortingStore.toggleSortBy(mode)">
 		<template #icon>
-			<MenuUp v-if="true" class="files-list__column-sort-button-icon" />
+			<MenuUp v-if="filesSortingStore.sortingMode !== mode || filesSortingStore.sortingDirection === 'asc'" class="files-list__column-sort-button-icon" />
 			<MenuDown v-else class="files-list__column-sort-button-icon" />
 		</template>
 		<span class="files-list__column-sort-button-text">{{ name }}</span>
@@ -20,6 +25,8 @@ import MenuUp from 'vue-material-design-icons/MenuUp.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import { useFilesSortingStore } from '../../store/filesSorting.js'
+
 export default {
 	name: 'FilesListTableHeaderButton',
 
@@ -39,6 +46,13 @@ export default {
 			required: true,
 		},
 	},
+
+	setup() {
+		const filesSortingStore = useFilesSortingStore()
+		return {
+			filesSortingStore,
+		}
+	},
 }
 </script>
 

From 78dd038f53abae4d84087ac5c9d2c6222ff9bd7d Mon Sep 17 00:00:00 2001
From: Victor Bianchi <vbianchi@protonmail.com>
Date: Wed, 25 Sep 2024 18:09:04 -0300
Subject: [PATCH 10/48] feat: add status dot to file entry component

Signed-off-by: Victor Bianchi <vbianchi@protonmail.com>
---
 src/views/FilesList/FileEntry/FileEntry.vue   |  8 ++
 .../FilesList/FileEntry/FileEntryGrid.vue     |  8 ++
 .../FilesList/FileEntry/FileEntryStatus.vue   | 79 +++++++++++++++++++
 src/views/FilesList/FilesListVirtual.vue      | 31 ++++++++
 4 files changed, 126 insertions(+)
 create mode 100644 src/views/FilesList/FileEntry/FileEntryStatus.vue

diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
index 9ef7d49d3b..bd60d37cd6 100644
--- a/src/views/FilesList/FileEntry/FileEntry.vue
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -13,6 +13,12 @@
 				:extension="'.pdf'" />
 		</td>
 
+		<!-- Status -->
+		<td class="files-list__row-status">
+			<FileEntryStatus :status="source.status"
+				:status-text="source.statusText" />
+		</td>
+
 		<!-- Mtime -->
 		<td :style="mtimeOpacity"
 			class="files-list__row-mtime">
@@ -34,6 +40,7 @@ import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
 import FileEntryActions from './FileEntryActions.vue'
 import FileEntryName from './FileEntryName.vue'
 import FileEntryPreview from './FileEntryPreview.vue'
+import FileEntryStatus from './FileEntryStatus.vue'
 
 import FileEntryMixin from './FileEntryMixin.js'
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
@@ -45,6 +52,7 @@ export default {
 		FileEntryActions,
 		FileEntryName,
 		FileEntryPreview,
+		FileEntryStatus,
 	},
 	mixins: [
 		FileEntryMixin,
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index 3d70e5fb6e..95acab9cd3 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -13,6 +13,12 @@
 				:extension="'.pdf'" />
 		</td>
 
+		<!-- Status -->
+		<td class="files-list__row-status">
+			<FileEntryStatus :status="source.status"
+				:status-text="source.statusText" />
+		</td>
+
 		<!-- Mtime -->
 		<td :style="mtimeOpacity"
 			class="files-list__row-mtime">
@@ -34,6 +40,7 @@ import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
 import FileEntryActions from './FileEntryActions.vue'
 import FileEntryName from './FileEntryName.vue'
 import FileEntryPreview from './FileEntryPreview.vue'
+import FileEntryStatus from './FileEntryStatus.vue'
 
 import FileEntryMixin from './FileEntryMixin.js'
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
@@ -45,6 +52,7 @@ export default {
 		FileEntryActions,
 		FileEntryName,
 		FileEntryPreview,
+		FileEntryStatus,
 	},
 	mixins: [
 		FileEntryMixin,
diff --git a/src/views/FilesList/FileEntry/FileEntryStatus.vue b/src/views/FilesList/FileEntry/FileEntryStatus.vue
new file mode 100644
index 0000000000..431ae56120
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryStatus.vue
@@ -0,0 +1,79 @@
+<template>
+	<div class="enDot">
+		<div :class="statusText !== 'none' ? 'dot ' + statusToClass(status) : '' "
+			:title="statusText !== 'none' ? statusText : ''" />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FileEntryStatus',
+	props: {
+		statusText: {
+			type: String,
+			required: true,
+		},
+		status: {
+			type: Number,
+			required: true,
+		},
+	},
+	methods: {
+		statusToClass(status) {
+			switch (Number(status)) {
+			case 0:
+				return 'no-signers'
+			case 1:
+			case 2:
+				return 'pending'
+			case 3:
+				return 'signed'
+			default:
+				return ''
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.enDot{
+	--dot-size: 10px;
+
+	display: flex;
+	flex-direction: row;
+	align-content: center;
+	margin: 5px;
+	max-width: 100%;
+	align-items: center;
+	justify-content: center;
+	cursor: inherit;
+
+	.dot{
+		flex: 1 0 var(--dot-size);
+		height: var(--dot-size);
+		border-radius: 50%;
+		margin-right: 10px;
+		cursor: inherit;
+	}
+
+	.signed{
+		background: #008000;
+	}
+
+	.no-signers{
+		background: #ff0000;
+	}
+
+	.pending {
+		background: #d67335
+	}
+
+	span{
+		font-size: 14px;
+		font-weight: normal;
+		text-align: center;
+		cursor: inherit;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
index f5df3f5792..93845845ab 100644
--- a/src/views/FilesList/FilesListVirtual.vue
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -382,12 +382,34 @@ export default {
 			}
 		}
 
+		.files-list__row-mtime,
+		.files-list__row-status {
+			color: var(--color-text-maxcontrast);
+		}
+		.files-list__row-status {
+			width: calc(var(--row-height) * 1.5);
+			// Right align content/text
+			justify-content: flex-end;
+		}
+
+		.files-list__row-mtime {
+			width: calc(var(--row-height) * 2);
+		}
+
 		.files-list__row-column-custom {
 			width: calc(var(--row-height) * 2);
 		}
 	}
 
 }
+
+@media screen and (max-width: 512px) {
+	.files-list :deep(.files-list__filters) {
+		// Reduce padding on mobile
+		padding-inline: var(--default-grid-baseline, 4px);
+	}
+}
+
 </style>
 
 <style lang="scss">
@@ -411,6 +433,7 @@ tbody.files-list__tbody.files-list__tbody--grid {
 	justify-items: center;
 
 	tr {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		width: var(--row-width);
@@ -477,6 +500,14 @@ tbody.files-list__tbody.files-list__tbody--grid {
 		}
 	}
 
+	.files-list__row-status {
+		position: absolute;
+		top: var(--item-padding);
+		inset-inline-end: var(--item-padding);
+		width: var(--clickable-area);
+		height: var(--clickable-area);
+	}
+
 	.files-list__row-mtime {
 		width: var(--icon-preview-size);
 		height: var(--mtime-height);

From fb0a1292fb257f508e977e5e578e973c1b2088dc Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Wed, 25 Sep 2024 18:12:35 -0300
Subject: [PATCH 11/48] fix: linter

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

diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
index 93845845ab..e4a53adb31 100644
--- a/src/views/FilesList/FilesListVirtual.vue
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -13,9 +13,7 @@
 </template>
 
 <script>
-// eslint-disable-next-line vue/no-unused-components
 import FileEntry from './FileEntry/FileEntry.vue'
-// eslint-disable-next-line vue/no-unused-components
 import FileEntryGrid from './FileEntry/FileEntryGrid.vue'
 import FileListFilters from './FileListFilters.vue'
 import FilesListTableHeader from './FilesListTableHeader.vue'
@@ -30,7 +28,9 @@ export default {
 		VirtualList,
 		FileListFilters,
 		FilesListTableHeader,
+		// eslint-disable-next-line vue/no-unused-components
 		FileEntry,
+		// eslint-disable-next-line vue/no-unused-components
 		FileEntryGrid,
 	},
 	props: {

From 4329294358bedf4c612ef9b9829af653fbc282c3 Mon Sep 17 00:00:00 2001
From: Victor Bianchi <vbianchi@protonmail.com>
Date: Thu, 26 Sep 2024 11:17:33 -0300
Subject: [PATCH 12/48] feat: open file details side bar

Signed-off-by: Victor Bianchi <vbianchi@protonmail.com>
---
 src/views/FilesList/FileEntry/FileEntry.vue     | 16 ++++++++++++----
 src/views/FilesList/FileEntry/FileEntryGrid.vue | 16 ++++++++++++----
 src/views/FilesList/FileEntry/FileEntryMixin.js |  6 ++++++
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
index bd60d37cd6..540c9b7b89 100644
--- a/src/views/FilesList/FileEntry/FileEntry.vue
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -6,7 +6,8 @@
 <template>
 	<tr class="files-list__row"
 		@contextmenu="onRightClick">
-		<td class="files-list__row-name">
+		<td class="files-list__row-name"
+			@click="openDetailsIfAvailable">
 			<FileEntryPreview :source="source" />
 			<FileEntryName ref="name"
 				:basename="source.name"
@@ -14,14 +15,16 @@
 		</td>
 
 		<!-- Status -->
-		<td class="files-list__row-status">
+		<td class="files-list__row-status"
+			@click="openDetailsIfAvailable">
 			<FileEntryStatus :status="source.status"
 				:status-text="source.statusText" />
 		</td>
 
 		<!-- Mtime -->
 		<td :style="mtimeOpacity"
-			class="files-list__row-mtime">
+			class="files-list__row-mtime"
+			@click="openDetailsIfAvailable">
 			<NcDateTime v-if="source.request_date" :timestamp="mtime" :ignore-seconds="true" />
 		</td>
 
@@ -44,6 +47,7 @@ import FileEntryStatus from './FileEntryStatus.vue'
 
 import FileEntryMixin from './FileEntryMixin.js'
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import { useFilesStore } from '../../../store/files.js'
 
 export default {
 	name: 'FileEntry',
@@ -59,7 +63,11 @@ export default {
 	],
 	setup() {
 		const actionsMenuStore = useActionsMenuStore()
-		return { actionsMenuStore }
+		const filesStore = useFilesStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+		}
 	},
 }
 </script>
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index 95acab9cd3..951f4e2b61 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -6,7 +6,8 @@
 <template>
 	<tr class="files-list__row"
 		@contextmenu="onRightClick">
-		<td class="files-list__row-name">
+		<td class="files-list__row-name"
+			@click="openDetailsIfAvailable">
 			<FileEntryPreview :source="source" />
 			<FileEntryName ref="name"
 				:basename="source.name"
@@ -14,14 +15,16 @@
 		</td>
 
 		<!-- Status -->
-		<td class="files-list__row-status">
+		<td class="files-list__row-status"
+			@click="openDetailsIfAvailable">
 			<FileEntryStatus :status="source.status"
 				:status-text="source.statusText" />
 		</td>
 
 		<!-- Mtime -->
 		<td :style="mtimeOpacity"
-			class="files-list__row-mtime">
+			class="files-list__row-mtime"
+			@click="openDetailsIfAvailable">
 			<NcDateTime v-if="source.request_date" :timestamp="mtime" :ignore-seconds="true" />
 		</td>
 
@@ -44,6 +47,7 @@ import FileEntryStatus from './FileEntryStatus.vue'
 
 import FileEntryMixin from './FileEntryMixin.js'
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import { useFilesStore } from '../../../store/files.js'
 
 export default {
 	name: 'FileEntryGrid',
@@ -59,7 +63,11 @@ export default {
 	],
 	setup() {
 		const actionsMenuStore = useActionsMenuStore()
-		return { actionsMenuStore }
+		const filesStore = useFilesStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+		}
 	},
 }
 </script>
diff --git a/src/views/FilesList/FileEntry/FileEntryMixin.js b/src/views/FilesList/FileEntry/FileEntryMixin.js
index 2a938b6ae9..5eb1f78272 100644
--- a/src/views/FilesList/FileEntry/FileEntryMixin.js
+++ b/src/views/FilesList/FileEntry/FileEntryMixin.js
@@ -60,5 +60,11 @@ export default {
 			event.preventDefault()
 			event.stopPropagation()
 		},
+
+		openDetailsIfAvailable(event) {
+			event.preventDefault()
+			event.stopPropagation()
+			this.filesStore.selectFile(this.source.nodeId)
+		},
 	},
 }

From ab208f15c468cd061a82acf20f86e83aeed85a50 Mon Sep 17 00:00:00 2001
From: Victor Bianchi <vbianchi@protonmail.com>
Date: Thu, 26 Sep 2024 14:46:01 -0300
Subject: [PATCH 13/48] feat: implement file filtering logic WIP

Signed-off-by: Victor Bianchi <vbianchi@protonmail.com>
---
 src/store/files.js                            | 344 +++++++++---------
 src/store/filesSorting.js                     |   3 +
 src/store/filters.js                          |   3 +-
 .../FileListFilter/FileListFilterModified.vue |  10 +
 4 files changed, 196 insertions(+), 164 deletions(-)

diff --git a/src/store/files.js b/src/store/files.js
index b5ee266762..affa56fb66 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -4,6 +4,7 @@
  */
 
 import { defineStore } from 'pinia'
+import { subscribe } from '@nextcloud/event-bus'
 import { set } from 'vue'
 
 import axios from '@nextcloud/axios'
@@ -12,174 +13,191 @@ import { generateOcsUrl } from '@nextcloud/router'
 
 import { useSidebarStore } from './sidebar.js'
 import { useSignStore } from './sign.js'
+import { useFiltersStore } from './filters.js'
+import { useFilesSortingStore } from './filesSorting.js'
 
-export const useFilesStore = defineStore('files', {
-	state: () => {
-		return {
-			files: {},
-			selectedNodeId: 0,
-			identifyingSigner: false,
-			loading: false,
-			filterActive: 'all',
-		}
-	},
-
-	actions: {
-		addFile(file) {
-			set(this.files, file.nodeId, file)
-			this.hydrateFile(file.nodeId)
-		},
-		selectFile(nodeId) {
-			this.selectedNodeId = nodeId ?? 0
-			if (this.selectedNodeId === 0) {
-				const signStore = useSignStore()
-				signStore.reset()
-				return
-			}
-			const sidebarStore = useSidebarStore()
-			sidebarStore.activeRequestSignatureTab()
-		},
-		getFile() {
-			return this.files[this.selectedNodeId] ?? {}
-		},
-		async flushSelectedFile() {
-			const files = await this.getAllFiles({
-				nodeId: this.selectedNodeId,
-			})
-			this.addFile(files[this.selectedNodeId])
-		},
-		enableIdentifySigner() {
-			this.identifyingSigner = true
-		},
-		disableIdentifySigner() {
-			this.identifyingSigner = false
-		},
-		hasSigners() {
-			if (this.selectedNodeId === 0) {
-				return false
-			}
-			if (!Object.hasOwn(this.getFile(), 'signers')) {
-				return false
-			}
-			return this.files[this.selectedNodeId].signers.length > 0
-		},
-		isPartialSigned() {
-			if (this.selectedNodeId === 0) {
-				return false
-			}
-			if (!Object.hasOwn(this.getFile(), 'signers')) {
-				return false
-			}
-			return this.files[this.selectedNodeId].signers
-				.filter(signer => signer.signed?.length > 0).length > 0
-		},
-		isFullSigned() {
-			if (this.selectedNodeId === 0) {
-				return false
+export const useFilesStore = function(...args) {
+	const store = defineStore('files', {
+		state: () => {
+			return {
+				files: {},
+				selectedNodeId: 0,
+				identifyingSigner: false,
+				loading: false,
+				filterActive: 'all',
 			}
-			if (!Object.hasOwn(this.getFile(), 'signers')) {
-				return false
-			}
-			return this.files[this.selectedNodeId].signers.length > 0
-				&& this.files[this.selectedNodeId].signers
-					.filter(signer => signer.signed?.length > 0).length === this.files[this.selectedNodeId].signers.length
-		},
-		getSubtitle() {
-			if (this.selectedNodeId === 0) {
-				return ''
-			}
-			const file = this.files[this.selectedNodeId]
-			if ((file?.requested_by?.userId ?? '').length === 0 || file?.request_date.length === 0) {
-				return ''
-			}
-			return t('libresign', 'Requested by {name}, at {date}', {
-				name: file.requested_by.userId,
-				date: Moment(Date.parse(file.request_date)).format('LL LTS'),
-			})
 		},
-		async hydrateFile(nodeId) {
-			if (Object.hasOwn(this.files[nodeId], 'uuid')) {
-				return
-			}
-			await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/validate/file_id/{fileId}', {
-				fileId: nodeId,
-			}))
-				.then((response) => {
-					set(this.files, nodeId, response.data.ocs.data)
-					this.addUniqueIdentifierToAllSigners(this.files[nodeId].signers)
+
+		actions: {
+			addFile(file) {
+				set(this.files, file.nodeId, file)
+				this.hydrateFile(file.nodeId)
+			},
+			selectFile(nodeId) {
+				this.selectedNodeId = nodeId ?? 0
+				if (this.selectedNodeId === 0) {
+					const signStore = useSignStore()
+					signStore.reset()
+					return
+				}
+				const sidebarStore = useSidebarStore()
+				sidebarStore.activeRequestSignatureTab()
+			},
+			getFile() {
+				return this.files[this.selectedNodeId] ?? {}
+			},
+			async flushSelectedFile() {
+				const files = await this.getAllFiles({
+					nodeId: this.selectedNodeId,
 				})
-				.catch(() => {
-					set(this.files[nodeId], 'signers', [])
+				this.addFile(files[this.selectedNodeId])
+			},
+			enableIdentifySigner() {
+				this.identifyingSigner = true
+			},
+			disableIdentifySigner() {
+				this.identifyingSigner = false
+			},
+			hasSigners() {
+				if (this.selectedNodeId === 0) {
+					return false
+				}
+				if (!Object.hasOwn(this.getFile(), 'signers')) {
+					return false
+				}
+				return this.files[this.selectedNodeId].signers.length > 0
+			},
+			isPartialSigned() {
+				if (this.selectedNodeId === 0) {
+					return false
+				}
+				if (!Object.hasOwn(this.getFile(), 'signers')) {
+					return false
+				}
+				return this.files[this.selectedNodeId].signers
+					.filter(signer => signer.signed?.length > 0).length > 0
+			},
+			isFullSigned() {
+				if (this.selectedNodeId === 0) {
+					return false
+				}
+				if (!Object.hasOwn(this.getFile(), 'signers')) {
+					return false
+				}
+				return this.files[this.selectedNodeId].signers.length > 0
+					&& this.files[this.selectedNodeId].signers
+						.filter(signer => signer.signed?.length > 0).length === this.files[this.selectedNodeId].signers.length
+			},
+			getSubtitle() {
+				if (this.selectedNodeId === 0) {
+					return ''
+				}
+				const file = this.files[this.selectedNodeId]
+				if ((file?.requested_by?.userId ?? '').length === 0 || file?.request_date.length === 0) {
+					return ''
+				}
+				return t('libresign', 'Requested by {name}, at {date}', {
+					name: file.requested_by.userId,
+					date: Moment(Date.parse(file.request_date)).format('LL LTS'),
 				})
-		},
-		addUniqueIdentifierToAllSigners(signers) {
-			if (signers === undefined) {
-				return
-			}
-			signers.map(signer => this.addIdentifierToSigner(signer))
-		},
-		addIdentifierToSigner(signer) {
-			// generate unique code to new signer to be possible delete or edit
-			if ((signer.identify === undefined || signer.identify === '') && signer.signRequestId === undefined) {
-				signer.identify = btoa(JSON.stringify(signer))
-			}
-			if (signer.signRequestId) {
-				signer.identify = signer.signRequestId
-			}
-		},
-		signerUpdate(signer) {
-			this.addIdentifierToSigner(signer)
-			// Remove if already exists
-			for (let i = this.files[this.selectedNodeId].signers.length - 1; i >= 0; i--) {
-				if (this.files[this.selectedNodeId].signers[i].identify === signer.identify) {
-					this.files[this.selectedNodeId].signers.splice(i, 1)
-					break
-				}
-				if (this.files[this.selectedNodeId].signers[i].signRequestId === signer.identify) {
-					this.files[this.selectedNodeId].signers.splice(i, 1)
-					break
+			},
+			async hydrateFile(nodeId) {
+				if (Object.hasOwn(this.files[nodeId], 'uuid')) {
+					return
 				}
-			}
-			this.files[this.selectedNodeId].signers.push(signer)
-		},
-		async deleteSigner(signer) {
-			if (!isNaN(signer.signRequestId)) {
-				await axios.delete(generateOcsUrl('/apps/libresign/api/{apiVersion}/sign/file_id/{fileId}/{signRequestId}', {
-					apiVersion: 'v1',
-					fileId: this.selectedNodeId,
-					signRequestId: signer.signRequestId,
+				await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/validate/file_id/{fileId}', {
+					fileId: nodeId,
 				}))
-			}
-			set(
-				this.files[this.selectedNodeId],
-				'signers',
-				this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
-			)
-		},
-		async getAllFiles(filter) {
-			const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
-			this.files = {}
-			response.data.ocs.data.data.forEach(file => {
-				this.addFile(file)
-			})
-			return this.files
-		},
-		filter(type) {
-			this.filterActive = type
-			if (type === 'pending') {
-				return Object.values(this.files).filter(
-					(a) => (a.status === 1 || a.status === 2)).sort(
-					(a, b) => (a.request_date < b.request_date) ? 1 : -1)
-			}
-			if (type === 'signed') {
-				return Object.values(this.files).filter(
-					(a) => (a.status === 3)).sort(
-					(a, b) => (a.request_date < b.request_date) ? 1 : -1)
-			}
-			if (type === 'all') {
-				this.filterActive = 'all'
-				return Object.values(this.files).sort((a, b) => (a.request_date < b.request_date) ? 1 : -1)
-			}
+					.then((response) => {
+						set(this.files, nodeId, response.data.ocs.data)
+						this.addUniqueIdentifierToAllSigners(this.files[nodeId].signers)
+					})
+					.catch(() => {
+						set(this.files[nodeId], 'signers', [])
+					})
+			},
+			addUniqueIdentifierToAllSigners(signers) {
+				if (signers === undefined) {
+					return
+				}
+				signers.map(signer => this.addIdentifierToSigner(signer))
+			},
+			addIdentifierToSigner(signer) {
+				// generate unique code to new signer to be possible delete or edit
+				if ((signer.identify === undefined || signer.identify === '') && signer.signRequestId === undefined) {
+					signer.identify = btoa(JSON.stringify(signer))
+				}
+				if (signer.signRequestId) {
+					signer.identify = signer.signRequestId
+				}
+			},
+			signerUpdate(signer) {
+				this.addIdentifierToSigner(signer)
+				// Remove if already exists
+				for (let i = this.files[this.selectedNodeId].signers.length - 1; i >= 0; i--) {
+					if (this.files[this.selectedNodeId].signers[i].identify === signer.identify) {
+						this.files[this.selectedNodeId].signers.splice(i, 1)
+						break
+					}
+					if (this.files[this.selectedNodeId].signers[i].signRequestId === signer.identify) {
+						this.files[this.selectedNodeId].signers.splice(i, 1)
+						break
+					}
+				}
+				this.files[this.selectedNodeId].signers.push(signer)
+			},
+			async deleteSigner(signer) {
+				if (!isNaN(signer.signRequestId)) {
+					await axios.delete(generateOcsUrl('/apps/libresign/api/{apiVersion}/sign/file_id/{fileId}/{signRequestId}', {
+						apiVersion: 'v1',
+						fileId: this.selectedNodeId,
+						signRequestId: signer.signRequestId,
+					}))
+				}
+				set(
+					this.files[this.selectedNodeId],
+					'signers',
+					this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
+				)
+			},
+			async getAllFiles(filter) {
+				const { chips } = useFiltersStore()
+				const { sortingMode, sortingDirection } = useFilesSortingStore()
+				const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
+				this.files = {}
+				response.data.ocs.data.data.forEach(file => {
+					this.addFile(file)
+				})
+				return this.files
+			},
+			filter(type) {
+				this.filterActive = type
+				if (type === 'pending') {
+					return Object.values(this.files).filter(
+						(a) => (a.status === 1 || a.status === 2)).sort(
+						(a, b) => (a.request_date < b.request_date) ? 1 : -1)
+				}
+				if (type === 'signed') {
+					return Object.values(this.files).filter(
+						(a) => (a.status === 3)).sort(
+						(a, b) => (a.request_date < b.request_date) ? 1 : -1)
+				}
+				if (type === 'all') {
+					this.filterActive = 'all'
+					return Object.values(this.files).sort((a, b) => (a.request_date < b.request_date) ? 1 : -1)
+				}
+			},
 		},
-	},
-})
+	})
+
+	const filesStore = store(...args)
+
+	// Make sure we only register the listeners once
+	if (!filesStore._initialized) {
+		subscribe('libresign:filters:update', filesStore.getAllFiles)
+		subscribe('libresign:sorting:update', filesStore.getAllFiles)
+		filesStore._initialized = true
+	}
+
+	return filesStore
+}
diff --git a/src/store/filesSorting.js b/src/store/filesSorting.js
index 05549f7b8c..226dd5bb29 100644
--- a/src/store/filesSorting.js
+++ b/src/store/filesSorting.js
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { emit } from '@nextcloud/event-bus'
 import { defineStore } from 'pinia'
 
 const DEFAULT_SORTING_DIRECTION = 'asc'
@@ -16,6 +17,7 @@ export const useFilesSortingStore = defineStore('filesSorting', {
 	actions: {
 		toggleSortingDirection() {
 			this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc'
+			emit('libresign:sorting:update')
 		},
 
 		toggleSortBy(key) {
@@ -27,6 +29,7 @@ export const useFilesSortingStore = defineStore('filesSorting', {
 			// else sort ASC by this new key
 			this.sortingMode = key
 			this.sortingDirection = DEFAULT_SORTING_DIRECTION
+			emit('libresign:sorting:update')
 		},
 	},
 })
diff --git a/src/store/filters.js b/src/store/filters.js
index cb8c13e1a9..55bf76899b 100644
--- a/src/store/filters.js
+++ b/src/store/filters.js
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { emit } from '@nextcloud/event-bus'
 import { defineStore } from 'pinia'
 
 import logger from '../helpers/logger.js'
@@ -21,7 +22,7 @@ export const useFiltersStore = defineStore('filter', {
 	actions: {
 		onFilterUpdateChips(event) {
 			this.chips = { ...this.chips, [event.id]: [...event.detail] }
-
+			emit('libresign:filters:update')
 			logger.debug('File list filter chips updated', { chips: event.detail })
 		},
 	},
diff --git a/src/views/FilesList/FileListFilter/FileListFilterModified.vue b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
index 8634199086..e725c0ce39 100644
--- a/src/views/FilesList/FileListFilter/FileListFilterModified.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
@@ -53,25 +53,35 @@ export default {
 				{
 					id: 'today',
 					label: t('libresign', 'Today'),
+					start: '',
+					end: '',
 					filter: (time) => time > startOfToday(),
 				},
 				{
 					id: 'last-7',
 					label: t('libresign', 'Last 7 days'),
+					start: '',
+					end: '',
 					filter: (time) => time > (startOfToday() - (7 * 24 * 60 * 60 * 1000)),
 				},
 				{
 					id: 'last-30',
 					label: t('libresign', 'Last 30 days'),
+					start: '',
+					end: '',
 					filter: (time) => time > (startOfToday() - (30 * 24 * 60 * 60 * 1000)),
 				},
 				{
 					id: 'this-year',
 					label: t('libresign', 'This year ({year})', { year: (new Date()).getFullYear() }),
+					start: '',
+					end: '',
 					filter: (time) => time > (new Date(startOfToday())).setMonth(0, 1),
 				},
 				{
 					id: 'last-year',
+					start: '',
+					end: '',
 					label: t('libresign', 'Last year ({year})', { year: (new Date()).getFullYear() - 1 }),
 					filter: (time) => (time > (new Date(startOfToday())).setFullYear((new Date()).getFullYear() - 1, 0, 1)) && (time < (new Date(startOfToday())).setMonth(0, 1)),
 				},

From 00085abd1cde2dc28a1dabc725a953f1185a6b8c Mon Sep 17 00:00:00 2001
From: Victor Bianchi <vbianchi@protonmail.com>
Date: Mon, 30 Sep 2024 12:20:05 -0300
Subject: [PATCH 14/48] feat: filter files according to status and modified
 values

Signed-off-by: Victor Bianchi <vbianchi@protonmail.com>
---
 lib/Controller/FileController.php             | 10 +++++--
 lib/Db/SignRequestMapper.php                  | 12 +++++++-
 src/store/files.js                            | 16 ++++++++--
 src/store/filesSorting.js                     |  3 +-
 src/store/filters.js                          |  3 +-
 .../FileListFilter/FileListFilterModified.vue | 30 ++++++++-----------
 .../FileListFilter/FileListFilterStatus.vue   |  1 +
 7 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/lib/Controller/FileController.php b/lib/Controller/FileController.php
index c38ec2d9f9..bf3d416bd0 100644
--- a/lib/Controller/FileController.php
+++ b/lib/Controller/FileController.php
@@ -192,9 +192,11 @@ public function validate(?string $type = null, $identifier = null): DataResponse
 	 *
 	 * @param string|null $signer_uuid Signer UUID
 	 * @param string|null $nodeId The nodeId (also called fileId). Is the id of a file at Nextcloud
-	 * @param int|null $status Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.
+	 * @param list<int>|null $status Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.
 	 * @param int|null $page the number of page to return
 	 * @param int|null $length Total of elements to return
+	 * @param int|null $start Start date of signature request (UNIX timestamp)
+	 * @param int|null $end End date of signature request (UNIX timestamp)
 	 * @return DataResponse<Http::STATUS_OK, array{pagination: LibresignPagination, data: ?LibresignFile[]}, array{}>
 	 *
 	 * 200: OK
@@ -207,12 +209,16 @@ public function list(
 		?int $length = null,
 		?string $signer_uuid = null,
 		?string $nodeId = null,
-		?int $status = null,
+		?array $status = null,
+		?int $start = null,
+		?int $end = null,
 	): DataResponse {
 		$filter = array_filter([
 			'signer_uuid' => $signer_uuid,
 			'nodeId' => $nodeId,
 			'status' => $status,
+			'start' => $start,
+			'end' => $end,
 		], static function ($var) { return $var !== null; });
 		$return = $this->fileService
 			->setMe($this->userSession->getUser())
diff --git a/lib/Db/SignRequestMapper.php b/lib/Db/SignRequestMapper.php
index d2119a2cca..7484f3df48 100644
--- a/lib/Db/SignRequestMapper.php
+++ b/lib/Db/SignRequestMapper.php
@@ -489,7 +489,17 @@ private function getFilesAssociatedFilesWithMeQueryBuilder(string $userId, ?arra
 			}
 			if (!empty($filter['status'])) {
 				$qb->andWhere(
-					$qb->expr()->eq('f.status', $qb->createNamedParameter($filter['status'], IQueryBuilder::PARAM_INT))
+					$qb->expr()->in('f.status', $qb->createNamedParameter($filter['status'], IQueryBuilder::PARAM_INT_ARRAY))
+				);
+			}
+			if (!empty($filter['start'])) {
+				$qb->andWhere(
+					$qb->expr()->gte('f.created_at', $qb->createNamedParameter($filter['start'], IQueryBuilder::PARAM_INT))
+				);
+			}
+			if (!empty($filter['end'])) {
+				$qb->andWhere(
+					$qb->expr()->lte('f.created_at', $qb->createNamedParameter($filter['end'], IQueryBuilder::PARAM_INT))
 				);
 			}
 			if (isset($filter['length']) && isset($filter['page'])) {
diff --git a/src/store/files.js b/src/store/files.js
index affa56fb66..1c57e5e75c 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -4,17 +4,17 @@
  */
 
 import { defineStore } from 'pinia'
-import { subscribe } from '@nextcloud/event-bus'
 import { set } from 'vue'
 
 import axios from '@nextcloud/axios'
+import { subscribe } from '@nextcloud/event-bus'
 import Moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 
+import { useFilesSortingStore } from './filesSorting.js'
+import { useFiltersStore } from './filters.js'
 import { useSidebarStore } from './sidebar.js'
 import { useSignStore } from './sign.js'
-import { useFiltersStore } from './filters.js'
-import { useFilesSortingStore } from './filesSorting.js'
 
 export const useFilesStore = function(...args) {
 	const store = defineStore('files', {
@@ -161,8 +161,18 @@ export const useFilesStore = function(...args) {
 				)
 			},
 			async getAllFiles(filter) {
+				if (!filter) filter = {}
 				const { chips } = useFiltersStore()
+				if (chips?.status?.length) {
+					filter.status = chips.status.map(c => c.id)
+				}
+				if (chips?.modified?.length) {
+					const { start, end } = chips.modified[0]
+					filter.start = Math.floor(start / 1000)
+					filter.end = Math.floor(end / 1000)
+				}
 				const { sortingMode, sortingDirection } = useFilesSortingStore()
+				// TODO: pass sortingMode and sortingDirection to API call
 				const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
 				this.files = {}
 				response.data.ocs.data.data.forEach(file => {
diff --git a/src/store/filesSorting.js b/src/store/filesSorting.js
index 226dd5bb29..70f8904a3e 100644
--- a/src/store/filesSorting.js
+++ b/src/store/filesSorting.js
@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { emit } from '@nextcloud/event-bus'
 import { defineStore } from 'pinia'
 
+import { emit } from '@nextcloud/event-bus'
+
 const DEFAULT_SORTING_DIRECTION = 'asc'
 
 export const useFilesSortingStore = defineStore('filesSorting', {
diff --git a/src/store/filters.js b/src/store/filters.js
index 55bf76899b..750d1f694b 100644
--- a/src/store/filters.js
+++ b/src/store/filters.js
@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { emit } from '@nextcloud/event-bus'
 import { defineStore } from 'pinia'
 
+import { emit } from '@nextcloud/event-bus'
+
 import logger from '../helpers/logger.js'
 
 export const useFiltersStore = defineStore('filter', {
diff --git a/src/views/FilesList/FileListFilter/FileListFilterModified.vue b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
index e725c0ce39..1ec88dd242 100644
--- a/src/views/FilesList/FileListFilter/FileListFilterModified.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
@@ -28,6 +28,7 @@ import FileListFilter from './FileListFilter.vue'
 import { useFiltersStore } from '../../../store/filters.js'
 
 const startOfToday = () => (new Date()).setHours(0, 0, 0, 0)
+const endOfToday = () => (new Date()).setHours(23, 59, 59, 999)
 
 export default {
 	name: 'FileListFilterModified',
@@ -47,43 +48,36 @@ export default {
 	data() {
 		return {
 			selectedOption: null,
-			timeRangeEnd: null,
-			timeRangeStart: null,
 			timePresets: [
 				{
 					id: 'today',
 					label: t('libresign', 'Today'),
-					start: '',
-					end: '',
-					filter: (time) => time > startOfToday(),
+					start: startOfToday(),
+					end: endOfToday(),
 				},
 				{
 					id: 'last-7',
 					label: t('libresign', 'Last 7 days'),
-					start: '',
-					end: '',
-					filter: (time) => time > (startOfToday() - (7 * 24 * 60 * 60 * 1000)),
+					start: startOfToday() - (7 * 24 * 60 * 60 * 1000),
+					end: endOfToday(),
 				},
 				{
 					id: 'last-30',
 					label: t('libresign', 'Last 30 days'),
-					start: '',
-					end: '',
-					filter: (time) => time > (startOfToday() - (30 * 24 * 60 * 60 * 1000)),
+					start: startOfToday() - (30 * 24 * 60 * 60 * 1000),
+					end: endOfToday(),
 				},
 				{
 					id: 'this-year',
 					label: t('libresign', 'This year ({year})', { year: (new Date()).getFullYear() }),
-					start: '',
-					end: '',
-					filter: (time) => time > (new Date(startOfToday())).setMonth(0, 1),
+					start: (new Date(startOfToday())).setMonth(0, 1),
+					end: endOfToday(),
 				},
 				{
 					id: 'last-year',
-					start: '',
-					end: '',
 					label: t('libresign', 'Last year ({year})', { year: (new Date()).getFullYear() - 1 }),
-					filter: (time) => (time > (new Date(startOfToday())).setFullYear((new Date()).getFullYear() - 1, 0, 1)) && (time < (new Date(startOfToday())).setMonth(0, 1)),
+					start: (new Date(startOfToday())).setFullYear((new Date()).getFullYear() - 1, 0, 1),
+					end: (new Date(startOfToday())).setMonth(0, 1),
 				},
 			],
 		}
@@ -112,6 +106,8 @@ export default {
 			const chips = []
 			if (preset) {
 				chips.push({
+					start: preset.start,
+					end: preset.end,
 					icon: calendarSvg,
 					text: preset.label,
 					onclick: () => this.setPreset(),
diff --git a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
index d68fa5fda7..6af5c717ce 100644
--- a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
@@ -104,6 +104,7 @@ export default {
 			if (presets && presets.length > 0) {
 				for (const preset of presets) {
 					chips.push({
+						id: preset.id,
 						icon: preset.icon,
 						text: preset.label,
 						onclick: () => this.setPreset(presets.filter(({ id }) => id !== preset.id)),

From 4354badca3ddcb38807845a0ef22ef49e6c97488 Mon Sep 17 00:00:00 2001
From: Victor Bianchi <vbianchi@protonmail.com>
Date: Mon, 30 Sep 2024 14:12:46 -0300
Subject: [PATCH 15/48] chore: update OpenAPI documentation

Signed-off-by: Victor Bianchi <vbianchi@protonmail.com>
---
 openapi-full.json                 | 69 ++++++++++++++++++++++++++++++-
 openapi.json                      | 69 ++++++++++++++++++++++++++++++-
 src/types/openapi/openapi-full.ts | 51 ++++++++++++++++++++++-
 src/types/openapi/openapi.ts      | 51 ++++++++++++++++++++++-
 4 files changed, 232 insertions(+), 8 deletions(-)

diff --git a/openapi-full.json b/openapi-full.json
index 7a5298e3b1..fad3f76592 100644
--- a/openapi-full.json
+++ b/openapi-full.json
@@ -1128,6 +1128,48 @@
                 }
             }
         },
+        "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+            "get": {
+                "operationId": "page-sign-pdf",
+                "summary": "Sign page to authenticated signer",
+                "description": "The path is used only by frontend",
+                "tags": [
+                    "page"
+                ],
+                "security": [
+                    {},
+                    {
+                        "bearer_auth": []
+                    },
+                    {
+                        "basic_auth": []
+                    }
+                ],
+                "parameters": [
+                    {
+                        "name": "uuid",
+                        "in": "path",
+                        "description": "Sign request uuid",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "content": {
+                            "text/html": {
+                                "schema": {
+                                    "type": "string"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
         "/index.php/apps/libresign/p/sign/{uuid}": {
             "get": {
                 "operationId": "page-sign",
@@ -3695,9 +3737,32 @@
                         }
                     },
                     {
-                        "name": "status",
+                        "name": "status[]",
+                        "in": "query",
+                        "description": "Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "schema": {
+                            "type": "array",
+                            "nullable": true,
+                            "items": {
+                                "type": "integer",
+                                "format": "int64"
+                            }
+                        }
+                    },
+                    {
+                        "name": "start",
+                        "in": "query",
+                        "description": "Start date of signature request (UNIX timestamp)",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64",
+                            "nullable": true
+                        }
+                    },
+                    {
+                        "name": "end",
                         "in": "query",
-                        "description": "Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "description": "End date of signature request (UNIX timestamp)",
                         "schema": {
                             "type": "integer",
                             "format": "int64",
diff --git a/openapi.json b/openapi.json
index ebf9a8d844..fde54c2766 100644
--- a/openapi.json
+++ b/openapi.json
@@ -1032,6 +1032,48 @@
                 }
             }
         },
+        "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+            "get": {
+                "operationId": "page-sign-pdf",
+                "summary": "Sign page to authenticated signer",
+                "description": "The path is used only by frontend",
+                "tags": [
+                    "page"
+                ],
+                "security": [
+                    {},
+                    {
+                        "bearer_auth": []
+                    },
+                    {
+                        "basic_auth": []
+                    }
+                ],
+                "parameters": [
+                    {
+                        "name": "uuid",
+                        "in": "path",
+                        "description": "Sign request uuid",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "content": {
+                            "text/html": {
+                                "schema": {
+                                    "type": "string"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
         "/index.php/apps/libresign/p/sign/{uuid}": {
             "get": {
                 "operationId": "page-sign",
@@ -3599,9 +3641,32 @@
                         }
                     },
                     {
-                        "name": "status",
+                        "name": "status[]",
+                        "in": "query",
+                        "description": "Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "schema": {
+                            "type": "array",
+                            "nullable": true,
+                            "items": {
+                                "type": "integer",
+                                "format": "int64"
+                            }
+                        }
+                    },
+                    {
+                        "name": "start",
+                        "in": "query",
+                        "description": "Start date of signature request (UNIX timestamp)",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64",
+                            "nullable": true
+                        }
+                    },
+                    {
+                        "name": "end",
                         "in": "query",
-                        "description": "Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "description": "End date of signature request (UNIX timestamp)",
                         "schema": {
                             "type": "integer",
                             "format": "int64",
diff --git a/src/types/openapi/openapi-full.ts b/src/types/openapi/openapi-full.ts
index 64966b8c1c..769b00c353 100644
--- a/src/types/openapi/openapi-full.ts
+++ b/src/types/openapi/openapi-full.ts
@@ -153,6 +153,26 @@ export type paths = {
         patch?: never;
         trace?: never;
     };
+    "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Sign page to authenticated signer
+         * @description The path is used only by frontend
+         */
+        get: operations["page-sign-pdf"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/index.php/apps/libresign/p/sign/{uuid}": {
         parameters: {
             query?: never;
@@ -1419,6 +1439,29 @@ export interface operations {
             };
         };
     };
+    "page-sign-pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Sign request uuid */
+                uuid: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/html": string;
+                };
+            };
+        };
+    };
     "page-sign": {
         parameters: {
             query?: never;
@@ -2453,8 +2496,12 @@ export interface operations {
                 signer_uuid?: string | null;
                 /** @description The nodeId (also called fileId). Is the id of a file at Nextcloud */
                 nodeId?: string | null;
-                /** @description Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
-                status?: number | null;
+                /** @description Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
+                "status[]"?: number[] | null;
+                /** @description Start date of signature request (UNIX timestamp) */
+                start?: number | null;
+                /** @description End date of signature request (UNIX timestamp) */
+                end?: number | null;
             };
             header: {
                 /** @description Required to be true for the API request to pass */
diff --git a/src/types/openapi/openapi.ts b/src/types/openapi/openapi.ts
index 2f1422039c..256118bfd9 100644
--- a/src/types/openapi/openapi.ts
+++ b/src/types/openapi/openapi.ts
@@ -153,6 +153,26 @@ export type paths = {
         patch?: never;
         trace?: never;
     };
+    "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Sign page to authenticated signer
+         * @description The path is used only by frontend
+         */
+        get: operations["page-sign-pdf"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/index.php/apps/libresign/p/sign/{uuid}": {
         parameters: {
             query?: never;
@@ -1273,6 +1293,29 @@ export interface operations {
             };
         };
     };
+    "page-sign-pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Sign request uuid */
+                uuid: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/html": string;
+                };
+            };
+        };
+    };
     "page-sign": {
         parameters: {
             query?: never;
@@ -2307,8 +2350,12 @@ export interface operations {
                 signer_uuid?: string | null;
                 /** @description The nodeId (also called fileId). Is the id of a file at Nextcloud */
                 nodeId?: string | null;
-                /** @description Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
-                status?: number | null;
+                /** @description Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
+                "status[]"?: number[] | null;
+                /** @description Start date of signature request (UNIX timestamp) */
+                start?: number | null;
+                /** @description End date of signature request (UNIX timestamp) */
+                end?: number | null;
             };
             header: {
                 /** @description Required to be true for the API request to pass */

From 5d54c5560f7639eb68fa18a654cb20a577d9db95 Mon Sep 17 00:00:00 2001
From: Victor Bianchi <vbianchi@protonmail.com>
Date: Mon, 30 Sep 2024 16:28:13 -0300
Subject: [PATCH 16/48] feat: implement file sorting

Signed-off-by: Victor Bianchi <vbianchi@protonmail.com>
---
 lib/Controller/FileController.php            | 10 +++-
 lib/Db/SignRequestMapper.php                 | 15 +++++-
 lib/Service/FileService.php                  |  8 ++-
 src/Components/File/File.vue                 |  8 +--
 src/store/files.js                           | 53 +++++++++++---------
 src/store/filesSorting.js                    |  2 +-
 src/views/FilesList/FilesList.vue            |  2 +-
 src/views/FilesList/FilesListTableHeader.vue |  6 +--
 src/views/FilesList/VirtualList.vue          |  2 +-
 9 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/lib/Controller/FileController.php b/lib/Controller/FileController.php
index bf3d416bd0..e9b2757375 100644
--- a/lib/Controller/FileController.php
+++ b/lib/Controller/FileController.php
@@ -197,6 +197,8 @@ public function validate(?string $type = null, $identifier = null): DataResponse
 	 * @param int|null $length Total of elements to return
 	 * @param int|null $start Start date of signature request (UNIX timestamp)
 	 * @param int|null $end End date of signature request (UNIX timestamp)
+	 * @param string|null $sortBy Name of the column to sort by
+	 * @param string|null $sortDirection Ascending or descending order
 	 * @return DataResponse<Http::STATUS_OK, array{pagination: LibresignPagination, data: ?LibresignFile[]}, array{}>
 	 *
 	 * 200: OK
@@ -212,6 +214,8 @@ public function list(
 		?array $status = null,
 		?int $start = null,
 		?int $end = null,
+		?string $sortBy = null,
+		?string $sortDirection = null,
 	): DataResponse {
 		$filter = array_filter([
 			'signer_uuid' => $signer_uuid,
@@ -220,9 +224,13 @@ public function list(
 			'start' => $start,
 			'end' => $end,
 		], static function ($var) { return $var !== null; });
+		$sort = [
+			'sortBy' => $sortBy,
+			'sortDirection' => $sortDirection,
+		];
 		$return = $this->fileService
 			->setMe($this->userSession->getUser())
-			->listAssociatedFilesOfSignFlow($page, $length, $filter);
+			->listAssociatedFilesOfSignFlow($page, $length, $filter, $sort);
 		return new DataResponse($return, Http::STATUS_OK);
 	}
 
diff --git a/lib/Db/SignRequestMapper.php b/lib/Db/SignRequestMapper.php
index 7484f3df48..02a71712f4 100644
--- a/lib/Db/SignRequestMapper.php
+++ b/lib/Db/SignRequestMapper.php
@@ -346,11 +346,12 @@ public function getFilesAssociatedFilesWithMeFormatted(
 		array $filter,
 		?int $page = null,
 		?int $length = null,
+		?array $sort = [],
 	): array {
 		$filter['email'] = $user->getEMailAddress();
 		$filter['length'] = $length;
 		$filter['page'] = $page;
-		$pagination = $this->getFilesAssociatedFilesWithMeStmt($user->getUID(), $filter);
+		$pagination = $this->getFilesAssociatedFilesWithMeStmt($user->getUID(), $filter, $sort);
 		$pagination->setMaxPerPage($length);
 		$pagination->setCurrentPage($page);
 		$currentPageResults = $pagination->getCurrentPageResults();
@@ -510,7 +511,11 @@ private function getFilesAssociatedFilesWithMeQueryBuilder(string $userId, ?arra
 		return $qb;
 	}
 
-	private function getFilesAssociatedFilesWithMeStmt(string $userId, ?array $filter = []): Pagination {
+	private function getFilesAssociatedFilesWithMeStmt(
+		string $userId,
+		?array $filter = [],
+		?array $sort = [],
+	): Pagination {
 		$qb = $this->getFilesAssociatedFilesWithMeQueryBuilder($userId, $filter);
 		$qb->select(
 			'f.id',
@@ -521,6 +526,12 @@ private function getFilesAssociatedFilesWithMeStmt(string $userId, ?array $filte
 			'f.status',
 			'f.metadata',
 		);
+		if (!empty($sort) && in_array($sort['sortBy'], ['name', 'status', 'created_at'])) {
+			$qb->orderBy(
+				$qb->func()->lower('f.' . $sort['sortBy']),
+				$sort['sortDirection'] == 'asc' ? 'asc' : 'desc'
+			);
+		}
 		$qb->selectAlias('f.created_at', 'request_date');
 
 		$countQueryBuilderModifier = function (IQueryBuilder $qb): int {
diff --git a/lib/Service/FileService.php b/lib/Service/FileService.php
index 1d9632e779..da777230ec 100644
--- a/lib/Service/FileService.php
+++ b/lib/Service/FileService.php
@@ -432,7 +432,12 @@ public function setFileByPath(string $path): self {
 	 *
 	 * @psalm-return array{data: array, pagination: array}
 	 */
-	public function listAssociatedFilesOfSignFlow($page = null, $length = null, array $filter = []): array {
+	public function listAssociatedFilesOfSignFlow(
+		$page = null,
+		$length = null,
+		array $filter = [],
+		array $sort = [],
+	): array {
 		$page = $page ?? 1;
 		$length = $length ?? (int)$this->appConfig->getAppValue('length_of_page', '100');
 
@@ -441,6 +446,7 @@ public function listAssociatedFilesOfSignFlow($page = null, $length = null, arra
 			$filter,
 			$page,
 			$length,
+			$sort,
 		);
 
 		$signers = $this->signRequestMapper->getByMultipleFileId(array_column($return['data'], 'id'));
diff --git a/src/Components/File/File.vue b/src/Components/File/File.vue
index 54911f712e..bc35e1c5c8 100644
--- a/src/Components/File/File.vue
+++ b/src/Components/File/File.vue
@@ -15,10 +15,10 @@
 			@load="backgroundFailed = false">
 		<FileIcon v-else v-once :size="128" />
 		<div class="enDot">
-			<div :class="filesStore.files[currentNodeId].statusText !== 'none' ? 'dot ' + statusToClass(filesStore.files[currentNodeId].status) : '' " />
-			<span>{{ filesStore.files[currentNodeId].statusText !== 'none' ? filesStore.files[currentNodeId].statusText : '' }}</span>
+			<div :class="filesStore.files.get(currentNodeId).statusText !== 'none' ? 'dot ' + statusToClass(filesStore.files.get(currentNodeId).status) : '' " />
+			<span>{{ filesStore.files.get(currentNodeId).statusText !== 'none' ? filesStore.files.get(currentNodeId).statusText : '' }}</span>
 		</div>
-		<h1>{{ filesStore.files[currentNodeId].name }}</h1>
+		<h1>{{ filesStore.files.get(currentNodeId).name }}</h1>
 	</div>
 </template>
 
@@ -64,7 +64,7 @@ export default {
 				return null
 			}
 			let previewUrl = ''
-			if (this.filesStore.files[this.currentNodeId]?.uuid?.length > 0) {
+			if (this.filesStore.files.get(this.currentNodeId)?.uuid?.length > 0) {
 				previewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/{nodeId}', {
 					nodeId: this.currentNodeId,
 				})
diff --git a/src/store/files.js b/src/store/files.js
index 1c57e5e75c..28d0a486a5 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -20,7 +20,7 @@ export const useFilesStore = function(...args) {
 	const store = defineStore('files', {
 		state: () => {
 			return {
-				files: {},
+				files: new Map(),
 				selectedNodeId: 0,
 				identifyingSigner: false,
 				loading: false,
@@ -30,7 +30,7 @@ export const useFilesStore = function(...args) {
 
 		actions: {
 			addFile(file) {
-				set(this.files, file.nodeId, file)
+				this.files.set(file.nodeId, file)
 				this.hydrateFile(file.nodeId)
 			},
 			selectFile(nodeId) {
@@ -44,13 +44,13 @@ export const useFilesStore = function(...args) {
 				sidebarStore.activeRequestSignatureTab()
 			},
 			getFile() {
-				return this.files[this.selectedNodeId] ?? {}
+				return this.files.get(this.selectedNodeId) ?? {}
 			},
 			async flushSelectedFile() {
 				const files = await this.getAllFiles({
 					nodeId: this.selectedNodeId,
 				})
-				this.addFile(files[this.selectedNodeId])
+				this.addFile(files.get(this.selectedNodeId))
 			},
 			enableIdentifySigner() {
 				this.identifyingSigner = true
@@ -65,7 +65,7 @@ export const useFilesStore = function(...args) {
 				if (!Object.hasOwn(this.getFile(), 'signers')) {
 					return false
 				}
-				return this.files[this.selectedNodeId].signers.length > 0
+				return this.files.get(this.selectedNodeId).signers.length > 0
 			},
 			isPartialSigned() {
 				if (this.selectedNodeId === 0) {
@@ -74,7 +74,7 @@ export const useFilesStore = function(...args) {
 				if (!Object.hasOwn(this.getFile(), 'signers')) {
 					return false
 				}
-				return this.files[this.selectedNodeId].signers
+				return this.files.get(this.selectedNodeId).signers
 					.filter(signer => signer.signed?.length > 0).length > 0
 			},
 			isFullSigned() {
@@ -84,15 +84,15 @@ export const useFilesStore = function(...args) {
 				if (!Object.hasOwn(this.getFile(), 'signers')) {
 					return false
 				}
-				return this.files[this.selectedNodeId].signers.length > 0
-					&& this.files[this.selectedNodeId].signers
-						.filter(signer => signer.signed?.length > 0).length === this.files[this.selectedNodeId].signers.length
+				return this.files.get(this.selectedNodeId).signers.length > 0
+					&& this.files.get(this.selectedNodeId).signers
+						.filter(signer => signer.signed?.length > 0).length === this.files.get(this.selectedNodeId).signers.length
 			},
 			getSubtitle() {
 				if (this.selectedNodeId === 0) {
 					return ''
 				}
-				const file = this.files[this.selectedNodeId]
+				const file = this.files.get(this.selectedNodeId)
 				if ((file?.requested_by?.userId ?? '').length === 0 || file?.request_date.length === 0) {
 					return ''
 				}
@@ -102,18 +102,18 @@ export const useFilesStore = function(...args) {
 				})
 			},
 			async hydrateFile(nodeId) {
-				if (Object.hasOwn(this.files[nodeId], 'uuid')) {
+				if (Object.hasOwn(this.files.get(nodeId), 'uuid')) {
 					return
 				}
 				await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/validate/file_id/{fileId}', {
 					fileId: nodeId,
 				}))
 					.then((response) => {
-						set(this.files, nodeId, response.data.ocs.data)
-						this.addUniqueIdentifierToAllSigners(this.files[nodeId].signers)
+						this.files.set(nodeId, response.data.ocs.data)
+						this.addUniqueIdentifierToAllSigners(this.files.get(nodeId).signers)
 					})
 					.catch(() => {
-						set(this.files[nodeId], 'signers', [])
+						set(this.files.get(nodeId), 'signers', [])
 					})
 			},
 			addUniqueIdentifierToAllSigners(signers) {
@@ -134,17 +134,17 @@ export const useFilesStore = function(...args) {
 			signerUpdate(signer) {
 				this.addIdentifierToSigner(signer)
 				// Remove if already exists
-				for (let i = this.files[this.selectedNodeId].signers.length - 1; i >= 0; i--) {
-					if (this.files[this.selectedNodeId].signers[i].identify === signer.identify) {
-						this.files[this.selectedNodeId].signers.splice(i, 1)
+				for (let i = this.files.get(this.selectedNodeId).signers.length - 1; i >= 0; i--) {
+					if (this.files.get(this.selectedNodeId).signers[i].identify === signer.identify) {
+						this.files.get(this.selectedNodeId).signers.splice(i, 1)
 						break
 					}
-					if (this.files[this.selectedNodeId].signers[i].signRequestId === signer.identify) {
-						this.files[this.selectedNodeId].signers.splice(i, 1)
+					if (this.files.get(this.selectedNodeId).signers[i].signRequestId === signer.identify) {
+						this.files.get(this.selectedNodeId).signers.splice(i, 1)
 						break
 					}
 				}
-				this.files[this.selectedNodeId].signers.push(signer)
+				this.files.get(this.selectedNodeId).signers.push(signer)
 			},
 			async deleteSigner(signer) {
 				if (!isNaN(signer.signRequestId)) {
@@ -155,9 +155,9 @@ export const useFilesStore = function(...args) {
 					}))
 				}
 				set(
-					this.files[this.selectedNodeId],
+					this.files.get(this.selectedNodeId),
 					'signers',
-					this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
+					this.files.get(this.selectedNodeId).signers.filter((i) => i.identify !== signer.identify),
 				)
 			},
 			async getAllFiles(filter) {
@@ -172,9 +172,14 @@ export const useFilesStore = function(...args) {
 					filter.end = Math.floor(end / 1000)
 				}
 				const { sortingMode, sortingDirection } = useFilesSortingStore()
-				// TODO: pass sortingMode and sortingDirection to API call
+				if (sortingMode) {
+					filter.sortBy = sortingMode
+				}
+				if (sortingDirection) {
+					filter.sortDirection = sortingDirection
+				}
 				const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
-				this.files = {}
+				this.files = new Map()
 				response.data.ocs.data.data.forEach(file => {
 					this.addFile(file)
 				})
diff --git a/src/store/filesSorting.js b/src/store/filesSorting.js
index 70f8904a3e..7e89b66170 100644
--- a/src/store/filesSorting.js
+++ b/src/store/filesSorting.js
@@ -11,7 +11,7 @@ const DEFAULT_SORTING_DIRECTION = 'asc'
 
 export const useFilesSortingStore = defineStore('filesSorting', {
 	state: () => ({
-		sortingMode: 'basename',
+		sortingMode: 'name',
 		sortingDirection: DEFAULT_SORTING_DIRECTION,
 	}),
 
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
index 5be7eaab20..1cee2bffef 100644
--- a/src/views/FilesList/FilesList.vue
+++ b/src/views/FilesList/FilesList.vue
@@ -150,7 +150,7 @@ export default {
 			return this.dirContentsFiltered
 		},
 		isEmptyDir() {
-			return this.filesStore.files.length === 0
+			return this.filesStore.files.size === 0
 		},
 		isRefreshing() {
 			return !this.isEmptyDir
diff --git a/src/views/FilesList/FilesListTableHeader.vue b/src/views/FilesList/FilesListTableHeader.vue
index 32d8ea8a3c..19211678b1 100644
--- a/src/views/FilesList/FilesListTableHeader.vue
+++ b/src/views/FilesList/FilesListTableHeader.vue
@@ -13,7 +13,7 @@
 			<span class="files-list__row-icon" />
 
 			<!-- Name -->
-			<FilesListTableHeaderButton :name="t('files', 'Name')" mode="basename" />
+			<FilesListTableHeaderButton :name="t('files', 'Name')" mode="name" />
 		</th>
 
 		<!-- Actions -->
@@ -59,8 +59,8 @@ export default {
 					sort: true,
 				},
 				{
-					title: t('libresign', 'Modified'),
-					id: 'modified',
+					title: t('libresign', 'Created at'),
+					id: 'created_at',
 					sort: true,
 				},
 			],
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index e7a9a6c013..8c3404c72e 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/src/views/FilesList/VirtualList.vue
@@ -14,7 +14,7 @@
 				:class="userConfigStore.grid_view ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
 				data-cy-files-list-tbody>
 				<component :is="dataComponent"
-					v-for="item in filesStore.files"
+					v-for="item in filesStore.files.values()"
 					:key="item.nodeId"
 					:source="item"
 					:loading="loading" />

From 5a69c8c5e7987848c18506fff3e2a5886f50c193 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Sun, 13 Oct 2024 21:40:01 -0300
Subject: [PATCH 17/48] chore: implement buttons to reques to sign

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/Components/Signers/Signer.vue             |   6 +-
 src/store/files.js                            |  46 ++--
 .../FilesList/FileEntry/FileEntryStatus.vue   |   2 +
 src/views/FilesList/FilesList.vue             | 227 +++++++++++++++++-
 src/views/FilesList/VirtualList.vue           |   2 +-
 5 files changed, 254 insertions(+), 29 deletions(-)

diff --git a/src/Components/Signers/Signer.vue b/src/Components/Signers/Signer.vue
index 8d9ed9ed59..6d7f81b8ad 100644
--- a/src/Components/Signers/Signer.vue
+++ b/src/Components/Signers/Signer.vue
@@ -13,7 +13,9 @@
 			<template #subname>
 				<Bullet v-for="method in identifyMethodsNames" :key="method" :name="method" />
 			</template>
-			<slot v-if="$slots.actions" slot="actions" name="actions" />
+			<NcActions>
+				<slot v-if="$slots.actions" slot="actions" name="actions" />
+			</NcActions>
 			<template #indicator>
 				<CheckboxBlankCircle :size="16"
 					:fill-color="statusColor"
@@ -29,6 +31,7 @@ import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import Moment from '@nextcloud/moment'
 
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 
@@ -39,6 +42,7 @@ import { useFilesStore } from '../../store/files.js'
 export default {
 	name: 'Signer',
 	components: {
+		NcActions,
 		NcListItem,
 		NcAvatar,
 		CheckboxBlankCircle,
diff --git a/src/store/files.js b/src/store/files.js
index 28d0a486a5..2826fddde1 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -20,7 +20,7 @@ export const useFilesStore = function(...args) {
 	const store = defineStore('files', {
 		state: () => {
 			return {
-				files: new Map(),
+				files: {},
 				selectedNodeId: 0,
 				identifyingSigner: false,
 				loading: false,
@@ -30,7 +30,7 @@ export const useFilesStore = function(...args) {
 
 		actions: {
 			addFile(file) {
-				this.files.set(file.nodeId, file)
+				set(this.files, file.nodeId, file)
 				this.hydrateFile(file.nodeId)
 			},
 			selectFile(nodeId) {
@@ -44,13 +44,13 @@ export const useFilesStore = function(...args) {
 				sidebarStore.activeRequestSignatureTab()
 			},
 			getFile() {
-				return this.files.get(this.selectedNodeId) ?? {}
+				return this.files[this.selectedNodeId] ?? {}
 			},
 			async flushSelectedFile() {
 				const files = await this.getAllFiles({
 					nodeId: this.selectedNodeId,
 				})
-				this.addFile(files.get(this.selectedNodeId))
+				this.addFile(files[this.selectedNodeId])
 			},
 			enableIdentifySigner() {
 				this.identifyingSigner = true
@@ -65,7 +65,7 @@ export const useFilesStore = function(...args) {
 				if (!Object.hasOwn(this.getFile(), 'signers')) {
 					return false
 				}
-				return this.files.get(this.selectedNodeId).signers.length > 0
+				return this.files[this.selectedNodeId].signers.length > 0
 			},
 			isPartialSigned() {
 				if (this.selectedNodeId === 0) {
@@ -74,7 +74,7 @@ export const useFilesStore = function(...args) {
 				if (!Object.hasOwn(this.getFile(), 'signers')) {
 					return false
 				}
-				return this.files.get(this.selectedNodeId).signers
+				return this.files[this.selectedNodeId].signers
 					.filter(signer => signer.signed?.length > 0).length > 0
 			},
 			isFullSigned() {
@@ -84,15 +84,15 @@ export const useFilesStore = function(...args) {
 				if (!Object.hasOwn(this.getFile(), 'signers')) {
 					return false
 				}
-				return this.files.get(this.selectedNodeId).signers.length > 0
-					&& this.files.get(this.selectedNodeId).signers
-						.filter(signer => signer.signed?.length > 0).length === this.files.get(this.selectedNodeId).signers.length
+				return this.files[this.selectedNodeId].signers.length > 0
+					&& this.files[this.selectedNodeId].signers
+						.filter(signer => signer.signed?.length > 0).length === this.files[this.selectedNodeId].signers.length
 			},
 			getSubtitle() {
 				if (this.selectedNodeId === 0) {
 					return ''
 				}
-				const file = this.files.get(this.selectedNodeId)
+				const file = this.files[this.selectedNodeId]
 				if ((file?.requested_by?.userId ?? '').length === 0 || file?.request_date.length === 0) {
 					return ''
 				}
@@ -102,18 +102,18 @@ export const useFilesStore = function(...args) {
 				})
 			},
 			async hydrateFile(nodeId) {
-				if (Object.hasOwn(this.files.get(nodeId), 'uuid')) {
+				if (Object.hasOwn(this.files[nodeId], 'uuid')) {
 					return
 				}
 				await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/validate/file_id/{fileId}', {
 					fileId: nodeId,
 				}))
 					.then((response) => {
-						this.files.set(nodeId, response.data.ocs.data)
-						this.addUniqueIdentifierToAllSigners(this.files.get(nodeId).signers)
+						set(this.files, nodeId, response.data.ocs.data)
+						this.addUniqueIdentifierToAllSigners(this.files[nodeId].signers)
 					})
 					.catch(() => {
-						set(this.files.get(nodeId), 'signers', [])
+						set(this.files[nodeId], 'signers', [])
 					})
 			},
 			addUniqueIdentifierToAllSigners(signers) {
@@ -134,17 +134,17 @@ export const useFilesStore = function(...args) {
 			signerUpdate(signer) {
 				this.addIdentifierToSigner(signer)
 				// Remove if already exists
-				for (let i = this.files.get(this.selectedNodeId).signers.length - 1; i >= 0; i--) {
-					if (this.files.get(this.selectedNodeId).signers[i].identify === signer.identify) {
-						this.files.get(this.selectedNodeId).signers.splice(i, 1)
+				for (let i = this.files[this.selectedNodeId].signers.length - 1; i >= 0; i--) {
+					if (this.files[this.selectedNodeId].signers[i].identify === signer.identify) {
+						this.files[this.selectedNodeId].signers.splice(i, 1)
 						break
 					}
-					if (this.files.get(this.selectedNodeId).signers[i].signRequestId === signer.identify) {
-						this.files.get(this.selectedNodeId).signers.splice(i, 1)
+					if (this.files[this.selectedNodeId].signers[i].signRequestId === signer.identify) {
+						this.files[this.selectedNodeId].signers.splice(i, 1)
 						break
 					}
 				}
-				this.files.get(this.selectedNodeId).signers.push(signer)
+				this.files[this.selectedNodeId].signers.push(signer)
 			},
 			async deleteSigner(signer) {
 				if (!isNaN(signer.signRequestId)) {
@@ -155,9 +155,9 @@ export const useFilesStore = function(...args) {
 					}))
 				}
 				set(
-					this.files.get(this.selectedNodeId),
+					this.files[this.selectedNodeId],
 					'signers',
-					this.files.get(this.selectedNodeId).signers.filter((i) => i.identify !== signer.identify),
+					this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
 				)
 			},
 			async getAllFiles(filter) {
@@ -179,7 +179,7 @@ export const useFilesStore = function(...args) {
 					filter.sortDirection = sortingDirection
 				}
 				const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
-				this.files = new Map()
+				this.files = []
 				response.data.ocs.data.data.forEach(file => {
 					this.addFile(file)
 				})
diff --git a/src/views/FilesList/FileEntry/FileEntryStatus.vue b/src/views/FilesList/FileEntry/FileEntryStatus.vue
index 431ae56120..88a4ed6c66 100644
--- a/src/views/FilesList/FileEntry/FileEntryStatus.vue
+++ b/src/views/FilesList/FileEntry/FileEntryStatus.vue
@@ -12,10 +12,12 @@ export default {
 		statusText: {
 			type: String,
 			required: true,
+			default: 'none',
 		},
 		status: {
 			type: Number,
 			required: true,
+			default: 0,
 		},
 	},
 	methods: {
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
index 1cee2bffef..f527c5f974 100644
--- a/src/views/FilesList/FilesList.vue
+++ b/src/views/FilesList/FilesList.vue
@@ -16,23 +16,24 @@
 					</template>
 				</NcBreadcrumb>
 				<template #actions>
-					<NcActions :menu-name="t('libresign', 'Request')">
+					<NcActions :menu-name="t('libresign', 'Request')"
+						:open.sync="openedMenu">
 						<template #icon>
 							<PlusIcon :size="20" />
 						</template>
-						<NcActionButton>
+						<NcActionButton @click="showModalUploadFromUrl()">
 							<template #icon>
 								<LinkIcon :size="20" />
 							</template>
 							{{ t('libresign', 'Upload from URL') }}
 						</NcActionButton>
-						<NcActionButton>
+						<NcActionButton @click="showFilePicker = true">
 							<template #icon>
 								<FolderIcon :size="20" />
 							</template>
 							{{ t('libresign', 'Choose from Files') }}
 						</NcActionButton>
-						<NcActionButton>
+						<NcActionButton @click="uploadFile">
 							<template #icon>
 								<NcLoadingIcon v-if="isUploading" :size="20" />
 								<UploadIcon v-else :size="20" />
@@ -70,6 +71,37 @@
 		<FilesListVirtual v-else
 			:nodes="dirContentsSorted"
 			:loading="loading" />
+		<FilePicker v-if="showFilePicker"
+			:name="t('libresign', 'Select your file')"
+			:multiselect="false"
+			:buttons="filePickerButtons"
+			:mimetype-filter="['application/pdf']"
+			@close="showFilePicker = false" />
+		<NcDialog v-if="modalUploadFromUrl"
+			:name="t('libresign', 'URL of a PDF file')"
+			:can-close="!loading"
+			@closing="closeModalUploadFromUrl">
+			<NcNoteCard v-for="message in uploadUrlErrors"
+				:key="message"
+				type="error">
+				{{ message }}
+			</NcNoteCard>
+			<NcTextField :label="t('libresign', 'URL of a PDF file')"
+				:value.sync="pdfUrl">
+				<LinkIcon :size="20" />
+			</NcTextField>
+			<template #actions>
+				<NcButton :disabled="!canUploadFronUrl"
+					type="primary"
+					@click="uploadUrl">
+					{{ t('libresign', 'Send') }}
+					<template #icon>
+						<NcLoadingIcon v-if="loading" :size="20" />
+						<CloudUploadIcon v-else :size="20" />
+					</template>
+				</NcButton>
+			</template>
+		</NcDialog>
 	</NcAppContent>
 </template>
 
@@ -77,6 +109,7 @@
 
 import HomeSvg from '@mdi/svg/svg/home.svg?raw'
 
+import CloudUploadIcon from 'vue-material-design-icons/CloudUpload.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
@@ -84,24 +117,50 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import UploadIcon from 'vue-material-design-icons/Upload.vue'
 import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
 
+import axios from '@nextcloud/axios'
+import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { generateOcsUrl } from '@nextcloud/router'
+
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import FilesListVirtual from './FilesListVirtual.vue'
 
+import { filesService } from '../../domains/files/index.js'
+import { useActionsMenuStore } from '../../store/actionsmenu.js'
 import { useFilesStore } from '../../store/files.js'
+import { useSidebarStore } from '../../store/sidebar.js'
 import { useUserConfigStore } from '../../store/userconfig.js'
 
+const PDF_MIME_TYPE = 'application/pdf'
+
+const loadFileToBase64 = file => {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader()
+		reader.readAsDataURL(file)
+		reader.onload = () => resolve(reader.result)
+		reader.onerror = (error) => reject(error)
+	})
+}
 export default {
 	name: 'FilesList',
 	components: {
+		FilePicker,
+		NcDialog,
+		NcNoteCard,
+		NcTextField,
+		CloudUploadIcon,
 		NcAppContent,
 		NcButton,
 		PlusIcon,
@@ -120,21 +179,73 @@ export default {
 		NcEmptyContent,
 	},
 	setup() {
+		const actionsMenuStore = useActionsMenuStore()
 		const filesStore = useFilesStore()
+		const sidebarStore = useSidebarStore()
 		const userConfigStore = useUserConfigStore()
 		return {
+			actionsMenuStore,
 			filesStore,
+			sidebarStore,
 			userConfigStore,
 		}
 	},
 	data() {
 		return {
+			modalUploadFromUrl: false,
+			showingFilePicker: false,
+			pdfUrl: '',
+			file: {},
+			signers: [],
+			uploadUrlErrors: [],
+			errors: [],
 			isUploading: false,
 			loading: false,
 			dirContentsFiltered: [],
 		}
 	},
 	computed: {
+		filePickerButtons() {
+			return [{
+				label: t('libresign', 'Choose'),
+				callback: (nodes) => this.handleFileChoose(nodes),
+				type: 'primary',
+			}]
+		},
+		canRequest() {
+			return this.signers.length > 0
+		},
+		canUploadFronUrl() {
+			if (this.loading) {
+				return false
+			}
+			try {
+				// eslint-disable-next-line no-new
+				new URL(this.pdfUrl)
+				return true
+			} catch (e) {
+				return false
+			}
+		},
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === 'global'
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? 'global' : null
+			},
+		},
+		showFilePicker: {
+			get() {
+				return this.showingFilePicker
+			},
+			set(state) {
+				this.showingFilePicker = state
+				if (state) {
+					this.openedMenu = false
+				}
+			},
+		},
 		viewIcon() {
 			return HomeSvg
 		},
@@ -160,6 +271,14 @@ export default {
 	async created() {
 		await this.filesStore.getAllFiles()
 	},
+	async mounted() {
+		subscribe('libresign:visible-elements-saved', this.closeSidebar)
+		this.filesStore.disableIdentifySigner()
+	},
+	beforeUnmount() {
+		unsubscribe('libresign:visible-elements-saved')
+		this.filesStore.selectFile()
+	},
 	methods: {
 		refresh() {
 			console.log('Need to implement refresh')
@@ -172,6 +291,106 @@ export default {
 			console.log('Implement filter here')
 			this.dirContentsFiltered = nodes
 		},
+		closeSidebar() {
+			this.filesStore.selectFile()
+		},
+		showModalUploadFromUrl() {
+			this.actionsMenuStore.opened = false
+			this.modalUploadFromUrl = true
+		},
+		closeModalUploadFromUrl() {
+			this.cleanErrors()
+			this.modalUploadFromUrl = false
+		},
+		cleanErrors() {
+			this.uploadUrlErrors = []
+			this.errors = []
+		},
+		async uploadUrl() {
+			this.loading = true
+			this.cleanErrors()
+			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
+				file: {
+					url: this.pdfUrl,
+				},
+			})
+				.then(({ data }) => {
+					this.filesStore.addFile({
+						nodeId: data.ocs.data.id,
+						name: data.ocs.data.name,
+					})
+					this.filesStore.selectFile(data.ocs.data.id)
+					this.closeModalUploadFromUrl()
+				})
+				.catch(({ response }) => {
+					this.uploadUrlErrors = [response.data.ocs.data.message]
+				})
+			this.loading = false
+		},
+		async upload(file) {
+			try {
+				const { name: original } = file
+
+				const name = original.split('.').slice(0, -1).join('.')
+
+				const data = await loadFileToBase64(file)
+
+				const res = await filesService.uploadFile({ name, file: data })
+
+				this.filesStore.addFile({
+					nodeId: res.id,
+					name: res.name,
+				})
+				this.filesStore.selectFile(res.id)
+				this.cleanErrors()
+			} catch (err) {
+				this.errors = [err.response.data.ocs.data.message]
+			}
+		},
+		uploadFile() {
+			this.loading = true
+			const input = document.createElement('input')
+			input.accept = PDF_MIME_TYPE
+			input.type = 'file'
+
+			input.onchange = async (ev) => {
+				const file = ev.target.files[0]
+
+				if (file) {
+					this.upload(file)
+				}
+
+				input.remove()
+			}
+
+			input.click()
+			this.loading = false
+		},
+		async handleFileChoose(nodes) {
+			const path = nodes[0]?.path
+			if (!path) {
+				return
+			}
+
+			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
+				file: {
+					path,
+				},
+				name: path.match(/([^/]*?)(?:\.[^.]*)?$/)[1] ?? '',
+			})
+				.then(({ data }) => {
+					this.filesStore.addFile({
+						nodeId: data.ocs.data.id,
+						name: data.ocs.data.name,
+					})
+					this.filesStore.selectFile(data.ocs.data.id)
+					this.cleanErrors()
+				})
+				.catch(({ response }) => {
+					this.errors = [response.data.ocs.data.message]
+					this.loading = false
+				})
+		},
 	},
 }
 </script>
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index 8c3404c72e..e7a9a6c013 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/src/views/FilesList/VirtualList.vue
@@ -14,7 +14,7 @@
 				:class="userConfigStore.grid_view ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
 				data-cy-files-list-tbody>
 				<component :is="dataComponent"
-					v-for="item in filesStore.files.values()"
+					v-for="item in filesStore.files"
 					:key="item.nodeId"
 					:source="item"
 					:loading="loading" />

From 9840cfa89bcaad02ebe17b027f49e3ca57e5998b Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Sun, 13 Oct 2024 22:12:37 -0300
Subject: [PATCH 18/48] chore: move methods to store

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 .../RightSidebar/RequestSignatureTab.vue      | 48 +++----------------
 src/store/files.js                            | 45 ++++++++++++++++-
 .../FilesList/FileEntry/FileEntryActions.vue  |  6 +--
 src/views/FilesList/VirtualList.vue           |  2 +-
 4 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/src/Components/RightSidebar/RequestSignatureTab.vue b/src/Components/RightSidebar/RequestSignatureTab.vue
index 4bb0a18190..0ec5cb4dea 100644
--- a/src/Components/RightSidebar/RequestSignatureTab.vue
+++ b/src/Components/RightSidebar/RequestSignatureTab.vue
@@ -14,7 +14,7 @@
 			@click="addSigner">
 			{{ t('libresign', 'Add signer') }}
 		</NcButton>
-		<Signers :signers="dataSigners"
+		<Signers :signers="filesStore.signers()"
 			event="libresign:edit-signer">
 			<template #actions="{signer}">
 				<NcActionButton v-if="canSave && !signer.signed"
@@ -26,7 +26,7 @@
 					</template>
 					{{ t('libresign', 'Delete') }}
 				</NcActionButton>
-				<NcActionButton v-if="canRequestSign && !signer.signed && signer.signRequestId && !signer.me"
+				<NcActionButton v-if="filesStore.canRequestSign && !signer.signed && signer.signRequestId && !signer.me"
 					icon="icon-comment"
 					:close-after-click="true"
 					@click="sendNotify(signer)">
@@ -36,7 +36,7 @@
 		</Signers>
 		<div class="action-buttons">
 			<NcButton v-if="canSave"
-				:type="canSign ? 'secondary' : 'primary'"
+				:type="filesStore.canSign() ? 'secondary' : 'primary'"
 				:disabled="hasLoading"
 				@click="save()">
 				<template #icon>
@@ -44,7 +44,7 @@
 				</template>
 				{{ t('libresign', 'Next') }}
 			</NcButton>
-			<NcButton v-if="canSign"
+			<NcButton v-if="filesStore.canSign()"
 				type="primary"
 				:disabled="hasLoading"
 				@click="sign()">
@@ -53,7 +53,7 @@
 				</template>
 				{{ t('libresign', 'Sign') }}
 			</NcButton>
-			<NcButton v-if="canValidate"
+			<NcButton v-if="filesStore.canValidate()"
 				type="primary"
 				@click="validationFile()">
 				{{ t('libresign', 'Validate') }}
@@ -72,11 +72,9 @@
 <script>
 import Delete from 'vue-material-design-icons/Delete.vue'
 
-import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -122,43 +120,9 @@ export default {
 			hasLoading: false,
 			signerToEdit: {},
 			modalSrc: '',
-			canRequestSign: loadState('libresign', 'can_request_sign', false),
 		}
 	},
 	computed: {
-		canAddSigner() {
-			return this.canRequestSign
-				&& (
-					!Object.hasOwn(this.filesStore.getFile(), 'requested_by')
-					|| this.filesStore.getFile().requested_by.userId === getCurrentUser().uid
-				)
-				&& !this.filesStore.isPartialSigned()
-				&& !this.filesStore.isFullSigned()
-		},
-		canSave() {
-			return this.canRequestSign
-				&& (
-					!Object.hasOwn(this.filesStore.getFile(), 'requested_by')
-					|| this.filesStore.getFile().requested_by.userId === getCurrentUser().uid
-				)
-				&& !this.filesStore.isPartialSigned()
-				&& !this.filesStore.isFullSigned()
-				&& this.filesStore.getFile()?.signers?.length > 0
-		},
-		canSign() {
-			return !this.filesStore.isFullSigned()
-				&& this.filesStore.getFile().status > 0
-				&& this.filesStore.getFile()?.signers?.filter(signer => signer.me).length > 0
-				&& this.filesStore.getFile()?.signers?.filter(signer => signer.me)
-					.filter(signer => signer.signed?.length > 0).length === 0
-		},
-		canValidate() {
-			return this.filesStore.isPartialSigned()
-				|| this.filesStore.isFullSigned()
-		},
-		dataSigners() {
-			return this.filesStore.getFile()?.signers ?? []
-		},
 		hasSigners() {
 			return this.filesStore.hasSigners()
 		},
@@ -241,7 +205,7 @@ export default {
 					users: [],
 				},
 			}
-			this.dataSigners.forEach(signer => {
+			this.filesStore.signers().forEach(signer => {
 				const user = {
 					displayName: signer.displayName,
 					identify: {},
diff --git a/src/store/files.js b/src/store/files.js
index 2826fddde1..202c1509d5 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -6,8 +6,10 @@
 import { defineStore } from 'pinia'
 import { set } from 'vue'
 
+import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { subscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
 import Moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 
@@ -25,6 +27,7 @@ export const useFilesStore = function(...args) {
 				identifyingSigner: false,
 				loading: false,
 				filterActive: 'all',
+				canRequestSign: loadState('libresign', 'can_request_sign', false),
 			}
 		},
 
@@ -58,6 +61,9 @@ export const useFilesStore = function(...args) {
 			disableIdentifySigner() {
 				this.identifyingSigner = false
 			},
+			signers() {
+				return this.getFile()?.signers ?? []
+			},
 			hasSigners() {
 				if (this.selectedNodeId === 0) {
 					return false
@@ -88,6 +94,43 @@ export const useFilesStore = function(...args) {
 					&& this.files[this.selectedNodeId].signers
 						.filter(signer => signer.signed?.length > 0).length === this.files[this.selectedNodeId].signers.length
 			},
+			canSign() {
+				return !this.isFullSigned()
+				&& this.getFile().status > 0
+				&& this.getFile()?.signers?.filter(signer => signer.me).length > 0
+				&& this.getFile()?.signers?.filter(signer => signer.me)
+					.filter(signer => signer.signed?.length > 0).length === 0
+			},
+			canValidate() {
+				return this.isPartialSigned()
+					|| this.isFullSigned()
+			},
+			canDelete() {
+				return this.canRequestSign
+					&& (
+						!Object.hasOwn(this.getFile(), 'requested_by')
+						|| this.getFile().requested_by.userId === getCurrentUser().uid
+					)
+			},
+			canAddSigner() {
+				return this.canRequestSign
+					&& (
+						!Object.hasOwn(this.getFile(), 'requested_by')
+						|| this.getFile().requested_by.userId === getCurrentUser().uid
+					)
+					&& !this.isPartialSigned()
+					&& !this.isFullSigned()
+			},
+			canSave() {
+				return this.canRequestSign
+					&& (
+						!Object.hasOwn(this.getFile(), 'requested_by')
+						|| this.getFile().requested_by.userId === getCurrentUser().uid
+					)
+					&& !this.isPartialSigned()
+					&& !this.isFullSigned()
+					&& this.getFile()?.signers?.length > 0
+			},
 			getSubtitle() {
 				if (this.selectedNodeId === 0) {
 					return ''
@@ -179,7 +222,7 @@ export const useFilesStore = function(...args) {
 					filter.sortDirection = sortingDirection
 				}
 				const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
-				this.files = []
+				this.files = {}
 				response.data.ocs.data.data.forEach(file => {
 					this.addFile(file)
 				})
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index a9724e5ebd..6cd1db2eac 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -80,17 +80,17 @@ export default {
 	mounted() {
 		this.registerAction({
 			id: 'id-teste0',
-			title: 'Validate',
+			title: t('libresign', 'Validate'),
 			iconSvgInline: svgFile,
 		})
 		this.registerAction({
 			id: 'id-teste1',
-			title: 'Sign',
+			title: t('libresign', 'Sign'),
 			iconSvgInline: svgFile,
 		})
 		this.registerAction({
 			id: 'id-teste2',
-			title: 'Delete',
+			title: t('libresign', 'Delete'),
 			iconSvgInline: svgFile,
 		})
 	},
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index e7a9a6c013..1acf4fc1cd 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/src/views/FilesList/VirtualList.vue
@@ -14,7 +14,7 @@
 				:class="userConfigStore.grid_view ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
 				data-cy-files-list-tbody>
 				<component :is="dataComponent"
-					v-for="item in filesStore.files"
+					v-for="(item) in filesStore.files"
 					:key="item.nodeId"
 					:source="item"
 					:loading="loading" />

From 6a7f8da10b5a88a1b9f04aecd2193bcdac6e70d6 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Sat, 19 Oct 2024 16:26:00 -0300
Subject: [PATCH 19/48] chore: make sign menu to work

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 .../RightSidebar/RequestSignatureTab.vue      | 12 +--
 src/store/files.js                            | 96 ++++++++++---------
 .../FilesList/FileEntry/FileEntryActions.vue  | 69 +++++++++----
 3 files changed, 108 insertions(+), 69 deletions(-)

diff --git a/src/Components/RightSidebar/RequestSignatureTab.vue b/src/Components/RightSidebar/RequestSignatureTab.vue
index 0ec5cb4dea..9de501c288 100644
--- a/src/Components/RightSidebar/RequestSignatureTab.vue
+++ b/src/Components/RightSidebar/RequestSignatureTab.vue
@@ -9,15 +9,15 @@
 	</div>
 	<div v-else
 		id="request-signature-tab">
-		<NcButton v-if="canAddSigner"
+		<NcButton v-if="filesStore.canAddSigner()"
 			:type="hasSigners ? 'secondary' : 'primary'"
 			@click="addSigner">
 			{{ t('libresign', 'Add signer') }}
 		</NcButton>
-		<Signers :signers="filesStore.signers()"
+		<Signers :signers="filesStore.signers"
 			event="libresign:edit-signer">
 			<template #actions="{signer}">
-				<NcActionButton v-if="canSave && !signer.signed"
+				<NcActionButton v-if="filesStore.canSave() && !signer.signed"
 					aria-label="Delete"
 					:close-after-click="true"
 					@click="filesStore.deleteSigner(signer)">
@@ -35,7 +35,7 @@
 			</template>
 		</Signers>
 		<div class="action-buttons">
-			<NcButton v-if="canSave"
+			<NcButton v-if="filesStore.canSave()"
 				:type="filesStore.canSign() ? 'secondary' : 'primary'"
 				:disabled="hasLoading"
 				@click="save()">
@@ -124,7 +124,7 @@ export default {
 	},
 	computed: {
 		hasSigners() {
-			return this.filesStore.hasSigners()
+			return this.filesStore.hasSigners(this.filesStore.getFile())
 		},
 		fileName() {
 			return this.filesStore.getFile()?.name ?? ''
@@ -205,7 +205,7 @@ export default {
 					users: [],
 				},
 			}
-			this.filesStore.signers().forEach(signer => {
+			(this.filesStore.getFile()?.signers ?? []).forEach(signer => {
 				const user = {
 					displayName: signer.displayName,
 					identify: {},
diff --git a/src/store/files.js b/src/store/files.js
index 202c1509d5..7bc32a6349 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -46,7 +46,10 @@ export const useFilesStore = function(...args) {
 				const sidebarStore = useSidebarStore()
 				sidebarStore.activeRequestSignatureTab()
 			},
-			getFile() {
+			getFile(file) {
+				if (typeof file === 'object') {
+					return file
+				}
 				return this.files[this.selectedNodeId] ?? {}
 			},
 			async flushSelectedFile() {
@@ -61,81 +64,86 @@ export const useFilesStore = function(...args) {
 			disableIdentifySigner() {
 				this.identifyingSigner = false
 			},
-			signers() {
-				return this.getFile()?.signers ?? []
-			},
-			hasSigners() {
+			hasSigners(file) {
+				file = this.getFile(file)
 				if (this.selectedNodeId === 0) {
 					return false
 				}
-				if (!Object.hasOwn(this.getFile(), 'signers')) {
+				if (!Object.hasOwn(file, 'signers')) {
 					return false
 				}
-				return this.files[this.selectedNodeId].signers.length > 0
+				return file.signers.length > 0
 			},
-			isPartialSigned() {
+			isPartialSigned(file) {
+				file = this.getFile(file)
 				if (this.selectedNodeId === 0) {
 					return false
 				}
-				if (!Object.hasOwn(this.getFile(), 'signers')) {
+				if (!Object.hasOwn(file, 'signers')) {
 					return false
 				}
-				return this.files[this.selectedNodeId].signers
+				return file.signers
 					.filter(signer => signer.signed?.length > 0).length > 0
 			},
-			isFullSigned() {
+			isFullSigned(file) {
+				file = this.getFile(file)
 				if (this.selectedNodeId === 0) {
 					return false
 				}
-				if (!Object.hasOwn(this.getFile(), 'signers')) {
+				if (!Object.hasOwn(file, 'signers')) {
 					return false
 				}
-				return this.files[this.selectedNodeId].signers.length > 0
-					&& this.files[this.selectedNodeId].signers
-						.filter(signer => signer.signed?.length > 0).length === this.files[this.selectedNodeId].signers.length
+				return file.signers.length > 0
+					&& file.signers
+						.filter(signer => signer.signed?.length > 0).length === file.signers.length
 			},
-			canSign() {
-				return !this.isFullSigned()
-				&& this.getFile().status > 0
-				&& this.getFile()?.signers?.filter(signer => signer.me).length > 0
-				&& this.getFile()?.signers?.filter(signer => signer.me)
+			canSign(file) {
+				file = this.getFile(file)
+				return !this.isFullSigned(file)
+				&& file.status > 0
+				&& file?.signers?.filter(signer => signer.me).length > 0
+				&& file?.signers?.filter(signer => signer.me)
 					.filter(signer => signer.signed?.length > 0).length === 0
 			},
-			canValidate() {
-				return this.isPartialSigned()
-					|| this.isFullSigned()
+			canValidate(file) {
+				file = this.getFile(file)
+				return this.isPartialSigned(file)
+					|| this.isFullSigned(file)
 			},
-			canDelete() {
+			canDelete(file) {
+				file = this.getFile(file)
 				return this.canRequestSign
 					&& (
-						!Object.hasOwn(this.getFile(), 'requested_by')
-						|| this.getFile().requested_by.userId === getCurrentUser().uid
+						!Object.hasOwn(file, 'requested_by')
+						|| file.requested_by.userId === getCurrentUser().uid
 					)
 			},
-			canAddSigner() {
+			canAddSigner(file) {
+				file = this.getFile(file)
 				return this.canRequestSign
 					&& (
-						!Object.hasOwn(this.getFile(), 'requested_by')
-						|| this.getFile().requested_by.userId === getCurrentUser().uid
+						!Object.hasOwn(file, 'requested_by')
+						|| file.requested_by.userId === getCurrentUser().uid
 					)
-					&& !this.isPartialSigned()
-					&& !this.isFullSigned()
+					&& !this.isPartialSigned(file)
+					&& !this.isFullSigned(file)
 			},
-			canSave() {
+			canSave(file) {
+				file = this.getFile(file)
 				return this.canRequestSign
 					&& (
-						!Object.hasOwn(this.getFile(), 'requested_by')
-						|| this.getFile().requested_by.userId === getCurrentUser().uid
+						!Object.hasOwn(file, 'requested_by')
+						|| file.requested_by.userId === getCurrentUser().uid
 					)
-					&& !this.isPartialSigned()
-					&& !this.isFullSigned()
-					&& this.getFile()?.signers?.length > 0
+					&& !this.isPartialSigned(file)
+					&& !this.isFullSigned(file)
+					&& file?.signers?.length > 0
 			},
 			getSubtitle() {
 				if (this.selectedNodeId === 0) {
 					return ''
 				}
-				const file = this.files[this.selectedNodeId]
+				const file = this.getFile()
 				if ((file?.requested_by?.userId ?? '').length === 0 || file?.request_date.length === 0) {
 					return ''
 				}
@@ -177,17 +185,17 @@ export const useFilesStore = function(...args) {
 			signerUpdate(signer) {
 				this.addIdentifierToSigner(signer)
 				// Remove if already exists
-				for (let i = this.files[this.selectedNodeId].signers.length - 1; i >= 0; i--) {
-					if (this.files[this.selectedNodeId].signers[i].identify === signer.identify) {
-						this.files[this.selectedNodeId].signers.splice(i, 1)
+				for (let i = this.getFile().signers.length - 1; i >= 0; i--) {
+					if (this.getFile().signers[i].identify === signer.identify) {
+						this.getFile().signers.splice(i, 1)
 						break
 					}
-					if (this.files[this.selectedNodeId].signers[i].signRequestId === signer.identify) {
-						this.files[this.selectedNodeId].signers.splice(i, 1)
+					if (this.getFile().signers[i].signRequestId === signer.identify) {
+						this.getFile().signers.splice(i, 1)
 						break
 					}
 				}
-				this.files[this.selectedNodeId].signers.push(signer)
+				this.getFile().signers.push(signer)
 			},
 			async deleteSigner(signer) {
 				if (!isNaN(signer.signRequestId)) {
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index 6cd1db2eac..84cc27a56a 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -5,7 +5,7 @@
 			:force-name="true"
 			type="tertiary"
 			:open.sync="openedMenu"
-			@close="openedSubmenu = null">
+			@close="openedMenu = null">
 			<!-- Default actions list-->
 			<NcActionButton v-for="action in enabledMenuActions"
 				:key="action.id"
@@ -14,7 +14,8 @@
 					[`files-list__row-action-${action.id}`]: true,
 				}"
 				:aria-label="action.title"
-				:title="action.title">
+				:title="action.title"
+				@click="onActionClick(action)">
 				<template #icon>
 					<NcLoadingIcon v-if="loading === action.id" :size="18" />
 					<NcIconSvgWrapper v-else :svg="action.iconSvgInline" />
@@ -27,6 +28,8 @@
 
 <script>
 import svgFile from '@mdi/svg/svg/file.svg?raw'
+import svgSignature from '@mdi/svg/svg/signature.svg?raw'
+import svgTextBoxCheck from '@mdi/svg/svg/text-box-check.svg?raw'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
@@ -34,6 +37,8 @@ import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import { useFilesStore } from '../../../store/files.js'
+import { useSignStore } from '../../../store/sign.js'
 
 export default {
 	name: 'FileEntryActions',
@@ -59,11 +64,16 @@ export default {
 	},
 	setup() {
 		const actionsMenuStore = useActionsMenuStore()
-		return { actionsMenuStore }
+		const filesStore = useFilesStore()
+		const signStore = useSignStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+			signStore,
+		}
 	},
 	data() {
 		return {
-			openedSubmenu: null,
 			enabledMenuActions: [],
 		}
 	},
@@ -78,23 +88,44 @@ export default {
 		},
 	},
 	mounted() {
-		this.registerAction({
-			id: 'id-teste0',
-			title: t('libresign', 'Validate'),
-			iconSvgInline: svgFile,
-		})
-		this.registerAction({
-			id: 'id-teste1',
-			title: t('libresign', 'Sign'),
-			iconSvgInline: svgFile,
-		})
-		this.registerAction({
-			id: 'id-teste2',
-			title: t('libresign', 'Delete'),
-			iconSvgInline: svgFile,
-		})
+		if (this.filesStore.getFile(this.filesStore.files[this.source.nodeId])) {
+			this.registerAction({
+				id: 'validate',
+				title: t('libresign', 'Validate'),
+				iconSvgInline: svgTextBoxCheck,
+			})
+		}
+		if (this.filesStore.canSign(this.filesStore.files[this.source.nodeId])) {
+			this.registerAction({
+				id: 'sign',
+				title: t('libresign', 'Sign'),
+				iconSvgInline: svgSignature,
+			})
+		}
+		if (this.filesStore.canDelete(this.filesStore.files[this.source.nodeId])) {
+			this.registerAction({
+				id: 'delete',
+				title: t('libresign', 'Delete'),
+				iconSvgInline: svgFile,
+			})
+		}
 	},
 	methods: {
+		async onActionClick(action) {
+			if (action.id === 'sign') {
+				this.openedMenu = null
+				const uuid = this.source.signers
+					.reduce((accumulator, signer) => {
+						if (signer.me) {
+							return signer.sign_uuid
+						}
+						return accumulator
+					}, '')
+				this.signStore.setDocumentToSign(this.source)
+				this.$router.push({ name: 'SignPDF', params: { uuid } })
+				this.filesStore.selectFile(this.source.nodeId)
+			}
+		},
 		registerAction(action) {
 			this.enabledMenuActions = [...this.enabledMenuActions, action]
 		},

From 2306a529a1ff686691917bd85556e1f11bb6750d Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Sat, 19 Oct 2024 17:07:50 -0300
Subject: [PATCH 20/48] chore: implement validate

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

diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index 84cc27a56a..ea1ef8afb2 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -38,6 +38,7 @@ import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
 import { useFilesStore } from '../../../store/files.js'
+import { useSidebarStore } from '../../../store/sidebar.js'
 import { useSignStore } from '../../../store/sign.js'
 
 export default {
@@ -65,10 +66,12 @@ export default {
 	setup() {
 		const actionsMenuStore = useActionsMenuStore()
 		const filesStore = useFilesStore()
+		const sidebarStore = useSidebarStore()
 		const signStore = useSignStore()
 		return {
 			actionsMenuStore,
 			filesStore,
+			sidebarStore,
 			signStore,
 		}
 	},
@@ -112,9 +115,11 @@ export default {
 	},
 	methods: {
 		async onActionClick(action) {
+			const uuid = this.source.uuid
+			this.openedMenu = null
+			this.sidebarStore.hideSidebar()
 			if (action.id === 'sign') {
-				this.openedMenu = null
-				const uuid = this.source.signers
+				this.source.signers
 					.reduce((accumulator, signer) => {
 						if (signer.me) {
 							return signer.sign_uuid
@@ -124,6 +129,8 @@ export default {
 				this.signStore.setDocumentToSign(this.source)
 				this.$router.push({ name: 'SignPDF', params: { uuid } })
 				this.filesStore.selectFile(this.source.nodeId)
+			} else if (action.id === 'validate') {
+				this.$router.push({ name: 'ValidationFile', params: { uuid } })
 			}
 		},
 		registerAction(action) {

From cf36e848bb24dec7ac1a8da7009bffd7bd40e8c1 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Mon, 21 Oct 2024 08:10:52 -0300
Subject: [PATCH 21/48] chore: start to implement delete

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js                                 | 9 ++++++++-
 src/views/FilesList/FileEntry/FileEntryActions.vue | 2 ++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/store/files.js b/src/store/files.js
index 7bc32a6349..ee95730e9d 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -4,7 +4,7 @@
  */
 
 import { defineStore } from 'pinia'
-import { set } from 'vue'
+import { del, set } from 'vue'
 
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
@@ -211,6 +211,13 @@ export const useFilesStore = function(...args) {
 					this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
 				)
 			},
+			async delete(file) {
+				file = this.getFile(file)
+				const response = await axios.delete(generateOcsUrl('/apps/libresign/api/v1/sign/file_id/{fileId}', {
+					fileId: file.nodeId
+				}))
+				del(this.files, file.nodeId)
+			},
 			async getAllFiles(filter) {
 				if (!filter) filter = {}
 				const { chips } = useFiltersStore()
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index ea1ef8afb2..0c1c81833a 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -131,6 +131,8 @@ export default {
 				this.filesStore.selectFile(this.source.nodeId)
 			} else if (action.id === 'validate') {
 				this.$router.push({ name: 'ValidationFile', params: { uuid } })
+			} else if (action.id === 'delete') {
+				this.filesStore.delete(this.source)
 			}
 		},
 		registerAction(action) {

From c9e86cb1c72b77cde06cb06c8858ef5fff48e44e Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 24 Oct 2024 07:37:25 -0300
Subject: [PATCH 22/48] fix: prevent to be funcion when isn't

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/Components/RightSidebar/RequestSignatureTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/RightSidebar/RequestSignatureTab.vue b/src/Components/RightSidebar/RequestSignatureTab.vue
index 9de501c288..b76ee3c36c 100644
--- a/src/Components/RightSidebar/RequestSignatureTab.vue
+++ b/src/Components/RightSidebar/RequestSignatureTab.vue
@@ -204,7 +204,7 @@ export default {
 					name: this.filesStore.getFile()?.name,
 					users: [],
 				},
-			}
+			};
 			(this.filesStore.getFile()?.signers ?? []).forEach(signer => {
 				const user = {
 					displayName: signer.displayName,

From 2c43b9292c2c58e0921c594b212fe0bc1d895bd4 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 24 Oct 2024 07:37:42 -0300
Subject: [PATCH 23/48] fix: lint

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/files.js b/src/store/files.js
index ee95730e9d..4269c1890d 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -214,7 +214,7 @@ export const useFilesStore = function(...args) {
 			async delete(file) {
 				file = this.getFile(file)
 				const response = await axios.delete(generateOcsUrl('/apps/libresign/api/v1/sign/file_id/{fileId}', {
-					fileId: file.nodeId
+					fileId: file.nodeId,
 				}))
 				del(this.files, file.nodeId)
 			},

From 7c85cb5c67bef06e29315168af7d29ee18b89b3a Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 24 Oct 2024 07:56:06 -0300
Subject: [PATCH 24/48] chore: confirm before delete

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 .../FilesList/FileEntry/FileEntryActions.vue  | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index 0c1c81833a..4b570672e9 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -23,6 +23,21 @@
 				{{ action.title }}
 			</NcActionButton>
 		</NcActions>
+		<NcDialog v-if="confirmDelete"
+			:name="t('libresign', 'Confirm')"
+			@closing="confirmDelete = false">
+			{{ t('libresign', 'The signature request will be deleted. Do you confirm this action?') }}
+			<template #actions>
+				<NcButton type="error"
+					@click="doDelete()">
+					{{ t('libresign', 'Yes') }}
+				</NcButton>
+				<NcButton type="primary"
+					@click="confirmDelete = false">
+					{{ t('libresign', 'No') }}
+				</NcButton>
+			</template>
+		</NcDialog>
 	</td>
 </template>
 
@@ -33,6 +48,8 @@ import svgTextBoxCheck from '@mdi/svg/svg/text-box-check.svg?raw'
 
 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 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'
 
@@ -46,6 +63,8 @@ export default {
 	components: {
 		NcActionButton,
 		NcActions,
+		NcButton,
+		NcDialog,
 		NcIconSvgWrapper,
 		NcLoadingIcon,
 	},
@@ -78,6 +97,7 @@ export default {
 	data() {
 		return {
 			enabledMenuActions: [],
+			confirmDelete: false,
 		}
 	},
 	computed: {
@@ -132,12 +152,15 @@ export default {
 			} else if (action.id === 'validate') {
 				this.$router.push({ name: 'ValidationFile', params: { uuid } })
 			} else if (action.id === 'delete') {
-				this.filesStore.delete(this.source)
+				this.confirmDelete = true
 			}
 		},
 		registerAction(action) {
 			this.enabledMenuActions = [...this.enabledMenuActions, action]
 		},
+		doDelete() {
+			this.filesStore.delete(this.source)
+		},
 	},
 }
 </script>

From 2b0eee1b36811c107237e5aef575bcb965819d55 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 24 Oct 2024 08:45:11 -0300
Subject: [PATCH 25/48] chore: indent

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/store/files.js b/src/store/files.js
index 4269c1890d..3e6f5d3d61 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -100,10 +100,10 @@ export const useFilesStore = function(...args) {
 			canSign(file) {
 				file = this.getFile(file)
 				return !this.isFullSigned(file)
-				&& file.status > 0
-				&& file?.signers?.filter(signer => signer.me).length > 0
-				&& file?.signers?.filter(signer => signer.me)
-					.filter(signer => signer.signed?.length > 0).length === 0
+					&& file.status > 0
+					&& file?.signers?.filter(signer => signer.me).length > 0
+					&& file?.signers?.filter(signer => signer.me)
+						.filter(signer => signer.signed?.length > 0).length === 0
 			},
 			canValidate(file) {
 				file = this.getFile(file)

From b788e0255f838e3f404c94bea0060f1689ce74a6 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 24 Oct 2024 11:18:58 -0300
Subject: [PATCH 26/48] chore: make reactive the conditional to display actions

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 .../FilesList/FileEntry/FileEntryActions.vue  | 63 +++++++++++--------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index 4b570672e9..d1574fbfe5 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -7,7 +7,7 @@
 			:open.sync="openedMenu"
 			@close="openedMenu = null">
 			<!-- Default actions list-->
-			<NcActionButton v-for="action in enabledMenuActions"
+			<NcActionButton v-for="action in visibleMenu"
 				:key="action.id"
 				:ref="`action-${action.id}`"
 				:class="{
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import svgFile from '@mdi/svg/svg/file.svg?raw'
+import svgDelete from '@mdi/svg/svg/delete.svg?raw'
 import svgSignature from '@mdi/svg/svg/signature.svg?raw'
 import svgTextBoxCheck from '@mdi/svg/svg/text-box-check.svg?raw'
 
@@ -109,36 +109,45 @@ export default {
 				this.actionsMenuStore.opened = opened ? this.source.nodeId : null
 			},
 		},
+		visibleMenu() {
+			return this.enabledMenuActions.filter(action => this.visibleIf(action.id))
+		},
 	},
 	mounted() {
-		if (this.filesStore.getFile(this.filesStore.files[this.source.nodeId])) {
-			this.registerAction({
-				id: 'validate',
-				title: t('libresign', 'Validate'),
-				iconSvgInline: svgTextBoxCheck,
-			})
-		}
-		if (this.filesStore.canSign(this.filesStore.files[this.source.nodeId])) {
-			this.registerAction({
-				id: 'sign',
-				title: t('libresign', 'Sign'),
-				iconSvgInline: svgSignature,
-			})
-		}
-		if (this.filesStore.canDelete(this.filesStore.files[this.source.nodeId])) {
-			this.registerAction({
-				id: 'delete',
-				title: t('libresign', 'Delete'),
-				iconSvgInline: svgFile,
-			})
-		}
+		this.registerAction({
+			id: 'validate',
+			title: t('libresign', 'Validate'),
+			iconSvgInline: svgTextBoxCheck,
+		})
+		this.registerAction({
+			id: 'sign',
+			title: t('libresign', 'Sign'),
+			iconSvgInline: svgSignature,
+		})
+		this.registerAction({
+			id: 'delete',
+			title: t('libresign', 'Delete'),
+			iconSvgInline: svgDelete,
+		})
 	},
 	methods: {
-		async onActionClick(action) {
+		visibleIf(id) {
+			const file = this.filesStore.files[this.source.nodeId]
+			let visible = false
+			if (id === 'sign') {
+				visible = this.filesStore.canSign(file)
+			} else if (id === 'validate') {
+				visible = this.filesStore.canValidate(file)
+			} else if (id === 'delete') {
+				visible = this.filesStore.canDelete(file)
+			}
+			return visible
+		},
+		async onActionClick(id) {
 			const uuid = this.source.uuid
 			this.openedMenu = null
 			this.sidebarStore.hideSidebar()
-			if (action.id === 'sign') {
+			if (id === 'sign') {
 				this.source.signers
 					.reduce((accumulator, signer) => {
 						if (signer.me) {
@@ -149,9 +158,9 @@ export default {
 				this.signStore.setDocumentToSign(this.source)
 				this.$router.push({ name: 'SignPDF', params: { uuid } })
 				this.filesStore.selectFile(this.source.nodeId)
-			} else if (action.id === 'validate') {
+			} else if (id === 'validate') {
 				this.$router.push({ name: 'ValidationFile', params: { uuid } })
-			} else if (action.id === 'delete') {
+			} else if (id === 'delete') {
 				this.confirmDelete = true
 			}
 		},

From 1f7a2bd3b7ceba237a1c496a7cb3056a341e9fb0 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 24 Oct 2024 11:56:43 -0300
Subject: [PATCH 27/48] fix: sing from action

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js                            |  6 ----
 .../FilesList/FileEntry/FileEntryActions.vue  | 29 ++++++++++---------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/store/files.js b/src/store/files.js
index 3e6f5d3d61..2b9134fc57 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -76,9 +76,6 @@ export const useFilesStore = function(...args) {
 			},
 			isPartialSigned(file) {
 				file = this.getFile(file)
-				if (this.selectedNodeId === 0) {
-					return false
-				}
 				if (!Object.hasOwn(file, 'signers')) {
 					return false
 				}
@@ -87,9 +84,6 @@ export const useFilesStore = function(...args) {
 			},
 			isFullSigned(file) {
 				file = this.getFile(file)
-				if (this.selectedNodeId === 0) {
-					return false
-				}
 				if (!Object.hasOwn(file, 'signers')) {
 					return false
 				}
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index d1574fbfe5..d49ad6bed5 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -110,7 +110,7 @@ export default {
 			},
 		},
 		visibleMenu() {
-			return this.enabledMenuActions.filter(action => this.visibleIf(action.id))
+			return this.enabledMenuActions.filter(action => this.visibleIf(action))
 		},
 	},
 	mounted() {
@@ -131,24 +131,23 @@ export default {
 		})
 	},
 	methods: {
-		visibleIf(id) {
+		visibleIf(action) {
 			const file = this.filesStore.files[this.source.nodeId]
 			let visible = false
-			if (id === 'sign') {
+			if (action.id === 'sign') {
 				visible = this.filesStore.canSign(file)
-			} else if (id === 'validate') {
+			} else if (action.id === 'validate') {
 				visible = this.filesStore.canValidate(file)
-			} else if (id === 'delete') {
+			} else if (action.id === 'delete') {
 				visible = this.filesStore.canDelete(file)
 			}
 			return visible
 		},
-		async onActionClick(id) {
-			const uuid = this.source.uuid
+		async onActionClick(action) {
 			this.openedMenu = null
 			this.sidebarStore.hideSidebar()
-			if (id === 'sign') {
-				this.source.signers
+			if (action.id === 'sign') {
+				const signer = this.source.signers
 					.reduce((accumulator, signer) => {
 						if (signer.me) {
 							return signer.sign_uuid
@@ -156,11 +155,15 @@ export default {
 						return accumulator
 					}, '')
 				this.signStore.setDocumentToSign(this.source)
-				this.$router.push({ name: 'SignPDF', params: { uuid } })
+				this.$router.push({ name: 'SignPDF', params: {
+					uuid: signer.sign_uui
+				}})
 				this.filesStore.selectFile(this.source.nodeId)
-			} else if (id === 'validate') {
-				this.$router.push({ name: 'ValidationFile', params: { uuid } })
-			} else if (id === 'delete') {
+			} else if (action.id === 'validate') {
+				this.$router.push({ name: 'ValidationFile', params: {
+					uuid: this.source.uuid,
+				} })
+			} else if (action.id === 'delete') {
 				this.confirmDelete = true
 			}
 		},

From a0dcaf3a02cb51daec256b733ae0621cbf3d4454 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 24 Oct 2024 14:21:56 -0300
Subject: [PATCH 28/48] chore: only delete from backend when the file exists at
 LibreSign side

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/store/files.js b/src/store/files.js
index 2b9134fc57..d449522a6d 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -207,9 +207,11 @@ export const useFilesStore = function(...args) {
 			},
 			async delete(file) {
 				file = this.getFile(file)
-				const response = await axios.delete(generateOcsUrl('/apps/libresign/api/v1/sign/file_id/{fileId}', {
-					fileId: file.nodeId,
-				}))
+				if (file?.uuid !== undefined) {
+					const response = await axios.delete(generateOcsUrl('/apps/libresign/api/v1/sign/file_id/{fileId}', {
+						fileId: file.nodeId,
+					}))
+				}
 				del(this.files, file.nodeId)
 			},
 			async getAllFiles(filter) {

From 4a4ed53b874c2acb86d777faa95fc0b9102940bd Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 24 Oct 2024 14:55:11 -0300
Subject: [PATCH 29/48] fix: way to get signer uuid

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

diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index d49ad6bed5..fbc2f9ecfb 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -147,7 +147,7 @@ export default {
 			this.openedMenu = null
 			this.sidebarStore.hideSidebar()
 			if (action.id === 'sign') {
-				const signer = this.source.signers
+				const sign_uuid = this.source.signers
 					.reduce((accumulator, signer) => {
 						if (signer.me) {
 							return signer.sign_uuid
@@ -156,7 +156,7 @@ export default {
 					}, '')
 				this.signStore.setDocumentToSign(this.source)
 				this.$router.push({ name: 'SignPDF', params: {
-					uuid: signer.sign_uui
+					uuid: sign_uuid
 				}})
 				this.filesStore.selectFile(this.source.nodeId)
 			} else if (action.id === 'validate') {

From f11290443464d77d35c50e5f43c95986436a6bd6 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 24 Oct 2024 16:26:55 -0300
Subject: [PATCH 30/48] feat: implement order

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js                  | 11 +++++++++++
 src/views/FilesList/VirtualList.vue |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/store/files.js b/src/store/files.js
index d449522a6d..8b524405d6 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -28,6 +28,7 @@ export const useFilesStore = function(...args) {
 				loading: false,
 				filterActive: 'all',
 				canRequestSign: loadState('libresign', 'can_request_sign', false),
+				ordered: [],
 			}
 		},
 
@@ -35,6 +36,7 @@ export const useFilesStore = function(...args) {
 			addFile(file) {
 				set(this.files, file.nodeId, file)
 				this.hydrateFile(file.nodeId)
+				this.ordered.push(file.nodeId)
 			},
 			selectFile(nodeId) {
 				this.selectedNodeId = nodeId ?? 0
@@ -213,6 +215,11 @@ export const useFilesStore = function(...args) {
 					}))
 				}
 				del(this.files, file.nodeId)
+
+				const index = this.ordered.indexOf(file.nodeId)
+				if (index > -1) {
+					this.ordered.splice(index, 1)
+				}
 			},
 			async getAllFiles(filter) {
 				if (!filter) filter = {}
@@ -234,11 +241,15 @@ export const useFilesStore = function(...args) {
 				}
 				const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
 				this.files = {}
+				this.ordered = []
 				response.data.ocs.data.data.forEach(file => {
 					this.addFile(file)
 				})
 				return this.files
 			},
+			filesSorted() {
+				return this.ordered.map(key => this.files[key])
+			},
 			filter(type) {
 				this.filterActive = type
 				if (type === 'pending') {
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index 1acf4fc1cd..e3cc011d8c 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/src/views/FilesList/VirtualList.vue
@@ -14,7 +14,7 @@
 				:class="userConfigStore.grid_view ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
 				data-cy-files-list-tbody>
 				<component :is="dataComponent"
-					v-for="(item) in filesStore.files"
+					v-for="(item) in filesStore.filesSorted()"
 					:key="item.nodeId"
 					:source="item"
 					:loading="loading" />

From 5bce8739acbeb729377853c4c4d7778ebb531efe Mon Sep 17 00:00:00 2001
From: Victor Bianchi <vbianchi@protonmail.com>
Date: Mon, 28 Oct 2024 10:16:23 -0300
Subject: [PATCH 31/48] feat: implement lazy loading of files with pagination

Signed-off-by: Victor Bianchi <vbianchi@protonmail.com>
---
 src/store/files.js                  | 27 ++++++++++++++++++++++++---
 src/views/FilesList/VirtualList.vue | 25 +++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/store/files.js b/src/store/files.js
index 8b524405d6..e9ffa2ae1d 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -29,6 +29,10 @@ export const useFilesStore = function(...args) {
 				filterActive: 'all',
 				canRequestSign: loadState('libresign', 'can_request_sign', false),
 				ordered: [],
+				paginationCurrent: '',
+				paginationNext: '',
+				paginationLast: '',
+				paginationLength: '',
 			}
 		},
 
@@ -222,6 +226,7 @@ export const useFilesStore = function(...args) {
 				}
 			},
 			async getAllFiles(filter) {
+				// Build filter params object
 				if (!filter) filter = {}
 				const { chips } = useFiltersStore()
 				if (chips?.status?.length) {
@@ -239,12 +244,28 @@ export const useFilesStore = function(...args) {
 				if (sortingDirection) {
 					filter.sortDirection = sortingDirection
 				}
-				const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
-				this.files = {}
-				this.ordered = []
+
+				// Build pagination params object
+				const pagination = {}
+				if (this.paginationNext) pagination.page = this.paginationNext
+				if (this.paginationLength) pagination.length = this.paginationNext
+
+				// Call API
+				const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: {...filter, ...pagination} })
+
+				// Update state according to API response
+				if (!this.paginationCurrent) {
+					this.files = {}
+					this.ordered = []
+				}
 				response.data.ocs.data.data.forEach(file => {
 					this.addFile(file)
 				})
+				const currentPaginationParams = new URLSearchParams(response.data.ocs.data.pagination.current.split('?')[1])
+				this.paginationCurrent = currentPaginationParams.get('page')
+				this.paginationLength = currentPaginationParams.get('length')
+				this.paginationNext = new URLSearchParams(response.data.ocs.data.pagination.next.split('?')[1]).get('page')
+				this.paginationLast = new URLSearchParams(response.data.ocs.data.pagination.last.split('?')[1]).get('page')
 				return this.files
 			},
 			filesSorted() {
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index e3cc011d8c..49b51245b5 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/src/views/FilesList/VirtualList.vue
@@ -47,5 +47,30 @@ export default {
 			userConfigStore,
 		}
 	},
+	data() {
+		return {
+			observer: null,
+		}
+	},
+	mounted() {
+		this.observer = new IntersectionObserver(([entry]) => {
+			if (entry && entry.isIntersecting) {
+				this.filesStore.getAllFiles()
+			}
+		})
+		// 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'))
+		}
+	},
+	beforeDestroy() {
+		if (this.observer) this.observer.disconnect()
+	},
+	updated() {
+		if (this.observer) {
+			this.observer.disconnect()
+			this.observer.observe(this.$el.querySelector('table tbody tr:last-child'))
+		}
+	},
 }
 </script>

From ef1b10a48f94b3122cfdf60f455782ed9cf34b98 Mon Sep 17 00:00:00 2001
From: Victor Bianchi <vbianchi@protonmail.com>
Date: Thu, 31 Oct 2024 12:06:09 -0300
Subject: [PATCH 32/48] feat: integrate file list filters and pagination query
 params WIP

Signed-off-by: Victor Bianchi <vbianchi@protonmail.com>
---
 lib/Db/AccountFileMapper.php       |  2 +-
 lib/Db/SignRequestMapper.php       |  2 +-
 lib/Helper/Pagination.php          | 36 +++++++++++++++++++++---------
 lib/Service/AccountFileService.php |  4 ++--
 lib/Service/FileService.php        |  4 ++--
 src/store/files.js                 | 18 ++++++---------
 6 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/lib/Db/AccountFileMapper.php b/lib/Db/AccountFileMapper.php
index e811b61bc1..c892be7a07 100644
--- a/lib/Db/AccountFileMapper.php
+++ b/lib/Db/AccountFileMapper.php
@@ -151,7 +151,7 @@ private function getUserAccountFile(array $filter = []): Pagination {
 			$qb->setMaxResults($filter['length']);
 		}
 
-		$pagination = new Pagination($qb);
+		$pagination = new Pagination($qb, $this->urlGenerator);
 		return $pagination;
 	}
 
diff --git a/lib/Db/SignRequestMapper.php b/lib/Db/SignRequestMapper.php
index 02a71712f4..46bcf36b9c 100644
--- a/lib/Db/SignRequestMapper.php
+++ b/lib/Db/SignRequestMapper.php
@@ -543,7 +543,7 @@ private function getFilesAssociatedFilesWithMeStmt(
 			return (int)$qb->executeQuery()->fetchOne();
 		};
 
-		$pagination = new Pagination($qb);
+		$pagination = new Pagination($qb, $this->urlGenerator);
 		return $pagination;
 	}
 
diff --git a/lib/Helper/Pagination.php b/lib/Helper/Pagination.php
index 3ed5cf6749..d5a779918c 100644
--- a/lib/Helper/Pagination.php
+++ b/lib/Helper/Pagination.php
@@ -9,14 +9,15 @@
 namespace OCA\Libresign\Helper;
 
 use OCA\Libresign\Db\PagerFantaQueryAdapter;
+use OCP\IURLGenerator;
 use OCP\DB\QueryBuilder\IQueryBuilder;
 use Pagerfanta\Pagerfanta;
 
 class Pagination extends Pagerfanta {
-	/** @var string */
-	private $rootPath;
+	private string $routeName;
 	public function __construct(
 		IQueryBuilder $queryBuilder,
+		private IURLGenerator $urlGenerator,
 	) {
 		$adapter = new PagerFantaQueryAdapter($queryBuilder);
 		parent::__construct($adapter);
@@ -25,20 +26,28 @@ public function __construct(
 	/**
 	 * @return static
 	 */
-	public function setRootPath(string $rootPath = ''): self {
-		$this->rootPath = $rootPath;
+	public function setRouteName(string $routeName = ''): self {
+		$this->routeName = $routeName;
 		return $this;
 	}
 
-	public function getPagination(?int $page, ?int $length): array {
+	public function getPagination(?int $page, ?int $length, array $filter = []): array {
 		$this->setMaxPerPage($length);
 		$pagination['total'] = $this->count();
 		if ($pagination['total'] > $length) {
-			$pagination['current'] = $this->rootPath . '?page=' . $page . '&length=' . $length;
-			$pagination['next'] = $this->hasNextPage()      ? $this->rootPath . '?page=' . $this->getNextPage() . '&length=' . $length : null;
-			$pagination['prev'] = $this->hasPreviousPage()  ? $this->rootPath . '?page=' . $this->getPreviousPage() . '&length=' . $length : null;
-			$pagination['last'] = $this->hasNextPage()      ? $this->rootPath . '?page=' . $this->getNbPages() . '&length=' . $length : null;
-			$pagination['first'] = $this->hasPreviousPage() ? $this->rootPath . '?page=1&length=' . $length : null;
+			$pagination['current'] = $this->linkToRoute($page, $length, $filter);
+			$pagination['next'] = $this->hasNextPage()
+				? $this->linkToRoute($this->getNextPage(), $length, $filter)
+				: null;
+			$pagination['prev'] = $this->hasPreviousPage()
+				? $this->linkToRoute($this->getPreviousPage(), $length, $filter)
+				: null;
+			$pagination['last'] = $this->hasNextPage()
+				? $this->linkToRoute($this->getNbPages(), $length, $filter)
+				: null;
+			$pagination['first'] = $this->hasPreviousPage()
+				? $this->linkToRoute(1, $length, $filter)
+				: null;
 		} else {
 			$pagination['current'] = null;
 			$pagination['next'] = null;
@@ -48,4 +57,11 @@ public function getPagination(?int $page, ?int $length): array {
 		}
 		return $pagination;
 	}
+
+	private function linkToRoute(int $page, int $length, array $filter): string {
+		return $this->urlGenerator->linkToRoute(
+			$this->routeName,
+			array_merge(['page' => $page, 'length' => $length, 'apiVersion' => 'v1'], $filter)
+		);
+	}
 }
diff --git a/lib/Service/AccountFileService.php b/lib/Service/AccountFileService.php
index 48efb4357b..3960195500 100644
--- a/lib/Service/AccountFileService.php
+++ b/lib/Service/AccountFileService.php
@@ -49,10 +49,10 @@ public function accountFileList(array $filter, ?int $page = null, ?int $length =
 		$page = $page ?? 1;
 		$length = $length ?? (int)$this->appConfig->getAppValue('length_of_page', '100');
 		$data = $this->accountFileMapper->accountFileList($filter, $page, $length);
-		$data['pagination']->setRootPath('/file/list');
+		$data['pagination']->setRouteName('ocs.libresign.File.list');
 		return [
 			'data' => $data['data'],
-			'pagination' => $data['pagination']->getPagination($page, $length)
+			'pagination' => $data['pagination']->getPagination($page, $length, $filter)
 		];
 	}
 }
diff --git a/lib/Service/FileService.php b/lib/Service/FileService.php
index da777230ec..57ce58d6cc 100644
--- a/lib/Service/FileService.php
+++ b/lib/Service/FileService.php
@@ -454,10 +454,10 @@ public function listAssociatedFilesOfSignFlow(
 		$visibleElements = $this->signRequestMapper->getVisibleElementsFromSigners($signers);
 		$return['data'] = $this->associateAllAndFormat($this->me, $return['data'], $signers, $identifyMethods, $visibleElements);
 
-		$return['pagination']->setRootPath('/file/list');
+		$return['pagination']->setRouteName('ocs.libresign.File.list');
 		return [
 			'data' => $return['data'],
-			'pagination' => $return['pagination']->getPagination($page, $length)
+			'pagination' => $return['pagination']->getPagination($page, $length, $filter)
 		];
 	}
 
diff --git a/src/store/files.js b/src/store/files.js
index e9ffa2ae1d..4bdef5ae98 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -29,9 +29,9 @@ export const useFilesStore = function(...args) {
 				filterActive: 'all',
 				canRequestSign: loadState('libresign', 'can_request_sign', false),
 				ordered: [],
-				paginationCurrent: '',
-				paginationNext: '',
-				paginationLast: '',
+				paginationCurrentUrl: '',
+				paginationNextUrl: '',
+				paginationLastUrl: '',
 				paginationLength: '',
 			}
 		},
@@ -245,16 +245,12 @@ export const useFilesStore = function(...args) {
 					filter.sortDirection = sortingDirection
 				}
 
-				// Build pagination params object
-				const pagination = {}
-				if (this.paginationNext) pagination.page = this.paginationNext
-				if (this.paginationLength) pagination.length = this.paginationNext
-
 				// Call API
-				const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: {...filter, ...pagination} })
-
+				const response = this.paginationNextUrl
+					? await axios.get(this.paginationNextUrl)
+					: await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
 				// Update state according to API response
-				if (!this.paginationCurrent) {
+				if (!this.paginationCurrentUrl) {
 					this.files = {}
 					this.ordered = []
 				}

From bcc894dc98af7569ace322795bd0fe5e26545506 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 12:57:50 -0300
Subject: [PATCH 33/48] fix: prevent infinity loop when use
 IntersectionObserver

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js | 63 +++++++++++++++++++++++++++-------------------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/store/files.js b/src/store/files.js
index 4bdef5ae98..2aa178892a 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -29,10 +29,8 @@ export const useFilesStore = function(...args) {
 				filterActive: 'all',
 				canRequestSign: loadState('libresign', 'can_request_sign', false),
 				ordered: [],
-				paginationCurrentUrl: '',
 				paginationNextUrl: '',
-				paginationLastUrl: '',
-				paginationLength: '',
+				loadedAll: false,
 			}
 		},
 
@@ -226,44 +224,57 @@ export const useFilesStore = function(...args) {
 				}
 			},
 			async getAllFiles(filter) {
-				// Build filter params object
-				if (!filter) filter = {}
+				if (this.loading || this.loadedAll) {
+					return this.files
+				}
+				this.loading = true
+				const url = !this.paginationNextUrl
+					? generateOcsUrl('/apps/libresign/api/v1/file/list')
+					: this.paginationNextUrl
+
+				const urlObj = new URL(url)
+				const params = new URLSearchParams(urlObj.search)
+
+				if (filter) {
+					for (const [key, value] of Object.entries(filter)) {
+						params.set(key, value)
+					}
+				}
 				const { chips } = useFiltersStore()
 				if (chips?.status?.length) {
-					filter.status = chips.status.map(c => c.id)
+					params.set('status', chips.status.map(c => c.id))
 				}
 				if (chips?.modified?.length) {
 					const { start, end } = chips.modified[0]
-					filter.start = Math.floor(start / 1000)
-					filter.end = Math.floor(end / 1000)
+					params.set('start', Math.floor(start / 1000))
+					params.set('end', Math.floor(end / 1000))
 				}
 				const { sortingMode, sortingDirection } = useFilesSortingStore()
 				if (sortingMode) {
-					filter.sortBy = sortingMode
+					params.set('sortBy', sortingMode)
 				}
 				if (sortingDirection) {
-					filter.sortDirection = sortingDirection
+					params.set('sortDirection', sortingDirection)
 				}
 
-				// Call API
-				const response = this.paginationNextUrl
-					? await axios.get(this.paginationNextUrl)
-					: await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
-				// Update state according to API response
-				if (!this.paginationCurrentUrl) {
-					this.files = {}
-					this.ordered = []
-				}
+				urlObj.search = params.toString()
+
+				const response = await axios.get(urlObj.toString())
+				this.paginationNextUrl = response.data.ocs.data.pagination.next
+				this.loadedAll = !this.paginationNextUrl
+				this.files = {}
+				this.ordered = []
 				response.data.ocs.data.data.forEach(file => {
 					this.addFile(file)
 				})
-				const currentPaginationParams = new URLSearchParams(response.data.ocs.data.pagination.current.split('?')[1])
-				this.paginationCurrent = currentPaginationParams.get('page')
-				this.paginationLength = currentPaginationParams.get('length')
-				this.paginationNext = new URLSearchParams(response.data.ocs.data.pagination.next.split('?')[1]).get('page')
-				this.paginationLast = new URLSearchParams(response.data.ocs.data.pagination.last.split('?')[1]).get('page')
+				this.loading = false
 				return this.files
 			},
+			async updateAllFiles() {
+				this.paginationNext = null
+				this.loadedAll = false
+				return this.getAllFiles()
+			},
 			filesSorted() {
 				return this.ordered.map(key => this.files[key])
 			},
@@ -291,8 +302,8 @@ export const useFilesStore = function(...args) {
 
 	// Make sure we only register the listeners once
 	if (!filesStore._initialized) {
-		subscribe('libresign:filters:update', filesStore.getAllFiles)
-		subscribe('libresign:sorting:update', filesStore.getAllFiles)
+		subscribe('libresign:filters:update', filesStore.updateAllFiles)
+		subscribe('libresign:sorting:update', filesStore.updateAllFiles)
 		filesStore._initialized = true
 	}
 

From ad9c5bc9e92c33b1976fa9171d43e1399b732f39 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 12:58:32 -0300
Subject: [PATCH 34/48] fix: linter

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js                            |  2 +-
 .../FilesList/FileEntry/FileEntryActions.vue  | 20 ++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/store/files.js b/src/store/files.js
index 2aa178892a..bfa21dbc3d 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -212,7 +212,7 @@ export const useFilesStore = function(...args) {
 			async delete(file) {
 				file = this.getFile(file)
 				if (file?.uuid !== undefined) {
-					const response = await axios.delete(generateOcsUrl('/apps/libresign/api/v1/sign/file_id/{fileId}', {
+					await axios.delete(generateOcsUrl('/apps/libresign/api/v1/sign/file_id/{fileId}', {
 						fileId: file.nodeId,
 					}))
 				}
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index fbc2f9ecfb..7258328636 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -147,7 +147,7 @@ export default {
 			this.openedMenu = null
 			this.sidebarStore.hideSidebar()
 			if (action.id === 'sign') {
-				const sign_uuid = this.source.signers
+				const signUuid = this.source.signers
 					.reduce((accumulator, signer) => {
 						if (signer.me) {
 							return signer.sign_uuid
@@ -155,14 +155,20 @@ export default {
 						return accumulator
 					}, '')
 				this.signStore.setDocumentToSign(this.source)
-				this.$router.push({ name: 'SignPDF', params: {
-					uuid: sign_uuid
-				}})
+				this.$router.push({
+					name: 'SignPDF',
+					params: {
+						uuid: signUuid,
+					},
+				})
 				this.filesStore.selectFile(this.source.nodeId)
 			} else if (action.id === 'validate') {
-				this.$router.push({ name: 'ValidationFile', params: {
-					uuid: this.source.uuid,
-				} })
+				this.$router.push({
+					name: 'ValidationFile',
+					params: {
+						uuid: this.source.uuid,
+					},
+				})
 			} else if (action.id === 'delete') {
 				this.confirmDelete = true
 			}

From 0fd434c30b6cc3e43680e0c42fff413c967e748d Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 13:04:08 -0300
Subject: [PATCH 35/48] chore: remove timeline

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/Components/LeftSidebar/LeftSidebar.vue |  10 +-
 src/router/router.js                       |   5 -
 src/store/files.js                         |  18 ---
 src/views/Timeline/Timeline.vue            | 150 ---------------------
 4 files changed, 1 insertion(+), 182 deletions(-)
 delete mode 100644 src/views/Timeline/Timeline.vue

diff --git a/src/Components/LeftSidebar/LeftSidebar.vue b/src/Components/LeftSidebar/LeftSidebar.vue
index 9b24041108..c97059d599 100644
--- a/src/Components/LeftSidebar/LeftSidebar.vue
+++ b/src/Components/LeftSidebar/LeftSidebar.vue
@@ -15,17 +15,9 @@
 					<FileSignIcon :size="20" />
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem id="timeline"
-				:to="{ name: 'timeline' }"
-				:name="t('libresign', 'Files')"
-				@click="unselectFile">
-				<template #icon>
-					<FolderIcon :size="20" />
-				</template>
-			</NcAppNavigationItem>
 			<NcAppNavigationItem id="fileslist"
 				:to="{ name: 'fileslist' }"
-				:name="t('libresign', 'New files')"
+				:name="t('libresign', 'Files')"
 				@click="unselectFile">
 				<template #icon>
 					<FolderIcon :size="20" />
diff --git a/src/router/router.js b/src/router/router.js
index bec603b178..ca66b65f8c 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -136,11 +136,6 @@ const router = new Router({
 			component: () => import('../views/Validation.vue'),
 			props: true,
 		},
-		{
-			path: '/f/timeline/sign',
-			name: 'timeline',
-			component: () => import('../views/Timeline/Timeline.vue'),
-		},
 		{
 			path: '/f/filelist/sign',
 			name: 'fileslist',
diff --git a/src/store/files.js b/src/store/files.js
index bfa21dbc3d..5514c9586a 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -26,7 +26,6 @@ export const useFilesStore = function(...args) {
 				selectedNodeId: 0,
 				identifyingSigner: false,
 				loading: false,
-				filterActive: 'all',
 				canRequestSign: loadState('libresign', 'can_request_sign', false),
 				ordered: [],
 				paginationNextUrl: '',
@@ -278,23 +277,6 @@ export const useFilesStore = function(...args) {
 			filesSorted() {
 				return this.ordered.map(key => this.files[key])
 			},
-			filter(type) {
-				this.filterActive = type
-				if (type === 'pending') {
-					return Object.values(this.files).filter(
-						(a) => (a.status === 1 || a.status === 2)).sort(
-						(a, b) => (a.request_date < b.request_date) ? 1 : -1)
-				}
-				if (type === 'signed') {
-					return Object.values(this.files).filter(
-						(a) => (a.status === 3)).sort(
-						(a, b) => (a.request_date < b.request_date) ? 1 : -1)
-				}
-				if (type === 'all') {
-					this.filterActive = 'all'
-					return Object.values(this.files).sort((a, b) => (a.request_date < b.request_date) ? 1 : -1)
-				}
-			},
 		},
 	})
 
diff --git a/src/views/Timeline/Timeline.vue b/src/views/Timeline/Timeline.vue
deleted file mode 100644
index 3a4617e26d..0000000000
--- a/src/views/Timeline/Timeline.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<div class="container-timeline">
-		<div class="content-timeline">
-			<TopBar :sidebar-toggle="true">
-				<template #filter>
-					<div class="filtered">
-						<a :class="filesStore.filterActive === 'all' ? 'allFiles active' : 'allFiles'" @click="changeFilter('all')">
-							{{ t('libresign', 'All Files') }}
-						</a>
-						<a :class="filesStore.filterActive === 'pending' ? 'pending active': 'pending'" @click="changeFilter('pending')">
-							{{ t('libresign', 'Pending') }}
-						</a>
-						<a :class="filesStore.filterActive === 'signed' ? 'signed active' : 'signed'" @click="changeFilter('signed')">
-							{{ t('libresign', 'Signed') }}
-						</a>
-					</div>
-				</template>
-			</TopBar>
-			<ul v-if="emptyContentFile ===false">
-				<File v-for="file in fileList"
-					:key="file.nodeId"
-					:node-id="file.nodeId"
-					:class="{'file-details': true, 'active': file.nodeId === filesStore.file?.file?.nodeId}" />
-			</ul>
-			<NcEmptyContent v-else
-				:name="t('libresign', 'There are no documents')">
-				<template #icon>
-					<FolderIcon />
-				</template>
-			</NcEmptyContent>
-		</div>
-	</div>
-</template>
-
-<script>
-import FolderIcon from 'vue-material-design-icons/Folder.vue'
-
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-
-import File from '../../Components/File/File.vue'
-import TopBar from '../../Components/TopBar/TopBar.vue'
-
-import { useFilesStore } from '../../store/files.js'
-
-export default {
-	name: 'Timeline',
-	components: {
-		TopBar,
-		File,
-		NcEmptyContent,
-		FolderIcon,
-	},
-	setup() {
-		const filesStore = useFilesStore()
-		return { filesStore }
-	},
-	data() {
-		return {
-			loading: false,
-			filesFiltered: [],
-		}
-	},
-	computed: {
-		fileList: {
-			get() {
-				return this.filesFiltered.slice().sort(
-					(a, b) => (a.request_date < b.request_date) ? 1 : -1,
-				)
-			},
-			set(value) {
-				this.filesFiltered = value
-			},
-		},
-		emptyContentFile() {
-			return this.fileList.length <= 0
-		},
-	},
-	async created() {
-		await this.filesStore.getAllFiles()
-		this.changeFilter('all')
-	},
-	methods: {
-		changeFilter(type) {
-			this.fileList = this.filesStore.filter(type)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.container-timeline{
-	display: flex;
-	width: 100%;
-	justify-content: center;
-	flex-direction: row;
-
-	.content-timeline{
-		display: flex;
-		width: 100%;
-		flex-direction: column;
-
-		.filtered {
-			display: flex;
-			justify-content: flex-end;
-			padding: 5px;
-
-			a {
-				padding: 6px;
-				background: rgba(206, 206, 206, 0.3);
-			}
-
-			.signed{
-				border-radius: 0 10px 10px 0;
-			}
-
-			.allFiles{
-				border-radius: 10px 0 0 10px;
-			}
-
-			.active {
-				background: darken(rgba(206, 206, 206, 0.3), 20%)
-			}
-		}
-
-		.active {
-			// WCAG AA compliant
-			background-color: var(--color-background-hover);
-			// text-maxcontrast have been designed to pass WCAG AA over
-			// a white background, we need to adjust then.
-			--color-text-maxcontrast: var(--color-main-text);
-			> * {
-				--color-border: var(--color-border-dark);
-			}
-			& {
-				border-radius: 10px;
-			}
-		}
-
-		ul{
-			display: flex;
-			width: 100%;
-			flex-wrap: wrap;
-		}
-	}
-}
-</style>

From 2388b319ed4e93e2c8838bba04b6e11ed0f58c1b Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 13:10:26 -0300
Subject: [PATCH 36/48] chore: phpcs fix

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 lib/Helper/Pagination.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/Helper/Pagination.php b/lib/Helper/Pagination.php
index d5a779918c..96d17ffe8a 100644
--- a/lib/Helper/Pagination.php
+++ b/lib/Helper/Pagination.php
@@ -9,8 +9,8 @@
 namespace OCA\Libresign\Helper;
 
 use OCA\Libresign\Db\PagerFantaQueryAdapter;
-use OCP\IURLGenerator;
 use OCP\DB\QueryBuilder\IQueryBuilder;
+use OCP\IURLGenerator;
 use Pagerfanta\Pagerfanta;
 
 class Pagination extends Pagerfanta {

From 0b4b535b0b1eb09d6637d09a3251c21e6a97fa8b Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 13:50:31 -0300
Subject: [PATCH 37/48] fix: SPDX

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/views/FilesList/FileEntry/FileEntry.vue                  | 1 -
 src/views/FilesList/FileEntry/FileEntryActions.vue           | 4 ++++
 src/views/FilesList/FileEntry/FileEntryGrid.vue              | 1 -
 src/views/FilesList/FileEntry/FileEntryMixin.js              | 5 +++++
 src/views/FilesList/FileEntry/FileEntryName.vue              | 4 ++++
 src/views/FilesList/FileEntry/FileEntryPreview.vue           | 4 ++++
 src/views/FilesList/FileEntry/FileEntryStatus.vue            | 4 ++++
 src/views/FilesList/FileListFilter/FileListFilter.vue        | 4 ++++
 .../FilesList/FileListFilter/FileListFilterModified.vue      | 4 ++++
 src/views/FilesList/FileListFilter/FileListFilterStatus.vue  | 4 ++++
 src/views/FilesList/FileListFilters.vue                      | 4 ++++
 src/views/FilesList/FilesList.vue                            | 4 ++++
 src/views/FilesList/FilesListVirtual.vue                     | 4 ++++
 src/views/FilesList/VirtualList.vue                          | 4 ++++
 14 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
index 540c9b7b89..dc7512ba02 100644
--- a/src/views/FilesList/FileEntry/FileEntry.vue
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -2,7 +2,6 @@
   - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-
 <template>
 	<tr class="files-list__row"
 		@contextmenu="onRightClick">
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index 7258328636..6804ee45e6 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<td class="files-list__row-actions">
 		<!-- Menu actions -->
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index 951f4e2b61..e810debe8f 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -2,7 +2,6 @@
   - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-
 <template>
 	<tr class="files-list__row"
 		@contextmenu="onRightClick">
diff --git a/src/views/FilesList/FileEntry/FileEntryMixin.js b/src/views/FilesList/FileEntry/FileEntryMixin.js
index 5eb1f78272..8cbcbd6985 100644
--- a/src/views/FilesList/FileEntry/FileEntryMixin.js
+++ b/src/views/FilesList/FileEntry/FileEntryMixin.js
@@ -1,3 +1,8 @@
+/**
+ * SPDX-FileCopyrightText: 2021 LibreCode coop and LibreCode contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
 export default {
 	props: {
 		source: {
diff --git a/src/views/FilesList/FileEntry/FileEntryName.vue b/src/views/FilesList/FileEntry/FileEntryName.vue
index 578a82f54e..bb2ddc4baa 100644
--- a/src/views/FilesList/FileEntry/FileEntryName.vue
+++ b/src/views/FilesList/FileEntry/FileEntryName.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<component :is="linkTo.is"
 		ref="basename"
diff --git a/src/views/FilesList/FileEntry/FileEntryPreview.vue b/src/views/FilesList/FileEntry/FileEntryPreview.vue
index 5ea56f7725..d9774d7820 100644
--- a/src/views/FilesList/FileEntry/FileEntryPreview.vue
+++ b/src/views/FilesList/FileEntry/FileEntryPreview.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<span class="files-list__row-icon">
 		<!-- Decorative images, should not be aria documented -->
diff --git a/src/views/FilesList/FileEntry/FileEntryStatus.vue b/src/views/FilesList/FileEntry/FileEntryStatus.vue
index 88a4ed6c66..349a445df1 100644
--- a/src/views/FilesList/FileEntry/FileEntryStatus.vue
+++ b/src/views/FilesList/FileEntry/FileEntryStatus.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<div class="enDot">
 		<div :class="statusText !== 'none' ? 'dot ' + statusToClass(status) : '' "
diff --git a/src/views/FilesList/FileListFilter/FileListFilter.vue b/src/views/FilesList/FileListFilter/FileListFilter.vue
index d235074b5e..9fe6ecd121 100644
--- a/src/views/FilesList/FileListFilter/FileListFilter.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilter.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<NcActions force-menu
 		:type="isActive ? 'secondary' : 'tertiary'"
diff --git a/src/views/FilesList/FileListFilter/FileListFilterModified.vue b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
index 1ec88dd242..2c6ef22cd3 100644
--- a/src/views/FilesList/FileListFilter/FileListFilterModified.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<FileListFilter :is-active="isActive"
 		:filter-name="t('libresign', 'Modified')"
diff --git a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
index 6af5c717ce..9e386ac571 100644
--- a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<FileListFilter class="file-list-filter-status"
 		:is-active="isActive"
diff --git a/src/views/FilesList/FileListFilters.vue b/src/views/FilesList/FileListFilters.vue
index 1f24a1420f..4dab95821a 100644
--- a/src/views/FilesList/FileListFilters.vue
+++ b/src/views/FilesList/FileListFilters.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<div class="file-list-filters">
 		<div class="file-list-filters__filter">
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
index f527c5f974..9fa200a825 100644
--- a/src/views/FilesList/FilesList.vue
+++ b/src/views/FilesList/FilesList.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<NcAppContent :page-heading="t('libresign', 'Files')">
 		<div class="files-list__header">
diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
index e4a53adb31..6d13924bc1 100644
--- a/src/views/FilesList/FilesListVirtual.vue
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<VirtualList :data-component="userConfigStore.grid_view ? FileEntryGrid : FileEntry"
 		:loading="loading">
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index 49b51245b5..e42b5ac773 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/src/views/FilesList/VirtualList.vue
@@ -1,3 +1,7 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<div class="files-list">
 		<div class="files-list__filters">

From 55c4f027085f0a574028626899e4c921c685aeb7 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 14:04:54 -0300
Subject: [PATCH 38/48] fix: prevent add duplicated element to array

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/store/files.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/store/files.js b/src/store/files.js
index 5514c9586a..b15d6a7ee3 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -37,7 +37,9 @@ export const useFilesStore = function(...args) {
 			addFile(file) {
 				set(this.files, file.nodeId, file)
 				this.hydrateFile(file.nodeId)
-				this.ordered.push(file.nodeId)
+				if (!this.ordered.includes(file.nodeId)) {
+					this.ordered.push(file.nodeId)
+				}
 			},
 			selectFile(nodeId) {
 				this.selectedNodeId = nodeId ?? 0

From 320acdb6269a237eecddbfc089d79e6a2a6b62bc Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 14:28:37 -0300
Subject: [PATCH 39/48] fix: copy pdfworker to LibreSign

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 package-lock.json |  1 +
 package.json      |  1 +
 webpack.config.js | 11 +++++++++++
 3 files changed, 13 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 5a47c132c4..7cecdac817 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/vue": "^8.19.0",
         "blueimp-md5": "^2.19.0",
+        "copy-webpack-plugin": "^12.0.2",
         "crypto-js": "^4.2.0",
         "js-confetti": "^0.12.0",
         "pinia": "^2.2.6",
diff --git a/package.json b/package.json
index 1c9f622b1c..ea81a5aac8 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/vue": "^8.19.0",
     "blueimp-md5": "^2.19.0",
+    "copy-webpack-plugin": "^12.0.2",
     "crypto-js": "^4.2.0",
     "js-confetti": "^0.12.0",
     "pinia": "^2.2.6",
diff --git a/webpack.config.js b/webpack.config.js
index a5aec7fbc6..c00c2aa84f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,6 +7,7 @@ const path = require('path')
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
 const { EsbuildPlugin } = require('esbuild-loader')
 const nextcloudWebpackConfig = require('@nextcloud/webpack-vue-config')
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = merge(nextcloudWebpackConfig, {
 	entry: {
@@ -70,4 +71,14 @@ module.exports = merge(nextcloudWebpackConfig, {
 		],
 	},
 	cache: true,
+	plugins: [
+		new CopyPlugin({
+			patterns: [
+				{
+					from: 'node_modules/@libresign/vue-pdf-editor/dist/pdf.worker.min.mjs',
+					to: '',
+				},
+			],
+		}),
+	],
 })

From 60f8ed8cd896028b1c7cce559d1d736abf4839d6 Mon Sep 17 00:00:00 2001
From: Victor Bianchi <vbianchi@protonmail.com>
Date: Thu, 31 Oct 2024 18:42:23 -0300
Subject: [PATCH 40/48] feat: integrate files filtering and pagination, fix
 IntersectionObserver

Signed-off-by: Victor Bianchi <vbianchi@protonmail.com>
---
 lib/Helper/Pagination.php           |  2 +-
 package-lock.json                   |  1 +
 package.json                        |  1 +
 src/store/files.js                  | 20 ++++++++++------
 src/views/FilesList/FilesList.vue   |  7 +-----
 src/views/FilesList/VirtualList.vue | 36 +++++++++++++++++++----------
 6 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/lib/Helper/Pagination.php b/lib/Helper/Pagination.php
index 96d17ffe8a..1999e82ba3 100644
--- a/lib/Helper/Pagination.php
+++ b/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)
 		);
diff --git a/package-lock.json b/package-lock.json
index 7cecdac817..512ea69e9a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,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",
         "pinia": "^2.2.6",
         "v-perfect-signature": "^1.4.0",
diff --git a/package.json b/package.json
index ea81a5aac8..a61b064249 100644
--- a/package.json
+++ b/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",
     "pinia": "^2.2.6",
     "v-perfect-signature": "^1.4.0",
diff --git a/src/store/files.js b/src/store/files.js
index b15d6a7ee3..82d05b32af 100644
--- a/src/store/files.js
+++ b/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()
 			},
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
index 9fa200a825..09b4c92737 100644
--- a/src/views/FilesList/FilesList.vue
+++ b/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()
 		},
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index e42b5ac773..c9dd46320e 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/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>

From ca1ee55c5b44469dba5800a69f5bace478125e30 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 19:24:11 -0300
Subject: [PATCH 41/48] fix: integration tests

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 tests/integration/features/file/list.feature | 22 ++++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/tests/integration/features/file/list.feature b/tests/integration/features/file/list.feature
index 5ce67f8f59..8a6f4ee284 100644
--- a/tests/integration/features/file/list.feature
+++ b/tests/integration/features/file/list.feature
@@ -75,10 +75,10 @@ Feature: file-list
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | /file/list?page=1&length=2 |
-      | (jq).ocs.data.pagination.next    | /file/list?page=2&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.next    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=2&length=2 |
       | (jq).ocs.data.pagination.prev    | null                       |
-      | (jq).ocs.data.pagination.last    | /file/list?page=3&length=2 |
+      | (jq).ocs.data.pagination.last    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
       | (jq).ocs.data.pagination.first   | null                       |
     # second page
     When sending "get" to ocs "/apps/libresign/api/v1/file/list?length=2&page=2"
@@ -86,19 +86,19 @@ Feature: file-list
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | /file/list?page=2&length=2 |
-      | (jq).ocs.data.pagination.next    | /file/list?page=3&length=2 |
-      | (jq).ocs.data.pagination.prev    | /file/list?page=1&length=2 |
-      | (jq).ocs.data.pagination.last    | /file/list?page=3&length=2 |
-      | (jq).ocs.data.pagination.first   | /file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=2&length=2 |
+      | (jq).ocs.data.pagination.next    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
+      | (jq).ocs.data.pagination.prev    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.last    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
+      | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=1&length=2 |
     # last page
     When sending "get" to ocs "/apps/libresign/api/v1/file/list?length=2&page=3"
     Then the response should be a JSON array with the following mandatory values
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | /file/list?page=3&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
       | (jq).ocs.data.pagination.next    | null                       |
-      | (jq).ocs.data.pagination.prev    | /file/list?page=2&length=2 |
+      | (jq).ocs.data.pagination.prev    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=2&length=2 |
       | (jq).ocs.data.pagination.last    | null                       |
-      | (jq).ocs.data.pagination.first   | /file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=1&length=2 |

From 55177fa37cdad416e48189a98228566892316f24 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 19:48:08 -0300
Subject: [PATCH 42/48] refactor: make more readdable

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 lib/Helper/Pagination.php | 48 +++++++++++++++++++++------------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/lib/Helper/Pagination.php b/lib/Helper/Pagination.php
index 1999e82ba3..8ce906b75d 100644
--- a/lib/Helper/Pagination.php
+++ b/lib/Helper/Pagination.php
@@ -33,29 +33,33 @@ public function setRouteName(string $routeName = ''): self {
 
 	public function getPagination(?int $page, ?int $length, array $filter = []): array {
 		$this->setMaxPerPage($length);
-		$pagination['total'] = $this->count();
-		if ($pagination['total'] > $length) {
-			$pagination['current'] = $this->linkToRoute($page, $length, $filter);
-			$pagination['next'] = $this->hasNextPage()
-				? $this->linkToRoute($this->getNextPage(), $length, $filter)
-				: null;
-			$pagination['prev'] = $this->hasPreviousPage()
-				? $this->linkToRoute($this->getPreviousPage(), $length, $filter)
-				: null;
-			$pagination['last'] = $this->hasNextPage()
-				? $this->linkToRoute($this->getNbPages(), $length, $filter)
-				: null;
-			$pagination['first'] = $this->hasPreviousPage()
-				? $this->linkToRoute(1, $length, $filter)
-				: null;
-		} else {
-			$pagination['current'] = null;
-			$pagination['next'] = null;
-			$pagination['prev'] = null;
-			$pagination['last'] = null;
-			$pagination['first'] = null;
+		$total = $this->count();
+		if ($total > $length) {
+			return [
+				'total' => $total,
+				'current' => $this->linkToRoute($page, $length, $filter),
+				'next' => $this->hasNextPage()
+					? $this->linkToRoute($this->getNextPage(), $length, $filter)
+					: null,
+				'prev' => $this->hasPreviousPage()
+					? $this->linkToRoute($this->getPreviousPage(), $length, $filter)
+					: null,
+				'last' => $this->hasNextPage()
+					? $this->linkToRoute($this->getNbPages(), $length, $filter)
+					: null,
+				'first' => $this->hasPreviousPage()
+					? $this->linkToRoute(1, $length, $filter)
+					: null,
+			];
 		}
-		return $pagination;
+		return [
+			'total' => $total,
+			'current' => null,
+			'next' => null,
+			'prev' => null,
+			'last' => null,
+			'first' => null,
+		];
 	}
 
 	private function linkToRoute(int $page, int $length, array $filter): string {

From 03fc7bbd3bac25e7720c269321801d761421d73b Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 20:40:58 -0300
Subject: [PATCH 43/48] refactor: make more readdable

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 lib/Helper/Pagination.php | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/lib/Helper/Pagination.php b/lib/Helper/Pagination.php
index 8ce906b75d..27add23cde 100644
--- a/lib/Helper/Pagination.php
+++ b/lib/Helper/Pagination.php
@@ -31,25 +31,17 @@ public function setRouteName(string $routeName = ''): self {
 		return $this;
 	}
 
-	public function getPagination(?int $page, ?int $length, array $filter = []): array {
+	public function getPagination(int $page, int $length, array $filter = []): array {
 		$this->setMaxPerPage($length);
 		$total = $this->count();
 		if ($total > $length) {
 			return [
 				'total' => $total,
-				'current' => $this->linkToRoute($page, $length, $filter),
-				'next' => $this->hasNextPage()
-					? $this->linkToRoute($this->getNextPage(), $length, $filter)
-					: null,
-				'prev' => $this->hasPreviousPage()
-					? $this->linkToRoute($this->getPreviousPage(), $length, $filter)
-					: null,
-				'last' => $this->hasNextPage()
-					? $this->linkToRoute($this->getNbPages(), $length, $filter)
-					: null,
-				'first' => $this->hasPreviousPage()
-					? $this->linkToRoute(1, $length, $filter)
-					: null,
+				'current' => $this->linkToRoute(true, $page, $length, $filter),
+				'next' => $this->linkToRoute($this->hasNextPage(), 'getNextPage', $length, $filter),
+				'prev' => $this->linkToRoute($this->hasPreviousPage(), 'getPreviousPage', $length, $filter),
+				'last' => $this->linkToRoute($this->hasNextPage(), 'getNbPages', $length, $filter),
+				'first' => $this->linkToRoute($this->hasPreviousPage(), 1, $length, $filter),
 			];
 		}
 		return [
@@ -62,10 +54,17 @@ public function getPagination(?int $page, ?int $length, array $filter = []): arr
 		];
 	}
 
-	private function linkToRoute(int $page, int $length, array $filter): string {
-		return $this->urlGenerator->linkToRouteAbsolute(
+	private function linkToRoute(bool $condition, int|string $page, int $length, array $filter): ?string {
+		if (!$condition) {
+			return null;
+		}
+		if (is_string($page)) {
+			$page = $this->$page();
+		}
+		$url = $this->urlGenerator->linkToRouteAbsolute(
 			$this->routeName,
 			array_merge(['page' => $page, 'length' => $length, 'apiVersion' => 'v1'], $filter)
 		);
+		return $url;
 	}
 }

From 1422c9e2f2d1357415add6612195c1212af1fcfd Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 20:41:12 -0300
Subject: [PATCH 44/48] fix: query string order

This asort change the order of parameters:

https://github.com/nextcloud/server/blob/bb1e2f9d9d51e83da6ee0da9ce5fb2e415542119/lib/private/Route/CachingRouter.php#L51

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 tests/integration/features/file/list.feature | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/integration/features/file/list.feature b/tests/integration/features/file/list.feature
index 8a6f4ee284..b3524d238b 100644
--- a/tests/integration/features/file/list.feature
+++ b/tests/integration/features/file/list.feature
@@ -92,7 +92,7 @@ Feature: file-list
       | (jq).ocs.data.pagination.last    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
       | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=1&length=2 |
     # last page
-    When sending "get" to ocs "/apps/libresign/api/v1/file/list?length=2&page=3"
+    When sending "get" to ocs "/apps/libresign/api/v1/file/list?page=3&length=2"
     Then the response should be a JSON array with the following mandatory values
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |

From b2a2df7c1b705bf508e5fcac5b0d55d5ddd93edc Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 20:55:46 -0300
Subject: [PATCH 45/48] chore: remove delete from filter

We haven't this status implemented yet

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/views/FilesList/FileListFilter/FileListFilterStatus.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
index 9e386ac571..6f6b2c2443 100644
--- a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
@@ -25,7 +25,6 @@
 
 <script>
 import { mdiListStatus } from '@mdi/js'
-import svgDelete from '@mdi/svg/svg/delete.svg?raw'
 import svgFile from '@mdi/svg/svg/file.svg?raw'
 import svgFractionOneHalf from '@mdi/svg/svg/fraction-one-half.svg?raw'
 import svgSignatureFreehand from '@mdi/svg/svg/signature-freehand.svg?raw'
@@ -80,11 +79,6 @@ export default {
 					icon: colorize(svgSignatureFreehand, '#A0C4FF'),
 					label: t('libresign', 'signed'),
 				},
-				{
-					id: 4,
-					icon: colorize(svgDelete, '#FFB2B2'),
-					label: t('libresign', 'deleted'),
-				},
 			],
 		}
 	},

From 31f502869ec2a07aa63a0781dbd6b7efc6f6021c Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Thu, 31 Oct 2024 21:45:01 -0300
Subject: [PATCH 46/48] fix: order url parameters of pagination

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 lib/Helper/Pagination.php                    | 14 ++++++++++++++
 tests/integration/features/file/list.feature | 14 +++++++-------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/lib/Helper/Pagination.php b/lib/Helper/Pagination.php
index 27add23cde..c0124b80b5 100644
--- a/lib/Helper/Pagination.php
+++ b/lib/Helper/Pagination.php
@@ -65,6 +65,20 @@ private function linkToRoute(bool $condition, int|string $page, int $length, arr
 			$this->routeName,
 			array_merge(['page' => $page, 'length' => $length, 'apiVersion' => 'v1'], $filter)
 		);
+		$url = $this->sortParameters($url);
+		return $url;
+	}
+
+	/**
+	 * This is necessary to fix problem at integration tests because the method linkToRoute change the order of parameters
+	 */
+	private function sortParameters(?string $url): ?string {
+		if (!$url) {
+			return $url;
+		}
+		parse_str(parse_url($url, PHP_URL_QUERY), $query);
+		ksort($query);
+		$url = strtok($url, '?') . '?' . http_build_query($query);
 		return $url;
 	}
 }
diff --git a/tests/integration/features/file/list.feature b/tests/integration/features/file/list.feature
index b3524d238b..8f59a45a16 100644
--- a/tests/integration/features/file/list.feature
+++ b/tests/integration/features/file/list.feature
@@ -75,8 +75,8 @@ Feature: file-list
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=1&length=2 |
-      | (jq).ocs.data.pagination.next    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=2&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
+      | (jq).ocs.data.pagination.next    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=2 |
       | (jq).ocs.data.pagination.prev    | null                       |
       | (jq).ocs.data.pagination.last    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
       | (jq).ocs.data.pagination.first   | null                       |
@@ -86,11 +86,11 @@ Feature: file-list
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=2&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=2 |
       | (jq).ocs.data.pagination.next    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
-      | (jq).ocs.data.pagination.prev    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.prev    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
       | (jq).ocs.data.pagination.last    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
-      | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
     # last page
     When sending "get" to ocs "/apps/libresign/api/v1/file/list?page=3&length=2"
     Then the response should be a JSON array with the following mandatory values
@@ -99,6 +99,6 @@ Feature: file-list
       | (jq).ocs.data.pagination.total   | 5                          |
       | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
       | (jq).ocs.data.pagination.next    | null                       |
-      | (jq).ocs.data.pagination.prev    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=2&length=2 |
+      | (jq).ocs.data.pagination.prev    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=2 |
       | (jq).ocs.data.pagination.last    | null                       |
-      | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |

From bda9c902e43db03c880f83e942a4a36647a9f780 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Tue, 5 Nov 2024 16:03:58 -0300
Subject: [PATCH 47/48] feat: make possible delete file too

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 lib/Controller/FileController.php             | 42 +++++++++++++++++++
 lib/Service/FileService.php                   | 16 +++++++
 src/store/files.js                            |  7 +++-
 .../FilesList/FileEntry/FileEntryActions.vue  | 27 ++++++++----
 4 files changed, 83 insertions(+), 9 deletions(-)

diff --git a/lib/Controller/FileController.php b/lib/Controller/FileController.php
index e9b2757375..b91f13e9f1 100644
--- a/lib/Controller/FileController.php
+++ b/lib/Controller/FileController.php
@@ -391,4 +391,46 @@ public function save(array $file, string $name = '', array $settings = []): Data
 			);
 		}
 	}
+
+	/**
+	 * Delete File
+	 *
+	 * This will delete the file and all data
+	 *
+	 * @param integer $fileId Node id of a Nextcloud file
+	 * @return DataResponse<Http::STATUS_OK, array{message: string}, array{}>|DataResponse<Http::STATUS_UNAUTHORIZED, array{message: string}, array{}>|DataResponse<Http::STATUS_UNPROCESSABLE_ENTITY, array{action: integer, errors: string[]}, array{}>
+	 *
+	 * 200: OK
+	 * 401: Failed
+	 * 422: Failed
+	 */
+	#[NoAdminRequired]
+	#[NoCSRFRequired]
+	#[RequireManager]
+	#[ApiRoute(verb: 'DELETE', url: '/api/{apiVersion}/file/file_id/{fileId}', requirements: ['apiVersion' => '(v1)'])]
+	public function deleteAllRequestSignatureUsingFileId(int $fileId): DataResponse {
+		try {
+			$data = [
+				'userManager' => $this->userSession->getUser(),
+				'file' => [
+					'fileId' => $fileId
+				]
+			];
+			$this->validateHelper->validateExistingFile($data);
+			$this->fileService->delete($fileId);
+		} catch (\Throwable $th) {
+			return new DataResponse(
+				[
+					'message' => $th->getMessage(),
+				],
+				Http::STATUS_UNAUTHORIZED
+			);
+		}
+		return new DataResponse(
+			[
+				'message' => $this->l10n->t('Success')
+			],
+			Http::STATUS_OK
+		);
+	}
 }
diff --git a/lib/Service/FileService.php b/lib/Service/FileService.php
index 57ce58d6cc..9d967d2774 100644
--- a/lib/Service/FileService.php
+++ b/lib/Service/FileService.php
@@ -591,4 +591,20 @@ public function getMyLibresignFile(int $nodeId): File {
 			],
 		);
 	}
+
+	public function delete(int $fileId): void {
+		$file = $this->fileMapper->getByFileId($fileId);
+		$this->fileElementService->deleteVisibleElements($file->getId());
+		$list = $this->signRequestMapper->getByFileId($file->getId());
+		foreach ($list as $signRequest) {
+			$this->signRequestMapper->delete($signRequest);
+		}
+		$this->fileMapper->delete($file);
+		if ($file->getSignedNodeId()) {
+			$signedNextcloudFile = $this->folderService->getFileById($file->getSignedNodeId());
+			$signedNextcloudFile->delete();
+		}
+		$nextcloudFile = $this->folderService->getFileById($fileId);
+		$nextcloudFile->delete();
+	}
 }
diff --git a/src/store/files.js b/src/store/files.js
index 82d05b32af..c4d983f5af 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -210,10 +210,13 @@ export const useFilesStore = function(...args) {
 					this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
 				)
 			},
-			async delete(file) {
+			async delete(file, deleteFile) {
 				file = this.getFile(file)
 				if (file?.uuid !== undefined) {
-					await axios.delete(generateOcsUrl('/apps/libresign/api/v1/sign/file_id/{fileId}', {
+					const url = deleteFile
+						? '/apps/libresign/api/v1/file/file_id/{fileId}'
+						: '/apps/libresign/api/v1/sign/file_id/{fileId}'
+					await axios.delete(generateOcsUrl(url, {
 						fileId: file.nodeId,
 					}))
 				}
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
index 6804ee45e6..744ab69d55 100644
--- a/src/views/FilesList/FileEntry/FileEntryActions.vue
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -29,16 +29,23 @@
 		</NcActions>
 		<NcDialog v-if="confirmDelete"
 			:name="t('libresign', 'Confirm')"
-			@closing="confirmDelete = false">
+			:can-close="!deleting"
+			:open.sync="confirmDelete">
 			{{ t('libresign', 'The signature request will be deleted. Do you confirm this action?') }}
+			<NcCheckboxRadioSwitch :checked.sync="deleteFile" type="switch">
+				{{ t('libresign', 'Also delete the file.') }}
+			</NcCheckboxRadioSwitch>
 			<template #actions>
-				<NcButton type="error"
+				<NcButton type="primary"
 					@click="doDelete()">
-					{{ t('libresign', 'Yes') }}
+					<template #icon>
+						<NcLoadingIcon v-if="deleting" :size="20" />
+					</template>
+					{{ t('libresign', 'Ok') }}
 				</NcButton>
-				<NcButton type="primary"
+				<NcButton type="secondary"
 					@click="confirmDelete = false">
-					{{ t('libresign', 'No') }}
+					{{ t('libresign', 'Cancel') }}
 				</NcButton>
 			</template>
 		</NcDialog>
@@ -53,6 +60,7 @@ import svgTextBoxCheck from '@mdi/svg/svg/text-box-check.svg?raw'
 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'
@@ -68,6 +76,7 @@ export default {
 		NcActionButton,
 		NcActions,
 		NcButton,
+		NcCheckboxRadioSwitch,
 		NcDialog,
 		NcIconSvgWrapper,
 		NcLoadingIcon,
@@ -102,6 +111,8 @@ export default {
 		return {
 			enabledMenuActions: [],
 			confirmDelete: false,
+			deleteFile: true,
+			deleting: false,
 		}
 	},
 	computed: {
@@ -180,8 +191,10 @@ export default {
 		registerAction(action) {
 			this.enabledMenuActions = [...this.enabledMenuActions, action]
 		},
-		doDelete() {
-			this.filesStore.delete(this.source)
+		async doDelete() {
+			this.deleting = true
+			await this.filesStore.delete(this.source, this.deleteFile)
+			this.deleting = false
 		},
 	},
 }

From 9f959ee77b05a51da449ca6f0ca6e202ccb36e18 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Tue, 5 Nov 2024 16:48:48 -0300
Subject: [PATCH 48/48] feat: Save file to LibeSign every when a new file is
 uploaded

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 lib/Controller/FileController.php | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/lib/Controller/FileController.php b/lib/Controller/FileController.php
index b91f13e9f1..8b68dcee74 100644
--- a/lib/Controller/FileController.php
+++ b/lib/Controller/FileController.php
@@ -10,6 +10,7 @@
 
 use OCA\Files_Sharing\SharedStorage;
 use OCA\Libresign\AppInfo\Application;
+use OCA\Libresign\Db\File as FileEntity;
 use OCA\Libresign\Db\SignRequestMapper;
 use OCA\Libresign\Exception\LibresignException;
 use OCA\Libresign\Helper\JSActions;
@@ -19,6 +20,7 @@
 use OCA\Libresign\Service\AccountService;
 use OCA\Libresign\Service\FileService;
 use OCA\Libresign\Service\IdentifyMethodService;
+use OCA\Libresign\Service\RequestSignatureService;
 use OCA\Libresign\Service\SessionService;
 use OCP\AppFramework\Db\DoesNotExistException;
 use OCP\AppFramework\Http;
@@ -59,6 +61,7 @@ public function __construct(
 		private SessionService $sessionService,
 		private SignRequestMapper $signRequestMapper,
 		private IdentifyMethodService $identifyMethodService,
+		private RequestSignatureService $requestSignatureService,
 		private AccountService $accountService,
 		private IRootFolder $root,
 		private IPreview $preview,
@@ -370,6 +373,15 @@ public function save(array $file, string $name = '', array $settings = []): Data
 				'file' => $file,
 				'settings' => $settings
 			]);
+			$data = [
+				'file' => [
+					'fileNode' => $node,
+				],
+				'name' => $name,
+				'userManager' => $this->userSession->getUser(),
+				'status' => FileEntity::STATUS_DRAFT,
+			];
+			$file = $this->requestSignatureService->save($data);
 
 			return new DataResponse(
 				[