Merge pull request #51132 from nextcloud/backport/50919/stable31

[stable31] fix(files): Ensure the filter instance is mounted

Author: susnux

apps/files/src/eventbus.d.ts

@@ -13,6 +13,8 @@ declare module '@nextcloud/event-bus' {
 		'files:favorites:removed': Node
 		'files:favorites:added': Node
 
+		'files:filters:changed': undefined
+
 		'files:node:created': Node
 		'files:node:deleted': Node
 		'files:node:updated': Node

apps/files/src/filters/HiddenFilesFilter.ts

@@ -15,7 +15,7 @@ class HiddenFilesFilter extends FileListFilter {
 
 	constructor() {
 		super('files:hidden', 0)
-		this.showHidden = loadState<UserConfig>('files', 'config', { show_hidden: false }).show_hidden
+		this.showHidden = loadState<Partial<UserConfig>>('files', 'config', { show_hidden: false }).show_hidden
 
 		subscribe('files:config:updated', ({ key, value }) => {
 			if (key === 'show_hidden') {

apps/files/src/filters/TypeFilter.ts

@@ -149,7 +149,12 @@ class TypeFilter extends FileListFilter {
 
 	public setPresets(presets?: ITypePreset[]) {
 		this.currentPresets = presets ?? []
-		this.currentInstance!.$props.presets = presets
+		if (this.currentInstance !== undefined) {
+			// could be called before the instance was created
+			// (meaning the files list is not mounted yet)
+			this.currentInstance.$props.presets = presets
+		}
+
 		this.filterUpdated()
 
 		const chips: IFileListFilterChip[] = []

apps/files/src/store/filters.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import type { FilterUpdateChipsEvent, IFileListFilter, IFileListFilterChip } from '@nextcloud/files'
-import { subscribe } from '@nextcloud/event-bus'
+import { emit, subscribe } from '@nextcloud/event-bus'
 import { getFileListFilters } from '@nextcloud/files'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
@@ -20,7 +20,6 @@ function isFileListFilterWithUi(value: IFileListFilter): value is Required<IFile
 export const useFiltersStore = defineStore('filters', () => {
 	const chips = ref<Record<string, IFileListFilterChip[]>>({})
 	const filters = ref<IFileListFilter[]>([])
-	const filtersChanged = ref(false)
 
 	/**
 	 * Currently active filter chips
@@ -77,7 +76,7 @@ export const useFiltersStore = defineStore('filters', () => {
 	 * @private
 	 */
 	function onFilterUpdate() {
-		filtersChanged.value = true
+		emit('files:filters:changed')
 	}
 
 	/**
@@ -122,7 +121,6 @@ export const useFiltersStore = defineStore('filters', () => {
 		chips,
 		filters,
 		filtersWithUI,
-		filtersChanged,
 
 		// getters / computed
 		activeChips,

apps/files/src/views/FilesList.vue

@@ -432,10 +432,6 @@ export default defineComponent({
 				&& this.currentFolder && (this.currentFolder.permissions & Permission.SHARE) !== 0
 		},
 
-		filtersChanged() {
-			return this.filtersStore.filtersChanged
-		},
-
 		showCustomEmptyView() {
 			return !this.loading && this.isEmptyDir && this.currentView?.emptyView !== undefined
 		},
@@ -516,13 +512,6 @@ export default defineComponent({
 			// Also refresh the filtered content
 			this.filterDirContent()
 		},
-
-		filtersChanged() {
-			if (this.filtersChanged) {
-				this.filterDirContent()
-				this.filtersStore.filtersChanged = false
-			}
-		},
 	},
 
 	async mounted() {
@@ -532,6 +521,9 @@ export default defineComponent({
 		// reload on settings change
 		subscribe('files:config:updated', this.fetchContent)
 
+		// filter content if filter were changed
+		subscribe('files:filters:changed', this.filterDirContent)
+
 		// Finally, fetch the current directory contents
 		await this.fetchContent()
 		if (this.fileId) {