Skip to content

Commit b5b28fd

Browse files
susnuxsusnux
committed
fix(files): Properly reset all file list filters on view change
Signed-off-by: Ferdinand Thiessen <[email protected]>
1 parent 83a9ed4 commit b5b28fd

File tree

6 files changed

+135
-69
lines changed

6 files changed

+135
-69
lines changed

‎apps/files/src/filters/FilenameFilter.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
*/
55

66
import type { IFileListFilterChip, INode } from '@nextcloud/files'
7-
import { subscribe } from '@nextcloud/event-bus'
87
import { FileListFilter } from '@nextcloud/files'
98

109
/**
@@ -16,7 +15,6 @@ export class FilenameFilter extends FileListFilter {
1615

1716
constructor() {
1817
super('files:filename', 5)
19-
subscribe('files:navigation:changed', () => this.updateQuery(''))
2018
}
2119

2220
public filter(nodes: INode[]): INode[] {
@@ -27,6 +25,10 @@ export class FilenameFilter extends FileListFilter {
2725
})
2826
}
2927

28+
public reset(): void {
29+
this.updateQuery('')
30+
}
31+
3032
public updateQuery(query: string) {
3133
query = (query || '').trim()
3234

‎apps/files/src/filters/ModifiedFilter.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
*/
55
import type { IFileListFilterChip, INode } from '@nextcloud/files'
66

