|
|
@@ -1,243 +1,19 @@
|
|
|
<template>
|
|
|
<div class='admin_moderation'>
|
|
|
- <tab-view
|
|
|
- :transparent='true'
|
|
|
- :padding='true'
|
|
|
- :tabs='["User reports", "Banned users"]'
|
|
|
- v-model='showTab'
|
|
|
- >
|
|
|
- <div slot='User reports' class='admin_moderation__tab admin_moderation__tab--boom'>
|
|
|
- Below are posts reported by users - to remove the thread or block the user, click 'More options…'
|
|
|
-
|
|
|
- <confirm-modal v-model='removePostObj.showConfirmModal' @confirm='removePost' color='red'>
|
|
|
- Are you sure you want to remove this post?
|
|
|
- </confirm-modal>
|
|
|
-
|
|
|
- <div class='admin_moderation__reports' v-if='reports.length'>
|
|
|
-
|
|
|
- <div class='admin_moderation__report admin_moderation__report--header'>
|
|
|
- <div class='admin_moderation__report__post admin_moderation__report--cell_border admin_moderation__report--cell_border-hidden'>
|
|
|
- Post and thread reported
|
|
|
- </div>
|
|
|
- <div class='admin_moderation__report__reason admin_moderation__report--cell_border admin_moderation__report--cell_border-hidden'>Report reason</div>
|
|
|
- <div class='admin_moderation__report__flagged_by admin_moderation__report--cell_border admin_moderation__report--cell_border-hidden'>
|
|
|
- Reported by user
|
|
|
- </div>
|
|
|
- <div class='admin_moderation__report__actions'>
|
|
|
- Actions
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class='admin_moderation__report' v-for='(report, $index) in reports'>
|
|
|
- <div class='admin_moderation__report__post admin_moderation__report--cell_border'>
|
|
|
- <div class='admin_moderation__report__post__header'>
|
|
|
- <div class='admin_moderation__report__post__thread'>{{report.Post.Thread.name}}</div>
|
|
|
- <div class='admin_moderation__report__post__user'>{{report.Post.User.username}}</div>
|
|
|
- </div>
|
|
|
- <div class='admin_moderation__report__post__content'>{{report.Post.content | stripTags | truncate(150)}}</div>
|
|
|
- </div>
|
|
|
- <div class='admin_moderation__report__reason admin_moderation__report--cell_border'>{{report.reason}}</div>
|
|
|
- <div class='admin_moderation__report__flagged_by admin_moderation__report--cell_border'>
|
|
|
- <avatar-icon class='admin_moderation__report__flagged_by__avatar' :user='report.FlaggedByUser'></avatar-icon>
|
|
|
- <div class='admin_moderation__report__flagged_by__text_info'>
|
|
|
- <div class='admin_moderation__report__flagged_by__user'>{{report.FlaggedByUser.username}}</div>
|
|
|
- <div class='admin_moderation__report__flagged_by__date'>{{report.createdAt| formatDate}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class='admin_moderation__report__actions'>
|
|
|
- <button class='button button--red' @click='removePost(report, $index)'>Remove post</button>
|
|
|
- <menu-button
|
|
|
- @delete='deleteReport(report.id, $index)'
|
|
|
- :options='reportMenuOptions'
|
|
|
- >
|
|
|
- <button class='button'>More options…</button>
|
|
|
- </menu-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class='admin_moderation__no_reports' v-else>
|
|
|
- <span class='fa fa-hand-peace-o'></span>
|
|
|
- No user reports
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div slot='Banned users' class='admin_moderation__tab'>
|
|
|
-
|
|
|
- <div class='admin_moderation__header'>
|
|
|
- <div>
|
|
|
- Remove or edit banned users below, or add a new ban
|
|
|
- </div>
|
|
|
- <button class='button button--blue' @click='toggleShowAddNewBanModal'>Add new ban</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <table class='admin_moderation__table'>
|
|
|
- <tr>
|
|
|
- <th>User</th>
|
|
|
- <th>Ban type</th>
|
|
|
- <th>Date banned</th>
|
|
|
- <th>Message</th>
|
|
|
- </tr>
|
|
|
- <tr v-for='ban in bans'>
|
|
|
- <td>{{ban.user}}</td>
|
|
|
- <td>{{ban.type}}</td>
|
|
|
- <td>{{ban.date | formatDate}}</td>
|
|
|
- <td>
|
|
|
- <template v-if='ban.message'>{{ban.message}}</template>
|
|
|
- <i v-else>No message given</i>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
-
|
|
|
- <modal-window v-model='showAddNewBanModal' width='30rem'>
|
|
|
- <div class='admin_moderation__add_new_ban_modal'>
|
|
|
- <h2>Ban or block a user</h2>
|
|
|
- <p>Search for the user to ban, then select the relevant ban type for the user</p>
|
|
|
-
|
|
|
- <div>
|
|
|
- <fancy-input placeholder='Username to ban' v-model='username' width='15rem' :large='true'></fancy-input>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <fancy-input placeholder='Message to user (optional)' v-model='message' width='15rem' :large='true'></fancy-input>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <select-button
|
|
|
- :options='options'
|
|
|
- name='test'
|
|
|
- v-model='selectedOption'
|
|
|
- >
|
|
|
- </select-button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <button class='button button--modal' @click='toggleShowAddNewBanModal'>Cancel</button>
|
|
|
- <button class='button button--modal button--green'>Add ban</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </modal-window>
|
|
|
- </div>
|
|
|
- </tab-view>
|
|
|
+
|
|
|
+ <router-view></router-view>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import TabView from '../TabView'
|
|
|
- import ModalWindow from '../ModalWindow'
|
|
|
- import FancyInput from '../FancyInput'
|
|
|
- import SelectButton from '../SelectButton'
|
|
|
- import MenuButton from '../MenuButton'
|
|
|
- import AvatarIcon from '../AvatarIcon'
|
|
|
- import ConfirmModal from '../ConfirmModal'
|
|
|
-
|
|
|
- import AjaxErrorHandler from '../../assets/js/errorHandler'
|
|
|
-
|
|
|
export default {
|
|
|
- name: 'AdminDashboard',
|
|
|
- components: {
|
|
|
- TabView,
|
|
|
- ModalWindow,
|
|
|
- FancyInput,
|
|
|
- SelectButton,
|
|
|
- MenuButton,
|
|
|
- AvatarIcon,
|
|
|
- ConfirmModal
|
|
|
- },
|
|
|
+ name: 'AdminModeration',
|
|
|
data () {
|
|
|
- return {
|
|
|
- showTab: 0,
|
|
|
- showAddNewBanModal: false,
|
|
|
- username: '',
|
|
|
- message: '',
|
|
|
- options: [
|
|
|
- { name: "Select a ban type", disabled: true },
|
|
|
- { name: "Block user's known ip addresses", value: "ip" },
|
|
|
- { name: "Ban from creating new threads", value: "thread"},
|
|
|
- { name: "Ban from replying to threads", value: "post"}
|
|
|
- ],
|
|
|
- selectedOption: 0,
|
|
|
-
|
|
|
- reportMenuOptions: [
|
|
|
- { value: "Delete report", event: 'delete' },
|
|
|
- { value: "Ban or block user" },
|
|
|
- { value: "Remove thread" }
|
|
|
- ],
|
|
|
-
|
|
|
- user: {
|
|
|
- username: 'Username',
|
|
|
- color: '#9bd0eb'
|
|
|
- },
|
|
|
-
|
|
|
- bans_: [],
|
|
|
- reports: [],
|
|
|
-
|
|
|
- removePostObj: {
|
|
|
- showConfirmModal: false,
|
|
|
- report: null,
|
|
|
- index: null
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- bans () {
|
|
|
- return this.bans_.map(ban => {
|
|
|
- let type = ban.type
|
|
|
-
|
|
|
- if(type === 'ip') {
|
|
|
- ban.type = 'IP block'
|
|
|
- } else if (type === 'thread') {
|
|
|
- ban.type = 'New threads'
|
|
|
- } else {
|
|
|
- ban.type = 'New threads and replies'
|
|
|
- }
|
|
|
-
|
|
|
- return ban
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- toggleShowAddNewBanModal () {
|
|
|
- this.showAddNewBanModal = !this.showAddNewBanModal
|
|
|
- },
|
|
|
- deleteReport (id, index) {
|
|
|
- this.axios
|
|
|
- .delete('/api/v1/report/' + id)
|
|
|
- .then(_ => {
|
|
|
- this.reports.splice(index, 1)
|
|
|
- })
|
|
|
- .catch(AjaxErrorHandler())
|
|
|
- },
|
|
|
- removePost (report, index) {
|
|
|
- if(report) {
|
|
|
- this.removePostObj.report = report
|
|
|
- this.removePostObj.index = index
|
|
|
-
|
|
|
- this.removePostObj.showConfirmModal = true
|
|
|
- } else {
|
|
|
- this.axios
|
|
|
- .delete('/api/v1/post/' + this.removePostObj.report.Post.id)
|
|
|
- .then(_ => {
|
|
|
- return this.axios.delete('/api/v1/report/' + this.removePostObj.report.id)
|
|
|
- })
|
|
|
- .then(_ => {
|
|
|
- this.reports.splice(this.removePostObj.index, 1)
|
|
|
- })
|
|
|
- .catch(AjaxErrorHandler())
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- emit () {
|
|
|
- console.log(arguments)
|
|
|
- }
|
|
|
+ return {}
|
|
|
},
|
|
|
+ methods: {},
|
|
|
mounted () {
|
|
|
this.$store.dispatch('setTitle', 'admin | moderation')
|
|
|
-
|
|
|
- this.axios
|
|
|
- .get('/api/v1/report')
|
|
|
- .then(res => {
|
|
|
- this.reports = res.data
|
|
|
- })
|
|
|
- .catch(AjaxErrorHandler())
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -248,144 +24,5 @@
|
|
|
.admin_moderation {
|
|
|
padding: 1rem;
|
|
|
padding-top: 0.5rem;
|
|
|
-
|
|
|
- @at-root #{&}__tab {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- @at-root #{&}__reports {
|
|
|
- margin-top: 1rem;
|
|
|
- @extend .shadow_border;
|
|
|
-
|
|
|
- border-radius: 0.25rem;
|
|
|
- &> :first-child {
|
|
|
- border-radius: 0.25rem 0.25rem 0 0;
|
|
|
- }
|
|
|
- &> :last-child {
|
|
|
- border-radius: 0 0 0.25rem 0.25rem;
|
|
|
- }
|
|
|
- }
|
|
|
- @at-root #{&}__no_reports {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding-top: 5rem;
|
|
|
- font-size: 2rem;
|
|
|
- user-select: none;
|
|
|
- cursor: default;
|
|
|
- transition: none;
|
|
|
- color: $color__gray--darkest;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 4rem;
|
|
|
- color: $color__gray--darker;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- @at-root #{&}__report {
|
|
|
- display: flex;
|
|
|
- background-color: #fff;
|
|
|
- border-bottom: thin solid $color__lightgray--primary;
|
|
|
- padding: 0.5rem;
|
|
|
-
|
|
|
-
|
|
|
- @at-root #{&}--header {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- @at-root #{&}--cell_border {
|
|
|
- padding-right: 0.5rem;
|
|
|
- margin-right: 0.5rem;
|
|
|
- border-right: thin solid $color__lightgray--primary;
|
|
|
-
|
|
|
- @at-root #{&}-hidden {
|
|
|
- border-right-color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @at-root #{&}__post {
|
|
|
- width: 40%;
|
|
|
-
|
|
|
- @at-root #{&}__header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- @at-root #{&}__thread {
|
|
|
- font-size: 1rem;
|
|
|
- text-decoration: underline;
|
|
|
-
|
|
|
- }
|
|
|
- @at-root #{&}__content {
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- @at-root #{&}__reason {
|
|
|
- width: 15%;
|
|
|
- }
|
|
|
- @at-root #{&}__flagged_by {
|
|
|
- width: 20%;
|
|
|
- display: flex;
|
|
|
-
|
|
|
-
|
|
|
- @at-root #{&}__text_info {
|
|
|
- margin-left: 0.5rem;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
- @at-root #{&}__date {
|
|
|
- color: $color__darkgray--primary;
|
|
|
- }
|
|
|
- }
|
|
|
- @at-root #{&}__actions {
|
|
|
- width: 25%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .button--red {
|
|
|
- margin-right: 0.5rem;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- @at-root #{&}__header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- @at-root #{&}__add_new_ban_modal {
|
|
|
- padding: 1rem;
|
|
|
-
|
|
|
- h2 {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- margin-bottom: -0.5rem;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @at-root #{&}__table {
|
|
|
- width: calc(100%);
|
|
|
- overflow: hidden;
|
|
|
- margin-top: 1rem;
|
|
|
- padding: 0.5rem;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 0.25rem;
|
|
|
- border-collapse: collapse;
|
|
|
-
|
|
|
- @extend .shadow_border;
|
|
|
-
|
|
|
- td, th {
|
|
|
- padding: 0.5rem;
|
|
|
- }
|
|
|
- th {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- tr:nth-child(even) {
|
|
|
- background-color: $color__lightgray--darker;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
sbkwgh