Feat: 複数ノートの通報機能
This commit is contained in:
mattyatea
parent
4c135a5ca1
commit
6849d510ac
10 changed files with 197 additions and 69 deletions
|
|
@ -4,13 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div class="bcekxzvu _margin _panel">
|
||||
<div class="target">
|
||||
<MkA v-user-preview="report.targetUserId" class="info" :to="`/admin/user/${report.targetUserId}`">
|
||||
<MkAvatar class="avatar" :user="report.targetUser" indicator/>
|
||||
<div class="names">
|
||||
<MkUserName class="name" :user="report.targetUser"/>
|
||||
<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
|
||||
<div :class="$style.root">
|
||||
<div :class="$style.target">
|
||||
<MkA v-user-preview="report.targetUserId" :class="$style.info" :to="`/admin/user/${report.targetUserId}`">
|
||||
<MkAvatar :class="$style.avatar" :user="report.targetUser" indicator/>
|
||||
<div :class="$style.name">
|
||||
<MkUserName :class="$style.names" :user="report.targetUser"/>
|
||||
<MkAcct :class="$style.names" :user="report.targetUser" style="display: block;"/>
|
||||
</div>
|
||||
</MkA>
|
||||
<MkKeyValue>
|
||||
|
|
@ -18,9 +18,15 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #value>{{ dateString(report.targetUser.createdAt) }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
|
||||
</MkKeyValue>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div :class="$style.detail">
|
||||
<div>
|
||||
<Mfm :text="report.comment"/>
|
||||
<MkFolder v-if="report.notes.length !== 0" :class="$style.notes">
|
||||
<template #label>{{ i18n.ts.reportedNote }}</template>
|
||||
<div v-for="note in report.notes" :class="$style.notes">
|
||||
<MkNoteSimple :note="note"/>
|
||||
</div>
|
||||
</MkFolder>
|
||||
</div>
|
||||
<hr/>
|
||||
<div>{{ i18n.ts.reporter }}: <MkA :to="`/admin/user/${report.reporter.id}`" class="_link">@{{ report.reporter.username }}</MkA></div>
|
||||
|
|
@ -42,15 +48,28 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkSwitch from '@/components/MkSwitch.vue';
|
||||
import MkKeyValue from '@/components/MkKeyValue.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { dateString } from '@/filters/date.js';
|
||||
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
import MkNoteSimple from '@/components/MkNoteSimple.vue';
|
||||
const props = defineProps<{
|
||||
report: any;
|
||||
report: {
|
||||
id: string;
|
||||
createdAt:string;
|
||||
targetUserId:Misskey.entities.User['id'];
|
||||
targetUser:Misskey.entities.User & {createdAt:string;};
|
||||
reporter:Misskey.entities.User;
|
||||
assignee:Misskey.entities.User['id'];
|
||||
comment:string;
|
||||
notes:Misskey.entities.Note['id'][];
|
||||
forwarded:boolean;
|
||||
resolved:boolean;
|
||||
};
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
|
@ -69,47 +88,56 @@ function resolve() {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bcekxzvu {
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
display: flex;
|
||||
|
||||
> .target {
|
||||
width: 35%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
padding: 24px;
|
||||
border-right: solid 1px var(--divider);
|
||||
|
||||
> .info {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
--c: rgb(255 196 0 / 15%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-size: 16px 16px;
|
||||
|
||||
> .avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
> .names {
|
||||
margin-left: 0.3em;
|
||||
padding: 0 8px;
|
||||
flex: 1;
|
||||
|
||||
> .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .detail {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
}
|
||||
margin: var(--margin) 0;
|
||||
background: var(--panel);
|
||||
border-radius: var(--radius);
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.notes {
|
||||
margin: var(--margin) 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.target {
|
||||
width: 35%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
padding: 24px;
|
||||
border-right: solid 1px var(--divider);
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
--c: rgb(255 196 0 / 15%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.names {
|
||||
margin-left: 0.3em;
|
||||
padding: 0 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.detail {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<MkWindow ref="uiWindow" :initialWidth="400" :initialHeight="500" :canResize="true" @closed="emit('closed')">
|
||||
<MkWindow ref="uiWindow" :initialWidth="400" :initialHeight="500" :canResize="true" style="overflow-x: clip;" @closed="emit('closed')">
|
||||
<template #header>
|
||||
<i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i>
|
||||
<I18n :src="i18n.ts.reportAbuseOf" tag="span">
|
||||
|
|
@ -13,19 +13,45 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
</I18n>
|
||||
</template>
|
||||
<MkSpacer :marginMin="20" :marginMax="28">
|
||||
<div class="_gaps_m" :class="$style.root">
|
||||
<div class="">
|
||||
<MkTextarea v-model="comment">
|
||||
<template #label>{{ i18n.ts.details }}</template>
|
||||
<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
|
||||
</MkTextarea>
|
||||
</div>
|
||||
<div class="">
|
||||
<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
<Transition
|
||||
mode="out-in"
|
||||
:enterActiveClass="$style.transition_x_enterActive"
|
||||
:leaveActiveClass="$style.transition_x_leaveActive"
|
||||
:enterFromClass="$style.transition_x_enterFrom"
|
||||
:leaveToClass="$style.transition_x_leaveTo"
|
||||
>
|
||||
<template v-if="page === 0">
|
||||
<MkSpacer :marginMin="20" :marginMax="28">
|
||||
<div class="_gaps_m" :class="$style.root">
|
||||
<MkPagination v-slot="{items}" :key="user.id" :pagination="Pagination">
|
||||
<div v-for="item in items" :key="item.id" :class="$style.note">
|
||||
<MkSwitch v-model="item.isAbuseReport" @update:modelValue="pushAbuseReportNote($event,item.id)"></MkSwitch>
|
||||
<MkAvatar :user="item.user" preview/>
|
||||
<MkNoteSimple :note="item"/>
|
||||
</div>
|
||||
</MkPagination>
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</template>
|
||||
|
||||
<template v-else-if="page === 1">
|
||||
<MkSpacer :marginMin="20" :marginMax="28">
|
||||
<div class="_gaps_m" :class="$style.root">
|
||||
<MkTextarea v-model="comment">
|
||||
<template #label>{{ i18n.ts.details }}</template>
|
||||
<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
|
||||
</MkTextarea>
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton primary :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</template>
|
||||
</Transition>
|
||||
</MkWindow>
|
||||
</template>
|
||||
|
||||
|
|
@ -37,23 +63,46 @@ import MkTextarea from '@/components/MkTextarea.vue';
|
|||
import MkButton from '@/components/MkButton.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import MkPagination from '@/components/MkPagination.vue';
|
||||
import MkNoteSimple from '@/components/MkNoteSimple.vue';
|
||||
import MkSwitch from '@/components/MkSwitch.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
user: Misskey.entities.User;
|
||||
initialComment?: string;
|
||||
initialNoteId?: Misskey.entities.Note['id'];
|
||||
}>();
|
||||
|
||||
const Pagination = {
|
||||
endpoint: 'users/notes' as const,
|
||||
limit: 10,
|
||||
params: {
|
||||
userId: props.user.id,
|
||||
},
|
||||
};
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
}>();
|
||||
|
||||
const abuseNotesId = ref(props.initialNoteId ? [props.initialNoteId] : []);
|
||||
const page = ref(0);
|
||||
const uiWindow = shallowRef<InstanceType<typeof MkWindow>>();
|
||||
const comment = ref(props.initialComment ?? '');
|
||||
|
||||
function pushAbuseReportNote(v, id) {
|
||||
if (v) {
|
||||
abuseNotesId.value.push(id);
|
||||
} else {
|
||||
abuseNotesId.value = abuseNotesId.value.filter(noteId => noteId !== id);
|
||||
}
|
||||
}
|
||||
|
||||
function send() {
|
||||
os.apiWithDialog('users/report-abuse', {
|
||||
userId: props.user.id,
|
||||
comment: comment.value,
|
||||
noteIds: abuseNotesId.value,
|
||||
}, undefined).then(res => {
|
||||
os.alert({
|
||||
type: 'success',
|
||||
|
|
@ -69,4 +118,22 @@ function send() {
|
|||
.root {
|
||||
--root-margin: 16px;
|
||||
}
|
||||
.transition_x_enterActive,
|
||||
.transition_x_leaveActive {
|
||||
transition: opacity 0.3s cubic-bezier(0,0,.35,1), transform 0.3s cubic-bezier(0,0,.35,1);
|
||||
}
|
||||
.transition_x_enterFrom {
|
||||
opacity: 0;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
.transition_x_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
.note{
|
||||
display: flex;
|
||||
margin: var(--margin) 0;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export function getAbuseNoteMenu(note: misskey.entities.Note, text: string): Men
|
|||
const u = note.url ?? note.uri ?? `${url}/notes/${note.id}`;
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
|
||||
user: note.user,
|
||||
initialComment: `Note: ${u}\n-----\n`,
|
||||
initialNoteId: note.id,
|
||||
}, {}, 'closed');
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue