build: switch from yarn to npm to manage js dependencies and move js contents to root
yarn v1 is being deprecated and starts to have some issues Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
482
src/views/Moderation/LogsView.vue
Normal file
482
src/views/Moderation/LogsView.vue
Normal file
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<div>
|
||||
<breadcrumbs-nav
|
||||
:links="[
|
||||
{
|
||||
name: RouteName.MODERATION,
|
||||
text: $t('Moderation'),
|
||||
},
|
||||
{
|
||||
name: RouteName.REPORT_LOGS,
|
||||
text: $t('Moderation log'),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<section v-if="actionLogs.total > 0 && actionLogs.elements.length > 0">
|
||||
<ul>
|
||||
<li
|
||||
v-for="log in actionLogs.elements"
|
||||
:key="log.id"
|
||||
class="bg-mbz-yellow-alt-50 hover:bg-mbz-yellow-alt-100 dark:bg-zinc-700 hover:dark:bg-zinc-600 rounded p-2 my-1"
|
||||
>
|
||||
<div class="flex gap-1">
|
||||
<div class="flex gap-1">
|
||||
<figure class="h-10 w-10" v-if="log.actor?.avatar">
|
||||
<img
|
||||
alt=""
|
||||
:src="log.actor.avatar?.url"
|
||||
class="object-cover rounded-full h-full w-full"
|
||||
width="36"
|
||||
height="36"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="36" />
|
||||
</div>
|
||||
<div>
|
||||
<i18n-t
|
||||
v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
|
||||
tag="span"
|
||||
keypath="{moderator} closed {report}"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #report>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.REPORT,
|
||||
params: { reportId: log.object.id },
|
||||
}"
|
||||
>{{
|
||||
$t("report #{report_number}", {
|
||||
report_number: log.object.id,
|
||||
})
|
||||
}}
|
||||
</router-link>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"
|
||||
tag="span"
|
||||
keypath="{moderator} reopened {report}"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #report>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.REPORT,
|
||||
params: { reportId: log.object.id },
|
||||
}"
|
||||
>{{
|
||||
$t("report #{report_number}", {
|
||||
report_number: log.object.id,
|
||||
})
|
||||
}}
|
||||
</router-link>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else-if="
|
||||
log.action === ActionLogAction.REPORT_UPDATE_RESOLVED
|
||||
"
|
||||
tag="span"
|
||||
keypath="{moderator} marked {report} as resolved"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #report>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.REPORT,
|
||||
params: { reportId: log.object.id },
|
||||
}"
|
||||
>{{
|
||||
$t("report #{report_number}", {
|
||||
report_number: log.object.id,
|
||||
})
|
||||
}}
|
||||
</router-link>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else-if="log.action === ActionLogAction.NOTE_CREATION"
|
||||
tag="span"
|
||||
keypath="{moderator} added a note on {report}"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #report>
|
||||
<router-link
|
||||
class="underline"
|
||||
v-if="log.object.report"
|
||||
:to="{
|
||||
name: RouteName.REPORT,
|
||||
params: { reportId: log.object.report.id },
|
||||
}"
|
||||
>{{
|
||||
$t("report #{report_number}", {
|
||||
report_number: log.object.report.id,
|
||||
})
|
||||
}}
|
||||
</router-link>
|
||||
<span v-else>{{ $t("a non-existent report") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else-if="log.action === ActionLogAction.EVENT_DELETION"
|
||||
tag="span"
|
||||
keypath='{moderator} deleted an event named "{title}"'
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #title>
|
||||
<b>{{ log.object.title }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else-if="
|
||||
log.action === ActionLogAction.ACTOR_SUSPENSION &&
|
||||
log.object.__typename == 'Person'
|
||||
"
|
||||
tag="span"
|
||||
keypath="{moderator} suspended profile {profile}"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #profile>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.object.id },
|
||||
}"
|
||||
>{{ displayNameAndUsername(log.object) }}
|
||||
</router-link>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else-if="
|
||||
log.action === ActionLogAction.ACTOR_UNSUSPENSION &&
|
||||
log.object.__typename == 'Person'
|
||||
"
|
||||
tag="span"
|
||||
keypath="{moderator} has unsuspended profile {profile}"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #profile>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.object.id },
|
||||
}"
|
||||
>{{ displayNameAndUsername(log.object) }}
|
||||
</router-link>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else-if="
|
||||
log.action === ActionLogAction.ACTOR_SUSPENSION &&
|
||||
log.object.__typename == 'Group'
|
||||
"
|
||||
tag="span"
|
||||
keypath="{moderator} suspended group {profile}"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #profile>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_GROUP_PROFILE,
|
||||
params: { id: log.object.id },
|
||||
}"
|
||||
>{{ displayNameAndUsername(log.object) }}
|
||||
</router-link>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else-if="
|
||||
log.action === ActionLogAction.ACTOR_UNSUSPENSION &&
|
||||
log.object.__typename == 'Group'
|
||||
"
|
||||
tag="span"
|
||||
keypath="{moderator} has unsuspended group {profile}"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #profile>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_GROUP_PROFILE,
|
||||
params: { id: log.object.id },
|
||||
}"
|
||||
>{{ displayNameAndUsername(log.object) }}
|
||||
</router-link>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else-if="log.action === ActionLogAction.USER_DELETION"
|
||||
tag="span"
|
||||
keypath="{moderator} has deleted user {user}"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #user>
|
||||
<router-link
|
||||
class="underline"
|
||||
v-if="log.object.confirmedAt"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_USER_PROFILE,
|
||||
params: { id: log.object.id },
|
||||
}"
|
||||
>{{ log.object.email }}
|
||||
</router-link>
|
||||
<b v-else>{{ log.object.email }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<span
|
||||
v-else-if="
|
||||
log.action === ActionLogAction.COMMENT_DELETION &&
|
||||
log.object.event
|
||||
"
|
||||
>
|
||||
<i18n-t
|
||||
tag="span"
|
||||
keypath="{moderator} has deleted a comment from {author} under the event {event}"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #event>
|
||||
<router-link
|
||||
class="underline"
|
||||
v-if="log.object.event && log.object.event.uuid"
|
||||
:to="{
|
||||
name: RouteName.EVENT,
|
||||
params: { uuid: log.object.event.uuid },
|
||||
}"
|
||||
>{{ log.object.event.title }}
|
||||
</router-link>
|
||||
<b v-else>{{ log.object.event.title }}</b>
|
||||
</template>
|
||||
<template #author>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.object.actor.id },
|
||||
}"
|
||||
>{{ displayNameAndUsername(log.object.actor) }}
|
||||
</router-link>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<pre v-html="log.object.text" />
|
||||
</span>
|
||||
<span v-else-if="log.action === ActionLogAction.COMMENT_DELETION">
|
||||
<i18n-t
|
||||
tag="span"
|
||||
keypath="{moderator} has deleted a comment from {author}"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
<template #author>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.object.actor.id },
|
||||
}"
|
||||
>{{ displayNameAndUsername(log.object.actor) }}
|
||||
</router-link>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<pre v-html="log.object.text" />
|
||||
</span>
|
||||
<i18n-t
|
||||
v-else
|
||||
tag="span"
|
||||
keypath="{moderator} has done an unknown action"
|
||||
>
|
||||
<template #moderator>
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: log.actor.id },
|
||||
}"
|
||||
>{{ displayName(log.actor) }}</router-link
|
||||
>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<br />
|
||||
<small>{{ formatDateTimeString(log.insertedAt) }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<o-pagination
|
||||
:total="actionLogs.total"
|
||||
v-model:current="page"
|
||||
:per-page="LOGS_PER_PAGE"
|
||||
:aria-next-label="$t('Next page')"
|
||||
:aria-previous-label="$t('Previous page')"
|
||||
:aria-page-label="$t('Page')"
|
||||
:aria-current-label="$t('Current page')"
|
||||
>
|
||||
</o-pagination>
|
||||
</section>
|
||||
<div v-else>
|
||||
<o-notification variant="info">{{
|
||||
$t("No moderation logs yet")
|
||||
}}</o-notification>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IActionLog } from "@/types/report.model";
|
||||
import { LOGS } from "@/graphql/report";
|
||||
import { ActionLogAction } from "@/types/enums";
|
||||
import RouteName from "../../router/name";
|
||||
import { displayNameAndUsername, displayName } from "../../types/actor";
|
||||
import { Paginate } from "@/types/paginate";
|
||||
import { useQuery } from "@vue/apollo-composable";
|
||||
import { integerTransformer, useRouteQuery } from "vue-use-route-query";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { formatDateTimeString } from "@/filters/datetime";
|
||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||
|
||||
const LOGS_PER_PAGE = 10;
|
||||
|
||||
const page = useRouteQuery("page", 1, integerTransformer);
|
||||
|
||||
const { result: actionLogsResult } = useQuery<{
|
||||
actionLogs: Paginate<IActionLog>;
|
||||
}>(LOGS, () => ({
|
||||
page: page.value,
|
||||
limit: LOGS_PER_PAGE,
|
||||
}));
|
||||
|
||||
const actionLogs = computed(
|
||||
() => actionLogsResult.value?.actionLogs ?? { total: 0, elements: [] }
|
||||
);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
title: computed(() => t("Moderation logs")),
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
img.image {
|
||||
display: inline-block;
|
||||
height: 1.5em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
section ul li {
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user