From 12ec6b8d11252e79559a4ae161c387cfad5f6964 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 17 Jan 2025 09:11:22 +0900
Subject: [PATCH] =?UTF-8?q?enhance:=20pagination=E3=82=92=E4=BD=BF?=
 =?UTF-8?q?=E3=81=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MkNoteDraftSelectDialog.vue    | 112 ++++++++++--------
 1 file changed, 62 insertions(+), 50 deletions(-)

diff --git a/packages/frontend/src/components/MkNoteDraftSelectDialog.vue b/packages/frontend/src/components/MkNoteDraftSelectDialog.vue
index 6305728ed6..f0389a0407 100644
--- a/packages/frontend/src/components/MkNoteDraftSelectDialog.vue
+++ b/packages/frontend/src/components/MkNoteDraftSelectDialog.vue
@@ -17,41 +17,59 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div>
 		<div :class="$style.result">
 			<div :class="$style.drafts">
-				<div v-for="draft in drafts" :key="draft.id" class="_button" :class="[$style.draft, { [$style.selected]: selected && selected.id === draft.id }]" @click="selected = draft" @dblclick="ok()">
-					<div :class="$style.draftContainer">
-						<div :class="$style.draftContent">
-							<div :class="$style.draftHeader">
-								<div :class="$style.headerLeft">
-									<div v-if="draft.reply">
-										<i class="ti ti-arrow-back-up"></i><MkAvatar :user="draft.reply.user" :class="$style.headerAvater"/>@{{ `${draft.reply.user.username}${ draft.reply.user.host ? `@${draft.reply.user.host}` : '' }` }} <span>{{ truncateText(draft.reply.text, 10) }}</span>
-									</div>
-									<div v-else-if="draft.renote">
-										<i class="ti ti-quote"></i><MkAvatar :user="draft.renote.user" :class="$style.headerAvater"/>@{{ `${draft.renote.user.username}${ draft.renote.user.host ? `@${draft.renote.user.host}` : '' }` }} <span>{{ truncateText(draft.renote?.text, 10) }}</span>
-									</div>
-									<div v-else>
-										<i class="ti ti-pencil-minus"></i>
-									</div>
-								</div>
-								<div :class="$style.headerRight">
-									<div style="margin-left: 0.5em;" :title="i18n.ts._visibility[draft.visibility]">
-										<i v-if="draft.visibility === 'public' && draft.channel == null" class="ti ti-world"></i>
-										<i v-else-if="draft.visibility === 'home'" class="ti ti-home"></i>
-										<i v-else-if="draft.visibility === 'followers'" class="ti ti-lock"></i>
-										<i v-else-if="draft.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
-									</div>
-									<span v-if="draft.channel" v-tooltip="i18n.ts.channel"><i class="ti ti-device-tv"></i> </span>
-									<span v-if="draft.localOnly" v-tooltip="i18n.ts.localOnly"><i class="ti ti-rocket-off"></i></span>
-								</div>
-							</div>
-							<div :class="$style.draftBody">
-								<div v-if="draft.cw != null" class="cw">{{ truncateText(draft.cw, 20) }}</div>
-								{{ truncateText(draft.text, 20) }}
-							</div>
+				<MkPagination ref="pagingEl" :pagination="paging">
+					<template #empty>
+						<div class="_fullinfo">
+							<img :src="infoImageUrl" class="_ghost"/>
+							<div>{{ i18n.ts.noDrafts }}</div>
 						</div>
