forked from potsda.mn/mobilizon
Merge branch 'search-fixes' into 'main'
Fix event card background color behind picture Closes #1174, #1172 et #1171 See merge request framasoft/mobilizon!1301
This commit is contained in:
Thomas Citharel
commit
3b7f0f8acf
|
|
@ -142,7 +142,7 @@ body {
|
|||
}
|
||||
|
||||
.dropdown-item-active {
|
||||
@apply bg-white text-black;
|
||||
@apply bg-white dark:bg-zinc-700 dark:text-zinc-100 text-black;
|
||||
}
|
||||
.dropdown-button {
|
||||
@apply inline-flex gap-1;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<form
|
||||
class=""
|
||||
v-if="isAbleToComment"
|
||||
@submit.prevent="createCommentForEvent(newComment)"
|
||||
@keyup.ctrl.enter="createCommentForEvent(newComment)"
|
||||
class="mt-2"
|
||||
>
|
||||
<o-notification
|
||||
v-if="isEventOrganiser && !areCommentsClosed"
|
||||
|
|
@ -26,6 +25,7 @@
|
|||
mode="comment"
|
||||
v-model="newComment.text"
|
||||
:aria-label="t('Comment body')"
|
||||
@submit="createCommentForEvent(newComment)"
|
||||
/>
|
||||
<p class="" v-if="emptyCommentError">
|
||||
{{ t("Comment text can't be empty") }}
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<p v-if="commentsLoading" class="text-center">
|
||||
{{ t("Loading comments…") }}
|
||||
</p>
|
||||
<transition-group tag="div" name="comment-empty-list" v-else>
|
||||
<transition-group tag="div" name="comment-empty-list" v-else class="mt-2">
|
||||
<transition-group
|
||||
key="list"
|
||||
name="comment-list"
|
||||
|
|
@ -61,18 +61,17 @@
|
|||
class="comment-list"
|
||||
tag="ul"
|
||||
>
|
||||
<comment
|
||||
class="root-comment"
|
||||
<event-comment
|
||||
class="root-comment my-2"
|
||||
:comment="comment"
|
||||
:event="event"
|
||||
:currentActor="currentActor"
|
||||
v-for="comment in filteredOrderedComments"
|
||||
:key="comment.id"
|
||||
@create-comment="createCommentForEvent"
|
||||
@delete-comment="
|
||||
deleteComment({
|
||||
commentId: comment.id as string,
|
||||
originCommentId: comment.originComment?.id,
|
||||
@delete-comment="commentToDelete => deleteComment({
|
||||
commentId: commentToDelete.id as string,
|
||||
originCommentId: commentToDelete.originComment?.id,
|
||||
})
|
||||
"
|
||||
/>
|
||||
|
|
@ -85,7 +84,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Comment from "@/components/Comment/EventComment.vue";
|
||||
import EventComment from "@/components/Comment/EventComment.vue";
|
||||
import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
|
||||
import { CommentModeration } from "@/types/enums";
|
||||
import { CommentModel, IComment } from "../../types/comment.model";
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
'bg-violet-1': commentSelected,
|
||||
'shadow-none': !rootComment,
|
||||
}"
|
||||
class="mbz-card p-2"
|
||||
class="bg-white dark:bg-zinc-900 rounded p-2"
|
||||
>
|
||||
<article :id="commentId" dir="auto">
|
||||
<article :id="commentId" dir="auto" class="mbz-comment">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-1" v-if="actorComment">
|
||||
|
|
@ -36,9 +36,9 @@
|
|||
>
|
||||
</div>
|
||||
|
||||
<a v-else :href="commentURL">
|
||||
<p v-else :href="commentURL">
|
||||
<span>{{ t("[deleted]") }}</span>
|
||||
</a>
|
||||
</p>
|
||||
<a :href="commentURL">
|
||||
<small v-if="comment.updatedAt">{{
|
||||
formatDistanceToNow(new Date(comment.updatedAt), {
|
||||
|
|
@ -47,19 +47,6 @@
|
|||
})
|
||||
}}</small>
|
||||
</a>
|
||||
<div v-if="!comment.deletedAt" class="flex">
|
||||
<button
|
||||
v-if="actorComment?.id === currentActor?.id"
|
||||
@click="deleteComment"
|
||||
>
|
||||
<Delete :size="16" />
|
||||
<span class="sr-only">{{ t("Delete") }}</span>
|
||||
</button>
|
||||
<button @click="reportModal">
|
||||
<Alert :size="16" />
|
||||
<span class="sr-only">{{ t("Report") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!comment.deletedAt"
|
||||
|
|
@ -68,11 +55,53 @@
|
|||
:lang="comment.language"
|
||||
/>
|
||||
<div v-else>{{ t("[This comment has been deleted]") }}</div>
|
||||
<nav class="flex gap-1 mt-1" v-if="!comment.deletedAt">
|
||||
<button
|
||||
class="cursor-pointer flex hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
|
||||
v-if="
|
||||
currentActor?.id &&
|
||||
event.options.commentModeration !== CommentModeration.CLOSED &&
|
||||
!comment.deletedAt
|
||||
"
|
||||
@click="createReplyToComment()"
|
||||
>
|
||||
<Reply />
|
||||
<span>{{ t("Reply") }}</span>
|
||||
</button>
|
||||
<o-dropdown aria-role="list">
|
||||
<template #trigger>
|
||||
<button
|
||||
class="cursor-pointer flex hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
|
||||
>
|
||||
<DotsHorizontal />
|
||||
<span class="sr-only">{{ t("More options") }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<o-dropdown-item
|
||||
aria-role="listitem"
|
||||
v-if="actorComment?.id === currentActor?.id"
|
||||
>
|
||||
<button class="flex items-center gap-1" @click="deleteComment">
|
||||
<Delete :size="16" />
|
||||
<span>{{ t("Delete") }}</span>
|
||||
</button>
|
||||
</o-dropdown-item>
|
||||
<o-dropdown-item aria-role="listitem">
|
||||
<button
|
||||
@click="isReportModalActive = true"
|
||||
class="flex items-center gap-1"
|
||||
>
|
||||
<Alert :size="16" />
|
||||
<span>{{ t("Report") }}</span>
|
||||
</button>
|
||||
</o-dropdown-item>
|
||||
</o-dropdown>
|
||||
</nav>
|
||||
<div class="" v-if="comment.totalReplies">
|
||||
<p
|
||||
<button
|
||||
v-if="!showReplies"
|
||||
@click="showReplies = true"
|
||||
class="flex cursor-pointer"
|
||||
class="flex cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
|
||||
>
|
||||
<ChevronDown />
|
||||
<span>{{
|
||||
|
|
@ -84,28 +113,16 @@
|
|||
comment.totalReplies
|
||||
)
|
||||
}}</span>
|
||||
</p>
|
||||
<p
|
||||
</button>
|
||||
<button
|
||||
v-else-if="comment.totalReplies && showReplies"
|
||||
@click="showReplies = false"
|
||||
class="flex cursor-pointer"
|
||||
class="flex cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
|
||||
>
|
||||
<ChevronUp />
|
||||
<span>{{ t("Hide replies") }}</span>
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
<nav
|
||||
v-if="
|
||||
currentActor?.id &&
|
||||
event.options.commentModeration !== CommentModeration.CLOSED &&
|
||||
!comment.deletedAt
|
||||
"
|
||||
@click="createReplyToComment()"
|
||||
class="flex gap-1 cursor-pointer"
|
||||
>
|
||||
<Reply />
|
||||
<span>{{ t("Reply") }}</span>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
<form
|
||||
|
|
@ -137,6 +154,7 @@
|
|||
:current-actor="currentActor"
|
||||
:aria-label="t('Comment body')"
|
||||
class="flex-1"
|
||||
@submit="replyToComment"
|
||||
/>
|
||||
<o-button
|
||||
:disabled="newComment.text.trim().length === 0"
|
||||
|
|
@ -149,29 +167,37 @@
|
|||
</div>
|
||||
</article>
|
||||
</form>
|
||||
<div>
|
||||
<div>
|
||||
<div @click="showReplies = false" />
|
||||
</div>
|
||||
<transition-group
|
||||
name="comment-replies"
|
||||
v-if="showReplies"
|
||||
tag="ul"
|
||||
class="flex flex-col gap-2"
|
||||
>
|
||||
<Comment
|
||||
v-for="reply in comment.replies"
|
||||
:key="reply.id"
|
||||
:comment="reply"
|
||||
:event="event"
|
||||
:currentActor="currentActor"
|
||||
:rootComment="false"
|
||||
@create-comment="emit('create-comment', $event)"
|
||||
@delete-comment="emit('delete-comment', $event)"
|
||||
@report-comment="emit('report-comment', $event)"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
<transition-group
|
||||
name="comment-replies"
|
||||
v-if="showReplies"
|
||||
tag="ul"
|
||||
class="flex flex-col gap-2"
|
||||
>
|
||||
<EventComment
|
||||
v-for="reply in comment.replies"
|
||||
:key="reply.id"
|
||||
:comment="reply"
|
||||
:event="event"
|
||||
:currentActor="currentActor"
|
||||
:rootComment="false"
|
||||
@create-comment="emit('create-comment', $event)"
|
||||
@delete-comment="emit('delete-comment', $event)"
|
||||
@report-comment="emit('report-comment', $event)"
|
||||
class="ml-2"
|
||||
/>
|
||||
</transition-group>
|
||||
<o-modal
|
||||
v-model:active="isReportModalActive"
|
||||
has-modal-card
|
||||
ref="reportModal"
|
||||
:close-button-aria-label="t('Close')"
|
||||
>
|
||||
<ReportModal
|
||||
:on-confirm="reportComment"
|
||||
:title="t('Report this comment')"
|
||||
:outside-domain="comment.actor?.domain"
|
||||
/>
|
||||
</o-modal>
|
||||
</li>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -197,8 +223,13 @@ import Delete from "vue-material-design-icons/Delete.vue";
|
|||
import Alert from "vue-material-design-icons/Alert.vue";
|
||||
import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
|
||||
import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
|
||||
import DotsHorizontal from "vue-material-design-icons/DotsHorizontal.vue";
|
||||
import Reply from "vue-material-design-icons/Reply.vue";
|
||||
import type { Locale } from "date-fns";
|
||||
import ReportModal from "@/components/Report/ReportModal.vue";
|
||||
import { useCreateReport } from "@/composition/apollo/report";
|
||||
import { Snackbar } from "@/plugins/snackbar";
|
||||
import { useProgrammatic } from "@oruga-ui/oruga-next";
|
||||
|
||||
const Editor = defineAsyncComponent(
|
||||
() => import("@/components/TextEditor.vue")
|
||||
|
|
@ -214,26 +245,20 @@ const props = withDefaults(
|
|||
{ rootComment: true }
|
||||
);
|
||||
|
||||
const emit = defineEmits([
|
||||
"create-comment",
|
||||
"delete-comment",
|
||||
"report-comment",
|
||||
]);
|
||||
const emit = defineEmits<{
|
||||
(e: "create-comment", comment: IComment): void;
|
||||
(e: "delete-comment", comment: IComment): void;
|
||||
(e: "report-comment", comment: IComment): void;
|
||||
}>();
|
||||
|
||||
const commentEditor = ref<typeof EditorComponent | null>(null);
|
||||
|
||||
// Hack because Vue only exports it's own interface.
|
||||
// See https://github.com/kaorun343/vue-property-decorator/issues/257
|
||||
// @Ref() readonly commentEditor!: EditorComponent & {
|
||||
// replyToComment: (comment: IComment) => void;
|
||||
// focus: () => void;
|
||||
// };
|
||||
|
||||
const newComment = ref<IComment>(new CommentModel());
|
||||
const replyTo = ref(false);
|
||||
const showReplies = ref(false);
|
||||
const route = useRoute();
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
const isReportModalActive = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
if (route?.hash.includes(`#comment-${props.comment.uuid}`)) {
|
||||
|
|
@ -310,219 +335,57 @@ const reportModal = (): void => {
|
|||
// });
|
||||
};
|
||||
|
||||
// const reportComment = async (
|
||||
// content: string,
|
||||
// forward: boolean
|
||||
// ): Promise<void> => {
|
||||
// try {
|
||||
// if (!props.comment.actor) return;
|
||||
const {
|
||||
mutate: createReportMutation,
|
||||
onError: onCreateReportError,
|
||||
onDone: oneCreateReportDone,
|
||||
} = useCreateReport();
|
||||
|
||||
// const { onError, onDone } = useMutation(CREATE_REPORT, () => ({
|
||||
// variables: {
|
||||
// eventId: props.event.id,
|
||||
// reportedId: props.comment.actor?.id,
|
||||
// commentsIds: [props.comment.id],
|
||||
// content,
|
||||
// forward,
|
||||
// },
|
||||
// }));
|
||||
const reportComment = async (
|
||||
content: string,
|
||||
forward: boolean
|
||||
): Promise<void> => {
|
||||
if (!props.comment.actor) return;
|
||||
createReportMutation({
|
||||
eventId: props.event.id,
|
||||
reportedId: props.comment.actor?.id ?? "",
|
||||
commentsIds: [props.comment.id ?? ""],
|
||||
content,
|
||||
forward,
|
||||
});
|
||||
};
|
||||
|
||||
const snackbar = inject<Snackbar>("snackbar");
|
||||
const { oruga } = useProgrammatic();
|
||||
|
||||
onCreateReportError((e) => {
|
||||
isReportModalActive.value = false;
|
||||
if (e.message) {
|
||||
snackbar?.open({
|
||||
message: e.message,
|
||||
variant: "danger",
|
||||
position: "bottom",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
oneCreateReportDone(() => {
|
||||
isReportModalActive.value = false;
|
||||
oruga.notification.open({
|
||||
message: t("Comment from {'@'}{username} reported", {
|
||||
username: props.comment.actor?.preferredUsername,
|
||||
}),
|
||||
variant: "success",
|
||||
position: "bottom-right",
|
||||
duration: 5000,
|
||||
});
|
||||
});
|
||||
|
||||
// // this.$buefy.notification.open({
|
||||
// // message: this.t("Comment from @{username} reported", {
|
||||
// // username: this.comment.actor.preferredUsername,
|
||||
// // }) as string,
|
||||
// // type: "is-success",
|
||||
// // position: "is-bottom-right",
|
||||
// // duration: 5000,
|
||||
// // });
|
||||
// } catch (e: any) {
|
||||
// if (e.message) {
|
||||
// // Snackbar.open({
|
||||
// // message: e.message,
|
||||
// // type: "is-danger",
|
||||
// // position: "is-bottom",
|
||||
// // });
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
const actorComment = computed(() => props.comment.actor);
|
||||
const dateFnsLocale = inject<Locale>("dateFnsLocale");
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/_mixins" as *;
|
||||
form.reply {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.first-line {
|
||||
margin-bottom: 3px;
|
||||
|
||||
* {
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
|
||||
strong.organizer {
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
// & > small {
|
||||
// @include margin-left(0.3rem);
|
||||
// }
|
||||
}
|
||||
|
||||
.editor-line {
|
||||
display: flex;
|
||||
max-width: calc(80rem - 64px);
|
||||
|
||||
.editor {
|
||||
flex: 1;
|
||||
// @include padding-right(10px);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a.comment-link {
|
||||
text-decoration: none;
|
||||
// @include margin-left(5px);
|
||||
color: text;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
small {
|
||||
&:hover {
|
||||
color: hsl(0, 0%, 21%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-element {
|
||||
padding: 0.25rem;
|
||||
border-radius: 5px;
|
||||
|
||||
&.announcement {
|
||||
small {
|
||||
color: hsl(0, 0%, 21%);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.reply-btn,
|
||||
small,
|
||||
span,
|
||||
strong,
|
||||
a.comment-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// .media-left {
|
||||
// @include margin-right(5px);
|
||||
// }
|
||||
}
|
||||
|
||||
.root-comment .replies {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// @include margin-right(10px);
|
||||
|
||||
.vertical-border {
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
margin: 10px calc(1rem + 1px);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media .media-content {
|
||||
overflow-x: initial;
|
||||
.content {
|
||||
text-align: start;
|
||||
.editor-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.media:hover .media-content .icons {
|
||||
display: inline;
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.load-replies {
|
||||
cursor: pointer;
|
||||
|
||||
& > p > span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.level-item.reply-btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
article {
|
||||
border-radius: 4px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.comment-replies {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.comment-replies-enter-active,
|
||||
.comment-replies-leave-active,
|
||||
.comment-replies-move {
|
||||
transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
|
||||
.comment-replies-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(50px) scaleY(0.5);
|
||||
}
|
||||
|
||||
.comment-replies-enter-to {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scaleY(1);
|
||||
}
|
||||
|
||||
.comment-replies-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.comment-replies-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
// .reply-action .icon {
|
||||
// @include padding-right(0.4rem);
|
||||
// }
|
||||
|
||||
.visually-hidden {
|
||||
display: none;
|
||||
<style>
|
||||
article.mbz-comment .mention.h-card {
|
||||
@apply inline-block border border-zinc-600 dark:border-zinc-300 rounded py-0.5 px-1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
22
js/src/components/Editor/RichEditorKeyboardSubmit.ts
Normal file
22
js/src/components/Editor/RichEditorKeyboardSubmit.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { Extension } from "@tiptap/vue-3";
|
||||
|
||||
export interface RichEditorKeyboardSubmitOptions {
|
||||
submit: () => void;
|
||||
}
|
||||
|
||||
export default Extension.create<RichEditorKeyboardSubmitOptions>({
|
||||
name: "RichEditorKeyboardSubmit",
|
||||
addOptions() {
|
||||
return {
|
||||
submit: () => ({}),
|
||||
};
|
||||
},
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
"Ctrl-Enter": () => {
|
||||
this.options.submit();
|
||||
return true;
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
:isInternal="isInternal"
|
||||
>
|
||||
<div
|
||||
class="bg-secondary rounded-lg"
|
||||
class="rounded-lg"
|
||||
:class="{ 'sm:w-full sm:max-w-[20rem]': mode === 'row' }"
|
||||
>
|
||||
<figure class="block relative pt-40">
|
||||
|
|
|
|||
|
|
@ -1,23 +1,35 @@
|
|||
<template>
|
||||
<div class="dark:bg-zinc-700 p-2 rounded" v-if="report">
|
||||
<div class="flex gap-1">
|
||||
<figure class="" v-if="report.reported.avatar">
|
||||
<img
|
||||
alt=""
|
||||
:src="report.reported.avatar.url"
|
||||
class="rounded-full"
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
<div class="">
|
||||
<p class="" v-if="report.reported.name">{{ report.reported.name }}</p>
|
||||
<p class="">@{{ usernameWithDomain(report.reported) }}</p>
|
||||
<div
|
||||
class="bg-mbz-yellow-alt-50 hover:bg-mbz-yellow-alt-100 dark:bg-zinc-700 hover:dark:bg-zinc-600 rounded"
|
||||
v-if="report"
|
||||
>
|
||||
<div class="flex justify-between gap-1 border-b p-2">
|
||||
<div class="flex gap-1">
|
||||
<figure class="" v-if="report.reported.avatar">
|
||||
<img
|
||||
alt=""
|
||||
:src="report.reported.avatar.url"
|
||||
class="rounded-full"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="24" />
|
||||
<div class="">
|
||||
<p class="" v-if="report.reported.name">{{ report.reported.name }}</p>
|
||||
<p class="text-zinc-700 dark:text-zinc-100 text-sm">
|
||||
@{{ usernameWithDomain(report.reported) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p v-if="report.reported.suspended" class="text-red-700 font-bold">
|
||||
{{ t("Suspended") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reported_by">
|
||||
<div class="p-2">
|
||||
<div class="">
|
||||
<span v-if="report.reporter.type === ActorType.APPLICATION">
|
||||
{{
|
||||
|
|
@ -26,6 +38,14 @@
|
|||
})
|
||||
}}
|
||||
</span>
|
||||
<span
|
||||
v-if="
|
||||
report.reporter.preferredUsername === 'anonymous' &&
|
||||
!report.reporter.domain
|
||||
"
|
||||
>
|
||||
{{ t("Reported by someone anonymously") }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{
|
||||
t("Reported by {reporter}", {
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@ import { computed, ref } from "vue";
|
|||
import { useI18n } from "vue-i18n";
|
||||
import { IComment } from "../../types/comment.model";
|
||||
import { usernameWithDomain } from "@/types/actor";
|
||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
|
|
|
|||
|
|
@ -208,6 +208,7 @@ import Gapcursor from "@tiptap/extension-gapcursor";
|
|||
import History from "@tiptap/extension-history";
|
||||
import { IActor, IPerson, usernameWithDomain } from "../types/actor";
|
||||
import CustomImage from "./Editor/Image";
|
||||
import RichEditorKeyboardSubmit from "./Editor/RichEditorKeyboardSubmit";
|
||||
import { UPLOAD_MEDIA } from "../graphql/upload";
|
||||
import { listenFileUpload } from "../utils/upload";
|
||||
import Mention from "@tiptap/extension-mention";
|
||||
|
|
@ -252,7 +253,7 @@ const props = withDefaults(
|
|||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
const emit = defineEmits(["update:modelValue", "submit"]);
|
||||
|
||||
const isDescriptionMode = computed((): boolean => {
|
||||
return props.mode === "description" || isBasicMode.value;
|
||||
|
|
@ -297,7 +298,7 @@ const editor = useEditor({
|
|||
"aria-label": props.ariaLabel ?? "",
|
||||
role: "textbox",
|
||||
class:
|
||||
"prose dark:prose-invert prose-sm sm:prose lg:prose-lg xl:prose-xl m-5 focus:outline-none !max-w-full",
|
||||
"prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-zinc-50 dark:bg-zinc-700 focus:outline-none !max-w-full",
|
||||
},
|
||||
transformPastedHTML: transformPastedHTML,
|
||||
},
|
||||
|
|
@ -323,6 +324,9 @@ const editor = useEditor({
|
|||
Link.configure({
|
||||
HTMLAttributes: { target: "_blank", rel: "noopener noreferrer ugc" },
|
||||
}),
|
||||
RichEditorKeyboardSubmit.configure({
|
||||
submit: () => emit("submit"),
|
||||
}),
|
||||
],
|
||||
injectCSS: false,
|
||||
content: props.modelValue,
|
||||
|
|
@ -480,9 +484,7 @@ onBeforeUnmount(() => {
|
|||
div.ProseMirror {
|
||||
min-height: 2.5rem;
|
||||
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
color: #363636;
|
||||
border: 1px solid #dbdbdb;
|
||||
padding: 12px 6px;
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export function useAnonymousReportsConfig() {
|
|||
}>(ANONYMOUS_REPORTS_CONFIG, undefined, { fetchPolicy: "cache-only" });
|
||||
|
||||
const anonymousReportsConfig = computed(
|
||||
() => configResult.value?.config?.anonymous?.participation
|
||||
() => configResult.value?.config?.anonymous?.reports
|
||||
);
|
||||
return { anonymousReportsConfig, error, loading };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,11 @@ export const REPORTS = gql`
|
|||
id
|
||||
reported {
|
||||
...ActorFragment
|
||||
suspended
|
||||
}
|
||||
reporter {
|
||||
...ActorFragment
|
||||
suspended
|
||||
}
|
||||
event {
|
||||
id
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
"Close": "Close",
|
||||
"Closed": "Closed",
|
||||
"Comment deleted": "Comment deleted",
|
||||
"Comment from @{username} reported": "Comment from @{username} reported",
|
||||
"Comment from {'@'}{username} reported": "Comment from {'@'}{username} reported",
|
||||
"Comments": "Comments",
|
||||
"Confirm my participation": "Confirm my participation",
|
||||
"Confirm my particpation": "Confirm my particpation",
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@
|
|||
"Closed": "Fermé",
|
||||
"Comment body": "Corps du commentaire",
|
||||
"Comment deleted": "Commentaire supprimé",
|
||||
"Comment from @{username} reported": "Commentaire de @{username} signalé",
|
||||
"Comment from {'@'}{username} reported": "Commentaire de {'@'}{username} signalé",
|
||||
"Comment text can't be empty": "Le texte du commentaire ne peut être vide",
|
||||
"Comments": "Commentaires",
|
||||
"Comments are closed for everybody else.": "Les commentaires sont fermés pour tou·te·s les autres.",
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ const { result: membershipsResult } = useQuery<{
|
|||
() => ({ enabled: currentActor.value?.id !== undefined })
|
||||
);
|
||||
const memberships = computed(
|
||||
() => membershipsResult.value?.person.memberships.elements
|
||||
() => membershipsResult.value?.person.memberships?.elements
|
||||
);
|
||||
|
||||
const route = useRoute();
|
||||
|
|
|
|||
|
|
@ -543,7 +543,7 @@
|
|||
:to="{
|
||||
name: RouteName.GROUP_EVENTS,
|
||||
params: { preferredUsername: usernameWithDomain(group) },
|
||||
query: { future: false },
|
||||
query: { showPassedEvents: true },
|
||||
}"
|
||||
>{{ t("View past events") }}</o-button
|
||||
>
|
||||
|
|
@ -559,7 +559,9 @@
|
|||
:to="{
|
||||
name: RouteName.GROUP_EVENTS,
|
||||
params: { preferredUsername: usernameWithDomain(group) },
|
||||
query: { future: organizedEvents.elements.length > 0 },
|
||||
query: {
|
||||
showPassedEvents: organizedEvents.elements.length === 0,
|
||||
},
|
||||
}"
|
||||
>{{ t("View all events") }}</o-button
|
||||
>
|
||||
|
|
@ -696,7 +698,7 @@ const {
|
|||
group,
|
||||
loading: groupLoading,
|
||||
refetch: refetchGroup,
|
||||
} = useGroup(props.preferredUsername);
|
||||
} = useGroup(props.preferredUsername, { afterDateTime: new Date() });
|
||||
const router = useRouter();
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
|
@ -913,36 +915,42 @@ const toggleFollowNotify = () => {
|
|||
});
|
||||
};
|
||||
|
||||
const reportGroup = async (content: string, forward: boolean) => {
|
||||
isReportModalActive.value = false;
|
||||
reportModalRef.value.close();
|
||||
const {
|
||||
mutate: createReportMutation,
|
||||
onError: onCreateReportError,
|
||||
onDone: onCreateReportDone,
|
||||
} = useCreateReport();
|
||||
|
||||
const {
|
||||
mutate: createReportMutation,
|
||||
onError: onCreateReportError,
|
||||
onDone: oneCreateReportDone,
|
||||
} = useCreateReport();
|
||||
const reportGroup = (content: string, forward: boolean) => {
|
||||
isReportModalActive.value = false;
|
||||
console.debug("report group", {
|
||||
reportedId: group.value?.id ?? "",
|
||||
content,
|
||||
forward,
|
||||
});
|
||||
|
||||
createReportMutation({
|
||||
reportedId: group.value?.id ?? "",
|
||||
content,
|
||||
forward,
|
||||
});
|
||||
|
||||
oneCreateReportDone(() => {
|
||||
notifier?.success(t("Group {groupTitle} reported", { groupTitle }));
|
||||
});
|
||||
|
||||
onCreateReportError((error: any) => {
|
||||
console.error(error);
|
||||
notifier?.error(
|
||||
t("Error while reporting group {groupTitle}", {
|
||||
groupTitle,
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
onCreateReportDone(() => {
|
||||
notifier?.success(
|
||||
t("Group {groupTitle} reported", { groupTitle: groupTitle.value })
|
||||
);
|
||||
});
|
||||
|
||||
onCreateReportError((error: any) => {
|
||||
console.error(error);
|
||||
notifier?.error(
|
||||
t("Error while reporting group {groupTitle}", {
|
||||
groupTitle: groupTitle.value,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
const triggerShare = (): void => {
|
||||
if (navigator.share) {
|
||||
navigator
|
||||
|
|
@ -1030,8 +1038,8 @@ const physicalAddress = computed((): Address | null => {
|
|||
return new Address(group.value?.physicalAddress);
|
||||
});
|
||||
|
||||
const ableToReport = computed((): boolean | undefined => {
|
||||
return anonymousReportsConfig.value?.allowed;
|
||||
const ableToReport = computed((): boolean => {
|
||||
return anonymousReportsConfig.value?.allowed === true;
|
||||
});
|
||||
|
||||
const organizedEvents = computed((): Paginate<IEvent> => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,7 +119,10 @@ const { result: reportsResult } = useQuery<{ reports: Paginate<IReport> }>(
|
|||
status: status.value,
|
||||
limit: REPORT_PAGE_LIMIT,
|
||||
domain: filterDomain.value,
|
||||
})
|
||||
}),
|
||||
{
|
||||
fetchPolicy: "cache-and-network",
|
||||
}
|
||||
);
|
||||
|
||||
const reports = computed(
|
||||
|
|
|
|||
|
|
@ -136,8 +136,9 @@
|
|||
</tr>
|
||||
<tr v-if="report.event && report.comments.length > 0">
|
||||
<td>{{ t("Event") }}</td>
|
||||
<td>
|
||||
<td class="flex gap-2 items-center">
|
||||
<router-link
|
||||
class="underline"
|
||||
:to="{
|
||||
name: RouteName.EVENT,
|
||||
params: { uuid: report.event.uuid },
|
||||
|
|
@ -145,41 +146,32 @@
|
|||
>
|
||||
{{ report.event.title }}
|
||||
</router-link>
|
||||
<span>
|
||||
<!-- <o-button-->
|
||||
<!-- tag="router-link"-->
|
||||
<!-- variant="primary"-->
|
||||
<!-- :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
|
||||
<!-- icon-left="pencil"-->
|
||||
<!-- size="small">{{ t('Edit') }}</o-button>-->
|
||||
<o-button
|
||||
variant="danger"
|
||||
@click="confirmEventDelete()"
|
||||
icon-left="delete"
|
||||
size="small"
|
||||
>{{ t("Delete") }}</o-button
|
||||
>
|
||||
</span>
|
||||
<o-button
|
||||
variant="danger"
|
||||
@click="confirmEventDelete()"
|
||||
icon-left="delete"
|
||||
>{{ t("Delete") }}</o-button
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>{{ t("Report reason") }}</h2>
|
||||
<div class="dark:bg-zinc-700 p-2 rounded my-2">
|
||||
<section class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3">
|
||||
<h2 class="mb-1">{{ t("Report reason") }}</h2>
|
||||
<div class="">
|
||||
<div class="flex gap-1">
|
||||
<figure class="" v-if="report.reported.avatar">
|
||||
<img
|
||||
alt=""
|
||||
:src="report.reported.avatar.url"
|
||||
class="rounded-full"
|
||||
width="48"
|
||||
height="48"
|
||||
width="36"
|
||||
height="36"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
<AccountCircle v-else :size="36" />
|
||||
<div class="">
|
||||
<p class="" v-if="report.reported.name">
|
||||
{{ report.reported.name }}
|
||||
|
|
@ -196,15 +188,12 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="" v-if="report.event && report.comments.length === 0">
|
||||
<h2>{{ t("Reported content") }}</h2>
|
||||
<EventCard :event="report.event" mode="row" class="my-2" />
|
||||
<!-- <o-button-->
|
||||
<!-- tag="router-link"-->
|
||||
<!-- variant="primary"-->
|
||||
<!-- :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
|
||||
<!-- icon-left="pencil"-->
|
||||
<!-- size="small">{{ t('Edit') }}</o-button>-->
|
||||
<section
|
||||
class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3"
|
||||
v-if="report.event && report.comments.length === 0"
|
||||
>
|
||||
<h2 class="mb-1">{{ t("Reported content") }}</h2>
|
||||
<EventCard :event="report.event" mode="row" class="my-2 max-w-4xl" />
|
||||
<o-button
|
||||
variant="danger"
|
||||
@click="confirmEventDelete()"
|
||||
|
|
@ -214,50 +203,52 @@
|
|||
>
|
||||
</section>
|
||||
|
||||
<div v-if="report.comments.length > 0">
|
||||
<section
|
||||
class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3"
|
||||
v-if="report.comments.length > 0"
|
||||
>
|
||||
<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 class="flex gap-1">
|
||||
<div class="">
|
||||
<figure class="" v-if="comment.actor && comment.actor.avatar">
|
||||
<article>
|
||||
<div class="flex gap-1">
|
||||
<figure class="" v-if="comment.actor?.avatar">
|
||||
<img
|
||||
:src="comment.actor.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
:src="comment.actor.avatar?.url"
|
||||
class="rounded-full"
|
||||
width="36"
|
||||
height="36"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle :size="48" v-else />
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="prose dark:prose-invert">
|
||||
<span v-if="comment.actor">
|
||||
<strong>{{ comment.actor.name }}</strong>
|
||||
<small>@{{ comment.actor.preferredUsername }}</small>
|
||||
</span>
|
||||
<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>
|
||||
<br />
|
||||
<p v-html="comment.text" />
|
||||
</div>
|
||||
<o-button
|
||||
variant="danger"
|
||||
@click="confirmCommentDelete(comment)"
|
||||
icon-left="delete"
|
||||
size="small"
|
||||
>{{ t("Delete") }}</o-button
|
||||
>
|
||||
</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
|
||||
>
|
||||
</article>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>{{ t("Notes") }}</h2>
|
||||
<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
|
||||
class="box note"
|
||||
class=""
|
||||
v-for="note in report.notes"
|
||||
:id="`note-${note.id}`"
|
||||
:key="note.id"
|
||||
|
|
@ -536,8 +527,4 @@ tbody td img.image,
|
|||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
td > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -529,6 +529,16 @@
|
|||
class="my-4"
|
||||
/>
|
||||
</div>
|
||||
<o-notification v-else-if="searchLoading === false" variant="info">
|
||||
<p>{{ t("No events found") }}</p>
|
||||
<p v-if="searchIsUrl && !currentUser?.id">
|
||||
{{
|
||||
t(
|
||||
"Only registered users may fetch remote events from their URL."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</o-notification>
|
||||
<o-pagination
|
||||
v-if="
|
||||
(searchEvents && searchEvents?.total > EVENT_PAGE_LIMIT) ||
|
||||
|
|
@ -544,16 +554,6 @@
|
|||
:aria-page-label="t('Page')"
|
||||
:aria-current-label="t('Current page')"
|
||||
/>
|
||||
<o-notification v-else-if="searchLoading === false" variant="info">
|
||||
<p>{{ t("No events found") }}</p>
|
||||
<p v-if="searchIsUrl && !currentUser?.id">
|
||||
{{
|
||||
t(
|
||||
"Only registered users may fetch remote events from their URL."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</o-notification>
|
||||
</template>
|
||||
<template v-else-if="contentType === ContentType.EVENTS">
|
||||
<template v-if="searchEvents && searchEvents.total > 0">
|
||||
|
|
|
|||
|
|
@ -1272,16 +1272,11 @@ defmodule Mobilizon.Events do
|
|||
end
|
||||
end
|
||||
|
||||
# @spec events_for_search_query(String.t()) :: Ecto.Query.t()
|
||||
# defp events_for_search_query("") do
|
||||
# Event
|
||||
# |> join: rank in fragment("")
|
||||
# end
|
||||
|
||||
defp events_for_search_query(search_string) do
|
||||
from(event in Event,
|
||||
join: id_and_rank in matching_event_ids_and_ranks(search_string),
|
||||
on: id_and_rank.id == event.id
|
||||
Event
|
||||
|> distinct(:id)
|
||||
|> join(:inner, [e], id_and_rank in matching_event_ids_and_ranks(search_string),
|
||||
on: id_and_rank.id == e.id
|
||||
)
|
||||
end
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue