PronounsPage/pages/admin/pendingBans.vue
2024-09-12 10:11:25 +02:00

78 lines
2.7 KiB
Vue

<template>
<Page>
<NotFound v-if="!$isGranted('users') && !$isGranted('community')" />
<div v-else>
<p>
<nuxt-link to="/admin">
<Icon v="user-cog" />
<T>admin.header</T>
</nuxt-link>
</p>
<h2>
<Icon v="ban" />
Pending bans
({{ banProposals ? banProposals.length : 0 }})
</h2>
<section>
<table class="table table-striped">
<thead>
<tr>
<th>User</th>
<th>Votes</th>
</tr>
</thead>
<tbody>
<tr v-for="proposal in banProposals">
<td>
<a :href="`https://pronouns.page/@${proposal.username}`" target="_blank" rel="noopener">@{{ proposal.username }}</a>
<ul v-if="proposal.profiles" class="small list-inline">
<li
v-for="locale in proposal.profiles.split(',').filter((locale) => allLocales[locale])"
:key="locale"
class="list-inline-item"
>
<LocaleLink :link="`/@${proposal.username}`" :locale="locale">
{{ allLocales[locale].name }}
</LocaleLink>
</li>
</ul>
</td>
<td>
{{ proposal.votes }}
</td>
</tr>
</tbody>
</table>
</section>
</div>
</Page>
</template>
<script>
import { useNuxtApp, useFetch } from 'nuxt/app';
import useSimpleHead from '~/composables/useSimpleHead.ts';
export default {
async setup() {
definePageMeta({
path: '/admin/pending-bans',
});
const { $translator: translator } = useNuxtApp();
useSimpleHead({
title: `${translator.translate('admin.header')} • Pending bans`,
}, translator);
const banProposals = useFetch('/api/admin/ban-proposals');
const allLocales = useFetch('/api/admin/all-locales');
await Promise.all([banProposals, allLocales]);
return {
banProposals: banProposals.data.value,
allLocales: allLocales.data.value,
};
},
};
</script>