PronounsPage/app/pages/admin/pendingBans.vue

<script setup lang="ts">
import { useNuxtApp, useFetch } from 'nuxt/app';

import { PermissionAreas } from '#shared/helpers.ts';
import useSimpleHead from '~/composables/useSimpleHead.ts';
import { getUrlForLocale } from '~/src/domain.ts';
import localeDescriptions from '~~/locale/locales.ts';

definePageMeta({
    path: '/admin/pending-bans',
});

const { $translator: translator } = useNuxtApp();
useSimpleHead({
    title: `${translator.translate('admin.header')} • Pending bans`,
}, translator);

const { data: banProposals } = await useFetch('/api/admin/ban-proposals');

const allLocales = Object.fromEntries(localeDescriptions.map((localeDescription) => {
    return [localeDescription.code, localeDescription];
}));
</script>

<template>
    <Page>
        <NotFound v-if="!$multiIsGranted([PermissionAreas.Users, PermissionAreas.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="`${getUrlForLocale('_')}/@${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: string) => allLocales?.[locale])"
                                        :key="locale"
                                        class="list-inline-item"
                                    >
                                        <LocaleLink :link="`/@${proposal.username}`" :locale="locale">
                                            {{ allLocales?.[locale].name }} {{ allLocales?.[locale].extra ? `(${allLocales?.[locale].extra})` : '' }}
                                        </LocaleLink>
                                    </li>
                                </ul>
                            </td>
                            <td>
                                {{ proposal.votes }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </div>
    </Page>
</template>