Improve reports

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2022-10-25 19:01:43 +02:00
parent cce0406db5
commit 389fa843e3
7 changed files with 487 additions and 432 deletions

View File

@@ -14,365 +14,404 @@
/>
<section v-if="actionLogs.total > 0 && actionLogs.elements.length > 0">
<ul>
<li v-for="log in actionLogs.elements" :key="log.id">
<div class="box">
<img
class="image"
:src="log.actor.avatar.url"
:alt="log.actor.avatar.alt || ''"
v-if="log.actor.avatar"
/>
<i18n-t
v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
tag="span"
keypath="{moderator} closed {report}"
>
<template #moderator>
<router-link
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
</template>
<template #report>
<router-link
: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
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
</template>
<template #report>
<router-link
: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
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
</template>
<template #report>
<router-link
: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
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
</template>
<template #report>
<router-link
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
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</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
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
</template>
<template #profile>
<router-link
: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
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
</template>
<template #profile>
<router-link
: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
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
</template>
<template #profile>
<router-link
: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
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
</template>
<template #profile>
<router-link
: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
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
</template>
<template #user>
<router-link
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
"
>
<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="" v-if="log.actor?.avatar">
<img
alt=""
:src="log.actor.avatar?.url"
class="rounded-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} has deleted a comment from {author} under the event {event}"
keypath="{moderator} closed {report}"
>
<template #moderator>
<router-link
class="underline"
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>{{ displayName(log.actor) }}</router-link
>
</template>
<template #event>
<template #report>
<router-link
v-if="log.object.event && log.object.event.uuid"
class="underline"
:to="{
name: RouteName.EVENT,
params: { uuid: log.object.event.uuid },
name: RouteName.REPORT,
params: { reportId: log.object.id },
}"
>{{ log.object.event.title }}
</router-link>
<b v-else>{{ log.object.event.title }}</b>
</template>
<template #author>
<router-link
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.object.actor.id },
}"
>{{ displayNameAndUsername(log.object.actor) }}
>{{
$t("report #{report_number}", {
report_number: log.object.id,
})
}}
</router-link>
</template>
</i18n-t>
<pre v-html="log.object.text" />
</span>
<span v-else-if="log.action === ActionLogAction.COMMENT_DELETION">
<i18n-t
v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"
tag="span"
keypath="{moderator} has deleted a comment from {author}"
keypath="{moderator} reopened {report}"
>
<template #moderator>
<router-link
class="underline"
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>{{ displayName(log.actor) }}</router-link
>
</template>
<template #author>
<template #report>
<router-link
class="underline"
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.object.actor.id },
name: RouteName.REPORT,
params: { reportId: log.object.id },
}"
>{{ displayNameAndUsername(log.object.actor) }}
>{{
$t("report #{report_number}", {
report_number: log.object.id,
})
}}
</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
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
<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>
</i18n-t>
<br />
<small>{{ formatDateTimeString(log.insertedAt) }}</small>
<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>
@@ -399,7 +438,7 @@ import { IActionLog } from "@/types/report.model";
import { LOGS } from "@/graphql/report";
import { ActionLogAction } from "@/types/enums";
import RouteName from "../../router/name";
import { displayNameAndUsername } from "../../types/actor";
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";
@@ -407,6 +446,7 @@ 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;
@@ -436,10 +476,6 @@ img.image {
vertical-align: text-bottom;
}
a {
text-decoration: none;
}
section ul li {
margin: 0.5rem auto;
}