diff --git a/packages/frontend/src/components/grid/MkDataCell.vue b/packages/frontend/src/components/grid/MkDataCell.vue index 5d358cd38b..47c40b3582 100644 --- a/packages/frontend/src/components/grid/MkDataCell.vue +++ b/packages/frontend/src/components/grid/MkDataCell.vue @@ -62,7 +62,7 @@ import { toRefs, watch, } from 'vue'; -import { GridEventEmitter, Size } from '@/components/grid/grid.js'; +import { GridEventEmitter, GridSetting, Size } from '@/components/grid/grid.js'; import { useTooltip } from '@/scripts/use-tooltip.js'; import * as os from '@/os.js'; import { CellValue, GridCell } from '@/components/grid/cell.js'; @@ -77,10 +77,11 @@ const emit = defineEmits<{ }>(); const props = defineProps<{ cell: GridCell, + gridSetting: GridSetting, bus: GridEventEmitter, }>(); -const { cell, bus } = toRefs(props); +const { cell, gridSetting, bus } = toRefs(props); const rootEl = shallowRef>(); const contentAreaEl = shallowRef>(); @@ -126,7 +127,7 @@ function onCellDoubleClick(ev: MouseEvent) { function onOutsideMouseDown(ev: MouseEvent) { const isOutside = ev.target instanceof Node && !rootEl.value?.contains(ev.target); - if (isOutside || !equalCellAddress(cell.value.address, getCellAddress(ev.target as HTMLElement))) { + if (isOutside || !equalCellAddress(cell.value.address, getCellAddress(ev.target as HTMLElement, gridSetting.value))) { endEditing(true); } } diff --git a/packages/frontend/src/components/grid/MkGrid.vue b/packages/frontend/src/components/grid/MkGrid.vue index 49c7407743..9e210cf582 100644 --- a/packages/frontend/src/components/grid/MkGrid.vue +++ b/packages/frontend/src/components/grid/MkGrid.vue @@ -424,7 +424,7 @@ function onMouseDown(ev: MouseEvent) { } function onLeftMouseDown(ev: MouseEvent) { - const cellAddress = getCellAddress(ev.target as HTMLElement); + const cellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value); if (_DEV_) { console.log(`[grid][mouse-left] state:${state.value}, button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`); } @@ -476,7 +476,7 @@ function onLeftMouseDown(ev: MouseEvent) { } function onRightMouseDown(ev: MouseEvent) { - const cellAddress = getCellAddress(ev.target as HTMLElement); + const cellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value); if (_DEV_) { console.log(`[grid][mouse-right] button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`); } @@ -501,7 +501,7 @@ function onRightMouseDown(ev: MouseEvent) { function onMouseMove(ev: MouseEvent) { ev.preventDefault(); - const targetCellAddress = getCellAddress(ev.target as HTMLElement); + const targetCellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value); if (equalCellAddress(previousCellAddress.value, targetCellAddress)) { return; } @@ -600,7 +600,7 @@ function onMouseUp(ev: MouseEvent) { } function onContextMenu(ev: MouseEvent) { - const cellAddress = getCellAddress(ev.target as HTMLElement); + const cellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value); if (_DEV_) { console.log(`[grid][context-menu] button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`); } @@ -756,28 +756,26 @@ function emitCellValue(sender: GridCell | CellAddress, newValue: CellValue) { const cellAddress = 'address' in sender ? sender.address : sender; const cell = cells.value[cellAddress.row].cells[cellAddress.col]; - if (cell.column.setting.editable) { - const violation = cellValidation(cell, newValue); - cell.violation = violation; - emitGridEvent({ - type: 'cell-validation', - violation: violation, - all: cells.value.flatMap(it => it.cells).map(it => it.violation), - }); + const violation = cellValidation(cell, newValue); + cell.violation = violation; + emitGridEvent({ + type: 'cell-validation', + violation: violation, + all: cells.value.flatMap(it => it.cells).map(it => it.violation), + }); - cell.value = newValue; - emitGridEvent({ - type: 'cell-value-change', - column: cell.column, - row: cell.row, - violation: violation, - oldValue: cell.value, - newValue: newValue, - }); + cell.value = newValue; + emitGridEvent({ + type: 'cell-value-change', + column: cell.column, + row: cell.row, + violation: violation, + oldValue: cell.value, + newValue: newValue, + }); - if (_DEV_) { - console.log(`[grid][cell-value] row:${cell.row}, col:${cell.column.index}, value:${newValue}`); - } + if (_DEV_) { + console.log(`[grid][cell-value] row:${cell.row}, col:${cell.column.index}, value:${newValue}`); } } @@ -930,13 +928,18 @@ function refreshData() { // 行・列の定義はそれぞれインデックスを持っており、そのインデックスは元データの配列番地に対応している。 const _cells: RowHolder[] = _rows.map((row, rowIndex) => ( { - cells: _cols.map(col => - createCell( + cells: _cols.map(col => { + const cell = createCell( col, row, (col.setting.bindTo in _data[rowIndex]) ? _data[rowIndex][col.setting.bindTo] : undefined, - ), - ), + ); + + // 元の値の時点で不正な場合もあり得るので、バリデーションを実行してすぐに警告できるようにしておく + cell.violation = cellValidation(cell, cell.value); + + return cell; + }), origin: _data[rowIndex], } )); @@ -1010,7 +1013,7 @@ function patchData(newItems: DataSource[]) { const oldCell = oldCells[colIdx]; const newValue = newItem[_col.setting.bindTo]; if (oldCell.value !== newValue) { - oldCell.value = newValue; + emitCellValue(oldCell, newValue); } } } diff --git a/packages/frontend/src/components/grid/MkHeaderCell.vue b/packages/frontend/src/components/grid/MkHeaderCell.vue index d0dec460f5..17407b7c4e 100644 --- a/packages/frontend/src/components/grid/MkHeaderCell.vue +++ b/packages/frontend/src/components/grid/MkHeaderCell.vue @@ -176,7 +176,8 @@ $handleWidth: 5px; .contentArea { display: flex; - padding: 4px 0; + padding: 6px 4px; + box-sizing: border-box; overflow: hidden; white-space: nowrap; text-align: center; diff --git a/packages/frontend/src/components/grid/cell-validators.ts b/packages/frontend/src/components/grid/cell-validators.ts index 02d2935f83..7b2346b299 100644 --- a/packages/frontend/src/components/grid/cell-validators.ts +++ b/packages/frontend/src/components/grid/cell-validators.ts @@ -57,14 +57,39 @@ export function cellValidation(cell: GridCell, newValue: CellValue): ValidateVio }; } -export const required: CellValidator = { - name: 'required', - validate: (params: ValidatorParams): ValidatorResult => { - const { value } = params; +class ValidatorPreset { + required(): CellValidator { return { - valid: value !== null && value !== undefined && value !== '', - message: 'This field is required.', + name: 'required', + validate: (params: ValidatorParams): ValidatorResult => { + const { value } = params; + return { + valid: value !== null && value !== undefined && value !== '', + message: 'This field is required.', + }; + }, }; - }, -}; + } + regex(pattern: RegExp): CellValidator { + return { + name: 'regex', + validate: (params: ValidatorParams): ValidatorResult => { + const { value, column } = params; + if (column.setting.type !== 'text') { + return { + valid: false, + message: 'Regex validation is only available for text type.', + }; + } + + return { + valid: pattern.test(value?.toString() ?? ''), + message: 'Not an allowed format. Please check the input. (Allowed format: ' + pattern.source + ')', + }; + }, + }; + } +} + +export const validators = new ValidatorPreset(); diff --git a/packages/frontend/src/components/grid/grid-utils.ts b/packages/frontend/src/components/grid/grid-utils.ts index 6106c51cf9..99821fa530 100644 --- a/packages/frontend/src/components/grid/grid-utils.ts +++ b/packages/frontend/src/components/grid/grid-utils.ts @@ -1,4 +1,4 @@ -import { SizeStyle } from '@/components/grid/grid.js'; +import { GridSetting, SizeStyle } from '@/components/grid/grid.js'; import { CELL_ADDRESS_NONE, CellAddress } from '@/components/grid/cell.js'; export function isCellElement(elem: any): elem is HTMLTableCellElement { @@ -21,7 +21,7 @@ export function calcCellWidth(widthSetting: SizeStyle): string { } } -export function getCellAddress(elem: HTMLElement, parentNodeCount = 10): CellAddress { +export function getCellAddress(elem: HTMLElement, gridSetting: GridSetting, parentNodeCount = 10): CellAddress { let node = elem; for (let i = 0; i < parentNodeCount; i++) { if (isCellElement(node) && isRowElement(node.parentElement)) { @@ -29,7 +29,7 @@ export function getCellAddress(elem: HTMLElement, parentNodeCount = 10): CellAdd // ヘッダ行ぶんを除く row: node.parentElement.rowIndex - 1, // 数値列ぶんを除く - col: node.cellIndex - 1, + col: gridSetting.rowNumberVisible ? node.cellIndex - 1 : node.cellIndex, }; } diff --git a/packages/frontend/src/components/grid/optin-utils.ts b/packages/frontend/src/components/grid/optin-utils.ts index fa82feae12..f5cbba2759 100644 --- a/packages/frontend/src/components/grid/optin-utils.ts +++ b/packages/frontend/src/components/grid/optin-utils.ts @@ -1,17 +1,12 @@ import { Ref } from 'vue'; -import { GridCellValueChangeEvent, GridCurrentState, GridKeyDownEvent } from '@/components/grid/grid-event.js'; +import { GridCurrentState, GridKeyDownEvent } from '@/components/grid/grid-event.js'; import copyToClipboard from '@/scripts/copy-to-clipboard.js'; import { ColumnSetting } from '@/components/grid/column.js'; import { CellValue } from '@/components/grid/cell.js'; import { DataSource } from '@/components/grid/grid.js'; class OptInGridUtils { - async applyCellValueFromEvent(gridItems: Ref, event: GridCellValueChangeEvent) { - const { row, column, newValue } = event; - gridItems.value[row.index][column.setting.bindTo] = newValue; - } - - async commonKeyDownHandler(gridItems: Ref, event: GridKeyDownEvent, currentState: GridCurrentState) { + async defaultKeyDownHandler(gridItems: Ref, event: GridKeyDownEvent, currentState: GridCurrentState) { const { ctrlKey, shiftKey, code } = event.event; switch (true) { @@ -21,7 +16,7 @@ class OptInGridUtils { case ctrlKey: { switch (code) { case 'KeyC': { - this.rangeCopyToClipboard(gridItems, currentState); + this.copyToClipboard(gridItems, currentState); break; } case 'KeyV': { @@ -46,7 +41,7 @@ class OptInGridUtils { } } - rangeCopyToClipboard(gridItems: Ref, currentState: GridCurrentState) { + copyToClipboard(gridItems: Ref, currentState: GridCurrentState) { const lines = Array.of(); const bounds = currentState.randedBounds; 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 4e4bf18505..6e67805176 100644 --- a/packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts +++ b/packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts @@ -1,5 +1,12 @@ import * as Misskey from 'misskey-js'; +export type RegisterLogItem = { + failed: boolean; + url: string; + name: string; + error?: string; +}; + export type GridItem = { readonly id?: string; readonly fileId?: string; @@ -37,7 +44,7 @@ export function fromDriveFile(it: Misskey.entities.DriveFile): GridItem { fileId: it.id, url: it.url, checked: false, - name: it.name.replace(/\.[a-zA-Z0-9]+$/, ''), + name: it.name.replace(/(\.[a-zA-Z0-9]+)+$/, ''), category: '', aliases: '', license: '', diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.list.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.list.vue index 84a47596b5..c5c754af7d 100644 --- a/packages/frontend/src/pages/admin/custom-emojis-grid.list.vue +++ b/packages/frontend/src/pages/admin/custom-emojis-grid.list.vue @@ -36,10 +36,11 @@ import { fromEmojiDetailed, GridItem } from '@/pages/admin/custom-emojis-grid.im import MkGrid from '@/components/grid/MkGrid.vue'; import { i18n } from '@/i18n.js'; import MkInput from '@/components/MkInput.vue'; -import { required } from '@/components/grid/cell-validators.js'; import MkButton from '@/components/MkButton.vue'; import { ColumnSetting } from '@/components/grid/column.js'; +import { validators } from '@/components/grid/cell-validators.js'; +const required = validators.required(); const columnSettings: ColumnSetting[] = [ { bindTo: 'selected', icon: 'ti-trash', type: 'boolean', editable: true, width: 34 }, { bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto', validators: [required] }, diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.register.logs.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.register.logs.vue new file mode 100644 index 0000000000..581b72eac4 --- /dev/null +++ b/packages/frontend/src/pages/admin/custom-emojis-grid.register.logs.vue @@ -0,0 +1,101 @@ + + + + + diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue index 09000485c9..a13a625d63 100644 --- a/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue +++ b/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue @@ -32,23 +32,13 @@ 絵文字登録時のログが表示されます。登録操作を行ったり、ページをリロードすると消えます。 -
-
- -
-
- ログはありません。 -
-
+
@@ -61,10 +51,7 @@
-
+
-
+
{{ i18n.ts.registration }} @@ -90,7 +74,7 @@ /* eslint-disable @typescript-eslint/no-non-null-assertion */ import { onMounted, ref } from 'vue'; import { misskeyApi } from '@/scripts/misskey-api.js'; -import { fromDriveFile, GridItem } from '@/pages/admin/custom-emojis-grid.impl.js'; +import { fromDriveFile, GridItem, RegisterLogItem } from '@/pages/admin/custom-emojis-grid.impl.js'; import MkGrid from '@/components/grid/MkGrid.vue'; import { i18n } from '@/i18n.js'; import MkSelect from '@/components/MkSelect.vue'; @@ -99,7 +83,7 @@ import { defaultStore } from '@/store.js'; import MkFolder from '@/components/MkFolder.vue'; import MkButton from '@/components/MkButton.vue'; import * as os from '@/os.js'; -import { required } from '@/components/grid/cell-validators.js'; +import { validators } from '@/components/grid/cell-validators.js'; import { chooseFileFromDrive, chooseFileFromPc } from '@/scripts/select-file.js'; import { uploadFile } from '@/scripts/upload.js'; import { @@ -114,6 +98,7 @@ import { import { ColumnSetting } from '@/components/grid/column.js'; import { extractDroppedItems, flattenDroppedFiles } from '@/scripts/file-drop.js'; import { optInGridUtils } from '@/components/grid/optin-utils.js'; +import XRegisterLogs from '@/pages/admin/custom-emojis-grid.register.logs.vue'; const MAXIMUM_EMOJI_COUNT = 100; @@ -129,16 +114,11 @@ type UploadResult = { err?: Error }; -type RegisterLogItem = { - failed: boolean; - url: string; - name: string; - error?: string; -}; - +const required = validators.required(); +const regex = validators.regex(/^[a-zA-Z0-9_]+$/); const columnSettings: ColumnSetting[] = [ { bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto', validators: [required] }, - { bindTo: 'name', title: 'name', type: 'text', editable: true, width: 140, validators: [required] }, + { bindTo: 'name', title: 'name', type: 'text', editable: true, width: 140, validators: [required, regex] }, { bindTo: 'category', title: 'category', type: 'text', editable: true, width: 140 }, { bindTo: 'aliases', title: 'aliases', type: 'text', editable: true, width: 140 }, { bindTo: 'license', title: 'license', type: 'text', editable: true, width: 140 }, @@ -147,13 +127,6 @@ const columnSettings: ColumnSetting[] = [ { bindTo: 'roleIdsThatCanBeUsedThisEmojiAsReaction', title: 'role', type: 'text', editable: true, width: 100 }, ]; -const registerLogColumnSettings: ColumnSetting[] = [ - { bindTo: 'failed', title: 'failed', type: 'boolean', editable: false, width: 50 }, - { bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto' }, - { bindTo: 'name', title: 'name', type: 'text', editable: false, width: 140 }, - { bindTo: 'error', title: 'log', type: 'text', editable: false, width: 'auto' }, -]; - const emit = defineEmits<{ (ev: 'operation:registered'): void; }>(); @@ -163,15 +136,15 @@ const gridItems = ref([]); const selectedFolderId = ref(defaultStore.state.uploadFolder); const keepOriginalUploading = ref(defaultStore.state.keepOriginalUploading); const directoryToCategory = ref(true); - const registerButtonDisabled = ref(false); const registerLogs = ref([]); +const isDragOver = ref(false); async function onRegistryClicked() { const dialogSelection = await os.confirm({ type: 'info', title: '確認', - text: 'リストに表示されている絵文字を新たなカスタム絵文字として登録します。よろしいですか？', + text: `リストに表示されている絵文字を新たなカスタム絵文字として登録します。よろしいですか？（負荷を避けるため、一度の操作で登録可能な絵文字は${MAXIMUM_EMOJI_COUNT}件までです）`, }); if (dialogSelection.canceled) { @@ -181,7 +154,7 @@ async function onRegistryClicked() { const items = new Map(gridItems.value.map(it => [`${it.fileId}|${it.name}`, it])); const upload = async (): Promise => { const result = Array.of(); - for (const [key, item] of items.entries()) { + for (const [key, item] of [...items.entries()].slice(0, MAXIMUM_EMOJI_COUNT)) { try { await misskeyApi('admin/emoji/add', { name: item.name, @@ -218,7 +191,10 @@ async function onRegistryClicked() { name: it.item.name, error: it.err ? JSON.stringify(it.err) : undefined, })); - gridItems.value = failedItems.map(it => it.item); + + // 登録に成功したものは一覧から除く + const successItems = result.filter(it => it.success).map(it => it.item); + gridItems.value = gridItems.value.filter(it => !successItems.includes(it)); emit('operation:registered'); } @@ -237,14 +213,6 @@ async function onClearClicked() { async function onDrop(ev: DragEvent) { const droppedFiles = await extractDroppedItems(ev).then(it => flattenDroppedFiles(it)); - if (droppedFiles.length + gridItems.value.length >= MAXIMUM_EMOJI_COUNT) { - await os.alert({ - type: 'warning', - title: '確認', - text: `一度に登録できる絵文字の数は${MAXIMUM_EMOJI_COUNT}件までです。この数を超過した分はリストアップされずに切り捨てられます。`, - }); - } - const uploadedItems = await Promise.all( droppedFiles.map(async (it) => ({ droppedFile: it, @@ -271,7 +239,7 @@ async function onDrop(ev: DragEvent) { return item; }); - await pushToGridItems(items); + gridItems.value.push(...items); } async function onFileSelectClicked(ev: MouseEvent) { @@ -287,12 +255,12 @@ async function onFileSelectClicked(ev: MouseEvent) { ), ); - await pushToGridItems(driveFiles.map(fromDriveFile)); + gridItems.value.push(...driveFiles.map(fromDriveFile)); } async function onDriveSelectClicked(ev: MouseEvent) { const driveFiles = await os.promiseDialog(chooseFileFromDrive(true)); - await pushToGridItems(driveFiles.map(fromDriveFile)); + gridItems.value.push(...driveFiles.map(fromDriveFile)); } function onGridEvent(event: GridEvent, currentState: GridCurrentState) { @@ -325,7 +293,7 @@ function onGridRowContextMenu(event: GridRowContextMenuEvent, currentState: Grid type: 'button', text: '選択行をコピー', icon: 'ti ti-copy', - action: () => optInGridUtils.rangeCopyToClipboard(gridItems, currentState), + action: () => optInGridUtils.copyToClipboard(gridItems, currentState), }, { type: 'button', @@ -342,7 +310,7 @@ function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: Gr type: 'button', text: '選択範囲をコピー', icon: 'ti ti-copy', - action: () => optInGridUtils.rangeCopyToClipboard(gridItems, currentState), + action: () => optInGridUtils.copyToClipboard(gridItems, currentState), }, { type: 'button', @@ -354,25 +322,12 @@ function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: Gr } function onGridCellValueChange(event: GridCellValueChangeEvent, currentState: GridCurrentState) { - optInGridUtils.applyCellValueFromEvent(gridItems, event); + const { row, column, newValue } = event; + gridItems.value[row.index][column.setting.bindTo] = newValue; } function onGridKeyDown(event: GridKeyDownEvent, currentState: GridCurrentState) { - optInGridUtils.commonKeyDownHandler(gridItems, event, currentState); -} - -async function pushToGridItems(items: GridItem[]) { - for (const item of items) { - if (gridItems.value.length < 100) { - gridItems.value.push(item); - } else { - await os.alert({ - type: 'error', - text: `一度に登録できる絵文字は${MAXIMUM_EMOJI_COUNT}件までです。`, - }); - break; - } - } + optInGridUtils.defaultKeyDownHandler(gridItems, event, currentState); } async function refreshUploadFolders() { @@ -397,6 +352,10 @@ onMounted(async () => { border-radius: var(--border-radius); background-color: var(--accentedBg); box-sizing: border-box; + + &.dragOver { + cursor: copy; + } } .buttons {