From b7192e5ac6bc05980706c3a52b2ae030f2c6e3e1 Mon Sep 17 00:00:00 2001 From: samunohito <46447427+samunohito@users.noreply.github.com> Date: Thu, 8 Feb 2024 08:12:04 +0900 Subject: [PATCH] refactor --- .../pages/admin/custom-emojis-grid.impl.ts | 57 ++----------------- .../admin/custom-emojis-grid.local.list.vue | 42 +++++++++++--- .../custom-emojis-grid.local.register.vue | 56 +++++++++++------- .../pages/admin/custom-emojis-grid.remote.vue | 24 ++++++-- 4 files changed, 97 insertions(+), 82 deletions(-) diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts b/packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts index ca829bc5ed..b5c70295c0 100644 --- a/packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts +++ b/packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts @@ -1,11 +1,3 @@ -import * as Misskey from 'misskey-js'; - -export type EmojiOperationResult = { - item: GridItem, - success: boolean, - err?: Error -}; - export type RequestLogItem = { failed: boolean; url: string; @@ -13,52 +5,15 @@ export type RequestLogItem = { error?: string; }; -export type GridItem = { - checked: boolean; - id?: string; - fileId?: string; - url: string; - name: string; - host: string; - category: string; - aliases: string; - license: string; - isSensitive: boolean; - localOnly: boolean; - roleIdsThatCanBeUsedThisEmojiAsReaction: string; +export function emptyStrToUndefined(value: string | null) { + return value ? value : undefined; } -export function fromEmojiDetailedAdmin(it: Misskey.entities.EmojiDetailedAdmin): GridItem { - return { - checked: false, - id: it.id, - fileId: undefined, - url: it.publicUrl, - name: it.name, - host: it.host ?? '', - category: it.category ?? '', - aliases: it.aliases.join(', '), - license: it.license ?? '', - isSensitive: it.isSensitive, - localOnly: it.localOnly, - roleIdsThatCanBeUsedThisEmojiAsReaction: it.roleIdsThatCanBeUsedThisEmojiAsReaction.join(', '), - }; +export function emptyStrToNull(value: string) { + return value === '' ? null : value; } -export function fromDriveFile(it: Misskey.entities.DriveFile): GridItem { - return { - checked: false, - id: undefined, - fileId: it.id, - url: it.url, - name: it.name.replace(/(\.[a-zA-Z0-9]+)+$/, ''), - host: '', - category: '', - aliases: '', - license: '', - isSensitive: it.isSensitive, - localOnly: false, - roleIdsThatCanBeUsedThisEmojiAsReaction: '', - }; +export function emptyStrToEmptyArray(value: string) { + return value === '' ? [] : value.split(',').map(it => it.trim()); } diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.local.list.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.local.list.vue index 181f013610..2d359d9dfc 100644 --- a/packages/frontend/src/pages/admin/custom-emojis-grid.local.list.vue +++ b/packages/frontend/src/pages/admin/custom-emojis-grid.local.list.vue @@ -103,7 +103,12 @@ import { computed, onMounted, ref } from 'vue'; import * as Misskey from 'misskey-js'; import * as os from '@/os.js'; -import { fromEmojiDetailedAdmin, GridItem, RequestLogItem } from '@/pages/admin/custom-emojis-grid.impl.js'; +import { + emptyStrToEmptyArray, + emptyStrToNull, + emptyStrToUndefined, + RequestLogItem, +} from '@/pages/admin/custom-emojis-grid.impl.js'; import MkGrid from '@/components/grid/MkGrid.vue'; import { i18n } from '@/i18n.js'; import MkInput from '@/components/MkInput.vue'; @@ -128,9 +133,19 @@ import MkFolder from '@/components/MkFolder.vue'; import MkSelect from '@/components/MkSelect.vue'; import { deviceKind } from '@/scripts/device-kind.js'; -const emptyStrToUndefined = (value: string | null) => value ? value : undefined; -const emptyStrToNull = (value: string) => value === '' ? null : value; -const emptyStrToEmptyArray = (value: string) => value === '' ? [] : value.split(',').map(it => it.trim()); +type GridItem = { + checked: boolean; + id: string; + url: string; + name: string; + host: string; + category: string; + aliases: string; + license: string; + isSensitive: boolean; + localOnly: boolean; + roleIdsThatCanBeUsedThisEmojiAsReaction: string; +} const gridSetting: GridSetting = { rowNumberVisible: true, @@ -312,7 +327,7 @@ function onGridEvent(event: GridEvent, currentState: GridCurrentState) { onGridCellContextMenu(event, currentState); break; case 'cell-value-change': - onGridCellValueChange(event, currentState); + onGridCellValueChange(event); break; case 'keydown': onGridKeyDown(event, currentState); @@ -372,7 +387,7 @@ function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: Gr ); } -function onGridCellValueChange(event: GridCellValueChangeEvent, currentState: GridCurrentState) { +function onGridCellValueChange(event: GridCellValueChangeEvent) { const { row, column, newValue } = event; if (gridItems.value.length > row.index && column.setting.bindTo in gridItems.value[row.index]) { gridItems.value[row.index][column.setting.bindTo] = newValue; @@ -442,7 +457,20 @@ async function refreshCustomEmojis() { } function refreshGridItems() { - gridItems.value = customEmojis.value.map(it => fromEmojiDetailedAdmin(it)); + gridItems.value = customEmojis.value.map(it => ({ + checked: false, + id: it.id, + fileId: undefined, + url: it.publicUrl, + name: it.name, + host: it.host ?? '', + category: it.category ?? '', + aliases: it.aliases.join(', '), + license: it.license ?? '', + isSensitive: it.isSensitive, + localOnly: it.localOnly, + roleIdsThatCanBeUsedThisEmojiAsReaction: it.roleIdsThatCanBeUsedThisEmojiAsReaction.join(', '), + })); originGridItems.value = JSON.parse(JSON.stringify(gridItems.value)); } diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.local.register.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.local.register.vue index 39e0f1b416..dc03e3769f 100644 --- a/packages/frontend/src/pages/admin/custom-emojis-grid.local.register.vue +++ b/packages/frontend/src/pages/admin/custom-emojis-grid.local.register.vue @@ -76,9 +76,8 @@ import * as Misskey from 'misskey-js'; import { onMounted, ref } from 'vue'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { - EmojiOperationResult, - fromDriveFile, - GridItem, + emptyStrToEmptyArray, + emptyStrToNull, RequestLogItem, } from '@/pages/admin/custom-emojis-grid.impl.js'; import MkGrid from '@/components/grid/MkGrid.vue'; @@ -113,6 +112,19 @@ type FolderItem = { name: string; }; +type GridItem = { + fileId: string; + url: string; + name: string; + host: string; + category: string; + aliases: string; + license: string; + isSensitive: boolean; + localOnly: boolean; + roleIdsThatCanBeUsedThisEmojiAsReaction: string; +} + const required = validators.required(); const regex = validators.regex(/^[a-zA-Z0-9_]+$/); const columnSettings: ColumnSetting[] = [ @@ -126,10 +138,6 @@ const columnSettings: ColumnSetting[] = [ { bindTo: 'roleIdsThatCanBeUsedThisEmojiAsReaction', title: 'role', type: 'text', editable: true, width: 100 }, ]; -const emit = defineEmits<{ - (ev: 'operation:registered'): void; -}>(); - const uploadFolders = ref([]); const gridItems = ref([]); const selectedFolderId = ref(defaultStore.state.uploadFolder); @@ -150,12 +158,9 @@ async function onRegistryClicked() { return; } - const items = new Map(gridItems.value.map(it => [`${it.fileId}|${it.name}`, it])); - const upload = (): Promise[] => { - const emptyStrToNull = (value: string) => value === '' ? null : value; - const emptyStrToEmptyArray = (value: string) => value === '' ? [] : value.split(',').map(it => it.trim()); - - return [...items.values()].slice(0, MAXIMUM_EMOJI_COUNT) + const items = gridItems.value; + const upload = () => { + return items.slice(0, MAXIMUM_EMOJI_COUNT) .map(item => misskeyApi( 'admin/emoji/add', { @@ -194,8 +199,6 @@ async function onRegistryClicked() { // 登録に成功したものは一覧から除く const successItems = result.filter(it => it.success).map(it => it.item); gridItems.value = gridItems.value.filter(it => !successItems.includes(it)); - - emit('operation:registered'); } async function onClearClicked() { @@ -255,7 +258,7 @@ async function onDrop(ev: DragEvent) { gridItems.value.push(...items); } -async function onFileSelectClicked(ev: MouseEvent) { +async function onFileSelectClicked() { const driveFiles = await os.promiseDialog( chooseFileFromPc( true, @@ -271,7 +274,7 @@ async function onFileSelectClicked(ev: MouseEvent) { gridItems.value.push(...driveFiles.map(fromDriveFile)); } -async function onDriveSelectClicked(ev: MouseEvent) { +async function onDriveSelectClicked() { const driveFiles = await os.promiseDialog(chooseFileFromDrive(true)); gridItems.value.push(...driveFiles.map(fromDriveFile)); } @@ -288,7 +291,7 @@ function onGridEvent(event: GridEvent, currentState: GridCurrentState) { onGridCellContextMenu(event, currentState); break; case 'cell-value-change': - onGridCellValueChange(event, currentState); + onGridCellValueChange(event); break; case 'keydown': onGridKeyDown(event, currentState); @@ -334,7 +337,7 @@ function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: Gr ); } -function onGridCellValueChange(event: GridCellValueChangeEvent, currentState: GridCurrentState) { +function onGridCellValueChange(event: GridCellValueChangeEvent) { const { row, column, newValue } = event; if (gridItems.value.length > row.index && column.setting.bindTo in gridItems.value[row.index]) { gridItems.value[row.index][column.setting.bindTo] = newValue; @@ -345,6 +348,21 @@ function onGridKeyDown(event: GridKeyDownEvent, currentState: GridCurrentState) optInGridUtils.defaultKeyDownHandler(gridItems, event, currentState); } +function fromDriveFile(it: Misskey.entities.DriveFile): GridItem { + return { + fileId: it.id, + url: it.url, + name: it.name.replace(/(\.[a-zA-Z0-9]+)+$/, ''), + host: '', + category: '', + aliases: '', + license: '', + isSensitive: it.isSensitive, + localOnly: false, + roleIdsThatCanBeUsedThisEmojiAsReaction: '', + }; +} + async function refreshUploadFolders() { const result = await misskeyApi('drive/folders', {}); uploadFolders.value = Array.of({ name: '-' }, ...result); diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.remote.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.remote.vue index feeaa57f98..90aca71cb5 100644 --- a/packages/frontend/src/pages/admin/custom-emojis-grid.remote.vue +++ b/packages/frontend/src/pages/admin/custom-emojis-grid.remote.vue @@ -52,7 +52,7 @@ import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/MkInput.vue'; import MkGrid from '@/components/grid/MkGrid.vue'; import { ColumnSetting } from '@/components/grid/column.js'; -import { fromEmojiDetailedAdmin, GridItem, RequestLogItem } from '@/pages/admin/custom-emojis-grid.impl.js'; +import { RequestLogItem } from '@/pages/admin/custom-emojis-grid.impl.js'; import { GridCellContextMenuEvent, GridCellValueChangeEvent, @@ -66,6 +66,14 @@ import MkFolder from '@/components/MkFolder.vue'; import XRegisterLogs from '@/pages/admin/custom-emojis-grid.local.logs.vue'; import * as os from '@/os.js'; +type GridItem = { + checked: boolean; + id: string; + url: string; + name: string; + host: string; +} + const columnSettings: ColumnSetting[] = [ { bindTo: 'checked', icon: 'ti-download', type: 'boolean', editable: true, width: 34 }, { bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto' }, @@ -109,7 +117,7 @@ function onGridEvent(event: GridEvent, currentState: GridCurrentState) { onGridCellContextMenu(event, currentState); break; case 'cell-value-change': - onGridCellValueChange(event, currentState); + onGridCellValueChange(event); break; case 'keydown': onGridKeyDown(event, currentState); @@ -146,7 +154,7 @@ function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: Gr ); } -function onGridCellValueChange(event: GridCellValueChangeEvent, currentState: GridCurrentState) { +function onGridCellValueChange(event: GridCellValueChangeEvent) { const { row, column, newValue } = event; if (gridItems.value.length > row.index && column.setting.bindTo in gridItems.value[row.index]) { gridItems.value[row.index][column.setting.bindTo] = newValue; @@ -173,7 +181,7 @@ async function importEmojis(targets: GridItem[]) { const confirm = await os.confirm({ type: 'info', title: '絵文字のインポート', - text: `リモートから受信した${targets.length}個の絵文字のインポートを行います。絵文字のライセンスに十分な注意を払ってください。インポートを行いますか？`, + text: `リモートから受信した${targets.length}個の絵文字のインポートを行います。絵文字のライセンスに十分な注意を払ってください。実行しますか？`, }); if (confirm.canceled) { @@ -214,7 +222,13 @@ async function refreshCustomEmojis(query?: string, host?: string, sinceId?: stri }); customEmojis.value = emojis.emojis; - gridItems.value = customEmojis.value.map(it => fromEmojiDetailedAdmin(it)); + gridItems.value = customEmojis.value.map(it => ({ + checked: false, + id: it.id, + url: it.uri!, + name: it.name, + host: it.host!, + })); } onMounted(async () => {