fix(client): コントロールパネルのユーザー、ファイルにて、インスタンスの表示範囲切り替えが機能しない問題を修正

Fix #8252

CHANGELOG.md

@@ -35,6 +35,7 @@ You should also include the user name that made the change.
 - Client: UIのサイズがおかしくなる問題の修正 @tamaina
 - Client: Setting instance information of notes to always show breaks the timeline @Johann150
 - Client: 環境に依っては返信する際のカーソル位置が正しくない問題を修正 @syuilo
+- Client: コントロールパネルのユーザー、ファイルにて、インスタンスの表示範囲切り替えが機能しない問題を修正 @syuilo
 - Client: Follows/Followers Visibility changes won't be saved unless clicking on an other checkbox @Johann150
 - API: Fix API cast @mei23
 - チャートの定期resyncが動作していない問題を修正 @syuilo

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

@@ -28,7 +28,7 @@
 					<template #label>MIME type</template>
 				</MkInput>
 			</div>
-			<MkPagination v-slot="{items}" ref="files" :pagination="pagination" class="urempief">
+			<MkPagination v-slot="{items}" :pagination="pagination" class="urempief">
 				<button v-for="file in items" :key="file.id" class="file _panel _button _gap" @click="show(file, $event)">
 					<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
 					<div class="body">
@@ -54,8 +54,8 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue';
+import { computed } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
@@ -65,80 +65,63 @@ import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+let q = $ref(null);
-	components: {
+let origin = $ref('local');
-		MkButton,
+let type = $ref(null);
-		MkInput,
+let searchHost = $ref('');
-		MkSelect,
+const pagination = {
-		MkPagination,
-		MkContainer,
-		MkDriveFileThumbnail,
-	},
-
-	emits: ['info'],
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.files,
-				icon: 'fas fa-cloud',
-				bg: 'var(--bg)',
-				actions: [{
-					text: this.$ts.clearCachedFiles,
-					icon: 'fas fa-trash-alt',
-					handler: this.clear
-				}]
-			},
-			q: null,
-			origin: 'local',
-			type: null,
-			searchHost: '',
-			pagination: {
 	endpoint: 'admin/drive/files' as const,
 	limit: 10,
 	params: computed(() => ({
-					type: (this.type && this.type !== '') ? this.type : null,
+		type: (type && type !== '') ? type : null,
-					origin: this.origin,
+		origin: origin,
-					hostname: (this.searchHost && this.searchHost !== '') ? this.searchHost : null,
+		hostname: (searchHost && searchHost !== '') ? searchHost : null,
 	})),
-			},
+};
-		}
-	},
 
