diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index 17bc71f37841772a17eccc34b944cebc14a954fe..7053b2bbb2b1ab1f37e94a4c602f9ba64fd0e22c 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -120,6 +120,10 @@
<div v-if="!obj.target" class="ui warning message">
<translate translate-context="Content/Moderation/Message">The object associated with this report was deleted.</translate>
</div>
+ <router-link class="ui basic button" v-if="target && configs[target.type].urls.getDetail" :to="configs[target.type].urls.getDetail(obj.target_state)">
+ <i class="eye icon"></i>
+ <translate translate-context="Content/Moderation/Link">View public page</translate>
+ </router-link>
<router-link class="ui basic button" v-if="target && configs[target.type].urls.getAdminDetail" :to="configs[target.type].urls.getAdminDetail(obj.target_state)">
<i class="wrench icon"></i>
<translate translate-context="Content/Moderation/Link">Open in moderation interface</translate>
@@ -223,7 +227,7 @@
</button>
<template v-for="action in actions">
<dangerous-button
- v-if="action.dangerous"
+ v-if="action.dangerous && action.show(obj)"
:class="['ui', {loading: isLoading}, 'button']"
color=""
:action="action.handler">
@@ -352,15 +356,17 @@ export default {
actions.push({
label: this.$pgettext('Content/Moderation/Button/Verb', 'Delete reported object'),
modalHeader: this.$pgettext('Content/Moderation/Popup/Header', 'Delete reported object?'),
- modalContent: this.$pgettext('Content/Moderation/Popup,Paragraph', 'This will delete the object associated with this report. This action is irreversible.'),
+ modalContent: this.$pgettext('Content/Moderation/Popup,Paragraph', 'This will delete the object associated with this report and mark the report as resolved. The deletion is irreversible.'),
modalConfirmLabel: this.$pgettext('*/*/*/Verb', 'Delete'),
icon: 'x',
iconColor: 'red',
+ show: (obj) => { return !!obj.target },
dangerous: true,
handler: () => {
axios.delete(deleteUrl).then((response) => {
console.log('Target deleted')
self.obj.target = null
+ self.resolve(true)
}, error => {
console.log('Error while deleting target')
})
diff --git a/front/src/components/moderation/ReportModal.vue b/front/src/components/moderation/ReportModal.vue
index e8a30c512ef7d97a7f38fd63d22f86cf02c88e89..da2c1bfcb57c283272bd3726074b87dd3a91b7ca 100644
--- a/front/src/components/moderation/ReportModal.vue
+++ b/front/src/components/moderation/ReportModal.vue
@@ -19,19 +19,24 @@
<translate translate-context="*/Moderation/Popup,Paragraph">Use this form to submit a report to our moderation team.</translate>
</p>
<form v-if="canSubmit" id="report-form" class="ui form" @submit.prevent="submit">
- <div v-if="!$store.state.auth.authenticated" class="ui inline required field">
- <label for="report-submitter-email">
- <translate translate-context="Content/*/*/Noun">Email</translate>
- </label>
- <input type="email" v-model="submitterEmail" name="report-submitter-email" id="report-submitter-email" required>
+ <div class="fields">
+ <report-category-dropdown
+ class="ui required eight wide field"
+ v-model="category"
+ :required="true"
+ :empty="true"
+ :restrict-to="allowedCategories"
+ :label="true"></report-category-dropdown>
+ <div v-if="!$store.state.auth.authenticated" class="ui eight wide required field">
+ <label for="report-submitter-email">
+ <translate translate-context="Content/*/*/Noun">Email</translate>
+ </label>
+ <input type="email" v-model="submitterEmail" name="report-submitter-email" id="report-submitter-email" required>
+ <p>
+ <translate translate-context="*/*/Field,Help">We'll use this email if we need to contact you regarding this report.</translate>
+ </p>
+ </div>
</div>
- <report-category-dropdown
- class="ui inline required field"
- v-model="category"
- :required="true"
- :empty="true"
- :restrict-to="allowedCategories"
- :label="true"></report-category-dropdown>
<div class="ui field">
<label for="report-summary">
<translate translate-context="*/*/Field.Label/Noun">Message</translate>
diff --git a/front/src/entities.js b/front/src/entities.js
index 18c05b2488d6e921a3811588cfa1fde01d1fcaa9..c86becda9499b2fb45ff802ca6990db8edfddd2b 100644
--- a/front/src/entities.js
+++ b/front/src/entities.js
@@ -15,7 +15,8 @@ export default {
return `manage/library/artists/${obj.id}/`
},
urls: {
- getAdminDetail: (obj) => { return {name: 'manage.library.artists.detail', params: {id: obj.id}}}
+ getDetail: (obj) => { return {name: 'library.artists.detail', params: {id: obj.id}}},
+ getAdminDetail: (obj) => { return {name: 'manage.library.artists.detail', params: {id: obj.id}}},
},
moderatedFields: [
{
@@ -49,6 +50,7 @@ export default {
return `manage/library/albums/${obj.id}/`
},
urls: {
+ getDetail: (obj) => { return {name: 'library.albums.detail', params: {id: obj.id}}},
getAdminDetail: (obj) => { return {name: 'manage.library.albums.detail', params: {id: obj.id}}}
},
moderatedFields: [
@@ -89,6 +91,7 @@ export default {
return `manage/library/tracks/${obj.id}/`
},
urls: {
+ getDetail: (obj) => { return {name: 'library.tracks.detail', params: {id: obj.id}}},
getAdminDetail: (obj) => { return {name: 'manage.library.tracks.detail', params: {id: obj.id}}}
},
moderatedFields: [
@@ -156,6 +159,7 @@ export default {
label: this.$pgettext('*/*/*', 'Playlist'),
icon: 'list',
urls: {
+ getDetail: (obj) => { return {name: 'library.playlists.detail', params: {id: obj.id}}},
// getAdminDetail: (obj) => { return {name: 'manage.playlists.detail', params: {id: obj.id}}}
},
moderatedFields: [
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 742d6667338a51d4a5080a32253d796d1879be9b..c53edd14c970cefaa51c87bfe5970170b760896d 100644
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -166,6 +166,9 @@ body {
@include media(">widedesktop") {
left: $widedesktop-sidebar-width;
}
+ > .ui.message {
+ box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.7);
+ }
}
.main-pusher {
padding: 1.5rem 0;
diff --git a/front/src/views/admin/moderation/ReportsList.vue b/front/src/views/admin/moderation/ReportsList.vue
index 87bf97d2f5765302f3d579feea0e91f7378ed066..73acaf1121144dfa89180075c252456be613d46a 100644
--- a/front/src/views/admin/moderation/ReportsList.vue
+++ b/front/src/views/admin/moderation/ReportsList.vue
@@ -55,7 +55,7 @@
<empty-state @refresh="fetchData()" :refresh="true"></empty-state>
</div>
<div v-else-if="mode === 'card'">
- <report-card :obj="obj" v-for="obj in result.results" :key="obj.uuid" />
+ <report-card @handled="fetchData" :obj="obj" v-for="obj in result.results" :key="obj.uuid" />
</div>
</section>
</main>