From 1d106b3ae81b8fa28bf644622e617262a2889040 Mon Sep 17 00:00:00 2001
From: tetsuya-ki <64536338+tetsuya-ki@users.noreply.github.com>
Date: Sun, 20 Oct 2024 16:17:16 +0900
Subject: [PATCH] =?UTF-8?q?Enhance:=20=E3=83=89=E3=83=A9=E3=82=A4=E3=83=96?=
 =?UTF-8?q?=E3=81=A7=E3=82=BD=E3=83=BC=E3=83=88=E3=81=8C=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20=20(#14801)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Enhance: ドライブでソートができるように

* Update CHANGELOG.md
---
 CHANGELOG.md                                 |  1 +
 packages/frontend/src/components/MkDrive.vue | 25 +++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3a5e4178..3a23938c3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 ### Client
 - Enhance: Bull DashboardでRelationship Queueの状態も確認できるように  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/751)
+- Enhance: ドライブでソートができるように 
 
 ### Server
 -
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 23883a44e..05f335481 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -30,6 +30,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
 			<span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span>
 		</div>
+		<div :class="$style.navSort">
+			<MkSelect v-model="sortModeSelect">
+				<option value="+createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.descendingOrder }})</option>
+				<option value="-createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.ascendingOrder }})</option>
+				<option value="+size">{{ i18n.ts.size }} ({{ i18n.ts.descendingOrder }})</option>
+				<option value="-size">{{ i18n.ts.size }} ({{ i18n.ts.ascendingOrder }})</option>
+				<option value="+name">{{ i18n.ts.name }} ({{ i18n.ts.descendingOrder }})</option>
+				<option value="-name">{{ i18n.ts.name }} ({{ i18n.ts.ascendingOrder }})</option>
+			</MkSelect>
+		</div>
 		<button class="_button" :class="$style.navMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
 	</nav>
 	<div
@@ -100,6 +110,7 @@ import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, shallowRef, wat
 import * as Misskey from 'misskey-js';
 import MkButton from './MkButton.vue';
 import type { MenuItem } from '@/types/menu.js';
+import MkSelect from '@/components/MkSelect.vue';
 import XNavFolder from '@/components/MkDrive.navFolder.vue';
 import XFolder from '@/components/MkDrive.folder.vue';
 import XFile from '@/components/MkDrive.file.vue';
@@ -157,7 +168,12 @@ const ilFilesObserver = new IntersectionObserver(
 	(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
 );
 
+const sortModeSelect = ref('+createdAt');
+
 watch(folder, () => emit('cd', folder.value));
+watch(sortModeSelect, () => {
+	fetch();
+});
 
 function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
 	addFile(file, true);
@@ -558,6 +574,7 @@ async function fetch() {
 		folderId: folder.value ? folder.value.id : null,
 		type: props.type,
 		limit: filesMax + 1,
+		sort: sortModeSelect.value,
 	}).then(fetchedFiles => {
 		if (fetchedFiles.length === filesMax + 1) {
 			moreFiles.value = true;
@@ -607,6 +624,7 @@ function fetchMoreFiles() {
 		type: props.type,
 		untilId: files.value.at(-1)?.id,
 		limit: max + 1,
+		sort: sortModeSelect.value,
 	}).then(files => {
 		if (files.length === max + 1) {
 			moreFiles.value = true;
@@ -760,11 +778,16 @@ onBeforeUnmount(() => {
 	}
 }
 
-.navMenu {
+.navSort {
+	display: inline-block;
 	margin-left: auto;
 	padding: 0 12px;
 }
 
+.navMenu {
+	padding: 0 12px;
+}
+
 .main {
 	flex: 1;
 	overflow: auto;