resources/assets/components/partials/modal/ReportPost.vue
<template>
<b-modal
ref="modal"
centered
hide-header
hide-footer
scrollable
body-class="p-md-5 user-select-none"
>
<div v-if="tabIndex === 0">
<h2 class="text-center font-weight-bold">{{ $t('report.report') }}</h2>
<p class="text-center">{{ $t('menu.confirmReportText') }}</p>
<div v-if="status && status.hasOwnProperty('account')" class="card shadow-none rounded-lg border my-4">
<div class="card-body">
<div class="media">
<img
:src="status.account.avatar"
class="mr-3 rounded"
width="40"
height="40"
style="border-radius: 8px;"
onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
<div class="media-body">
<p class="h5 primary font-weight-bold mb-1">
@{{ status.account.acct }}
</p>
<div v-if="status.hasOwnProperty('pf_type') && status.pf_type == 'text'">
<p v-if="status.content_text.length <= 140" class="mb-0">
{{ status.content_text}}
</p>
<p v-else class="mb-0">
<span v-if="showFull">
{{ status.content_text}}
<a class="font-weight-bold primary ml-1" href="#" @click.prevent="showFull = false">Show less</a>
</span>
<span v-else>
{{ status.content_text.substr(0, 140) + ' ...' }}
<a class="font-weight-bold primary ml-1" href="#" @click.prevent="showFull = true">Show full post</a>
</span>
</p>
</div>
<div v-else-if="status.hasOwnProperty('pf_type') && status.pf_type == 'photo'">
<div class="w-100 rounded-lg d-flex justify-content-center mt-3" style="background: #000;max-height: 150px">
<img :src="status.media_attachments[0].url" class="rounded-lg shadow" style="width: 100%;max-height: 150px;object-fit:contain;">
</div>
<p v-if="status.content_text" class="mt-3 mb-0">
<span v-if="showFull">
{{ status.content_text}}
<a class="font-weight-bold primary ml-1" href="#" @click.prevent="showFull = false">Show less</a>
</span>
<span v-else>
{{ status.content_text.substr(0, 80) + ' ...' }}
<a class="font-weight-bold primary ml-1" href="#" @click.prevent="showFull = true">Show full post</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<p class="text-right mb-0 mb-md-n3">
<button class="btn btn-light px-3 py-2 mr-3 font-weight-bold" @click="close">{{ $t('common.cancel')}}</button>
<button class="btn btn-primary px-3 py-2 font-weight-bold" style="background-color: #3B82F6;" @click="tabIndex = 1">{{ $t('common.proceed') }}</button>
</p>
</div>
<div v-else-if="tabIndex === 1">
<h2 class="text-center font-weight-bold">{{ $t('report.report') }}</h2>
<p class="text-center">
{{ $t('report.selectReason') }}
</p>
<div class="mt-4">
<!-- <button class="btn btn-light btn-block rounded-pill font-weight-bold" @click="handleReason('notinterested')">I'm not interested in it</button> -->
<button class="btn btn-light btn-block rounded-pill font-weight-bold text-danger" @click="handleReason('spam')">{{ $t('menu.spam')}}</button>
<button v-if="status.sensitive == false" class="btn btn-light btn-block rounded-pill font-weight-bold text-danger" @click="handleReason('sensitive')">Adult or {{ $t('menu.sensitive')}}</button>
<button class="btn btn-light btn-block rounded-pill font-weight-bold text-danger" @click="handleReason('abusive')">{{ $t('menu.abusive')}}</button>
<button class="btn btn-light btn-block rounded-pill font-weight-bold" @click="handleReason('underage')">{{ $t('menu.underageAccount')}}</button>
<button class="btn btn-light btn-block rounded-pill font-weight-bold" @click="handleReason('copyright')">{{ $t('menu.copyrightInfringement')}}</button>
<button class="btn btn-light btn-block rounded-pill font-weight-bold" @click="handleReason('impersonation')">{{ $t('menu.impersonation')}}</button>
<!-- <button class="btn btn-light btn-block rounded-pill font-weight-bold" @click="handleReason('scam')">{{ $t('menu.scamOrFraud')}}</button> -->
<button class="btn btn-light btn-block rounded-pill mt-md-5" @click="tabIndex = 0">Go back</button>
</div>
</div>
<div v-else-if="tabIndex === 2">
<div class="my-4 text-center">
<b-spinner />
<p class="small mb-0">{{ $t('report.sendingReport') }} ...</p>
</div>
</div>
<div v-else-if="tabIndex === 3">
<div class="my-4">
<h2 class="text-center font-weight-bold mb-3">{{ $t('report.reported') }}</h2>
<p class="text-center py-2">
<span class="fa-stack fa-4x text-success">
<i class="far fa-check fa-stack-1x"></i>
<i class="fal fa-circle fa-stack-2x"></i>
</span>
</p>
<p class="lead text-center">{{ $t('report.thanksMsg') }}</p>
<hr>
<p class="text-center">{{ $t('report.contactAdminMsg') }}, <a href="/site/contact" class="font-weight-bold primary">{{ $t('common.clickHere') }}</a>.</p>
</div>
<p class="text-center mb-0 mb-md-n3">
<button class="btn btn-light btn-block rounded-pill px-3 py-2 mr-3 font-weight-bold" @click="close">{{ $t('common.close') }}</button>
</p>
</div>
<div v-else-if="tabIndex === 5">
<div class="my-4">
<h2 class="text-center font-weight-bold mb-3">{{ $t('common.oops') }}</h2>
<p class="text-center py-2">
<span class="fa-stack fa-3x text-danger">
<i class="far fa-times fa-stack-1x"></i>
<i class="fal fa-circle fa-stack-2x"></i>
</span>
</p>
<p class="lead text-center">{{ $t('common.errorMsg') }}</p>
<hr>
<p class="text-center">{{ $t('report.contactAdminMsg') }}, <a href="/site/contact" class="font-weight-bold primary">{{ $t('common.clickHere') }}</a>.</p>
</div>
<p class="text-center mb-0 mb-md-n3">
<button class="btn btn-light btn-block rounded-pill px-3 py-2 mr-3 font-weight-bold" @click="close">{{ $t('common.close') }}</button>
</p>
</div>
</b-modal>
</template>
<script type="text/javascript">
export default {
props: {
status: {
type: Object,
default: {}
}
},
data() {
return {
statusId: undefined,
tabIndex: 0,
showFull: false
}
},
methods: {
open() {
this.$refs.modal.show();
},
close() {
this.$refs.modal.hide();
setTimeout(() => {
this.tabIndex = 0;
}, 1000);
},
handleReason(reason) {
this.tabIndex = 2;
axios.post('/i/report', {
id: this.status.id,
report: reason,
type: 'post'
}).then(res => {
this.tabIndex = 3;
}).catch(err => {
this.tabIndex = 5;
});
}
}
}
</script>