-						<MkButton short :class="$style.deleteButton" @click="deleteDraft(draft)"><i class="ti ti-trash"></i></MkButton>
-					</div>
-				</div>
-				<div v-if="drafts.length === 0" class="_empty" :class="$style.empty">{{ i18n.ts.noDrafts }}</div>
+					</template>
+
+					<template #default="{ items }">
+						<button
+							v-for="draft in items"
+							:key="draft.id"
+							class="_button"
+							:class="[$style.draft, { [$style.selected]: selected && selected.id === draft.id }]"
+							type="button"
+							@click="selected = draft"
+							@dblclick="ok()"
+						>
+							<div :class="$style.draftContainer">
+								<div :class="$style.draftContent">
+									<div :class="$style.draftHeader">
+										<div :class="$style.headerLeft">
+											<div v-if="draft.reply">
+												<i class="ti ti-arrow-back-up"></i><MkAvatar :user="draft.reply.user" :class="$style.headerAvater"/>@{{ `${draft.reply.user.username}${ draft.reply.user.host ? `@${draft.reply.user.host}` : '' }` }} <span>{{ truncateText(draft.reply.text, 10) }}</span>
+											</div>
+											<div v-else-if="draft.renote">
+												<i class="ti ti-quote"></i><MkAvatar :user="draft.renote.user" :class="$style.headerAvater"/>@{{ `${draft.renote.user.username}${ draft.renote.user.host ? `@${draft.renote.user.host}` : '' }` }} <span>{{ truncateText(draft.renote?.text, 10) }}</span>
+											</div>
+											<div v-else>
+												<i class="ti ti-pencil-minus"></i>
+											</div>
+										</div>
+										<div :class="$style.headerRight">
+											<div style="margin-left: 0.5em;" :title="i18n.ts._visibility[draft.visibility]">
+												<i v-if="draft.visibility === 'public' && draft.channel == null" class="ti ti-world"></i>
+												<i v-else-if="draft.visibility === 'home'" class="ti ti-home"></i>
+												<i v-else-if="draft.visibility === 'followers'" class="ti ti-lock"></i>
+												<i v-else-if="draft.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
+											</div>
+											<span v-if="draft.channel" v-tooltip="i18n.ts.channel"><i class="ti ti-device-tv"></i> </span>
+											<span v-if="draft.localOnly" v-tooltip="i18n.ts.localOnly"><i class="ti ti-rocket-off"></i></span>
+										</div>
+									</div>
+									<div :class="$style.draftBody">
+										<div v-if="draft.cw != null" class="cw">{{ truncateText(draft.cw, 20) }}</div>
+										{{ truncateText(draft.text, 20) }}
+									</div>
+								</div>
+								<MkButton short :class="$style.deleteButton" @click="deleteDraft(draft)"><i class="ti ti-trash"></i></MkButton>
+							</div>
+						</button>
+					</template>
+				</MkPagination>
 			</div>
 		</div>
 	</div>
@@ -59,12 +77,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, shallowRef } from 'vue';
+import { ref, shallowRef, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
-import MkButton from './MkButton.vue';
+import MkPagination, { type Paging } from '@/components/MkPagination.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
+import { infoImageUrl } from '@/instance.js';
 
 const emit = defineEmits<{
 	(ev: 'ok', selected: Misskey.entities.NoteDraft): void;
@@ -72,7 +91,12 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const drafts = ref<Misskey.entities.NoteDraft[]>([]);
+const paging = {
+	endpoint: 'notes/drafts',
+	limit: 10,
+} satisfies Paging;
+
+const pagingComponent = useTemplateRef('pagingEl');
 
 const selected = ref<Misskey.entities.NoteDraft | null>(null);
 const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
@@ -98,15 +122,9 @@ function cancel() {
 
 function deleteDraft(draft: Misskey.entities.NoteDraft) {
 	misskeyApi('notes/drafts/delete', { draftId: draft.id }).then(() => {
-		drafts.value = drafts.value.filter(d => d.id !== draft.id);
+		pagingComponent.value?.reload();
 	});
 }
-
-onMounted(() => {
-	misskeyApi('notes/drafts', {}).then(_drafts => {
-		drafts.value = _drafts;
-	});
-});
 </script>
 
 <style lang="scss" module>
@@ -194,10 +212,4 @@ onMounted(() => {
 	margin-left: 0.5em;
 	min-width: 40px;
 }
-
-.empty {
-	opacity: 0.7;
-	text-align: center;
-	padding: 16px;
-}
 </style>