feat: 管理者が特定ユーザーのアップロードしたファイル一覧を見れるように

packages/client/src/pages/admin/files.vue

@@ -16,32 +16,15 @@
 							<template #label>{{ $ts.host }}</template>
 						</MkInput>
 					</div>
-					<div class="inputs" style="display: flex; padding-top: 1.2em;">
+					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap; padding-top: 1.2em;">
+						<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
+							<template #label>User ID</template>
+						</MkInput>
 						<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
 							<template #label>MIME type</template>
 						</MkInput>
 					</div>
-					<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
-						<button v-for="file in items" :key="file.id" v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${new Date(file.createdAt).toLocaleString()}\nby ${file.user ? '@' + Acct.toString(file.user) : 'system'}`" class="file _button" @click="show(file, $event)">
-							<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-							<div v-if="viewMode === 'list'" class="body">
-								<div>
-									<small style="opacity: 0.7;">{{ file.name }}</small>
-								</div>
-								<div>
-									<MkAcct v-if="file.user" :user="file.user"/>
-									<div v-else>{{ $ts.system }}</div>
-								</div>
-								<div>
-									<span style="margin-right: 1em;">{{ file.type }}</span>
-									<span>{{ bytes(file.size) }}</span>
-								</div>
-								<div>
-									<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
-								</div>
-							</div>
-						</button>
-					</MkPagination>
+					<MkFileListForAdmin :pagination="pagination" :view-mode="viewMode"/>
 				</div>
 			</div>
 		</MkSpacer>
@@ -56,9 +39,7 @@ import XHeader from './_header_.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
-import MkPagination from '@/components/ui/pagination.vue';
-import MkContainer from '@/components/ui/container.vue';
-import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
+import MkFileListForAdmin from '@/components/file-list-for-admin.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -67,12 +48,14 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 let origin = $ref('local');
 let type = $ref(null);
 let searchHost = $ref('');
+let userId = $ref('');
 let viewMode = $ref('grid');
 const pagination = {
 	endpoint: 'admin/drive/files' as const,
 	limit: 10,
 	params: computed(() => ({
 		type: (type && type !== '') ? type : null,
+		userId: (userId && userId !== '') ? userId : null,
 		origin: origin,
 		hostname: (searchHost && searchHost !== '') ? searchHost : null,
 	})),
@@ -134,54 +117,5 @@ definePageMetadata(computed(() => ({
 <style lang="scss" scoped>
 .xrmjdkdw {
 	margin: var(--margin);
-
-	.urempief {
-		margin-top: var(--margin);
-
-		&.list {
-			> .file {
-				display: flex;
-				width: 100%;
-				box-sizing: border-box;
-				text-align: left;
-				align-items: center;
-
-				&:hover {
-					color: var(--accent);
-				}
-
-				> .thumbnail {
-					width: 128px;
-					height: 128px;
-				}
-
-				> .body {
-					margin-left: 0.3em;
-					padding: 8px;
-					flex: 1;
-
-					@media (max-width: 500px) {
-						font-size: 14px;
-					}
-				}
-			}
-		}
-
-		&.grid {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-			grid-gap: 12px;
-			margin: var(--margin) 0;
-
-			> .file {
-				aspect-ratio: 1;
-			
-				> .thumbnail {
-					width: 100%;
-					height: 100%;
-				}
-			}
-		}
-	}
 }
 </style>