hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(reports): improve reportview and allow removing content + resolve report automatically

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2023-08-31 14:37:54 +02:00
parent f2ac3e2e5d
commit b105c508c0
7 changed files with 230 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
js/src/views/Moderation/ReportView.vue
View File

@@ -150,26 +150,6 @@
<span v-else>{{ t("Unknown") }}</span>
</td>
</tr>
<!-- <tr v-if="report.events && report.comments.length > 0">
<td>{{ t("Events") }}</td>
<td class="flex gap-2 items-center">
<router-link
class="underline"
:to="{
name: RouteName.EVENT,
params: { uuid: report.events.uuid },
}"
>
{{ report.event.title }}
</router-link>
<o-button
variant="danger"
@click="confirmEventDelete()"
icon-left="delete"
>{{ t("Delete") }}</o-button
>
</td>
</tr> -->
</tbody>
</table>
</section>
@@ -213,16 +193,20 @@
"
>
<h2 class="mb-1">{{ t("Reported content") }}</h2>
<div v-for="event in report.events" :key="event.id">
<EventCard :event="event" mode="row" class="my-2 max-w-4xl" />
<o-button
variant="danger"
@click="confirmEventDelete(event)"
icon-left="delete"
size="small"
>{{ t("Delete") }}</o-button
>
</div>
<ul>
<li v-for="event in report.events" :key="event.id">
<EventCard :event="event" mode="row" class="my-2 max-w-4xl" />
<o-button
variant="danger"
@click="confirmEventDelete(event)"
icon-left="delete"
><template v-if="isOnlyReportedContent">{{
t("Delete event and resolve report")
}}</template
><template v-else>{{ t("Delete event") }}</template></o-button
>
</li>
</ul>
</section>
<section
@@ -232,41 +216,55 @@
<h2 class="mb-1">{{ t("Reported content") }}</h2>
<ul v-for="comment in report.comments" :key="comment.id">
<li>
<div class="" v-if="comment">
<article>
<div class="flex gap-1">
<figure class="" v-if="comment.actor?.avatar">
<img
alt=""
:src="comment.actor.avatar?.url"
class="rounded-full"
width="36"
height="36"
/>
</figure>
<AccountCircle v-else :size="36" />
<div>
<div v-if="comment.actor">
<p>{{ comment.actor.name }}</p>
<p>@{{ comment.actor.preferredUsername }}</p>
</div>
<span v-else>{{ t("Unknown actor") }}</span>
</div>
</div>
<div class="prose dark:prose-invert" v-html="comment.text" />
<o-button
variant="danger"
@click="confirmCommentDelete(comment)"
icon-left="delete"
size="small"
>{{ t("Delete") }}</o-button
<i18n-t keypath="Comment under event {eventTitle}" tag="p">
<template #eventTitle>
<router-link
:to="{
name: RouteName.EVENT,
params: { uuid: comment.event?.uuid },
}"
>
</article>
</div>
<b>{{ comment.event?.title }}</b>
</router-link>
</template>
</i18n-t>
<EventComment
:root-comment="true"
:comment="comment"
:event="comment.event as IEvent"
:current-actor="currentActor as IPerson"
:readOnly="true"
/>
<o-button
v-if="!comment.deletedAt"
variant="danger"
@click="confirmCommentDelete(comment)"
icon-left="delete"
><template v-if="isOnlyReportedContent">{{
t("Delete comment and resolve report")
}}</template
><template v-else>{{ t("Delete comment") }}</template></o-button
>
</li>
</ul>
</section>
<section
class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3"
v-if="
report.events &&
report.events?.length === 0 &&
report.comments.length === 0
"
>
<EmptyContent inline center icon="alert-circle">
{{ t("No content found") }}
<template #desc>
{{ t("Maybe the content was removed by the author or a moderator") }}
</template>
</EmptyContent>
</section>
<section class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3">
<h2 class="mb-1">{{ t("Notes") }}</h2>
<div
@@ -321,7 +319,11 @@
<script lang="ts" setup>
import { CREATE_REPORT_NOTE, REPORT, UPDATE_REPORT } from "@/graphql/report";
import { IReport, IReportNote } from "@/types/report.model";
import { displayNameAndUsername, usernameWithDomain } from "@/types/actor";
import {
IPerson,
displayNameAndUsername,
usernameWithDomain,
} from "@/types/actor";
import { DELETE_EVENT } from "@/graphql/event";
import uniq from "lodash/uniq";
import { nl2br } from "@/utils/html";
@@ -344,6 +346,8 @@ import { Notifier } from "@/plugins/notifier";
import EventCard from "@/components/Event/EventCard.vue";
import { useFeatures } from "@/composition/apollo/config";
import { IEvent } from "@/types/event.model";
import EmptyContent from "@/components/Utils/EmptyContent.vue";
import EventComment from "@/components/Comment/EventComment.vue";
const router = useRouter();
@@ -381,6 +385,14 @@ const errors = ref<string[]>([]);
const noteContent = ref("");
const reportedContent = computed(() => {
return [...(report.value?.events ?? []), ...(report.value?.comments ?? [])];
});
const isOnlyReportedContent = computed(
() => reportedContent.value.length === 1
);
const {
mutate: createReportNoteMutation,
onDone: createReportNoteMutationDone,
@@ -426,13 +438,23 @@ createReportNoteMutationError((error) => {
const dialog = inject<Dialog>("dialog");
const addResolveReportPart = computed(() => {
if (isOnlyReportedContent.value) {
return "<p>" + t("This will also resolve the report.") + "</p>";
}
return "";
});
const confirmEventDelete = (event: IEvent): void => {
dialog?.confirm({
title: t("Deleting event"),
message: t(
"Are you sure you want to <b>delete</b> this event? This action cannot be undone. You may want to engage the discussion with the event creator or edit its event instead."
),
confirmText: t("Delete Event"),
message:
t(
"Are you sure you want to <b>delete</b> this event? <b>This action cannot be undone</b>. You may want to engage the discussion with the event creator and ask them to edit their event instead."
) + addResolveReportPart.value,
confirmText: isOnlyReportedContent.value
? t("Delete event and resolve report")
: t("Delete event"),
variant: "danger",
hasIcon: true,
onConfirm: () => deleteEvent(event),
@@ -442,10 +464,13 @@ const confirmEventDelete = (event: IEvent): void => {
const confirmCommentDelete = (comment: IComment): void => {
dialog?.confirm({
title: t("Deleting comment"),
message: t(
"Are you sure you want to <b>delete</b> this comment? This action cannot be undone."
),
confirmText: t("Delete Comment"),
message:
t(
"Are you sure you want to <b>delete</b> this comment? <b>This action cannot be undone</b>."
) + addResolveReportPart.value,
confirmText: isOnlyReportedContent.value
? t("Delete comment and resolve report")
: t("Delete comment"),
variant: "danger",
hasIcon: true,
onConfirm: () => deleteCommentMutation({ commentId: comment.id }),
@@ -456,15 +481,46 @@ const {
mutate: deleteEventMutation,
onDone: deleteEventMutationDone,
onError: deleteEventMutationError,
} = useMutation<{ deleteEvent: { id: string } }>(DELETE_EVENT);
} = useMutation<{ deleteEvent: { id: string } }>(DELETE_EVENT, () => ({
update: (
store: ApolloCache<{ deleteEvent: { id: string } }>,
{ data }: FetchResult
) => {
if (data == null) return;
const reportCachedData = store.readQuery<{ report: IReport }>({
query: REPORT,
variables: { id: report.value?.id },
});
if (reportCachedData == null) return;
const { report: cachedReport } = reportCachedData;
if (cachedReport === null) {
console.error(
"Cannot update report events cache, because of null value."
);
return;
}
const updatedReport = {
...cachedReport,
events: cachedReport.events?.filter(
(cachedEvent) => cachedEvent.id !== data.deleteEvent.id
),
};
deleteEventMutationDone((result) => {
const eventTitle = result?.context?.eventTitle;
notifier?.success(
t("Event {eventTitle} deleted", {
eventTitle,
})
);
store.writeQuery({
query: REPORT,
variables: { id: report.value?.id },
data: { report: updatedReport },
});
},
}));
deleteEventMutationDone(async () => {
if (reportedContent.value.length === 0) {
await updateReport(ReportStatusEnum.RESOLVED);
notifier?.success(t("Event deleted and report resolved"));
} else {
notifier?.success(t("Event deleted"));
}
});
deleteEventMutationError((error) => {
@@ -484,10 +540,46 @@ const {
mutate: deleteCommentMutation,
onDone: deleteCommentMutationDone,
onError: deleteCommentMutationError,
} = useMutation<{ deleteComment: { id: string } }>(DELETE_COMMENT);
} = useMutation<{ deleteComment: { id: string } }>(DELETE_COMMENT, () => ({
update: (
store: ApolloCache<{ deleteComment: { id: string } }>,
{ data }: FetchResult
) => {
if (data == null) return;
const reportCachedData = store.readQuery<{ report: IReport }>({
query: REPORT,
variables: { id: report.value?.id },
});
if (reportCachedData == null) return;
const { report: cachedReport } = reportCachedData;
if (cachedReport === null) {
console.error(
"Cannot update report comments cache, because of null value."
);
return;
}
const updatedReport = {
...cachedReport,
comments: cachedReport.comments.filter(
(cachedComment) => cachedComment.id !== data.deleteComment.id
),
};
deleteCommentMutationDone(() => {
notifier?.success(t("Comment deleted") as string);
store.writeQuery({
query: REPORT,
variables: { id: report.value?.id },
data: { report: updatedReport },
});
},
}));
deleteCommentMutationDone(async () => {
if (reportedContent.value.length === 0) {
await updateReport(ReportStatusEnum.RESOLVED);
notifier?.success(t("Comment deleted and report resolved"));
} else {
notifier?.success(t("Comment deleted"));
}
});
deleteCommentMutationError((error) => {
@@ -534,8 +626,8 @@ const {
},
}));
onUpdateReportMutation(() => {
router.push({ name: RouteName.REPORTS });
onUpdateReportMutation(async () => {
await router.push({ name: RouteName.REPORTS });
});
onUpdateReportError((error) => {