-	methods: {
+function clear() {
-		clear() {
 	os.confirm({
 		type: 'warning',
-				text: this.$ts.clearCachedFilesConfirm,
+		text: i18n.ts.clearCachedFilesConfirm,
 	}).then(({ canceled }) => {
 		if (canceled) return;
 
 		os.apiWithDialog('admin/drive/clean-remote-files', {});
 	});
-		},
+}
 
-		show(file, ev) {
+function show(file) {
 	os.popup(import('./file-dialog.vue'), {
 		fileId: file.id
 	}, {}, 'closed');
-		},
+}
 
-		find() {
+function find() {
-			os.api('admin/drive/show-file', this.q.startsWith('http://') || this.q.startsWith('https://') ? { url: this.q.trim() } : { fileId: this.q.trim() }).then(file => {
+	os.api('admin/drive/show-file', q.startsWith('http://') || q.startsWith('https://') ? { url: q.trim() } : { fileId: q.trim() }).then(file => {
-				this.show(file);
+		show(file);
-			}).catch(e => {
+	}).catch(err => {
-				if (e.code === 'NO_SUCH_FILE') {
+		if (err.code === 'NO_SUCH_FILE') {
 			os.alert({
 				type: 'error',
-						text: this.$ts.notFound
+				text: i18n.ts.notFound
 			});
 		}
 	});
-		},
+}
 
-		bytes
+defineExpose({
-	}
+	[symbols.PAGE_INFO]: computed(() => ({
+		title: i18n.ts.files,
+		icon: 'fas fa-cloud',
+		bg: 'var(--bg)',
+		actions: [{
+			text: i18n.ts.clearCachedFiles,
+			icon: 'fas fa-trash-alt',
+			handler: clear,
+		}],
+	})),
 });
 </script>
 

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

@@ -36,7 +36,7 @@
 			</MkInput>
 		</div>
 
-		<MkPagination v-slot="{items}" ref="users" :pagination="pagination" class="users">
+		<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
 			<button v-for="user in items" :key="user.id" class="user _panel _button _gap" @click="show(user)">
 				<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
 				<div class="body">
@@ -61,9 +61,8 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue';
+import { computed } from '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';
@@ -71,76 +70,42 @@ import { acct } from '@/filters/user';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { lookupUser } from '@/scripts/lookup-user';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
-	components: {
-		MkButton,
-		MkInput,
-		MkSelect,
-		MkPagination,
-	},
 
-	emits: ['info'],
+let sort = $ref('+createdAt');
-
+let state = $ref('all');
-	data() {
+let origin = $ref('local');
-		return {
+let searchUsername = $ref('');
-			[symbols.PAGE_INFO]: {
+let searchHost = $ref('');
-				title: this.$ts.users,
+const pagination = {
-				icon: 'fas fa-users',
-				bg: 'var(--bg)',
-				actions: [{
-					icon: 'fas fa-search',
-					text: this.$ts.search,
-					handler: this.searchUser
-				}, {
-					asFullButton: true,
-					icon: 'fas fa-plus',
-					text: this.$ts.addUser,
-					handler: this.addUser
-				}, {
-					asFullButton: true,
-					icon: 'fas fa-search',
-					text: this.$ts.lookup,
-					handler: this.lookupUser
-				}],
-			},
-			sort: '+createdAt',
-			state: 'all',
-			origin: 'local',
-			searchUsername: '',
-			searchHost: '',
-			pagination: {
 	endpoint: 'admin/show-users' as const,
 	limit: 10,
 	params: computed(() => ({
-					sort: this.sort,
+		sort: sort,
-					state: this.state,
+		state: state,
-					origin: this.origin,
+		origin: origin,
-					username: this.searchUsername,
+		username: searchUsername,
-					hostname: this.searchHost,
+		hostname: searchHost,
 	})),
 	offsetMode: true
-			},
+};
-		}
-	},
 
-	methods: {
+function searchUser() {
-		lookupUser,
-
-		searchUser() {
 	os.selectUser().then(user => {
-				this.show(user);
+		show(user);
 	});
-		},
+}
 
-		async addUser() {
+async function addUser() {
 	const { canceled: canceled1, result: username } = await os.inputText({
-				title: this.$ts.username,
+		title: i18n.ts.username,
 	});
 	if (canceled1) return;
 
 	const { canceled: canceled2, result: password } = await os.inputText({
-				title: this.$ts.password,
+		title: i18n.ts.password,
 		type: 'password'
 	});
 	if (canceled2) return;
@@ -149,16 +114,35 @@ export default defineComponent({
 		username: username,
 		password: password,
 	}).then(res => {
-				this.$refs.users.reload();
+		paginationComponent.reload();
 	});
-		},
-
-		show(user) {
-			os.pageWindow(`/user-info/${user.id}`);
-		},
-
-		acct
 }
+
+function show(user) {
+	os.pageWindow(`/user-info/${user.id}`);
+}
+
+defineExpose({
+	[symbols.PAGE_INFO]: computed(() => ({
+		title: i18n.ts.users,
+		icon: 'fas fa-users',
+		bg: 'var(--bg)',
+		actions: [{
+			icon: 'fas fa-search',
+			text: i18n.ts.search,
+			handler: searchUser
+		}, {
+			asFullButton: true,
+			icon: 'fas fa-plus',
+			text: i18n.ts.addUser,
+			handler: addUser
+		}, {
+			asFullButton: true,
+			icon: 'fas fa-search',
+			text: i18n.ts.lookup,
+			handler: lookupUser
+		}],
+	})),
 });
 </script>