Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(files_sharing): Adjust design of account filter for file list #46857

Merged
merged 3 commits into from
Jul 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion apps/files/src/components/FileListFilters.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,14 @@
<NcChip :aria-label-close="t('files', 'Remove filter')"
:icon-svg="chip.icon"
:text="chip.text"
@close="chip.onclick" />
@close="chip.onclick">
<template v-if="chip.user" #icon>
<NcAvatar disable-menu
:show-user-status="false"
:size="24"
:user="chip.user" />
</template>
</NcChip>
</li>
</ul>
</div>
Expand All @@ -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()
Expand Down
2 changes: 2 additions & 0 deletions apps/files/src/store/filters.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
101 changes: 86 additions & 15 deletions apps/files_sharing/src/components/FileListFilterAccount.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,53 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<NcSelect v-model="selectedAccounts"
:aria-label-combobox="t('files_sharing', 'Accounts')"
class="file-list-filter-accounts"
multiple
no-wrap
:options="availableAccounts"
:placeholder="t('files_sharing', 'Accounts')"
user-select />
<FileListFilter class="file-list-filter-accounts"
:is-active="selectedAccounts.length > 0"
:filter-name="t('files', 'People')"
@reset-filter="resetFilter">
<template #icon>
<NcIconSvgWrapper :path="mdiAccountMultiple" />
</template>
<NcActionInput v-if="availableAccounts.length > 1"
:label="t('files_sharing', 'Filter accounts')"
:label-outside="false"
:show-trailing-button="false"
type="search"
:value.sync="accountFilter" />
<NcActionButton v-for="account of shownAccounts"
:key="account.id"
class="file-list-filter-accounts__item"
type="radio"
:model-value="selectedAccounts.includes(account)"
:value="account.id"
@click="toggleAccount(account.id)">
<template #icon>
<NcAvatar class="file-list-filter-accounts__avatar"
v-bind="account"
:size="24"
disable-menu
:show-user-status="false" />
</template>
{{ account.displayName }}
</NcActionButton>
</FileListFilter>
</template>

<script setup lang="ts">
import type { IAccountData } from '../filters/AccountFilter.ts'

import { translate as t } from '@nextcloud/l10n'
import { mdiAccountMultiple } from '@mdi/js'
import { useBrowserLocation } from '@vueuse/core'
import { ref, watch, watchEffect } from 'vue'
import { computed, ref, watch } from 'vue'
import { useNavigation } from '../../../files/src/composables/useNavigation.ts'

import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
import FileListFilter from '../../../files/src/components/FileListFilter/FileListFilter.vue'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
import { ShareType } from '@nextcloud/sharing'

