From ff1424950736b432d42226fa4d8bcadf57a26151 Mon Sep 17 00:00:00 2001
From: samunohito <46447427+samunohito@users.noreply.github.com>
Date: Mon, 29 Jan 2024 09:35:26 +0900
Subject: [PATCH] fix

---
 .../src/components/grid/MkDataCell.vue        |  2 +-
 .../src/components/grid/MkHeaderCell.vue      |  3 +-
 packages/frontend/src/components/grid/grid.ts |  1 +
 .../pages/admin/custom-emojis-grid.impl.ts    |  2 +
 .../pages/admin/custom-emojis-grid.list.vue   | 73 +++++++++++++------
 .../admin/custom-emojis-grid.register.vue     |  8 +-
 .../src/pages/admin/custom-emojis-grid.vue    | 28 +++++--
 7 files changed, 83 insertions(+), 34 deletions(-)

diff --git a/packages/frontend/src/components/grid/MkDataCell.vue b/packages/frontend/src/components/grid/MkDataCell.vue
index 0f6acc965a..fa7674a03b 100644
--- a/packages/frontend/src/components/grid/MkDataCell.vue
+++ b/packages/frontend/src/components/grid/MkDataCell.vue
@@ -23,7 +23,7 @@
 				</div>
 				<div v-else-if="cellType === 'boolean'">
 					<span v-if="cell.value === true" class="ti ti-check"/>
-					<span v-else class="ti ti-x"/>
+					<span v-else class="ti"/>
 				</div>
 				<div v-else-if="cellType === 'image'">
 					<img
diff --git a/packages/frontend/src/components/grid/MkHeaderCell.vue b/packages/frontend/src/components/grid/MkHeaderCell.vue
index d41dd182f2..79729e9dbf 100644
--- a/packages/frontend/src/components/grid/MkHeaderCell.vue
+++ b/packages/frontend/src/components/grid/MkHeaderCell.vue
@@ -8,7 +8,8 @@
 		<div :class="$style.left"/>
 		<div :class="$style.wrapper">
 			<div ref="contentEl" :class="$style.contentArea">
-				{{ text }}
+				<span v-if="column.setting.icon" class="ti" :class="column.setting.icon"/>
+				<span v-else>{{ text }}</span>
 			</div>
 		</div>
 		<div
