103 lines
2.1 KiB
Vue
103 lines
2.1 KiB
Vue
<template>
|
|
<div class="bcekxzvu _card _gap">
|
|
<div class="_content target">
|
|
<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
|
|
<MkA class="info" :to="userPage(report.targetUser)" v-user-preview="report.targetUserId">
|
|
<MkUserName class="name" :user="report.targetUser"/>
|
|
<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
|
|
</MkA>
|
|
</div>
|
|
<div class="_content">
|
|
<div>
|
|
<Mfm :text="report.comment"/>
|
|
</div>
|
|
<hr/>
|
|
<div>{{ $ts.reporter }}: <MkAcct :user="report.reporter"/></div>
|
|
<div v-if="report.assignee">
|
|
{{ $ts.moderator }}:
|
|
<MkAcct :user="report.assignee"/>
|
|
</div>
|
|
<div><MkTime :time="report.createdAt"/></div>
|
|
</div>
|
|
<div class="_footer">
|
|
<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
|
|
{{ $ts.forwardReport }}
|
|
<template #caption>{{ $ts.forwardReportIsAnonymous }}</template>
|
|
</MkSwitch>
|
|
<MkButton v-if="!report.resolved" primary @click="resolve">{{ $ts.abuseMarkAsResolved }}</MkButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
import MkButton from '@/components/ui/button.vue';
|
|
import MkSwitch from '@/components/form/switch.vue';
|
|
import { acct, userPage } from '@/filters/user';
|
|
import * as os from '@/os';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
MkButton,
|
|
MkSwitch,
|
|
},
|
|
|
|
props: {
|
|
report: {
|
|
type: Object,
|
|
required: true,
|
|
}
|
|
},
|
|
|
|
emits: ['resolved'],
|
|
|
|
data() {
|
|
return {
|
|
forward: this.report.forwarded,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
acct,
|
|
userPage,
|
|
|
|
resolve() {
|
|
os.apiWithDialog('admin/resolve-abuse-user-report', {
|
|
forward: this.forward,
|
|
reportId: this.report.id,
|
|
}).then(() => {
|
|
this.$emit('resolved', this.report.id);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bcekxzvu {
|
|
> .target {
|
|
display: flex;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
align-items: center;
|
|
|
|
> .avatar {
|
|
width: 42px;
|
|
height: 42px;
|
|
}
|
|
|
|
> .info {
|
|
margin-left: 0.3em;
|
|
padding: 0 8px;
|
|
flex: 1;
|
|
|
|
> .name {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|