usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

support update and delete

This commit is contained in:
samunohito 2024-02-04 13:44:58 +09:00
parent 048e0b8323
commit 84758b6eec
6 changed files with 173 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/frontend/src/components/grid/MkDataCell.vue
View File

@ -50,23 +50,12 @@
</template>
<script setup lang="ts">
import {
computed,
defineAsyncComponent,
nextTick,
onMounted,
onUnmounted,
ref,
shallowRef,
toRefs,
watch,
} from 'vue';
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, shallowRef, toRefs, watch } from 'vue';
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';
import { equalCellAddress, getCellAddress } from '@/components/grid/grid-utils.js';
import { cellValidation, ValidateViolation } from '@/components/grid/cell-validators.js';
const emit = defineEmits<{
(ev: 'operation:beginEdit', sender: GridCell): void;

22
packages/frontend/src/components/grid/MkGrid.vue
View File

@ -61,6 +61,7 @@ const props = withDefaults(defineProps<{
}>(), {
gridSetting: () => ({
rowNumberVisible: true,
rowSelectable: true,
}),
});
const { gridSetting, columnSettings, data } = toRefs(props);
@ -576,9 +577,7 @@ function onMouseMove(ev: MouseEvent) {
unSelectionOutOfRange(leftTop, rightBottom);
expandCellRange(leftTop, rightBottom);
rows.value[targetCellAddress.row].ranged = true;
const rangedRowIndexes = rangedRows.value.map(it => it.index);
const rangedRowIndexes = [rows.value[targetCellAddress.row].index, ...rangedRows.value.map(it => it.index)];
expandRowRange(Math.min(...rangedRowIndexes), Math.max(...rangedRowIndexes));
previousCellAddress.value = targetCellAddress;
@ -884,6 +883,10 @@ function expandCellRange(leftTop: CellAddress, rightBottom: CellAddress) {
* {@link top}から{@link bottom}までの行を範囲選択状態にする。
*/
function expandRowRange(top: number, bottom: number) {
if (!gridSetting.value.rowSelectable) {
return;
}
const targetRows = rows.value.slice(top, bottom + 1);
for (const row of targetRows) {
row.ranged = true;
@ -983,11 +986,11 @@ function patchData(newItems: DataSource[]) {
console.log(`[grid][patch-data][begin] new:${newItems.length} old:${cells.value.length}`);
}
if (cells.value.length != newItems.length) {
const _cells = [...cells.value];
const _rows = [...rows.value];
const _cols = columns.value;
if (_cells.length != newItems.length) {
// 状態が壊れるかもしれないので選択を全解除
unSelectionRangeAll();
@ -1026,13 +1029,13 @@ function patchData(newItems: DataSource[]) {
rows.value = newRows;
cells.value = newCells;
} else {
// 行数が変わらない場合
for (let rowIdx = 0; rowIdx < _cells.length; rowIdx++) {
const oldCells = _cells[rowIdx].cells;
}
for (let rowIdx = 0; rowIdx < cells.value.length; rowIdx++) {
const oldCells = cells.value[rowIdx].cells;
const newItem = newItems[rowIdx];
for (let colIdx = 0; colIdx < oldCells.length; colIdx++) {
const _col = _cols[colIdx];
const _col = columns.value[colIdx];
const oldCell = oldCells[colIdx];
const newValue = newItem[_col.setting.bindTo];
@ -1042,7 +1045,6 @@ function patchData(newItems: DataSource[]) {
}
}
}
}
// セル値が書き換わっており、バリデーションの結果も変わっているので外部に通知する必要がある
emitGridEvent({

1
packages/frontend/src/components/grid/grid.ts
View File

@ -3,6 +3,7 @@ import { CellValue } from '@/components/grid/cell.js';
export type GridSetting = {
rowNumberVisible: boolean;
rowSelectable: boolean;
}
export type DataSource = Record<string, CellValue>;

7
packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts
View File

@ -12,7 +12,8 @@ export type GridItem = {
readonly fileId?: string;
readonly url: string;
checked: boolean;
deleteCheck: boolean;
name: string;
category: string;
aliases: string;
@ -27,7 +28,7 @@ export function fromEmojiDetailed(it: Misskey.entities.EmojiDetailed): GridItem
id: it.id,
fileId: undefined,
url: it.url,
checked: false,
deleteCheck: false,
name: it.name,
category: it.category ?? '',
aliases: it.aliases.join(', '),
@ -43,7 +44,7 @@ export function fromDriveFile(it: Misskey.entities.DriveFile): GridItem {
id: undefined,
fileId: it.id,
url: it.url,
checked: false,
deleteCheck: false,
name: it.name.replace(/(\.[a-zA-Z0-9]+)+$/, ''),
category: '',
aliases: '',

153
packages/frontend/src/pages/admin/custom-emojis-grid.list.vue
View File

@ -9,10 +9,8 @@
</MkButton>
</div>
<div
style="overflow-y: scroll; padding-top: 8px; padding-bottom: 8px;"
>
<MkGrid :data="gridItems" :columnSettings="columnSettings"/>
<div style="overflow-y: scroll; padding-top: 8px; padding-bottom: 8px;">
<MkGrid :data="gridItems" :gridSetting="gridSetting" :columnSettings="columnSettings" @event="onGridEvent"/>
</div>
<div class="_gaps">
@ -22,16 +20,17 @@
</div>
<div :class="$style.buttons">
<MkButton primary>{{ i18n.ts.update }}</MkButton>
<MkButton>リセット</MkButton>
<MkButton primary :disabled="updateButtonDisabled" @click="onUpdateClicked">{{ i18n.ts.update }}</MkButton>
<MkButton @click="onResetClicked">リセット</MkButton>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, toRefs, watch } from 'vue';
import { computed, ref, toRefs, watch } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os.js';
import { fromEmojiDetailed, GridItem } from '@/pages/admin/custom-emojis-grid.impl.js';
import MkGrid from '@/components/grid/MkGrid.vue';
import { i18n } from '@/i18n.js';
@ -39,12 +38,30 @@ import MkInput from '@/components/MkInput.vue';
import MkButton from '@/components/MkButton.vue';
import { ColumnSetting } from '@/components/grid/column.js';
import { validators } from '@/components/grid/cell-validators.js';
import {
GridCellContextMenuEvent,
GridCellValidationEvent,
GridCellValueChangeEvent,
GridCurrentState,
GridEvent,
GridKeyDownEvent,
GridRowContextMenuEvent,
} from '@/components/grid/grid-event.js';
import { optInGridUtils } from '@/components/grid/optin-utils.js';
import { GridSetting } from '@/components/grid/grid.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
const gridSetting: GridSetting = {
rowNumberVisible: true,
rowSelectable: false,
};
const required = validators.required();
const regex = validators.regex(/^[a-zA-Z0-9_]+$/);
const columnSettings: ColumnSetting[] = [
{ bindTo: 'selected', icon: 'ti-trash', type: 'boolean', editable: true, width: 34 },
{ bindTo: 'deleteCheck', icon: 'ti-trash', type: 'boolean', editable: true, width: 34 },
{ 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 },
@ -65,11 +82,57 @@ const { customEmojis } = toRefs(props);
const query = ref('');
const gridItems = ref<GridItem[]>([]);
const originGridItems = ref<GridItem[]>([]);
const updateButtonDisabled = ref<boolean>(false);
const latest = computed(() => customEmojis.value.length > 0 ? customEmojis.value[0]?.id : undefined);
const oldest = computed(() => customEmojis.value.length > 0 ? customEmojis.value[customEmojis.value.length - 1]?.id : undefined);
watch(customEmojis, refreshGridItems);
watch(customEmojis, refreshGridItems, { immediate: true });
async function onUpdateClicked() {
const _items = gridItems.value;
const _originItems = originGridItems.value;
if (_items.length !== _originItems.length) {
throw new Error('The number of items has been changed. Please refresh the page and try again.');
}
const updatedItems = _items.filter((it, idx) => !it.deleteCheck && JSON.stringify(it) !== JSON.stringify(_originItems[idx]));
const deleteItems = _items.filter((it) => it.deleteCheck);
async function action() {
const emptyStrToNull = (value: string) => value === '' ? null : value;
const emptyStrToEmptyArray = (value: string) => value === '' ? [] : value.split(',').map(it => it.trim());
for (const item of updatedItems) {
await misskeyApi('admin/emoji/update', {
id: item.id!,
name: item.name,
category: emptyStrToNull(item.category),
aliases: emptyStrToEmptyArray(item.aliases),
license: emptyStrToNull(item.license),
isSensitive: item.isSensitive,
localOnly: item.localOnly,
roleIdsThatCanBeUsedThisEmojiAsReaction: emptyStrToEmptyArray(item.roleIdsThatCanBeUsedThisEmojiAsReaction),
});
}
const deleteIds = deleteItems.map(it => it.id!);
await misskeyApi('admin/emoji/delete-bulk', { ids: deleteIds });
}
await os.promiseDialog(
action(),
() => {},
() => {},
);
emit('operation:search', query.value, undefined, undefined);
}
function onResetClicked() {
refreshGridItems();
}
function onSearchButtonClicked() {
emit('operation:search', query.value, undefined, undefined);
@ -83,13 +146,73 @@ async function onOldestButtonClicked() {
emit('operation:search', query.value, undefined, oldest.value);
}
function refreshGridItems() {
gridItems.value = customEmojis.value.map(it => fromEmojiDetailed(it));
function onGridEvent(event: GridEvent, currentState: GridCurrentState) {
switch (event.type) {
case 'cell-validation':
onGridCellValidation(event);
break;
case 'row-context-menu':
onGridRowContextMenu(event, currentState);
break;
case 'cell-context-menu':
onGridCellContextMenu(event, currentState);
break;
case 'cell-value-change':
onGridCellValueChange(event, currentState);
break;
case 'keydown':
onGridKeyDown(event, currentState);
break;
}
}
onMounted(() => {
refreshGridItems();
});
function onGridCellValidation(event: GridCellValidationEvent) {
updateButtonDisabled.value = event.all.filter(it => !it.valid).length > 0;
}
function onGridRowContextMenu(event: GridRowContextMenuEvent, currentState: GridCurrentState) {
event.menuItems.push(
{
type: 'button',
text: '選択行をコピー',
icon: 'ti ti-copy',
action: () => optInGridUtils.copyToClipboard(gridItems, currentState),
},
);
}
function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: GridCurrentState) {
event.menuItems.push(
{
type: 'button',
text: '選択範囲をコピー',
icon: 'ti ti-copy',
action: () => optInGridUtils.copyToClipboard(gridItems, currentState),
},
{
type: 'button',
text: '選択行を削除',
icon: 'ti ti-trash',
action: () => optInGridUtils.deleteSelectionRange(gridItems, currentState),
},
);
}
function onGridCellValueChange(event: GridCellValueChangeEvent, currentState: GridCurrentState) {
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;
}
}
function onGridKeyDown(event: GridKeyDownEvent, currentState: GridCurrentState) {
optInGridUtils.defaultKeyDownHandler(gridItems, event, currentState);
}
function refreshGridItems() {
gridItems.value = customEmojis.value.map(it => fromEmojiDetailed(it));
originGridItems.value = JSON.parse(JSON.stringify(gridItems.value));
}
</script>

11
packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
View File

@ -154,17 +154,20 @@ async function onRegistryClicked() {
const items = new Map<string, GridItem>(gridItems.value.map(it => [`${it.fileId}|${it.name}`, it]));
const upload = async (): Promise<UploadResult[]> => {
const emptyStrToNull = (value: string) => value === '' ? null : value;
const emptyStrToEmptyArray = (value: string) => value === '' ? [] : value.split(',').map(it => it.trim());
const result = Array.of<UploadResult>();
for (const [key, item] of [...items.entries()].slice(0, MAXIMUM_EMOJI_COUNT)) {
try {
await misskeyApi('admin/emoji/add', {
name: item.name,
category: item.category,
aliases: item.aliases.split(',').map(it => it.trim()),
license: item.license,
category: emptyStrToNull(item.category),
aliases: emptyStrToEmptyArray(item.aliases),
license: emptyStrToNull(item.license),
isSensitive: item.isSensitive,
localOnly: item.localOnly,
roleIdsThatCanBeUsedThisEmojiAsReaction: item.roleIdsThatCanBeUsedThisEmojiAsReaction.split(',').map(it => it.trim()),
roleIdsThatCanBeUsedThisEmojiAsReaction: emptyStrToEmptyArray(item.roleIdsThatCanBeUsedThisEmojiAsReaction),
fileId: item.fileId!,
});
result.push({ key, item, success: true, err: undefined });