diff --git a/apps/files/src/components/FileListFilters.vue b/apps/files/src/components/FileListFilters.vue
index 5cdc4e877fd..1bd1dd627af 100644
--- a/apps/files/src/components/FileListFilters.vue
+++ b/apps/files/src/components/FileListFilters.vue
@@ -14,7 +14,14 @@
+ @close="chip.onclick">
+
+
+
+
@@ -25,6 +32,7 @@ import { t } from '@nextcloud/l10n'
import { computed, ref, watchEffect } from 'vue'
import { useFiltersStore } from '../store/filters.ts'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
const filterStore = useFiltersStore()
diff --git a/apps/files/src/store/filters.ts b/apps/files/src/store/filters.ts
index abc12732fd4..a5e3421f726 100644
--- a/apps/files/src/store/filters.ts
+++ b/apps/files/src/store/filters.ts
@@ -65,6 +65,8 @@ export const useFiltersStore = defineStore('keyboard', {
onFilterUpdateChips(event: FilterUpdateChipsEvent) {
const id = (event.target as IFileListFilter).id
this.chips = { ...this.chips, [id]: [...event.detail] }
+
+ logger.debug('File list filter chips updated', { filter: id, chips: event.detail })
},
init() {
diff --git a/apps/files_sharing/src/components/FileListFilterAccount.vue b/apps/files_sharing/src/components/FileListFilterAccount.vue
index 7a91de6464e..68383735532 100644
--- a/apps/files_sharing/src/components/FileListFilterAccount.vue
+++ b/apps/files_sharing/src/components/FileListFilterAccount.vue
@@ -3,25 +3,53 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
-
+
+
+
+
+
+
+
+
+
+ {{ account.displayName }}
+
+
diff --git a/apps/files_sharing/src/filters/AccountFilter.ts b/apps/files_sharing/src/filters/AccountFilter.ts
index 408e455e17f..29e8088dc23 100644
--- a/apps/files_sharing/src/filters/AccountFilter.ts
+++ b/apps/files_sharing/src/filters/AccountFilter.ts
@@ -2,7 +2,7 @@
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
-import type { INode } from '@nextcloud/files'
+import type { IFileListFilterChip, INode } from '@nextcloud/files'
import { FileListFilter, registerFileListFilter } from '@nextcloud/files'
import Vue from 'vue'
@@ -13,12 +13,14 @@ export interface IAccountData {
displayName: string
}
+type CurrentInstance = Vue & { resetFilter: () => void, toggleAccount: (account: string) => void }
+
/**
* File list filter to filter by owner / sharee
*/
class AccountFilter extends FileListFilter {
- private currentInstance?: Vue
+ private currentInstance?: CurrentInstance
private filterAccounts?: IAccountData[]
constructor() {
@@ -35,7 +37,7 @@ class AccountFilter extends FileListFilter {
el,
})
.$on('update:accounts', this.setAccounts.bind(this))
- .$mount()
+ .$mount() as CurrentInstance
}
public filter(nodes: INode[]): INode[] {
@@ -66,6 +68,16 @@ class AccountFilter extends FileListFilter {
public setAccounts(accounts?: IAccountData[]) {
this.filterAccounts = accounts
+ let chips: IFileListFilterChip[] = []
+ if (this.filterAccounts && this.filterAccounts.length > 0) {
+ chips = this.filterAccounts.map(({ displayName, uid }) => ({
+ text: displayName,
+ user: uid,
+ onclick: () => this.currentInstance?.toggleAccount(uid),
+ }))
+ }
+
+ this.updateChips(chips)
this.filterUpdated()
}