From 502a93b401d05f93c717e4e94fe89aeeb173fbdd Mon Sep 17 00:00:00 2001
From: mei23 <m@m544.net>
Date: Sun, 7 Jun 2020 21:39:10 +0900
Subject: [PATCH] wip

---
 src/client/app/admin/views/emoji.vue         | 81 ++++++++++++++++++--
 src/server/api/endpoints/admin/emoji/list.ts | 39 +++++++++-
 2 files changed, 108 insertions(+), 12 deletions(-)

diff --git a/src/client/app/admin/views/emoji.vue b/src/client/app/admin/views/emoji.vue
index 1fbe4fb528ae..776f123cc25c 100644
--- a/src/client/app/admin/views/emoji.vue
+++ b/src/client/app/admin/views/emoji.vue
@@ -53,7 +53,23 @@
 				</ui-horizon-group>
 			</div>
 		</section>
+		<ui-button v-if="existMore" @click="fetchEmojis('local')">{{ $t('@.load-more') }}</ui-button>
 	</ui-card>
+
+	<ui-card>
+		<template #title><fa :icon="faGrin"/> {{ $t('emojis.title') }}</template>
+		<section v-for="emoji in remoteEmojis" :key="emoji.name" class="remotebft" style="padding: 16px 32px">
+			<div class="image">
+				<img :src="emoji.url" :alt="emoji.name" style="width: 32px;"/>
+			</div>
+			<div class="detail">
+				<div>{{ `${emoji.name}@${emoji.host}` }}</div>
+			</div>
+		</section>
+
+		<ui-button v-if="remoteExistMore" @click="fetchEmojis('remote')">{{ $t('@.load-more') }}</ui-button>
+	</ui-card>
+
 </div>
 </template>
 
@@ -71,7 +87,13 @@ export default Vue.extend({
 			category: '',
 			url: '',
 			aliases: '',
+			limit: 2,
 			emojis: [],
+			existMore: false,
+			offset: 0,
+			remoteEmojis: [],
+			remoteExistMore: false,
+			remoteOffset: 0,
 			faGrin
 		};
 	},
@@ -107,14 +129,44 @@ export default Vue.extend({
 			});
 		},
 
-		fetchEmojis() {
-			this.$root.api('admin/emoji/list').then(emojis => {
-				emojis.reverse();
-				for (const e of emojis) {
-					e.aliases = (e.aliases || []).join(' ');
-				}
-				this.emojis = emojis;
-			});
+		fetchEmojis(kind?: string) {
+			if (!kind || kind === 'local') {
+				this.$root.api('admin/emoji/list', {
+					remote: false,
+					offset: this.offset,
+					limit: this.limit + 1,
+				}).then((emojis: any[]) => {
+					if (emojis.length === this.limit + 1) {
+						emojis.pop();
+						this.existMore = true;
+					} else {
+						this.existMore = false;
+					}
+					for (const e of emojis) {
+						e.aliases = (e.aliases || []).join(' ');
+					}
+					this.emojis = emojis;
+					this.offset += emojis.length;
+				});
+			}
+
+			if (!kind || kind === 'remote') {
+				this.$root.api('admin/emoji/list', {
+					remote: true,
+					offset: this.remoteOffset,
+					limit: this.limit + 1,
+				}).then((emojis: any[]) => {
+					if (emojis.length === this.limit + 1) {
+						emojis.pop();
+						this.remoteExistMore = true;
+					} else {
+						this.remoteExistMore = false;
+					}
+
+					this.remoteEmojis = emojis;
+					this.remoteOffset += emojis.length;
+				});
+			}
 		},
 
 		updateEmoji(emoji) {
@@ -183,4 +235,17 @@ export default Vue.extend({
 		@media (min-width 500px)
 			padding-left 16px
 
+.remotebft
+	display flex
+
+	> div.image
+		padding-bottom 16px
+
+		> img
+			vertical-align bottom
+
+	> div.detail
+		flex 1
+		padding-left 16px
+
 </style>
diff --git a/src/server/api/endpoints/admin/emoji/list.ts b/src/server/api/endpoints/admin/emoji/list.ts
index 57a7f45ae950..478637ed9b7c 100644
--- a/src/server/api/endpoints/admin/emoji/list.ts
+++ b/src/server/api/endpoints/admin/emoji/list.ts
@@ -1,6 +1,7 @@
 import $ from 'cafy';
 import Emoji from '../../../../../models/emoji';
 import define from '../../../define';
+import { escapeRegExp } from 'lodash';
 
 export const meta = {
 	desc: {
@@ -13,16 +14,46 @@ export const meta = {
 	requireModerator: true,
 
 	params: {
+		limit: {
+			validator: $.optional.num.range(1, 100),
+			default: 10
+		},
+
+		offset: {
+			validator: $.optional.num.min(0),
+			default: 0
+		},
+
+		remote: {
+			validator: $.optional.bool,
+		},
+
+		name: {
+			validator: $.optional.str
+		},
+
 		host: {
-			validator: $.optional.nullable.str,
-			default: null as any
+			validator: $.optional.nullable.str
 		}
 	}
 };
 
 export default define(meta, async (ps) => {
-	const emojis = await Emoji.find({
-		host: ps.host
+	const query = {
+		host: ps.remote ? { $ne: null } : null
+	} as any;
+
+	if (ps.name) {
+		query.name = new RegExp(escapeRegExp(ps.name.toLowerCase()));
+	}
+
+	if (ps.host !== undefined) {
+		query.host = ps.host;
+	}
+
+	const emojis = await Emoji.find(query, {
+		skip: ps.offset,
+		limit: ps.limit
 	});
 
 	return emojis.map(e => ({