From 2ebdc36c7a0ad7f8f86bf5b36296447fa34493b5 Mon Sep 17 00:00:00 2001 From: Leah Date: Fri, 28 Jun 2024 16:27:28 +0200 Subject: [PATCH 1/5] Add search for files in drive --- .../src/server/api/endpoints/drive/files.ts | 5 +++++ .../src/server/api/endpoints/drive/folders.ts | 4 ++++ packages/frontend/src/components/MkDrive.vue | 15 +++++++++++++++ 3 files changed, 24 insertions(+) diff --git a/packages/backend/src/server/api/endpoints/drive/files.ts b/packages/backend/src/server/api/endpoints/drive/files.ts index 10c521332d..e8bebb449b 100644 --- a/packages/backend/src/server/api/endpoints/drive/files.ts +++ b/packages/backend/src/server/api/endpoints/drive/files.ts @@ -37,6 +37,7 @@ export const paramDef = { folderId: { type: 'string', format: 'misskey:id', nullable: true, default: null }, type: { type: 'string', nullable: true, pattern: /^[a-zA-Z\/\-*]+$/.toString().slice(1, -1) }, sort: { type: 'string', nullable: true, enum: ['+createdAt', '-createdAt', '+name', '-name', '+size', '-size', null] }, + searchQuery: {type : 'string', default: '' } }, required: [], } as const; @@ -60,6 +61,10 @@ export default class extends Endpoint { // eslint- query.andWhere('file.folderId IS NULL'); } + if (ps.searchQuery.length > 0) { + query.andWhere('file.name ILIKE :searchQuery OR file.comment ILIKE :searchQuery', { searchQuery: `%${ps.searchQuery}%` }); + } + if (ps.type) { if (ps.type.endsWith('/*')) { query.andWhere('file.type like :type', { type: ps.type.replace('/*', '/') + '%' }); diff --git a/packages/backend/src/server/api/endpoints/drive/folders.ts b/packages/backend/src/server/api/endpoints/drive/folders.ts index 8c4848f8e1..03223b267f 100644 --- a/packages/backend/src/server/api/endpoints/drive/folders.ts +++ b/packages/backend/src/server/api/endpoints/drive/folders.ts @@ -35,6 +35,7 @@ export const paramDef = { sinceId: { type: 'string', format: 'misskey:id' }, untilId: { type: 'string', format: 'misskey:id' }, folderId: { type: 'string', format: 'misskey:id', nullable: true, default: null }, + searchQuery: {type : 'string', default: '' } }, required: [], } as const; @@ -58,6 +59,9 @@ export default class extends Endpoint { // eslint- query.andWhere('folder.parentId IS NULL'); } + if (ps.searchQuery.length > 0) { + query.andWhere('folder.name ILIKE :searchQuery', { searchQuery: `%${ps.searchQuery}%` }); + } const folders = await query.limit(ps.limit).getMany(); return await Promise.all(folders.map(folder => this.driveFolderEntityService.pack(folder))); diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue index 2990ea6861..497601eb5a 100644 --- a/packages/frontend/src/components/MkDrive.vue +++ b/packages/frontend/src/components/MkDrive.vue @@ -30,6 +30,10 @@ SPDX-License-Identifier: AGPL-3.0-only {{ folder.name }} + + + +
entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(), ); @@ -540,6 +553,7 @@ async function fetch() { const foldersPromise = misskeyApi('drive/folders', { folderId: folder.value ? folder.value.id : null, limit: foldersMax + 1, + searchQuery: searchQuery.value.toString().trim(), }).then(fetchedFolders => { if (fetchedFolders.length === foldersMax + 1) { moreFolders.value = true; @@ -552,6 +566,7 @@ async function fetch() { folderId: folder.value ? folder.value.id : null, type: props.type, limit: filesMax + 1, + searchQuery: searchQuery.value.toString().trim(), }).then(fetchedFiles => { if (fetchedFiles.length === filesMax + 1) { moreFiles.value = true; From 1c0b1cab4fbc24431326f2f8806b316bd0b93a25 Mon Sep 17 00:00:00 2001 From: Leah Date: Fri, 28 Jun 2024 16:55:48 +0200 Subject: [PATCH 2/5] Style the searchbar --- packages/frontend/src/components/MkDrive.vue | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue index 497601eb5a..698b32fcab 100644 --- a/packages/frontend/src/components/MkDrive.vue +++ b/packages/frontend/src/components/MkDrive.vue @@ -30,11 +30,13 @@ SPDX-License-Identifier: AGPL-3.0-only {{ folder.name }}
- - - +
+ + + - + +
{ } .navMenu { + display: flex; margin-left: auto; - padding: 0 12px; +} + +.navMenu > *:not(:last-child) { + padding-right: 12px; } .main { From b5a69c3aea012d9c9af3cd48d3ab9621427b9ba4 Mon Sep 17 00:00:00 2001 From: Leah Date: Fri, 28 Jun 2024 17:17:13 +0200 Subject: [PATCH 3/5] Add locales for search bar --- locales/en-US.yml | 1 + locales/index.d.ts | 4 ++++ locales/ja-JP.yml | 1 + packages/frontend/src/components/MkDrive.vue | 3 ++- 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/locales/en-US.yml b/locales/en-US.yml index fe7bc3c451..c20ecbefbc 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -321,6 +321,7 @@ lightThemes: "Light themes" darkThemes: "Dark themes" syncDeviceDarkMode: "Sync Dark Mode with your device settings" drive: "Drive" +driveSearchbarPlaceholder: "Search drive" fileName: "Filename" selectFile: "Select a file" selectFiles: "Select files" diff --git a/locales/index.d.ts b/locales/index.d.ts index 7314151708..2d07667cf6 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1300,6 +1300,10 @@ export interface Locale extends ILocale { * ドライブ */ "drive": string; + /** + * 検索ドライブ + */ + "driveSearchbarPlaceholder": string; /** * ファイル名 */ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 8485037111..ee43ccd58b 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -321,6 +321,7 @@ lightThemes: "明るいテーマ" darkThemes: "暗いテーマ" syncDeviceDarkMode: "デバイスのダークモードと同期する" drive: "ドライブ" +driveSearchbarPlaceholder: "検索ドライブ" fileName: "ファイル名" selectFile: "ファイルを選択" selectFiles: "ファイルを選択" diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue index 698b32fcab..24d211e817 100644 --- a/packages/frontend/src/components/MkDrive.vue +++ b/packages/frontend/src/components/MkDrive.vue @@ -31,7 +31,8 @@ SPDX-License-Identifier: AGPL-3.0-only {{ folder.name }}
- + + From f97417cfca8ceb5e3c76e0e1c67e2afc11a89b92 Mon Sep 17 00:00:00 2001 From: KevinWh0 <45321184+ChaoticLeah@users.noreply.github.com> Date: Tue, 16 Jul 2024 22:06:38 +0200 Subject: [PATCH 4/5] Add stuff talked about on MR --- packages/backend/src/server/api/endpoints/drive/files.ts | 5 +++-- .../backend/src/server/api/endpoints/drive/folders.ts | 5 +++-- packages/frontend/src/components/MkDrive.vue | 8 +++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/backend/src/server/api/endpoints/drive/files.ts b/packages/backend/src/server/api/endpoints/drive/files.ts index e8bebb449b..6d87d5ddf7 100644 --- a/packages/backend/src/server/api/endpoints/drive/files.ts +++ b/packages/backend/src/server/api/endpoints/drive/files.ts @@ -9,6 +9,7 @@ import type { DriveFilesRepository } from '@/models/_.js'; import { QueryService } from '@/core/QueryService.js'; import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js'; import { DI } from '@/di-symbols.js'; +import { sqlLikeEscape } from '@/misc/sql-like-escape.js'; export const meta = { tags: ['drive'], @@ -37,7 +38,7 @@ export const paramDef = { folderId: { type: 'string', format: 'misskey:id', nullable: true, default: null }, type: { type: 'string', nullable: true, pattern: /^[a-zA-Z\/\-*]+$/.toString().slice(1, -1) }, sort: { type: 'string', nullable: true, enum: ['+createdAt', '-createdAt', '+name', '-name', '+size', '-size', null] }, - searchQuery: {type : 'string', default: '' } + searchQuery: { type: 'string', default: '' } }, required: [], } as const; @@ -62,7 +63,7 @@ export default class extends Endpoint { // eslint- } if (ps.searchQuery.length > 0) { - query.andWhere('file.name ILIKE :searchQuery OR file.comment ILIKE :searchQuery', { searchQuery: `%${ps.searchQuery}%` }); + query.andWhere('file.name ILIKE :searchQuery OR file.comment ILIKE :searchQuery', { searchQuery: `%${sqlLikeEscape(ps.searchQuery)}%` }); } if (ps.type) { diff --git a/packages/backend/src/server/api/endpoints/drive/folders.ts b/packages/backend/src/server/api/endpoints/drive/folders.ts index 03223b267f..9bcd824882 100644 --- a/packages/backend/src/server/api/endpoints/drive/folders.ts +++ b/packages/backend/src/server/api/endpoints/drive/folders.ts @@ -9,6 +9,7 @@ import type { DriveFoldersRepository } from '@/models/_.js'; import { QueryService } from '@/core/QueryService.js'; import { DriveFolderEntityService } from '@/core/entities/DriveFolderEntityService.js'; import { DI } from '@/di-symbols.js'; +import { sqlLikeEscape } from '@/misc/sql-like-escape.js'; export const meta = { tags: ['drive'], @@ -35,7 +36,7 @@ export const paramDef = { sinceId: { type: 'string', format: 'misskey:id' }, untilId: { type: 'string', format: 'misskey:id' }, folderId: { type: 'string', format: 'misskey:id', nullable: true, default: null }, - searchQuery: {type : 'string', default: '' } + searchQuery: { type: 'string', default: '' } }, required: [], } as const; @@ -60,7 +61,7 @@ export default class extends Endpoint { // eslint- } if (ps.searchQuery.length > 0) { - query.andWhere('folder.name ILIKE :searchQuery', { searchQuery: `%${ps.searchQuery}%` }); + query.andWhere('folder.name ILIKE :searchQuery', { searchQuery: `%${sqlLikeEscape(ps.searchQuery)}%` }); } const folders = await query.limit(ps.limit).getMany(); diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue index 24d211e817..e3becc52cb 100644 --- a/packages/frontend/src/components/MkDrive.vue +++ b/packages/frontend/src/components/MkDrive.vue @@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
- + @@ -162,10 +162,6 @@ const isDragSource = ref(false); const fetching = ref(true); -async function search() { - fetch(); -} - const ilFilesObserver = new IntersectionObserver( (entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(), ); @@ -594,6 +590,7 @@ function fetchMoreFolders() { type: props.type, untilId: folders.value.at(-1)?.id, limit: max + 1, + searchQuery: searchQuery.value.toString().trim(), }).then(folders => { if (folders.length === max + 1) { moreFolders.value = true; @@ -617,6 +614,7 @@ function fetchMoreFiles() { type: props.type, untilId: files.value.at(-1)?.id, limit: max + 1, + searchQuery: searchQuery.value.toString().trim(), }).then(files => { if (files.length === max + 1) { moreFiles.value = true; From 374a16a0d46a228d10e19462f8e24a28ba9121a4 Mon Sep 17 00:00:00 2001 From: KevinWh0 <45321184+ChaoticLeah@users.noreply.github.com> Date: Tue, 16 Jul 2024 23:26:15 +0200 Subject: [PATCH 5/5] Fix vertical align of ... --- packages/frontend/src/components/MkDrive.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue index 3abdb201a0..222fabb8f4 100644 --- a/packages/frontend/src/components/MkDrive.vue +++ b/packages/frontend/src/components/MkDrive.vue @@ -763,6 +763,7 @@ onBeforeUnmount(() => { .navMenu { display: flex; margin-left: auto; + align-items: center; } .navMenu > *:not(:last-child) {