Resolve #3238

src/client/app/admin/views/moderators.vue

@@ -12,6 +12,31 @@
 			</ui-horizon-group>
 		</section>
 	</ui-card>
+
+	<ui-card>
+		<template #title>{{ $t('logs.title') }}</template>
+		<section class="fit-top">
+			<sequential-entrance animation="entranceFromTop" delay="25">
+				<div v-for="log in logs" :key="log.id" class="">
+					<ui-horizon-group inputs>
+						<ui-input :value="log.user | acct" type="text" readonly>
+							<span>{{ $t('logs.moderator') }}</span>
+						</ui-input>
+						<ui-input :value="log.type" type="text" readonly>
+							<span>{{ $t('logs.type') }}</span>
+						</ui-input>
+						<ui-input :value="log.createdAt | date" type="text" readonly>
+							<span>{{ $t('logs.at') }}</span>
+						</ui-input>
+					</ui-horizon-group>
+					<ui-textarea :value="JSON.stringify(log.info, null, 4)" readonly>
+						<span>{{ $t('logs.info') }}</span>
+					</ui-textarea>
+				</div>
+			</sequential-entrance>
+			<ui-button v-if="existMoreLogs" @click="fetchLogs">{{ $t('@.load-more') }}</ui-button>
+		</section>
+	</ui-card>
 </div>
 </template>
 
@@ -26,10 +51,17 @@ export default Vue.extend({
 	data() {
 		return {
 			username: '',
-			changing: false
+			changing: false,
+			logs: [],
+			untilLogId: null,
+			existMoreLogs: false
 		};
 	},
 
+	created() {
+		this.fetchLogs();
+	},
+
 	methods: {
 		async add() {
 			this.changing = true;
@@ -74,6 +106,22 @@ export default Vue.extend({
 
 			this.changing = false;
 		},
+
+		fetchLogs() {
+			this.$root.api('admin/show-moderation-logs', {
+				untilId: this.untilId,
+				limit: 10 + 1
+			}).then(logs => {
+				if (logs.length == 10 + 1) {
+					logs.pop();
+					this.existMoreLogs = true;
+				} else {
+					this.existMoreLogs = false;
+				}
+				this.logs = this.logs.concat(logs);
+				this.untilLogId = this.logs[this.logs.length - 1].id;
+			});
+		},
 	}
 });
 </script>