diff --git a/packages/frontend/src/components/grid/grid.ts b/packages/frontend/src/components/grid/grid.ts
index e41d32b204..8c4bc72fcd 100644
--- a/packages/frontend/src/components/grid/grid.ts
+++ b/packages/frontend/src/components/grid/grid.ts
@@ -18,6 +18,7 @@ export type ColumnType = 'text' | 'number' | 'date' | 'boolean' | 'image';
 export type ColumnSetting = {
 	bindTo: string;
 	title?: string;
+	icon?: string;
 	type: ColumnType;
 	width: SizeStyle;
 	editable?: boolean;
diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts b/packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts
index 4da8ee81ad..37bf725e01 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts
+++ b/packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts
@@ -19,6 +19,7 @@ export class GridItem implements IGridItem {
 	readonly fileId?: string;
 	readonly url: string;
 
+	public checked: boolean;
 	public name: string;
 	public category: string;
 	public aliases: string;
@@ -45,6 +46,7 @@ export class GridItem implements IGridItem {
 		this.fileId = fileId;
 		this.url = url;
 
+		this.checked = true;
 		this.aliases = aliases;
 		this.name = name;
 		this.category = category;
diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.list.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.list.vue
index 477d0e6ff4..5d24380526 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-grid.list.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-grid.list.vue
@@ -1,9 +1,13 @@
 <template>
 <div class="_gaps">
-	<MkInput :modelValue="query" :debounce="true" type="search" autocapitalize="off" @change="(v) => query = v">
-		<template #prefix><i class="ti ti-search"></i></template>
-		<template #label>{{ i18n.ts.search }}</template>
-	</MkInput>
+	<div :class="$style.searchArea">
+		<MkInput v-model="query" :debounce="true" type="search" autocapitalize="off" style="flex: 1">
+			<template #prefix><i class="ti ti-search"></i></template>
+		</MkInput>
+		<MkButton primary style="margin-left: auto;" @click="onSearchButtonClicked">
+			{{ i18n.ts.search }}
+		</MkButton>
+	</div>
 
 	<div
 		style="overflow-y: scroll; padding-top: 8px; padding-bottom: 8px;"
@@ -11,36 +15,35 @@
 		<MkGrid :data="convertedGridItems" :columnSettings="columnSettings"/>
 	</div>
 
-	<div :class="$style.pages">
-		<button>&lt;&lt;</button>
-		<button>&lt;</button>
+	<div class="_gaps">
+		<div :class="$style.pages">
+			<button>&lt;</button>
+			<button>&gt;</button>
+		</div>
 
-		<button>1</button>
-		<button>2</button>
-		<button>3</button>
-		<button>4</button>
-		<button>5</button>
-		<span>...</span>
-		<button>10</button>
-
-		<button>&gt;</button>
-		<button>&gt;&gt;</button>
+		<div :class="$style.buttons">
+			<MkButton primary>{{ i18n.ts.update }}</MkButton>
+			<MkButton>リセット</MkButton>
+		</div>
 	</div>
 </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onActivated, onMounted, ref, toRefs, watch } from 'vue';
+import { computed, onMounted, ref, toRefs, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { GridItem } from '@/pages/admin/custom-emojis-grid.impl.js';
 import MkGrid from '@/components/grid/MkGrid.vue';
-import { ColumnSetting } from '@/components/grid/types.js';
+import { ColumnSetting } from '@/components/grid/grid.js';
 import { i18n } from '@/i18n.js';
 import MkInput from '@/components/MkInput.vue';
+import { required } from '@/components/grid/cell-validators.js';
+import MkButton from '@/components/MkButton.vue';
 
 const columnSettings: ColumnSetting[] = [
-	{ bindTo: 'url', title: '🎨', type: 'image', editable: false, width: 50 },
-	{ bindTo: 'name', title: 'name', type: 'text', editable: true, width: 140 },
+	{ bindTo: 'selected', icon: 'ti-trash', type: 'boolean', editable: true, width: 34 },
+	{ bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 50, validators: [required] },
+	{ bindTo: 'name', title: 'name', type: 'text', editable: true, width: 140, validators: [required] },
 	{ bindTo: 'category', title: 'category', type: 'text', editable: true, width: 140 },
 	{ bindTo: 'aliases', title: 'aliases', type: 'text', editable: true, width: 140 },
 	{ bindTo: 'license', title: 'license', type: 'text', editable: true, width: 140 },
@@ -49,6 +52,10 @@ const columnSettings: ColumnSetting[] = [
 	{ bindTo: 'roleIdsThatCanBeUsedThisEmojiAsReaction', title: 'role', type: 'text', editable: true, width: 140 },
 ];
 
+const emit = defineEmits<{
+	(ev: 'operation:search', query: string, sinceId?: string, untilId?: string): void;
+}>();
+
 const props = defineProps<{
 	customEmojis: Misskey.entities.EmojiDetailed[];
 }>();
@@ -62,21 +69,33 @@ const convertedGridItems = computed(() => gridItems.value.map(it => it.asRecord(
 
 watch(customEmojis, refreshGridItems);
 
+function onSearchButtonClicked() {
+	emit('operation:search', query.value, undefined, undefined);
+}
+
 function refreshGridItems() {
 	gridItems.value = customEmojis.value.map(it => GridItem.fromEmojiDetailed(it));
 }
 
-refreshGridItems();
+onMounted(() => {
+	refreshGridItems();
+});
 
 </script>
 
 <style module lang="scss">
+.searchArea {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: stretch;
+	gap: 8px;
+}
 
 .pages {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	margin-top: 8px;
 
 	button {
 		background-color: var(--buttonBg);
@@ -86,4 +105,12 @@ refreshGridItems();
 		padding: 8px;
 	}
 }
+
+.buttons {
+	display: inline-flex;
+	margin-left: auto;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
 </style>
diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
index 4e56beabb2..7613640bcb 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
@@ -75,10 +75,6 @@ type FolderItem = {
 
 type UploadResult = { key: string, item: IGridItem, success: boolean, err: any };
 
-const emit = defineEmits<{
-	(ev: 'operation:registered'): void;
-}>();
-
 const columnSettings: ColumnSetting[] = [
 	{ bindTo: 'url', title: '🎨', type: 'image', editable: false, width: 50, validators: [required] },
 	{ bindTo: 'name', title: 'name', type: 'text', editable: true, width: 140, validators: [required] },
@@ -90,6 +86,10 @@ const columnSettings: ColumnSetting[] = [
 	{ bindTo: 'roleIdsThatCanBeUsedThisEmojiAsReaction', title: 'role', type: 'text', editable: true, width: 100 },
 ];
 
+const emit = defineEmits<{
+	(ev: 'operation:registered'): void;
+}>();
+
 const uploadFolders = ref<FolderItem[]>([]);
 const gridItems = ref<IGridItem[]>([]);
 const selectedFolderId = ref(defaultStore.state.uploadFolder);
diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.vue
index ebd00c2e51..886f8be6dc 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-grid.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-grid.vue
@@ -11,8 +11,15 @@
 			</MkTab>
 
 			<div>
-				<XListComponent v-if="modeTab === 'list'" :customEmojis="customEmojis"/>
-				<XRegisterComponent v-else @operation:registered="onOperationRegistered"/>
+				<XListComponent
+					v-if="modeTab === 'list'"
+					:customEmojis="customEmojis"
+					@operation:search="onOperationSearch"
+				/>
+				<XRegisterComponent
+					v-else
+					@operation:registered="onOperationRegistered"
+				/>
 			</div>
 		</div>
 	</MkStickyContainer>
@@ -34,13 +41,24 @@ type PageMode = 'list' | 'register';
 const customEmojis = ref<Misskey.entities.EmojiDetailed[]>([]);
 const headerTab = ref('local');
 const modeTab = ref<PageMode>('list');
+const query = ref<string>();
 
-async function refreshCustomEmojis() {
-	customEmojis.value = await misskeyApi('admin/emoji/list', { limit: 100 });
+async function refreshCustomEmojis(query?: string, sinceId?: string, untilId?: string) {
+	customEmojis.value = await misskeyApi('admin/emoji/list', {
+		limit: 100,
+		query,
+		sinceId,
+		untilId,
+	});
+}
+
+async function onOperationSearch(q: string, sinceId?: string, untilId?: string) {
+	query.value = q;
+	await refreshCustomEmojis(q, sinceId, untilId);
 }
 
 async function onOperationRegistered() {
-	await refreshCustomEmojis();
+	await refreshCustomEmojis(query.value);
 }
 
 onMounted(async () => {