feat(files): Implement files list filters

apps/files/src/components/FileEntry.vue

@@ -89,7 +89,8 @@ import { defineComponent } from 'vue'
 import { formatFileSize } from '@nextcloud/files'
 import moment from '@nextcloud/moment'
 
-import { useNavigation } from '../composables/useNavigation'
+import { useNavigation } from '../composables/useNavigation.ts'
+import { useRouteParameters } from '../composables/useRouteParameters.ts'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useDragAndDropStore } from '../store/dragging.ts'
 import { useFilesStore } from '../store/files.ts'
@@ -134,6 +135,10 @@ export default defineComponent({
 		const renamingStore = useRenamingStore()
 		const selectionStore = useSelectionStore()
 		const { currentView } = useNavigation()
+		const {
+			directory: currentDir,
+			fileId: currentFileId,
+		} = useRouteParameters()
 
 		return {
 			actionsMenuStore,
@@ -142,6 +147,8 @@ export default defineComponent({
 			renamingStore,
 			selectionStore,
 
+			currentDir,
+			currentFileId,
 			currentView,
 		}
 	},

apps/files/src/components/FileEntryGrid.vue

@@ -71,7 +71,8 @@ import { defineComponent } from 'vue'
 
 import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
 
-import { useNavigation } from '../composables/useNavigation'
+import { useNavigation } from '../composables/useNavigation.ts'
+import { useRouteParameters } from '../composables/useRouteParameters.ts'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useDragAndDropStore } from '../store/dragging.ts'
 import { useFilesStore } from '../store/files.ts'
@@ -107,6 +108,10 @@ export default defineComponent({
 		const renamingStore = useRenamingStore()
 		const selectionStore = useSelectionStore()
 		const { currentView } = useNavigation()
+		const {
+			directory: currentDir,
+			fileId: currentFileId,
+		} = useRouteParameters()
 
 		return {
 			actionsMenuStore,
@@ -115,6 +120,8 @@ export default defineComponent({
 			renamingStore,
 			selectionStore,
 
+			currentDir,
+			currentFileId,
 			currentView,
 		}
 	},

apps/files/src/components/FileEntryMixin.ts

@@ -56,17 +56,10 @@ export default defineComponent({
 	},
 
 	computed: {
-		currentDir() {
-			// Remove any trailing slash but leave root slash
-			return (this.$route.query?.dir?.toString() || '/').replace(/^(.+)\/$/, '$1')
-		},
-		currentFileId() {
-			return this.$route.params?.fileid || this.$route.query?.fileid || null
-		},
-
 		fileid() {
 			return this.source.fileid ?? 0
 		},
+
 		uniqueId() {
 			return hashCode(this.source.source)
 		},

apps/files/src/components/FileListFilter/FileListFilter.vue

@@ -0,0 +1,53 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<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 setup lang="ts">
+import { t } from '@nextcloud/l10n'
+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'
+
+defineProps<{
+	isActive: boolean
+	filterName: string
+}>()
+
+defineEmits<{
+	(event: 'reset-filter'): void
+}>()
+</script>
+
+<style scoped>
+.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>

apps/files/src/components/FileListFilter/FileListFilterModified.vue

@@ -0,0 +1,107 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<FileListFilter :is-active="isActive"
+		:filter-name="t('files', '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>
+		<!-- TODO: Custom time range -->
+	</FileListFilter>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import type { ITimePreset } from '../../filters/ModifiedFilter.ts'
+
+import { mdiCalendarRange } from '@mdi/js'
+import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import FileListFilter from './FileListFilter.vue'
+
+export default defineComponent({
+	components: {
+		FileListFilter,
+		NcActionButton,
+		NcIconSvgWrapper,
+	},
+
+	props: {
+		timePresets: {
+			type: Array as PropType<ITimePreset[]>,
+			required: true,
+		},
+	},
+
+	setup() {
+		return {
+			// icons used in template
+			mdiCalendarRange,
+		}
+	},
+
+	data() {
+		return {
+			selectedOption: null as string | null,
+			timeRangeEnd: null as number | null,
+			timeRangeStart: null as number | null,
+		}
+	},
+
+	computed: {
+		/**
+		 * Is the filter currently active
+		 */
+		isActive() {
+			return this.selectedOption !== null
+		},
+
+		currentPreset() {
+			return this.timePresets.find(({ id }) => id === this.selectedOption) ?? null
+		},
+	},
+
+	watch: {
+		selectedOption() {
+			if (this.selectedOption === null) {
+				this.$emit('update:preset')
+			} else {
+				const preset = this.currentPreset
+				this.$emit('update:preset', preset)
+			}
+		},
+	},
+
+	methods: {
+		t,
+
+		resetFilter() {
+			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>

apps/files/src/components/FileListFilter/FileListFilterType.vue

@@ -0,0 +1,110 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<FileListFilter class="file-list-filter-type"
+		:is-active="isActive"
+		:filter-name="t('files', 'Type')"
+		@reset-filter="resetFilter">
+		<template #icon>
+			<NcIconSvgWrapper :path="mdiFile" />
+		</template>
+		<NcActionButton v-for="fileType of typePresets"
+			:key="fileType.id"
+			type="checkbox"
+			:model-value="selectedOptions.includes(fileType)"
+			@click="toggleOption(fileType)">
+			<template #icon>
+				<NcIconSvgWrapper :svg="fileType.icon" />
+			</template>
+			{{ fileType.label }}
+		</NcActionButton>
+	</FileListFilter>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import type { ITypePreset } from '../../filters/TypeFilter.ts'
+
+import { mdiFile } from '@mdi/js'
+import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import FileListFilter from './FileListFilter.vue'
+
+export default defineComponent({
+	name: 'FileListFilterType',
+
+	components: {
+		FileListFilter,
+		NcActionButton,
+		NcIconSvgWrapper,
+	},
+
+	props: {
+		typePresets: {
+			type: Array as PropType<ITypePreset[]>,
+			required: true,
+		},
+	},
+
+	setup() {
+		return {
+			mdiFile,
+			t,
+		}
+	},
+
+	data() {
+		return {
+			selectedOptions: [] as ITypePreset[],
+		}
+	},
+
+	computed: {
+		isActive() {
+			return this.selectedOptions.length > 0
+		},
+	},
+
+	watch: {
+		selectedOptions(newValue, oldValue) {
+			if (this.selectedOptions.length === 0) {
+				if (oldValue.length !== 0) {
+					this.$emit('update:preset')
+				}
+			} else {
+				this.$emit('update:preset', this.selectedOptions)
+			}
+		},
+	},
+
+	methods: {
+		resetFilter() {
+			this.selectedOptions = []
+		},
+
+		/**
+		 * Toggle option from selected option
+		 * @param option The option to toggle
+		 */
+		toggleOption(option: ITypePreset) {
+			const idx = this.selectedOptions.indexOf(option)
+			if (idx !== -1) {
+				this.selectedOptions.splice(idx, 1)
+			} else {
+				this.selectedOptions.push(option)
+			}
+		},
+	},
+})
+</script>
+
+<style>
+.file-list-filter-type {
+	max-width: 220px;
+}
+</style>