|
|
|
|
@ -21,7 +21,11 @@ |
|
|
|
|
--> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<div id="app-content" class="user-list-grid" @scroll.passive="onScroll"> |
|
|
|
|
<table id="app-content" |
|
|
|
|
role="grid" |
|
|
|
|
:aria-label="t('settings', 'User\'s table')" |
|
|
|
|
class="user-list-grid" |
|
|
|
|
@scroll.passive="onScroll"> |
|
|
|
|
<NcModal v-if="showConfig.showNewUserForm" size="small" @close="closeModal"> |
|
|
|
|
<form id="new-user" |
|
|
|
|
:disabled="loading.all" |
|
|
|
|
@ -152,85 +156,92 @@ |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
</NcModal> |
|
|
|
|
<div id="grid-header" |
|
|
|
|
:class="{'sticky': scrolled && !showConfig.showNewUserForm}" |
|
|
|
|
class="row"> |
|
|
|
|
<div id="headerAvatar" class="avatar" /> |
|
|
|
|
<div id="headerName" class="name"> |
|
|
|
|
<div class="subtitle"> |
|
|
|
|
<strong> |
|
|
|
|
{{ t('settings', 'Display name') }} |
|
|
|
|
</strong> |
|
|
|
|
</div> |
|
|
|
|
{{ t('settings', 'Username') }} |
|
|
|
|
</div> |
|
|
|
|
<div id="headerPassword" class="password"> |
|
|
|
|
{{ t('settings', 'Password') }} |
|
|
|
|
</div> |
|
|
|
|
<div id="headerAddress" class="mailAddress"> |
|
|
|
|
{{ t('settings', 'Email') }} |
|
|
|
|
</div> |
|
|
|
|
<div id="headerGroups" class="groups"> |
|
|
|
|
{{ t('settings', 'Groups') }} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="subAdminsGroups.length>0 && settings.isAdmin" |
|
|
|
|
id="headerSubAdmins" |
|
|
|
|
class="subadmins"> |
|
|
|
|
{{ t('settings', 'Group admin for') }} |
|
|
|
|
</div> |
|
|
|
|
<div id="headerQuota" class="quota"> |
|
|
|
|
{{ t('settings', 'Quota') }} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="showConfig.showLanguages" |
|
|
|
|
id="headerLanguages" |
|
|
|
|
class="languages"> |
|
|
|
|
{{ t('settings', 'Language') }} |
|
|
|
|
</div> |
|
|
|
|
<tbody> |
|
|
|
|
<tr id="grid-header" |
|
|
|
|
:class="{'sticky': scrolled && !showConfig.showNewUserForm}" |
|
|
|
|
class="row"> |
|
|
|
|
<th id="headerAvatar" class="avatar"> |
|
|
|
|
<span class="hidden-visually"> {{ t('settings', 'Avatar') }} </span> |
|
|
|
|
</th> |
|
|
|
|
<th id="headerName" class="name"> |
|
|
|
|
<div class="subtitle"> |
|
|
|
|
<strong> |
|
|
|
|
{{ t('settings', 'Display name') }} |
|
|
|
|
</strong> |
|
|
|
|
</div> |
|
|
|
|
{{ t('settings', 'Username') }} |
|
|
|
|
</th> |
|
|
|
|
<th id="headerPassword" class="password"> |
|
|
|
|
{{ t('settings', 'Password') }} |
|
|
|
|
</th> |
|
|
|
|
<th id="headerAddress" class="mailAddress"> |
|
|
|
|
{{ t('settings', 'Email') }} |
|
|
|
|
</th> |
|
|
|
|
<th id="headerGroups" class="groups"> |
|
|
|
|
{{ t('settings', 'Groups') }} |
|
|
|
|
</th> |
|
|
|
|
<th v-if="subAdminsGroups.length>0 && settings.isAdmin" |
|
|
|
|
id="headerSubAdmins" |
|
|
|
|
class="subadmins"> |
|
|
|
|
{{ t('settings', 'Group admin for') }} |
|
|
|
|
</th> |
|
|
|
|
<th id="headerQuota" class="quota"> |
|
|
|
|
{{ t('settings', 'Quota') }} |
|
|
|
|
</th> |
|
|
|
|
<th v-if="showConfig.showLanguages" |
|
|
|
|
id="headerLanguages" |
|
|
|
|
class="languages"> |
|
|
|
|
{{ t('settings', 'Language') }} |
|
|
|
|
</th> |
|
|
|
|
|
|
|
|
|
<div v-if="showConfig.showUserBackend || showConfig.showStoragePath" |
|
|
|
|
class="headerUserBackend userBackend"> |
|
|
|
|
<div v-if="showConfig.showUserBackend" class="userBackend"> |
|
|
|
|
{{ t('settings', 'User backend') }} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="showConfig.showStoragePath" |
|
|
|
|
class="subtitle storageLocation"> |
|
|
|
|
{{ t('settings', 'Storage location') }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="showConfig.showLastLogin" |
|
|
|
|
class="headerLastLogin lastLogin"> |
|
|
|
|
{{ t('settings', 'Last login') }} |
|
|
|
|
</div> |
|
|
|
|
<th v-if="showConfig.showUserBackend || showConfig.showStoragePath" |
|
|
|
|
class="headerUserBackend userBackend"> |
|
|
|
|
<div v-if="showConfig.showUserBackend" class="userBackend"> |
|
|
|
|
{{ t('settings', 'User backend') }} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="showConfig.showStoragePath" |
|
|
|
|
class="subtitle storageLocation"> |
|
|
|
|
{{ t('settings', 'Storage location') }} |
|
|
|
|
</div> |
|
|
|
|
</th> |
|
|
|
|
<th v-if="showConfig.showLastLogin" |
|
|
|
|
class="headerLastLogin lastLogin"> |
|
|
|
|
{{ t('settings', 'Last login') }} |
|
|
|
|
</th> |
|
|
|
|
|
|
|
|
|
<div class="userActions" /> |
|
|
|
|
</div> |
|
|
|
|
<th class="userActions hidden-visually"> |
|
|
|
|
{{ t('settings', 'User actions') }} |
|
|
|
|
</th> |
|
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
<user-row v-for="user in filteredUsers" |
|
|
|
|
:key="user.id" |
|
|
|
|
:external-actions="externalActions" |
|
|
|
|
:groups="groups" |
|
|
|
|
:languages="languages" |
|
|
|
|
:quota-options="quotaOptions" |
|
|
|
|
:settings="settings" |
|
|
|
|
:show-config="showConfig" |
|
|
|
|
:sub-admins-groups="subAdminsGroups" |
|
|
|
|
:user="user" |
|
|
|
|
:is-dark-theme="isDarkTheme" /> |
|
|
|
|
<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler"> |
|
|
|
|
<div slot="spinner"> |
|
|
|
|
<div class="users-icon-loading icon-loading" /> |
|
|
|
|
</div> |
|
|
|
|
<div slot="no-more"> |
|
|
|
|
<div class="users-list-end" /> |
|
|
|
|
</div> |
|
|
|
|
<div slot="no-results"> |
|
|
|
|
<div id="emptycontent"> |
|
|
|
|
<div class="icon-contacts-dark" /> |
|
|
|
|
<h2>{{ t('settings', 'No users in here') }}</h2> |
|
|
|
|
<user-row v-for="user in filteredUsers" |
|
|
|
|
:key="user.id" |
|
|
|
|
:external-actions="externalActions" |
|
|
|
|
:groups="groups" |
|
|
|
|
:languages="languages" |
|
|
|
|
:quota-options="quotaOptions" |
|
|
|
|
:settings="settings" |
|
|
|
|
:show-config="showConfig" |
|
|
|
|
:sub-admins-groups="subAdminsGroups" |
|
|
|
|
:user="user" |
|
|
|
|
:is-dark-theme="isDarkTheme" /> |
|
|
|
|
|
|
|
|
|
<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler"> |
|
|
|
|
<div slot="spinner"> |
|
|
|
|
<div class="users-icon-loading icon-loading" /> |
|
|
|
|
</div> |
|
|
|
|
<div slot="no-more"> |
|
|
|
|
<div class="users-list-end" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</InfiniteLoading> |
|
|
|
|
</div> |
|
|
|
|
<div slot="no-results"> |
|
|
|
|
<div id="emptycontent"> |
|
|
|
|
<div class="icon-contacts-dark" /> |
|
|
|
|
<h2>{{ t('settings', 'No users in here') }}</h2> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</InfiniteLoading> |
|
|
|
|
</tbody> |
|
|
|
|
</table> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
@ -642,4 +653,12 @@ export default { |
|
|
|
|
* prevent it). */ |
|
|
|
|
width: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#app-content tbody tr { |
|
|
|
|
&:hover, |
|
|
|
|
&:focus, |
|
|
|
|
&:active { |
|
|
|
|
background-color: var(--color-main-background); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
julia.kirschenheuter
3 years ago