diff options
Diffstat (limited to 'packages/frontend/src/components/MkAbuseReport.vue')
| -rw-r--r-- | packages/frontend/src/components/MkAbuseReport.vue | 74 |
1 files changed, 60 insertions, 14 deletions
diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue index c9c629046e..2f0e09fc4b 100644 --- a/packages/frontend/src/components/MkAbuseReport.vue +++ b/packages/frontend/src/components/MkAbuseReport.vue @@ -6,26 +6,33 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <MkFolder> <template #icon> - <i v-if="report.resolved" class="ti ti-check" style="color: var(--success)"></i> + <i v-if="report.resolved && report.resolvedAs === 'accept'" class="ti ti-check" style="color: var(--success)"></i> + <i v-else-if="report.resolved && report.resolvedAs === 'reject'" class="ti ti-x" style="color: var(--error)"></i> + <i v-else-if="report.resolved" class="ti ti-slash"></i> <i v-else class="ti ti-exclamation-circle" style="color: var(--warn)"></i> </template> <template #label><MkAcct :user="report.targetUser"/> (by <MkAcct :user="report.reporter"/>)</template> <template #caption>{{ report.comment }}</template> <template #suffix><MkTime :time="report.createdAt"/></template> - <template v-if="!report.resolved" #footer> + <template #footer> <div class="_buttons"> - <MkButton primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton> - <template v-if="report.targetUser.host == null || report.resolved"> - <MkButton primary @click="resolveAndForward">{{ i18n.ts.forwardReport }}</MkButton> - <div v-tooltip:dialog="i18n.ts.forwardReportIsAnonymous" class="_button _help"><i class="ti ti-help-circle"></i></div> + <template v-if="!report.resolved"> + <MkButton @click="resolve('accept')"><i class="ti ti-check" style="color: var(--success)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.accept }})</MkButton> + <MkButton @click="resolve('reject')"><i class="ti ti-x" style="color: var(--error)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.reject }})</MkButton> + <MkButton @click="resolve(null)"><i class="ti ti-slash"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts.other }})</MkButton> </template> + <template v-if="report.targetUser.host == null"> + <MkButton :disabled="report.forwarded" primary @click="forward"><i class="ti ti-corner-up-right"></i> {{ i18n.ts._abuseUserReport.forward }}</MkButton> + <div v-tooltip:dialog="i18n.ts._abuseUserReport.forwardDescription" class="_button _help"><i class="ti ti-help-circle"></i></div> + </template> + <button class="_button" style="margin-left: auto; width: 34px;" @click="showMenu"><i class="ti ti-dots"></i></button> </div> </template> <div :class="$style.root" class="_gaps_s"> <MkFolder :withSpacer="false"> <template #icon><MkAvatar :user="report.targetUser" style="width: 18px; height: 18px;"/></template> - <template #label>Target: <MkAcct :user="report.targetUser"/></template> + <template #label>{{ i18n.ts.target }}: <MkAcct :user="report.targetUser"/></template> <template #suffix>#{{ report.targetUserId.toUpperCase() }}</template> <div style="container-type: inline-size;"> @@ -36,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkFolder :defaultOpen="true"> <template #icon><i class="ti ti-message-2"></i></template> <template #label>{{ i18n.ts.details }}</template> - <div> + <div class="_gaps_s"> <Mfm :text="report.comment" :linkNavigationBehavior="'window'"/> </div> </MkFolder> @@ -51,6 +58,17 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </MkFolder> + <MkFolder :defaultOpen="false"> + <template #icon><i class="ti ti-message-2"></i></template> + <template #label>{{ i18n.ts.moderationNote }}</template> + <template #suffix>{{ moderationNote.length > 0 ? '...' : i18n.ts.none }}</template> + <div class="_gaps_s"> + <MkTextarea v-model="moderationNote" manualSave> + <template #caption>{{ i18n.ts.moderationNoteDescription }}</template> + </MkTextarea> + </div> + </MkFolder> + <div v-if="report.assignee"> {{ i18n.ts.moderator }}: <MkAcct :user="report.assignee"/> @@ -60,7 +78,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { provide, ref } from 'vue'; +import { provide, ref, watch } from 'vue'; import * as Misskey from 'misskey-js'; import MkButton from '@/components/MkButton.vue'; import MkSwitch from '@/components/MkSwitch.vue'; @@ -71,6 +89,8 @@ import { dateString } from '@/filters/date.js'; import MkFolder from '@/components/MkFolder.vue'; import RouterView from '@/components/global/RouterView.vue'; import { useRouterFactory } from '@/router/supplier'; +import MkTextarea from '@/components/MkTextarea.vue'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; const props = defineProps<{ report: Misskey.entities.AdminAbuseUserReportsResponse[number]; @@ -86,22 +106,48 @@ targetRouter.init(); const reporterRouter = routerFactory(`/admin/user/${props.report.reporterId}`); reporterRouter.init(); -function resolve() { +const moderationNote = ref(props.report.moderationNote ?? ''); + +watch(moderationNote, async () => { + os.apiWithDialog('admin/update-abuse-user-report', { + reportId: props.report.id, + moderationNote: moderationNote.value, + }).then(() => { + }); +}); + +function resolve(resolvedAs) { os.apiWithDialog('admin/resolve-abuse-user-report', { reportId: props.report.id, + resolvedAs, }).then(() => { emit('resolved', props.report.id); }); } -function resolveAndForward() { - os.apiWithDialog('admin/resolve-abuse-user-report', { - forward: true, +function forward() { + os.apiWithDialog('admin/forward-abuse-user-report', { reportId: props.report.id, }).then(() => { - emit('resolved', props.report.id); + }); } + +function showMenu(ev: MouseEvent) { + os.popupMenu([{ + icon: 'ti ti-id', + text: 'Copy ID', + action: () => { + copyToClipboard(props.report.id); + }, + }, { + icon: 'ti ti-json', + text: 'Copy JSON', + action: () => { + copyToClipboard(JSON.stringify(props.report, null, '\t')); + }, + }], ev.currentTarget ?? ev.target); +} </script> <style lang="scss" module> |