feat: rewrite file list

Signed-off-by: Vitor Mattos <[email protected]>

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

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