PronounsPage/app/pages/census/admin.vue

<script setup lang="ts">
import { PermissionAreas } from '#shared/helpers.ts';
import useConfig from '~/composables/useConfig.ts';
import useDialogue from '~/composables/useDialogue.ts';

definePageMeta({
    translatedPaths: (config) => {
        if (!config.census.enabled) {
            return [];
        }
        return [`/${encodeURIComponent(config.census.route)}/admin`];
    },
});

const config = useConfig();
const dialogue = useDialogue();

const queue = ref<any | undefined>();
const hideEmpty = ref(false);

const fetch = async () => {
    queue.value = await $fetch('/api/census/moderation/queue');
    if (queue.value.next) {
        queue.value.next.answers = JSON.parse(queue.value.next.answers);
        queue.value.next.writins = JSON.parse(queue.value.next.writins);
    }
};

onMounted(fetch);

const decide = async (decision: boolean) => {
    const id = queue.value.next.id;
    queue.value = undefined;
    await dialogue.postWithAlertOnError('/api/census/moderation/decide', {
        id,
        decision: decision ? 1 : 0,
    });
    await fetch();
    window.scrollTo(0, 0);
};
const skip = async () => {
    queue.value = undefined;
    await fetch();
    window.scrollTo(0, 0);
};
</script>

<template>
    <Page>
        <div v-if="$isGranted(PermissionAreas.Census)">
            <CommunityNav />

            <h2>
                <Icon v="user-chart" />
                <T>census.headerLong</T>
            </h2>

            <Spinner v-if="queue === undefined" size="5rem" />
            <div v-else-if="queue.count === 0" class="alert alert-success text-center">
                <Icon v="check-circle" :size="5" />
                <p><T>census.moderation.done</T></p>
            </div>
            <div v-else>
                <div class="alert alert-info">
                    <p>{{ queue.count }} <T>census.repliesAwaiting</T></p>
                    <label class="form-check form-switch d-inline-block">
                        <input v-model="hideEmpty" class="form-check-input" type="checkbox" role="switch">
                        Hide answers with no write-ins
                    </label>
                </div>

                <ol>
                    <template v-for="(question, i) in config.census.questions">
                        <li
                            v-if="!hideEmpty ||
                                queue.next.writins[i.toString()] ||
                                queue.next.answers[i.toString()] && question.type === 'textarea'"
                            :key="i"
                        >
                            <p>{{ question.question }}</p>
                            <p
                                v-if="queue.next.answers[i.toString()]"
                                :class="question.type === 'textarea' ? 'bg-primary text-white p-2 rounded' : ''"
                            >
                                <strong>{{ queue.next.answers[i.toString()] }}</strong>
                            </p>
                            <p v-if="queue.next.writins[i.toString()]" class="bg-primary text-white p-2 rounded">
                                <strong><em>{{ queue.next.writins[i.toString()] }}</em></strong>
                            </p>
                        </li>
                    </template>
                </ol>

                <div class="d-flex my-5">
                    <button type="button" class="btn btn-danger flex-grow-1 m-2" @click="decide(true)">
                        <T>census.moderation.troll</T>
                    </button>
                    <button type="button" class="btn btn-outline-primary flex-grow-1 m-2" @click="skip()">
                        <T>census.moderation.skip</T>
                    </button>
                    <button type="button" class="btn btn-success flex-grow-1 m-2" @click="decide(false)">
                        <T>census.moderation.ok</T>
                    </button>
                </div>
            </div>
        </div>
        <NotFound v-else />
    </Page>
</template>