interface IUserSelectData {
id: string
Expand All @@ -35,9 +63,41 @@ const emit = defineEmits<{

const { currentView } = useNavigation()
const currentLocation = useBrowserLocation()
const accountFilter = ref('')
const availableAccounts = ref<IUserSelectData[]>([])
const selectedAccounts = ref<IUserSelectData[]>([])

/**
* Currently shown accounts (filtered)
*/
const shownAccounts = computed(() => {
if (!accountFilter.value) {
return availableAccounts.value
}
const queryParts = accountFilter.value.toLocaleLowerCase().trim().split(' ')
return availableAccounts.value.filter((account) =>
queryParts.every((part) =>
account.user.toLocaleLowerCase().includes(part)
|| account.displayName.toLocaleLowerCase().includes(part),
),
)
})

/**
* Toggle an account as selected
* @param accountId The account to toggle
*/
function toggleAccount(accountId: string) {
const account = availableAccounts.value.find(({ id }) => id === accountId)
if (account && selectedAccounts.value.includes(account)) {
selectedAccounts.value = selectedAccounts.value.filter(({ id }) => id !== accountId)
} else {
if (account) {
selectedAccounts.value = [...selectedAccounts.value, account]
}
}
}

// Watch selected account, on change we emit the new account data to the filter instance
watch(selectedAccounts, () => {
// Emit selected accounts as account data
Expand Down Expand Up @@ -75,6 +135,9 @@ async function updateAvailableAccounts(path: string = '/') {
if (sharee.id === '') {
continue
}
if (sharee.type !== ShareType.User && sharee.type !== ShareType.Remote) {
continue
}
// Add if not already added
if (!available.has(sharee.id)) {
available.set(sharee.id, {
Expand All @@ -94,23 +157,31 @@ async function updateAvailableAccounts(path: string = '/') {
*/
function resetFilter() {
selectedAccounts.value = []
accountFilter.value = ''
}
defineExpose({ resetFilter })
defineExpose({ resetFilter, toggleAccount })

// When the current view changes or the current directory,
// then we need to rebuild the available accounts
watchEffect(() => {
watch([currentView, currentLocation], () => {
if (currentView.value) {
// we have no access to the files router here...
const path = (currentLocation.value.search ?? '?dir=/').match(/(?<=&|\?)dir=([^&#]+)/)?.[1]
selectedAccounts.value = []
resetFilter()
updateAvailableAccounts(decodeURIComponent(path ?? '/'))
}
})
}, { immediate: true })
</script>

<style scoped lang="scss">
.file-list-filter-accounts {
max-width: 300px;
&__item {
min-width: 250px;
}

&__avatar {
// 24px is the avatar size
margin: calc((var(--default-clickable-area) - 24px) / 2)
}
}
</style>
18 changes: 15 additions & 3 deletions apps/files_sharing/src/filters/AccountFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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() {
Expand All @@ -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[] {
Expand Down Expand Up @@ -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()
}

Expand Down
2 changes: 1 addition & 1 deletion dist/1521-1521.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.0.1
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vueuse/core
- version: 10.11.0
Expand Down
2 changes: 1 addition & 1 deletion dist/1642-1642.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.0.1
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vueuse/core
- version: 10.11.0
Expand Down
2 changes: 1 addition & 1 deletion dist/2452-2452.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.0.1
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vueuse/core
- version: 10.11.0
Expand Down
4 changes: 2 additions & 2 deletions dist/2812-2812.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/2812-2812.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.25.0
- license: MIT
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @ungap/structured-clone
- version: 1.2.0
Expand Down
2 changes: 1 addition & 1 deletion dist/2812-2812.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/3920-3920.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.0.1
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vue/devtools-api
- version: 6.6.1
Expand Down
2 changes: 1 addition & 1 deletion dist/5085-5085.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.0.1
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vueuse/core
- version: 10.11.0
Expand Down
2 changes: 1 addition & 1 deletion dist/5315-5315.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.0.1
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vueuse/core
- version: 10.11.0
Expand Down
2 changes: 1 addition & 1 deletion dist/5528-5528.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/5528-5528.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.25.0
- license: MIT
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @ungap/structured-clone
- version: 1.2.0
Expand Down
2 changes: 1 addition & 1 deletion dist/5963-5963.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ This file is generated from multiple sources. Included packages:
- version: 1.4.2
- license: AGPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vueuse/core
- version: 10.11.0
Expand Down
2 changes: 1 addition & 1 deletion dist/7462-7462.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.0.1
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vue/devtools-api
- version: 6.6.1
Expand Down
2 changes: 1 addition & 1 deletion dist/8057-8057.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.0.1
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vue/devtools-api
- version: 6.6.1
Expand Down
2 changes: 1 addition & 1 deletion dist/8737-8737.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.0.1
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vue/devtools-api
- version: 6.6.1
Expand Down
4 changes: 2 additions & 2 deletions dist/9306-9306.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/9306-9306.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.25.0
- license: MIT
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vueuse/components
- version: 10.11.0
Expand Down
2 changes: 1 addition & 1 deletion dist/9306-9306.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/9480-9480.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/9480-9480.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.25.0
- license: MIT
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @ungap/structured-clone
- version: 1.2.0
Expand Down
2 changes: 1 addition & 1 deletion dist/9480-9480.js.map

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions dist/9725-9725.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/99-99.js.license → dist/9725-9725.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ This file is generated from multiple sources. Included packages:
- version: 0.2.3
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vueuse/components
- version: 10.11.0
Expand Down
1 change: 1 addition & 0 deletions dist/9725-9725.js.map

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/9725-9725.js.map.license
2 changes: 0 additions & 2 deletions dist/99-99.js

This file was deleted.

1 change: 0 additions & 1 deletion dist/99-99.js.map

This file was deleted.

1 change: 0 additions & 1 deletion dist/99-99.js.map.license

This file was deleted.

4 changes: 2 additions & 2 deletions dist/comments-comments-app.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/comments-comments-app.js.license
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ This file is generated from multiple sources. Included packages:
- version: 3.0.1
- license: GPL-3.0-or-later
- @nextcloud/vue
- version: 8.15.0
- version: 8.15.1
- license: AGPL-3.0-or-later
- @vue/devtools-api
- version: 6.6.1
Expand Down
2 changes: 1 addition & 1 deletion dist/comments-comments-app.js.map

Large diffs are not rendered by default.

Loading
Loading