diff options
Diffstat (limited to 'apps/settings/src/components/UserList.vue')
| -rw-r--r-- | apps/settings/src/components/UserList.vue | 113 |
1 files changed, 22 insertions, 91 deletions
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue index b208a95d0c5..5d3993f040a 100644 --- a/apps/settings/src/components/UserList.vue +++ b/apps/settings/src/components/UserList.vue @@ -41,51 +41,44 @@ </template> </NcEmptyContent> - <RecycleScroller v-else - ref="scroller" - class="user-list" + <VirtualList v-else + :data-component="UserRow" + :data-sources="filteredUsers" + data-key="id" + :item-height="rowHeight" :style="style" - :items="filteredUsers" - key-field="id" - role="table" - list-tag="tbody" - list-class="user-list__body" - item-tag="tr" - item-class="user-list__row" - :item-size="rowHeight" - @hook:mounted="handleMounted" + :extra-props="{ + users, + settings, + hasObfuscated, + groups, + subAdminsGroups, + quotaOptions, + languages, + externalActions, + }" @scroll-end="handleScrollEnd"> <template #before> <caption class="hidden-visually"> {{ t('settings', 'List of users. This list is not fully rendered for performance reasons. The users will be rendered as you navigate through the list.') }} </caption> - <UserListHeader :has-obfuscated="hasObfuscated" /> </template> - <template #default="{ item: user }"> - <UserRow :user="user" - :users="users" - :settings="settings" - :has-obfuscated="hasObfuscated" - :groups="groups" - :sub-admins-groups="subAdminsGroups" - :quota-options="quotaOptions" - :languages="languages" - :external-actions="externalActions" /> + <template #header> + <UserListHeader :has-obfuscated="hasObfuscated" /> </template> - <template #after> + <template #footer> <UserListFooter :loading="loading.users" :filtered-users="filteredUsers" /> </template> - </RecycleScroller> + </VirtualList> </Fragment> </template> <script> import Vue from 'vue' import { Fragment } from 'vue-frag' -import { RecycleScroller } from 'vue-virtual-scroller' import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' @@ -94,6 +87,7 @@ import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' import { subscribe, unsubscribe } from '@nextcloud/event-bus' import { showError } from '@nextcloud/dialogs' +import VirtualList from './Users/VirtualList.vue' import NewUserModal from './Users/NewUserModal.vue' import UserListFooter from './Users/UserListFooter.vue' import UserListHeader from './Users/UserListHeader.vue' @@ -128,10 +122,9 @@ export default { NcIconSvgWrapper, NcLoadingIcon, NewUserModal, - RecycleScroller, UserListFooter, UserListHeader, - UserRow, + VirtualList, }, props: { @@ -147,6 +140,7 @@ export default { data() { return { + UserRow, loading: { all: false, groups: false, @@ -295,16 +289,6 @@ export default { }, methods: { - async handleMounted() { - // Add proper semantics to the recycle scroller slots - const header = this.$refs.scroller.$refs.before - const footer = this.$refs.scroller.$refs.after - header.classList.add('user-list__header') - header.setAttribute('role', 'rowgroup') - footer.classList.add('user-list__footer') - footer.setAttribute('role', 'rowgroup') - }, - async handleScrollEnd() { await this.loadUsers() }, @@ -414,57 +398,4 @@ export default { } } } - -.user-list { - --avatar-cell-width: 48px; - --cell-padding: 7px; - --cell-width: 200px; - --cell-min-width: calc(var(--cell-width) - (2 * var(--cell-padding))); - - display: block; - overflow: auto; - height: 100%; - - :deep { - .user-list { - &__body { - display: flex; - flex-direction: column; - width: 100%; - // Necessary for virtual scrolling absolute - position: relative; - margin-top: var(--row-height); - } - - &__row { - @include row; - border-bottom: 1px solid var(--color-border); - - &:hover { - background-color: var(--color-background-hover); - - .row__cell:not(.row__cell--actions) { - background-color: var(--color-background-hover); - } - } - } - } - - .vue-recycle-scroller__slot { - &.user-list__header, - &.user-list__footer { - position: sticky; - } - - &.user-list__header { - top: 0; - z-index: 10; - } - - &.user-list__footer { - left: 0; - } - } - } -} </style> |