1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
/*!
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import type { FilterUpdateChipsEvent, IFileListFilter, IFileListFilterChip } from '@nextcloud/files'
import { emit, subscribe } from '@nextcloud/event-bus'
import { getFileListFilters } from '@nextcloud/files'
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import logger from '../logger'
/**
* Check if the given value is an instance file list filter with mount function
* @param value The filter to check
*/
function isFileListFilterWithUi(value: IFileListFilter): value is Required<IFileListFilter> {
return 'mount' in value
}
export const useFiltersStore = defineStore('filters', () => {
const chips = ref<Record<string, IFileListFilterChip[]>>({})
const filters = ref<IFileListFilter[]>([])
/**
* Currently active filter chips
*/
const activeChips = computed<IFileListFilterChip[]>(
() => Object.values(chips.value).flat(),
)
/**
* Filters sorted by order
*/
const sortedFilters = computed<IFileListFilter[]>(
() => filters.value.sort((a, b) => a.order - b.order),
)
/**
* All filters that provide a UI for visual controlling the filter state
*/
const filtersWithUI = computed<Required<IFileListFilter>[]>(
() => sortedFilters.value.filter(isFileListFilterWithUi),
)
/**
* Register a new filter on the store.
* This will subscribe the store to the filters events.
*
* @param filter The filter to add
*/
function addFilter(filter: IFileListFilter) {
filter.addEventListener('update:chips', onFilterUpdateChips)
filter.addEventListener('update:filter', onFilterUpdate)
filters.value.push(filter)
logger.debug('New file list filter registered', { id: filter.id })
}
/**
* Unregister a filter from the store.
* This will remove the filter from the store and unsubscribe the store from the filer events.
* @param filterId Id of the filter to remove
*/
function removeFilter(filterId: string) {
const index = filters.value.findIndex(({ id }) => id === filterId)
if (index > -1) {
const [filter] = filters.value.splice(index, 1)
filter.removeEventListener('update:chips', onFilterUpdateChips)
filter.removeEventListener('update:filter', onFilterUpdate)
logger.debug('Files list filter unregistered', { id: filterId })
}
}
/**
* Event handler for filter update events
* @private
*/
function onFilterUpdate() {
emit('files:filters:changed')
}
/**
* Event handler for filter chips updates
* @param event The update event
* @private
*/
function onFilterUpdateChips(event: FilterUpdateChipsEvent) {
const id = (event.target as IFileListFilter).id
chips.value = {
...chips.value,
[id]: [...event.detail],
}
logger.debug('File list filter chips updated', { filter: id, chips: event.detail })
}
/**
* Event handler that resets all filters if the file list view was changed.
* @private
*/
function onViewChanged() {
logger.debug('Reset all file list filters - view changed')
for (const filter of filters.value) {
if (filter.reset !== undefined) {
filter.reset()
}
}
}
// Initialize the store
subscribe('files:navigation:changed', onViewChanged)
subscribe('files:filter:added', addFilter)
subscribe('files:filter:removed', removeFilter)
for (const filter of getFileListFilters()) {
addFilter(filter)
}
return {
// state
chips,
filters,
filtersWithUI,
// getters / computed
activeChips,
sortedFilters,
// actions / methods
addFilter,
removeFilter,
}
})
|
