feat: rewrite file list

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

package.json

@@ -23,6 +23,8 @@
     "@fontsource/dancing-script": "^5.1.0",
     "@libresign/vue-pdf-editor": "^1.2.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": "^5.3.7",

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()

src/router/router.js

@@ -156,6 +156,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',

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 })
+		},
+	},
+})

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>

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>