Thomas Citharel
@@ -1,202 +1,219 @@
|
||||
<template>
|
||||
<section>
|
||||
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">
|
||||
{{ error }}
|
||||
</b-message>
|
||||
<div class="container" v-if="report">
|
||||
<div class="buttons">
|
||||
<b-button
|
||||
v-if="report.status !== ReportStatusEnum.RESOLVED"
|
||||
@click="updateReport(ReportStatusEnum.RESOLVED)"
|
||||
type="is-primary"
|
||||
>{{ $t("Mark as resolved") }}</b-button
|
||||
>
|
||||
<b-button
|
||||
v-if="report.status !== ReportStatusEnum.OPEN"
|
||||
@click="updateReport(ReportStatusEnum.OPEN)"
|
||||
type="is-success"
|
||||
>{{ $t("Reopen") }}</b-button
|
||||
>
|
||||
<b-button
|
||||
v-if="report.status !== ReportStatusEnum.CLOSED"
|
||||
@click="updateReport(ReportStatusEnum.CLOSED)"
|
||||
type="is-danger"
|
||||
>{{ $t("Close") }}</b-button
|
||||
>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="table is-striped is-fullwidth">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ $t("Reported identity") }}</td>
|
||||
<td>
|
||||
<router-link
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: report.reported.id },
|
||||
}"
|
||||
>
|
||||
<img
|
||||
v-if="report.reported.avatar"
|
||||
class="image"
|
||||
:src="report.reported.avatar.url"
|
||||
alt=""
|
||||
/>
|
||||
@{{ report.reported.preferredUsername }}
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t("Reported by") }}</td>
|
||||
<td v-if="report.reporter.type === ActorType.APPLICATION">
|
||||
{{ report.reporter.domain }}
|
||||
</td>
|
||||
<td v-else>
|
||||
<router-link
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: report.reporter.id },
|
||||
}"
|
||||
>
|
||||
<img
|
||||
v-if="report.reporter.avatar"
|
||||
class="image"
|
||||
:src="report.reporter.avatar.url"
|
||||
alt=""
|
||||
/>
|
||||
@{{ report.reporter.preferredUsername }}
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t("Reported") }}</td>
|
||||
<td>{{ report.insertedAt | formatDateTimeString }}</td>
|
||||
</tr>
|
||||
<tr v-if="report.updatedAt !== report.insertedAt">
|
||||
<td>{{ $t("Updated") }}</td>
|
||||
<td>{{ report.updatedAt | formatDateTimeString }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t("Status") }}</td>
|
||||
<td>
|
||||
<span v-if="report.status === ReportStatusEnum.OPEN">{{ $t("Open") }}</span>
|
||||
<span v-else-if="report.status === ReportStatusEnum.CLOSED">
|
||||
{{ $t("Closed") }}
|
||||
</span>
|
||||
<span v-else-if="report.status === ReportStatusEnum.RESOLVED">
|
||||
{{ $t("Resolved") }}
|
||||
</span>
|
||||
<span v-else>{{ $t("Unknown") }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="report.event && report.comments.length > 0">
|
||||
<td>{{ $t("Event") }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }">
|
||||
{{ report.event.title }}
|
||||
</router-link>
|
||||
<span class="is-pulled-right">
|
||||
<!-- <b-button-->
|
||||
<!-- tag="router-link"-->
|
||||
<!-- type="is-primary"-->
|
||||
<!-- :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
|
||||
<!-- icon-left="pencil"-->
|
||||
<!-- size="is-small">{{ $t('Edit') }}</b-button>-->
|
||||
<div>
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs" v-if="report">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ name: RouteName.REPORTS }">{{ $t("Reports") }}</router-link>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<router-link :to="{ name: RouteName.REPORT, params: { id: report.id } }">{{
|
||||
$t("Report #{reportNumber}", { reportNumber: report.id })
|
||||
}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">
|
||||
{{ error }}
|
||||
</b-message>
|
||||
<div class="container" v-if="report">
|
||||
<div class="buttons">
|
||||
<b-button
|
||||
v-if="report.status !== ReportStatusEnum.RESOLVED"
|
||||
@click="updateReport(ReportStatusEnum.RESOLVED)"
|
||||
type="is-primary"
|
||||
>{{ $t("Mark as resolved") }}</b-button
|
||||
>
|
||||
<b-button
|
||||
v-if="report.status !== ReportStatusEnum.OPEN"
|
||||
@click="updateReport(ReportStatusEnum.OPEN)"
|
||||
type="is-success"
|
||||
>{{ $t("Reopen") }}</b-button
|
||||
>
|
||||
<b-button
|
||||
v-if="report.status !== ReportStatusEnum.CLOSED"
|
||||
@click="updateReport(ReportStatusEnum.CLOSED)"
|
||||
type="is-danger"
|
||||
>{{ $t("Close") }}</b-button
|
||||
>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="table is-striped is-fullwidth">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ $t("Reported identity") }}</td>
|
||||
<td>
|
||||
<router-link
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: report.reported.id },
|
||||
}"
|
||||
>
|
||||
<img
|
||||
v-if="report.reported.avatar"
|
||||
class="image"
|
||||
:src="report.reported.avatar.url"
|
||||
alt=""
|
||||
/>
|
||||
@{{ report.reported.preferredUsername }}
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t("Reported by") }}</td>
|
||||
<td v-if="report.reporter.type === ActorType.APPLICATION">
|
||||
{{ report.reporter.domain }}
|
||||
</td>
|
||||
<td v-else>
|
||||
<router-link
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: report.reporter.id },
|
||||
}"
|
||||
>
|
||||
<img
|
||||
v-if="report.reporter.avatar"
|
||||
class="image"
|
||||
:src="report.reporter.avatar.url"
|
||||
alt=""
|
||||
/>
|
||||
@{{ report.reporter.preferredUsername }}
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t("Reported") }}</td>
|
||||
<td>{{ report.insertedAt | formatDateTimeString }}</td>
|
||||
</tr>
|
||||
<tr v-if="report.updatedAt !== report.insertedAt">
|
||||
<td>{{ $t("Updated") }}</td>
|
||||
<td>{{ report.updatedAt | formatDateTimeString }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t("Status") }}</td>
|
||||
<td>
|
||||
<span v-if="report.status === ReportStatusEnum.OPEN">{{ $t("Open") }}</span>
|
||||
<span v-else-if="report.status === ReportStatusEnum.CLOSED">
|
||||
{{ $t("Closed") }}
|
||||
</span>
|
||||
<span v-else-if="report.status === ReportStatusEnum.RESOLVED">
|
||||
{{ $t("Resolved") }}
|
||||
</span>
|
||||
<span v-else>{{ $t("Unknown") }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="report.event && report.comments.length > 0">
|
||||
<td>{{ $t("Event") }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }">
|
||||
{{ report.event.title }}
|
||||
</router-link>
|
||||
<span class="is-pulled-right">
|
||||
<!-- <b-button-->
|
||||
<!-- tag="router-link"-->
|
||||
<!-- type="is-primary"-->
|
||||
<!-- :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
|
||||
<!-- icon-left="pencil"-->
|
||||
<!-- size="is-small">{{ $t('Edit') }}</b-button>-->
|
||||
<b-button
|
||||
type="is-danger"
|
||||
@click="confirmEventDelete()"
|
||||
icon-left="delete"
|
||||
size="is-small"
|
||||
>{{ $t("Delete") }}</b-button
|
||||
>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="box report-content">
|
||||
<p v-if="report.content" v-html="nl2br(report.content)" />
|
||||
<p v-else>{{ $t("No comment") }}</p>
|
||||
</div>
|
||||
|
||||
<div class="box" v-if="report.event && report.comments.length === 0">
|
||||
<router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }">
|
||||
<h3 class="title">{{ report.event.title }}</h3>
|
||||
<p v-html="report.event.description" />
|
||||
</router-link>
|
||||
<!-- <b-button-->
|
||||
<!-- tag="router-link"-->
|
||||
<!-- type="is-primary"-->
|
||||
<!-- :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
|
||||
<!-- icon-left="pencil"-->
|
||||
<!-- size="is-small">{{ $t('Edit') }}</b-button>-->
|
||||
<b-button
|
||||
type="is-danger"
|
||||
@click="confirmEventDelete()"
|
||||
icon-left="delete"
|
||||
size="is-small"
|
||||
>{{ $t("Delete") }}</b-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul v-for="comment in report.comments" v-if="report.comments.length > 0" :key="comment.id">
|
||||
<li>
|
||||
<div class="box" v-if="comment">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48" v-if="comment.actor && comment.actor.avatar">
|
||||
<img :src="comment.actor.avatar.url" alt="Image" />
|
||||
</figure>
|
||||
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<span v-if="comment.actor">
|
||||
<strong>{{ comment.actor.name }}</strong>
|
||||
<small>@{{ comment.actor.preferredUsername }}</small>
|
||||
</span>
|
||||
<span v-else>{{ $t("Unknown actor") }}</span>
|
||||
<br />
|
||||
<p v-html="comment.text" />
|
||||
</div>
|
||||
<b-button
|
||||
type="is-danger"
|
||||
@click="confirmEventDelete()"
|
||||
@click="confirmCommentDelete(comment)"
|
||||
icon-left="delete"
|
||||
size="is-small"
|
||||
>{{ $t("Delete") }}</b-button
|
||||
>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="box report-content">
|
||||
<p v-if="report.content" v-html="nl2br(report.content)" />
|
||||
<p v-else>{{ $t("No comment") }}</p>
|
||||
</div>
|
||||
|
||||
<div class="box" v-if="report.event && report.comments.length === 0">
|
||||
<router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }">
|
||||
<h3 class="title">{{ report.event.title }}</h3>
|
||||
<p v-html="report.event.description" />
|
||||
</router-link>
|
||||
<!-- <b-button-->
|
||||
<!-- tag="router-link"-->
|
||||
<!-- type="is-primary"-->
|
||||
<!-- :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
|
||||
<!-- icon-left="pencil"-->
|
||||
<!-- size="is-small">{{ $t('Edit') }}</b-button>-->
|
||||
<b-button
|
||||
type="is-danger"
|
||||
@click="confirmEventDelete()"
|
||||
icon-left="delete"
|
||||
size="is-small"
|
||||
>{{ $t("Delete") }}</b-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul v-for="comment in report.comments" v-if="report.comments.length > 0" :key="comment.id">
|
||||
<li>
|
||||
<div class="box" v-if="comment">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48" v-if="comment.actor && comment.actor.avatar">
|
||||
<img :src="comment.actor.avatar.url" alt="Image" />
|
||||
</figure>
|
||||
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<span v-if="comment.actor">
|
||||
<strong>{{ comment.actor.name }}</strong>
|
||||
<small>@{{ comment.actor.preferredUsername }}</small>
|
||||
</span>
|
||||
<span v-else>{{ $t("Unknown actor") }}</span>
|
||||
<br />
|
||||
<p v-html="comment.text" />
|
||||
</div>
|
||||
<b-button
|
||||
type="is-danger"
|
||||
@click="confirmCommentDelete(comment)"
|
||||
icon-left="delete"
|
||||
size="is-small"
|
||||
>{{ $t("Delete") }}</b-button
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="title" v-if="report.notes.length > 0">{{ $t("Notes") }}</h2>
|
||||
<div class="box note" v-for="note in report.notes" :id="`note-${note.id}`" :key="note.id">
|
||||
<p>{{ note.content }}</p>
|
||||
<router-link :to="{ name: RouteName.ADMIN_PROFILE, params: { id: note.moderator.id } }">
|
||||
<img alt class="image" :src="note.moderator.avatar.url" v-if="note.moderator.avatar" />
|
||||
@{{ note.moderator.preferredUsername }}
|
||||
</router-link>
|
||||
<br />
|
||||
<small>
|
||||
<a :href="`#note-${note.id}`" v-if="note.insertedAt">
|
||||
{{ note.insertedAt | formatDateTimeString }}
|
||||
</a>
|
||||
</small>
|
||||
<h2 class="title" v-if="report.notes.length > 0">{{ $t("Notes") }}</h2>
|
||||
<div class="box note" v-for="note in report.notes" :id="`note-${note.id}`" :key="note.id">
|
||||
<p>{{ note.content }}</p>
|
||||
<router-link :to="{ name: RouteName.ADMIN_PROFILE, params: { id: note.moderator.id } }">
|
||||
<img alt class="image" :src="note.moderator.avatar.url" v-if="note.moderator.avatar" />
|
||||
@{{ note.moderator.preferredUsername }}
|
||||
</router-link>
|
||||
<br />
|
||||
<small>
|
||||
<a :href="`#note-${note.id}`" v-if="note.insertedAt">
|
||||
{{ note.insertedAt | formatDateTimeString }}
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<form @submit="addNote()">
|
||||
<b-field :label="$t('New note')" label-for="newNoteInput">
|
||||
<b-input type="textarea" v-model="noteContent" id="newNoteInput"></b-input>
|
||||
</b-field>
|
||||
<b-button type="submit" @click="addNote">{{ $t("Add a note") }}</b-button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form @submit="addNote()">
|
||||
<b-field :label="$t('New note')" label-for="newNoteInput">
|
||||
<b-input type="textarea" v-model="noteContent" id="newNoteInput"></b-input>
|
||||
</b-field>
|
||||
<b-button type="submit" @click="addNote">{{ $t("Add a note") }}</b-button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
|
||||
Reference in New Issue
Block a user