From 36d5deeb611153ba3624384b6aca947784cc1e64 Mon Sep 17 00:00:00 2001
From: yupix <yupi0982@outlook.jp>
Date: Sat, 8 Jul 2023 17:48:10 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=83=95=E3=82=A9=E3=83=AB=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E3=83=9A=E3=83=BC=E3=82=B8=E3=83=8D=E3=83=BC?=
 =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=8C=E6=A9=9F=E8=83=BD=E3=81=97?=
 =?UTF-8?q?=E3=81=AA=E3=81=84=20(#11187)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: フォルダーのページネーションが機能しない close #11180

* Update MkDrive.vue

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 CHANGELOG.md                                 |  1 +
 packages/frontend/src/components/MkDrive.vue | 24 +++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a27190215..0a58750aa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,7 @@
 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
 - Fix: ZenUIでポップアップの表示位置がおかしい問題を修正
 - Fix: ページ遷移でスクロール位置が保持されない問題を修正
+- Fix: フォルダーのページネーションが機能しない #11180
 
 ### Server
 - JSON.parse の回数を削減することで、ストリーミングのパフォーマンスを向上しました
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 917e78513..201a6ccdc 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -56,7 +56,7 @@
 				/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
-				<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.ts.loadMore }}</MkButton>
+				<MkButton v-if="moreFolders" ref="moreFolders" @click="fetchMoreFolders">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
 			<div v-show="files.length > 0" ref="filesContainer" :class="$style.files">
 				<XFile
@@ -560,6 +560,28 @@ async function fetch() {
 	fetching.value = false;
 }
 
+function fetchMoreFolders() {
+	fetching.value = true;
+
+	const max = 30;
+
+	os.api('drive/folders', {
+		folderId: folder.value ? folder.value.id : null,
+		type: props.type,
+		untilId: folders.value[folders.value.length - 1].id,
+		limit: max + 1,
+	}).then(folders => {
+		if (folders.length === max + 1) {
+			moreFolders.value = true;
+			folders.pop();
+		} else {
+			moreFolders.value = false;
+		}
+		for (const x of folders) appendFolder(x);
+		fetching.value = false;
+	});
+}
+
 function fetchMoreFiles() {
 	fetching.value = true;