7-
import { subscribe } from '@nextcloud/event-bus'
87
import { FileListFilter, registerFileListFilter } from '@nextcloud/files'
98
import { t } from '@nextcloud/l10n'
109
import Vue from 'vue'
@@ -58,7 +57,6 @@ class ModifiedFilter extends FileListFilter {
5857

5958
constructor() {
6059
super('files:modified', 50)
61-
subscribe('files:navigation:changed', () => this.setPreset())
6260
}
6361

6462
public mount(el: HTMLElement) {
@@ -85,6 +83,10 @@ class ModifiedFilter extends FileListFilter {
8583
return nodes.filter((node) => node.mtime === undefined || this.currentPreset!.filter(node.mtime.getTime()))
8684
}
8785

86+
public reset(): void {
87+
this.setPreset()
88+
}
89+
8890
public setPreset(preset?: ITimePreset) {
8991
this.currentPreset = preset
9092
this.filterUpdated()

‎apps/files/src/filters/TypeFilter.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,10 @@ class TypeFilter extends FileListFilter {
143143
})
144144
}
145145

146+
public reset(): void {
147+
this.setPresets()
148+
}
149+
146150
public setPresets(presets?: ITypePreset[]) {
147151
this.currentPresets = presets ?? []
148152
this.currentInstance!.$props.presets = presets

‎apps/files/src/store/filters.ts‎

Lines changed: 119 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -6,75 +6,130 @@ import type { FilterUpdateChipsEvent, IFileListFilter, IFileListFilterChip } fro
66
import { subscribe } from '@nextcloud/event-bus'
77
import { getFileListFilters } from '@nextcloud/files'
88
import { defineStore } from 'pinia'
9+
import { computed, ref } from 'vue'
910
import logger from '../logger'
1011

11-
export const useFiltersStore = defineStore('filters', {
12-
state: () => ({
13-
chips: {} as Record<string, IFileListFilterChip[]>,
14-
filters: [] as IFileListFilter[],
15-
filtersChanged: false,
16-
}),
17-
18-
getters: {
19-
/**
20-
* Currently active filter chips
21-
* @param state Internal state
22-
*/
23-
activeChips(state): IFileListFilterChip[] {
24-
return Object.values(state.chips).flat()
25-
},
26-
27-
/**
28-
* Filters sorted by order
29-
* @param state Internal state
30-
*/
31-
sortedFilters(state): IFileListFilter[] {
32-
return state.filters.sort((a, b) => a.order - b.order)
33-
},
34-
35-
/**
36-
* All filters that provide a UI for visual controlling the filter state
37-
*/
38-
filtersWithUI(): Required<IFileListFilter>[] {
39-
return this.sortedFilters.filter((filter) => 'mount' in filter) as Required<IFileListFilter>[]
40-
},
41-
},
42-
43-
actions: {
44-
addFilter(filter: IFileListFilter) {
45-
filter.addEventListener('update:chips', this.onFilterUpdateChips)
46-
filter.addEventListener('update:filter', this.onFilterUpdate)
47-
this.filters.push(filter)
48-
logger.debug('New file list filter registered', { id: filter.id })
49-
},
50-
51-
removeFilter(filterId: string) {
52-
const index = this.filters.findIndex(({ id }) => id === filterId)
53-
if (index > -1) {
54-
const [filter] = this.filters.splice(index, 1)
55-
filter.removeEventListener('update:chips', this.onFilterUpdateChips)
56-
filter.removeEventListener('update:filter', this.onFilterUpdate)
57-
logger.debug('Files list filter unregistered', { id: filterId })
58-
}
59-
},
12+
/**
13+
* Check if the given value is an instance file list filter with mount function
14+
* @param value The filter to check
15+
*/
16+
function isFileListFilterWithUi(value: IFileListFilter): value is Required<IFileListFilter> {
17+
return 'mount' in value
18+
}
19+
20+
export const useFiltersStore = defineStore('filters', () => {
21+
const chips = ref<Record<string, IFileListFilterChip[]>>({})
22+
const filters = ref<IFileListFilter[]>([])
23+
const filtersChanged = ref(false)
24+
25+
/**
26+
* Currently active filter chips
27+
*/
28+
const activeChips = computed<IFileListFilterChip[]>(
29+
() => Object.values(chips.value).flat(),
30+
)
31+
32+
/**
33+
* Filters sorted by order
34+
*/
35+
const sortedFilters = computed<IFileListFilter[]>(
36+
() => filters.value.sort((a, b) => a.order - b.order),
37+
)
38+
39+
/**
40+
* All filters that provide a UI for visual controlling the filter state
41+
*/
42+
const filtersWithUI = computed<Required<IFileListFilter>[]>(
43+
() => sortedFilters.value.filter(isFileListFilterWithUi)
44+
)
45+
46+
/**
47+
* Register a new filter on the store.
48+
* This will subscribe the store to the filters events.
49+
*
50+
* @param filter The filter to add
51+
*/
52+
function addFilter(filter: IFileListFilter) {
53+
filter.addEventListener('update:chips', onFilterUpdateChips)
54+
filter.addEventListener('update:filter', onFilterUpdate)
6055

61-
onFilterUpdate() {
62-
this.filtersChanged = true
63-
},
56+
filters.value.push(filter)
57+
logger.debug('New file list filter registered', { id: filter.id })
58+
}
6459

65-
onFilterUpdateChips(event: FilterUpdateChipsEvent) {
66-
const id = (event.target as IFileListFilter).id
67-
this.chips = { ...this.chips, [id]: [...event.detail] }
60+
/**
61+
* Unregister a filter from the store.
62+
* This will remove the filter from the store and unsubscribe the store from the filer events.
63+
* @param filterId Id of the filter to remove
64+
*/
65+
function removeFilter(filterId: string) {
66+
const index = filters.value.findIndex(({ id }) => id === filterId)
67+
if (index > -1) {
68+
const [filter] = filters.value.splice(index, 1)
69+
filter.removeEventListener('update:chips', onFilterUpdateChips)
70+
filter.removeEventListener('update:filter', onFilterUpdate)
71+
logger.debug('Files list filter unregistered', { id: filterId })
72+
}
73+
}
6874

69-
logger.debug('File list filter chips updated', { filter: id, chips: event.detail })
70-
},
75+
/**
76+
* Event handler for filter update events
77+
* @private
78+
*/
79+
function onFilterUpdate() {
80+
filtersChanged.value = true
81+
}
7182

72-
init() {
73-
subscribe('files:filter:added', this.addFilter)
74-
subscribe('files:filter:removed', this.removeFilter)
75-
for (const filter of getFileListFilters()) {
76-
this.addFilter(filter)
83+
/**
84+
* Event handler for filter chips updates
85+
* @param event The update event
86+
* @private
87+
*/
88+
function onFilterUpdateChips(event: FilterUpdateChipsEvent) {
89+
const id = (event.target as IFileListFilter).id
90+
chips.value = {
91+
...chips.value,
92+
[id]: [...event.detail],
93+
}
94+
95+
logger.debug('File list filter chips updated', { filter: id, chips: event.detail })
96+
}
97+
98+
/**
99+
* Event handler that resets all filters if the file list view was changed.
100+
* @private
101+
*/
102+
function onViewChanged() {
103+
logger.debug('Reset all file list filters - view changed')
104+
105+
for (const filter of filters.value) {
106+
if (filter.reset !== undefined) {
107+
filter.reset()
77108
}
78-
},
79-
},
109+
}
110+
}
111+
112+
// Initialize the store
113+
subscribe('files:navigation:changed', onViewChanged)
114+
subscribe('files:filter:added', addFilter)
115+
subscribe('files:filter:removed', removeFilter)
116+
for (const filter of getFileListFilters()) {
117+
addFilter(filter)
118+
}
119+
120+
return {
121+
// state
122+
chips,
123+
filters,
124+
filtersWithUI,
125+
filtersChanged,
126+
127+
// getters / computed
128+
activeChips,
129+
sortedFilters,
130+
131+
// actions / methods
132+
addFilter,
133+
removeFilter,
134+
}
80135
})

‎apps/files/src/views/FilesList.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -526,7 +526,6 @@ export default defineComponent({
526526
},
527527
528528
mounted() {
529-
this.filtersStore.init()
530529
this.fetchContent()
531530
532531
subscribe('files:node:deleted', this.onNodeDeleted)

‎apps/files_sharing/src/files_filters/AccountFilter.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ class AccountFilter extends FileListFilter {
6666
})
6767
}
6868

69+
public reset(): void {
70+
this.currentInstance?.resetFilter()
71+
}
72+
6973
public setAccounts(accounts?: IAccountData[]) {
7074
this.filterAccounts = accounts
7175
let chips: IFileListFilterChip[] = []

0 commit comments

Comments
 (0)