TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-25 22:19:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

[admin] user list dynamically loaded

Browse Source
This commit is contained in:
Andrea Vos 2021-04-05 02:39:58 +02:00
parent c8d7994ecd
commit 8e2dac9998
1 changed files with 73 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
routes/admin.vue
View File

@ -7,73 +7,75 @@
</h2>
<section v-if="$isGranted('users')">
<details class="border mb-3">
<details class="border mb-3" @click="loadUsers">
<summary class="bg-light p-3">
<Icon v="users"/>
Users
({{stats.users.overall}} overall, {{stats.users.admins}} admins, {{visibleUsers.length}} visible)
</summary>
<div class="border-top">
<div class="input-group mt-4">
<input class="form-control" v-model="userFilter" :placeholder="$t('crud.filterLong')"/>
<button :class="['btn', adminsFilter ? 'btn-secondary' : 'btn-outline-secondary']"
@click="adminsFilter = !adminsFilter"
>
Only admins
</button>
<button :class="['btn', localeFilter ? 'btn-secondary' : 'btn-outline-secondary']"
@click="localeFilter = !localeFilter"
>
Only this version
</button>
</div>
<Table :data="visibleUsers" :columns="4">
<template v-slot:header>
<th class="text-nowrap">
<T>admin.user.user</T>
</th>
<th class="text-nowrap">
<T>admin.user.email</T>
</th>
<th class="text-nowrap">
<T>admin.user.roles</T>
</th>
<th class="text-nowrap">
<T>admin.user.profiles</T>
</th>
</template>
<Loading :value="users" size="5rem">
<div class="input-group mt-4">
<input class="form-control" v-model="userFilter" :placeholder="$t('crud.filterLong')"/>
<button :class="['btn', adminsFilter ? 'btn-secondary' : 'btn-outline-secondary']"
@click="adminsFilter = !adminsFilter"
>
Only admins
</button>
<button :class="['btn', localeFilter ? 'btn-secondary' : 'btn-outline-secondary']"
@click="localeFilter = !localeFilter"
>
Only this version
</button>
</div>
<Table :data="visibleUsers" :columns="4">
<template v-slot:header>
<th class="text-nowrap">
<T>admin.user.user</T>
</th>
<th class="text-nowrap">
<T>admin.user.email</T>
</th>
<th class="text-nowrap">
<T>admin.user.roles</T>
</th>
<th class="text-nowrap">
<T>admin.user.profiles</T>
</th>
</template>
<template v-slot:row="s">
<td>
<Avatar :user="s.el" dsize="2rem"/>
{{s.el.username}}
</td>
<td>
<p>
<a :href="`mailto:${s.el.email}`" target="_blank" rel="noopener">
{{s.el.email}}
</a>
</p>
<ul v-if="s.el.socialConnections.length" class="list-inline">
<li v-for="conn in s.el.socialConnections" class="list-inline-item">
<Icon :v="socialProviders[conn].icon || conn" set="b"/>
</li>
</ul>
</td>
<td>
<Roles :user="s.el"/>
</td>
<td>
<ul class="list-unstyled">
<li v-for="locale in s.el.profiles" v-if="locales[locale]">
<LocaleLink :link="`/@${s.el.username}`" :locale="locale">
{{ locales[locale].name }}
</LocaleLink>
</li>
</ul>
</td>
</template>
</Table>
<template v-slot:row="s">
<td>
<Avatar :user="s.el" dsize="2rem"/>
{{s.el.username}}
</td>
<td>
<p>
<a :href="`mailto:${s.el.email}`" target="_blank" rel="noopener">
{{s.el.email}}
</a>
</p>
<ul v-if="s.el.socialConnections.length" class="list-inline">
<li v-for="conn in s.el.socialConnections" class="list-inline-item">
<Icon :v="socialProviders[conn].icon || conn" set="b"/>
</li>
</ul>
</td>
<td>
<Roles :user="s.el"/>
</td>
<td>
<ul class="list-unstyled">
<li v-for="locale in s.el.profiles" v-if="locales[locale]">
<LocaleLink :link="`/@${s.el.username}`" :locale="locale">
{{ locales[locale].name }}
</LocaleLink>
</li>
</ul>
</td>
</template>
</Table>
</Loading>
</div>
</details>
</section>
@ -136,27 +138,32 @@
userFilter: '',
localeFilter: true,
adminsFilter: false,
users: undefined,
}
},
async asyncData({ app, store }) {
let stats = { users: {}};
let users = {};
try {
stats = await app.$axios.$get(`/admin/stats`);
} catch {}
try {
users = await app.$axios.$get(`/admin/users`);
} catch {}
return {
stats,
users,
};
},
methods: {
async loadUsers() {
if (this.users === undefined) {
this.users = await this.$axios.$get(`/admin/users`);
}
},
},
computed: {
visibleUsers() {
if (this.users === undefined) {
return [];
}
return Object.values(this.users).filter(u =>
u.username.toLowerCase().includes(this.userFilter.toLowerCase())
&& (!this.adminsFilter || u.roles !== '')