2020-10-19 12:29:04 +02:00
|
|
|
<template>
|
2021-04-22 15:29:33 +02:00
|
|
|
<div class="lcixvhis">
|
2020-10-19 12:29:04 +02:00
|
|
|
<div class="_section reports">
|
|
|
|
<div class="_content">
|
|
|
|
<div class="inputs" style="display: flex;">
|
2021-08-06 15:29:19 +02:00
|
|
|
<MkSelect v-model="state" style="margin: 0; flex: 1;">
|
2020-12-26 02:47:36 +01:00
|
|
|
<template #label>{{ $ts.state }}</template>
|
|
|
|
<option value="all">{{ $ts.all }}</option>
|
|
|
|
<option value="unresolved">{{ $ts.unresolved }}</option>
|
|
|
|
<option value="resolved">{{ $ts.resolved }}</option>
|
2020-10-19 12:29:04 +02:00
|
|
|
</MkSelect>
|
2021-08-06 15:29:19 +02:00
|
|
|
<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
|
2020-12-26 02:47:36 +01:00
|
|
|
<template #label>{{ $ts.targetUserOrigin }}</template>
|
|
|
|
<option value="combined">{{ $ts.all }}</option>
|
|
|
|
<option value="local">{{ $ts.local }}</option>
|
|
|
|
<option value="remote">{{ $ts.remote }}</option>
|
2020-10-19 12:29:04 +02:00
|
|
|
</MkSelect>
|
2021-08-06 15:29:19 +02:00
|
|
|
<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
|
2020-12-26 02:47:36 +01:00
|
|
|
<template #label>{{ $ts.reporterOrigin }}</template>
|
|
|
|
<option value="combined">{{ $ts.all }}</option>
|
|
|
|
<option value="local">{{ $ts.local }}</option>
|
|
|
|
<option value="remote">{{ $ts.remote }}</option>
|
2020-10-19 12:29:04 +02:00
|
|
|
</MkSelect>
|
|
|
|
</div>
|
|
|
|
<!-- TODO
|
|
|
|
<div class="inputs" style="display: flex; padding-top: 1.2em;">
|
2021-09-29 17:50:45 +02:00
|
|
|
<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.reports.reload()">
|
2020-12-26 02:47:36 +01:00
|
|
|
<span>{{ $ts.username }}</span>
|
2020-10-19 12:29:04 +02:00
|
|
|
</MkInput>
|
2021-09-29 17:50:45 +02:00
|
|
|
<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.reports.reload()" :disabled="pagination.params().origin === 'local'">
|
2020-12-26 02:47:36 +01:00
|
|
|
<span>{{ $ts.host }}</span>
|
2020-10-19 12:29:04 +02:00
|
|
|
</MkInput>
|
|
|
|
</div>
|
|
|
|
-->
|
|
|
|
|
2020-11-08 03:25:28 +01:00
|
|
|
<MkPagination :pagination="pagination" #default="{items}" ref="reports" style="margin-top: var(--margin);">
|
2021-04-10 11:17:42 +02:00
|
|
|
<div class="bcekxzvu _card _gap" v-for="report in items" :key="report.id">
|
2020-10-19 12:29:04 +02:00
|
|
|
<div class="_content target">
|
2021-04-17 16:52:54 +02:00
|
|
|
<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
|
2020-10-19 12:29:04 +02:00
|
|
|
<div class="info">
|
|
|
|
<MkUserName class="name" :user="report.targetUser"/>
|
|
|
|
<div class="acct">@{{ acct(report.targetUser) }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="_content">
|
|
|
|
<div>
|
|
|
|
<Mfm :text="report.comment"/>
|
|
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div>Reporter: <MkAcct :user="report.reporter"/></div>
|
|
|
|
<div><MkTime :time="report.createdAt"/></div>
|
|
|
|
</div>
|
|
|
|
<div class="_footer">
|
|
|
|
<div v-if="report.assignee">Assignee: <MkAcct :user="report.assignee"/></div>
|
2020-12-26 02:47:36 +01:00
|
|
|
<MkButton @click="resolve(report)" primary v-if="!report.resolved">{{ $ts.abuseMarkAsResolved }}</MkButton>
|
2020-10-19 12:29:04 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</MkPagination>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { defineComponent } from 'vue';
|
2021-07-15 13:45:32 +02:00
|
|
|
import { parseAcct } from '@/misc/acct';
|
2021-03-23 09:30:14 +01:00
|
|
|
import MkButton from '@client/components/ui/button.vue';
|
2021-09-29 17:50:45 +02:00
|
|
|
import MkInput from '@client/components/form/input.vue';
|
|
|
|
import MkSelect from '@client/components/form/select.vue';
|
2021-03-23 09:30:14 +01:00
|
|
|
import MkPagination from '@client/components/ui/pagination.vue';
|
2021-08-05 09:34:18 +02:00
|
|
|
import { acct } from '@client/filters/user';
|
2021-03-23 09:30:14 +01:00
|
|
|
import * as os from '@client/os';
|
2021-04-10 05:54:12 +02:00
|
|
|
import * as symbols from '@client/symbols';
|
2020-10-19 12:29:04 +02:00
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
components: {
|
|
|
|
MkButton,
|
|
|
|
MkInput,
|
|
|
|
MkSelect,
|
|
|
|
MkPagination,
|
|
|
|
},
|
|
|
|
|
2021-04-22 15:29:33 +02:00
|
|
|
emits: ['info'],
|
|
|
|
|
2020-10-19 12:29:04 +02:00
|
|
|
data() {
|
|
|
|
return {
|
2021-04-10 05:54:12 +02:00
|
|
|
[symbols.PAGE_INFO]: {
|
2020-12-26 02:47:36 +01:00
|
|
|
title: this.$ts.abuseReports,
|
2021-10-02 16:11:21 +02:00
|
|
|
icon: 'fas fa-exclamation-circle',
|
|
|
|
bg: 'var(--bg)',
|
2020-10-19 12:29:04 +02:00
|
|
|
},
|
|
|
|
searchUsername: '',
|
|
|
|
searchHost: '',
|
|
|
|
state: 'unresolved',
|
|
|
|
reporterOrigin: 'combined',
|
|
|
|
targetUserOrigin: 'combined',
|
|
|
|
pagination: {
|
|
|
|
endpoint: 'admin/abuse-user-reports',
|
|
|
|
limit: 10,
|
|
|
|
params: () => ({
|
|
|
|
state: this.state,
|
|
|
|
reporterOrigin: this.reporterOrigin,
|
|
|
|
targetUserOrigin: this.targetUserOrigin,
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
state() {
|
|
|
|
this.$refs.reports.reload();
|
|
|
|
},
|
|
|
|
|
|
|
|
reporterOrigin() {
|
|
|
|
this.$refs.reports.reload();
|
|
|
|
},
|
|
|
|
|
|
|
|
targetUserOrigin() {
|
|
|
|
this.$refs.reports.reload();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2021-04-22 15:29:33 +02:00
|
|
|
mounted() {
|
|
|
|
this.$emit('info', this[symbols.PAGE_INFO]);
|
|
|
|
},
|
|
|
|
|
2020-10-19 12:29:04 +02:00
|
|
|
methods: {
|
|
|
|
acct,
|
|
|
|
|
|
|
|
resolve(report) {
|
|
|
|
os.apiWithDialog('admin/resolve-abuse-user-report', {
|
|
|
|
reportId: report.id,
|
|
|
|
}).then(() => {
|
|
|
|
this.$refs.reports.removeItem(item => item.id === report.id);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2021-04-22 15:29:33 +02:00
|
|
|
.lcixvhis {
|
|
|
|
margin: var(--margin);
|
|
|
|
}
|
|
|
|
|
2020-10-19 12:29:04 +02:00
|
|
|
.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>
|