1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div class="_gaps">
<MkPaginationControl :paginator="paginator" canFilter>
<MkSelect v-model="type" :items="typeDef" style="margin: 0; flex: 1;">
<template #label>{{ i18n.ts.type }}</template>
</MkSelect>
<MkInput v-model="moderatorId" style="margin: 0; flex: 1;">
<template #label>{{ i18n.ts.moderator }}(ID)</template>
</MkInput>
</MkPaginationControl>
<component :is="prefer.s.enablePullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => paginator.reload()">
<MkLoading v-if="paginator.fetching.value"/>
<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
<MkTl v-else :events="timeline" groupBy="d">
<template #left="{ event }">
<div>
<MkAvatar :user="event.user" style="width: 26px; height: 26px;"/>
</div>
</template>
<template #right="{ event, timestamp, delta }">
<div style="margin: 4px 0;">
<XModLog :key="event.id" :log="event"/>
</div>
</template>
</MkTl>
</component>
<MkButton primary rounded style="margin: 0 auto;" @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
</div>
</div>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { computed, ref, markRaw, onMounted } from 'vue';
import * as Misskey from 'misskey-js';
import XModLog from './modlog.ModLog.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkInput from '@/components/MkInput.vue';
import MkTl from '@/components/MkTl.vue';
import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
import { prefer } from '@/preferences.js';
import { useMkSelect } from '@/composables/use-mkselect.js';
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
import MkButton from '@/components/MkButton.vue';
import MkPaginationControl from '@/components/MkPaginationControl.vue';
import { Paginator } from '@/utility/paginator.js';
const {
model: type,
def: typeDef,
} = useMkSelect({
items: [
{ label: i18n.ts.all, value: null },
...Misskey.moderationLogTypes.map(t => ({ label: i18n.ts._moderationLogTypes[t] ?? t, value: t })),
],
initialValue: null,
});
const moderatorId = ref('');
const paginator = markRaw(new Paginator('admin/show-moderation-logs', {
limit: 20,
canFetchDetection: 'limit',
canSearch: true,
computedParams: computed(() => ({
type: type.value,
userId: moderatorId.value === '' ? null : moderatorId.value,
})),
}));
paginator.init();
const timeline = computed(() => {
return paginator.items.value.map(x => ({
id: x.id,
timestamp: new Date(x.createdAt).getTime(),
data: x as Misskey.entities.ModerationLog,
}));
});
function fetchMore() {
if (paginator.order.value === 'oldest') {
paginator.fetchNewer();
} else {
paginator.fetchOlder();
}
}
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePage(() => ({
title: i18n.ts.moderationLogs,
icon: 'ti ti-list-search',
}));
</script>
|
