mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-17 05:43:51 +02:00
refactor
This commit is contained in:
pa
@@ -570,17 +570,6 @@
|
||||
|
||||
import VueJsonPretty from 'vue-json-pretty';
|
||||
|
||||
import {
|
||||
commaNumber,
|
||||
compareUnityVersion,
|
||||
copyToClipboard,
|
||||
downloadAndSaveJson,
|
||||
formatDateFilter,
|
||||
openExternalLink,
|
||||
openFolderGeneric,
|
||||
replaceVrcPackageUrl,
|
||||
timeToText
|
||||
} from '../../../shared/utils';
|
||||
import {
|
||||
useAppearanceSettingsStore,
|
||||
useAvatarStore,
|
||||
@@ -591,6 +580,15 @@
|
||||
useUiStore,
|
||||
useUserStore
|
||||
} from '../../../stores';
|
||||
import {
|
||||
commaNumber,
|
||||
compareUnityVersion,
|
||||
copyToClipboard,
|
||||
downloadAndSaveJson,
|
||||
formatDateFilter,
|
||||
openFolderGeneric,
|
||||
timeToText
|
||||
} from '../../../shared/utils';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -598,17 +596,12 @@
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from '../../ui/dropdown-menu';
|
||||
import {
|
||||
handleImageUploadInput,
|
||||
readFileAsBase64,
|
||||
resizeImageToFitLimits,
|
||||
uploadImageLegacy,
|
||||
withUploadTimeout
|
||||
} from '../../../shared/utils/imageUpload';
|
||||
import { avatarModerationRequest, avatarRequest, favoriteRequest } from '../../../api';
|
||||
import { Badge } from '../../ui/badge';
|
||||
import { avatarRequest } from '../../../api';
|
||||
import { database } from '../../../service/database';
|
||||
import { formatJsonVars } from '../../../shared/utils/base/ui';
|
||||
import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
|
||||
import { useAvatarDialogCommands } from './useAvatarDialogCommands';
|
||||
|
||||
import DialogJsonTab from '../DialogJsonTab.vue';
|
||||
import ImageCropDialog from '../ImageCropDialog.vue';
|
||||
@@ -632,15 +625,36 @@
|
||||
const uiStore = useUiStore();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const {
|
||||
cropDialogOpen,
|
||||
cropDialogFile,
|
||||
changeAvatarImageLoading,
|
||||
avatarDialogCommand,
|
||||
onFileChangeAvatarImage,
|
||||
onCropConfirmAvatar,
|
||||
registerCallbacks
|
||||
} = useAvatarDialogCommands(avatarDialog, {
|
||||
t,
|
||||
toast,
|
||||
modalStore,
|
||||
userDialog,
|
||||
currentUser,
|
||||
cachedAvatars,
|
||||
cachedAvatarModerations,
|
||||
showAvatarDialog,
|
||||
showFavoriteDialog,
|
||||
applyAvatarModeration,
|
||||
applyAvatar,
|
||||
sortUserDialogAvatars,
|
||||
uiStore
|
||||
});
|
||||
|
||||
const avatarDialogTabs = computed(() => [
|
||||
{ value: 'Info', label: t('dialog.avatar.info.header') },
|
||||
{ value: 'JSON', label: t('dialog.avatar.json.header') }
|
||||
]);
|
||||
|
||||
const cropDialogOpen = ref(false);
|
||||
const cropDialogFile = ref(null);
|
||||
const changeAvatarImageLoading = ref(false);
|
||||
|
||||
const treeData = ref({});
|
||||
const memo = ref('');
|
||||
const setAvatarTagsDialog = ref({
|
||||
@@ -813,333 +827,11 @@
|
||||
*
|
||||
* @param command
|
||||
*/
|
||||
function avatarDialogCommand(command) {
|
||||
const D = avatarDialog.value;
|
||||
switch (command) {
|
||||
case 'Refresh':
|
||||
const avatarId = D.id;
|
||||
showAvatarDialog(avatarId, { forceRefresh: true });
|
||||
break;
|
||||
case 'Share':
|
||||
copyAvatarUrl(D.id);
|
||||
break;
|
||||
case 'Rename':
|
||||
promptRenameAvatar(D);
|
||||
break;
|
||||
case 'Change Image':
|
||||
showChangeAvatarImageDialog();
|
||||
break;
|
||||
case 'Change Description':
|
||||
promptChangeAvatarDescription(D);
|
||||
break;
|
||||
case 'Change Content Tags':
|
||||
showSetAvatarTagsDialog(D.id);
|
||||
break;
|
||||
case 'Change Styles and Author Tags':
|
||||
showSetAvatarStylesDialog();
|
||||
break;
|
||||
case 'Download Unity Package':
|
||||
openExternalLink(replaceVrcPackageUrl(avatarDialog.value.ref.unityPackageUrl));
|
||||
break;
|
||||
case 'Add Favorite':
|
||||
showFavoriteDialog('avatar', D.id);
|
||||
break;
|
||||
default:
|
||||
const commandLabelMap = {
|
||||
'Delete Favorite': t('dialog.avatar.actions.favorite_tooltip'),
|
||||
'Select Fallback Avatar': t('dialog.avatar.actions.select_fallback'),
|
||||
'Block Avatar': t('dialog.avatar.actions.block'),
|
||||
'Unblock Avatar': t('dialog.avatar.actions.unblock'),
|
||||
'Make Public': t('dialog.avatar.actions.make_public'),
|
||||
'Make Private': t('dialog.avatar.actions.make_private'),
|
||||
Delete: t('dialog.avatar.actions.delete'),
|
||||
'Delete Imposter': t('dialog.avatar.actions.delete_impostor'),
|
||||
'Create Imposter': t('dialog.avatar.actions.create_impostor'),
|
||||
'Regenerate Imposter': t('dialog.avatar.actions.regenerate_impostor')
|
||||
};
|
||||
modalStore
|
||||
.confirm({
|
||||
title: t('confirm.title'),
|
||||
description: t('confirm.command_question', {
|
||||
command: commandLabelMap[command] ?? command
|
||||
})
|
||||
})
|
||||
.then(({ ok }) => {
|
||||
if (!ok) return;
|
||||
switch (command) {
|
||||
case 'Delete Favorite':
|
||||
favoriteRequest.deleteFavorite({
|
||||
objectId: D.id
|
||||
});
|
||||
break;
|
||||
case 'Select Fallback Avatar':
|
||||
avatarRequest
|
||||
.selectFallbackAvatar({
|
||||
avatarId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(t('message.avatar.fallback_changed'));
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Block Avatar':
|
||||
avatarModerationRequest
|
||||
.sendAvatarModeration({
|
||||
avatarModerationType: 'block',
|
||||
targetAvatarId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
// 'AVATAR-MODERATION';
|
||||
applyAvatarModeration(args.json);
|
||||
toast.success(t('message.avatar.blocked'));
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Unblock Avatar':
|
||||
avatarModerationRequest
|
||||
.deleteAvatarModeration({
|
||||
avatarModerationType: 'block',
|
||||
targetAvatarId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
cachedAvatarModerations.delete(args.params.targetAvatarId);
|
||||
const D = avatarDialog.value;
|
||||
if (
|
||||
args.params.avatarModerationType === 'block' &&
|
||||
D.id === args.params.targetAvatarId
|
||||
) {
|
||||
D.isBlocked = false;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'Make Public':
|
||||
avatarRequest
|
||||
.saveAvatar({
|
||||
id: D.id,
|
||||
releaseStatus: 'public'
|
||||
})
|
||||
.then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(t('message.avatar.updated_public'));
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Make Private':
|
||||
avatarRequest
|
||||
.saveAvatar({
|
||||
id: D.id,
|
||||
releaseStatus: 'private'
|
||||
})
|
||||
.then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(t('message.avatar.updated_private'));
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Delete':
|
||||
avatarRequest
|
||||
.deleteAvatar({
|
||||
avatarId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
const { json } = args;
|
||||
cachedAvatars.delete(json._id);
|
||||
if (userDialog.value.id === json.authorId) {
|
||||
const map = new Map();
|
||||
for (const ref of cachedAvatars.values()) {
|
||||
if (ref.authorId === json.authorId) {
|
||||
map.set(ref.id, ref);
|
||||
}
|
||||
}
|
||||
const array = Array.from(map.values());
|
||||
sortUserDialogAvatars(array);
|
||||
}
|
||||
|
||||
toast.success(t('message.avatar.deleted'));
|
||||
uiStore.jumpBackDialogCrumb();
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Delete Imposter':
|
||||
avatarRequest
|
||||
.deleteImposter({
|
||||
avatarId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(t('message.avatar.impostor_deleted'));
|
||||
showAvatarDialog(D.id);
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Create Imposter':
|
||||
avatarRequest
|
||||
.createImposter({
|
||||
avatarId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(t('message.avatar.impostor_queued'));
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Regenerate Imposter':
|
||||
avatarRequest
|
||||
.deleteImposter({
|
||||
avatarId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
showAvatarDialog(D.id);
|
||||
return args;
|
||||
})
|
||||
.finally(() => {
|
||||
avatarRequest
|
||||
.createImposter({
|
||||
avatarId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(t('message.avatar.impostor_regenerated'));
|
||||
return args;
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function showChangeAvatarImageDialog() {
|
||||
document.getElementById('AvatarImageUploadButton').click();
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param e
|
||||
*/
|
||||
function onFileChangeAvatarImage(e) {
|
||||
const { file, clearInput } = handleImageUploadInput(e, {
|
||||
inputSelector: '#AvatarImageUploadButton',
|
||||
tooLargeMessage: () => t('message.file.too_large'),
|
||||
invalidTypeMessage: () => t('message.file.not_image')
|
||||
});
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (!avatarDialog.value.visible || avatarDialog.value.loading) {
|
||||
clearInput();
|
||||
return;
|
||||
}
|
||||
clearInput();
|
||||
cropDialogFile.value = file;
|
||||
cropDialogOpen.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param blob
|
||||
*/
|
||||
async function onCropConfirmAvatar(blob) {
|
||||
changeAvatarImageLoading.value = true;
|
||||
try {
|
||||
await withUploadTimeout(
|
||||
(async () => {
|
||||
const base64Body = await readFileAsBase64(blob);
|
||||
const base64File = await resizeImageToFitLimits(base64Body);
|
||||
if (LINUX) {
|
||||
const args = await avatarRequest.uploadAvatarImage(base64File);
|
||||
const fileUrl = args.json.versions[args.json.versions.length - 1].file.url;
|
||||
await avatarRequest.saveAvatar({
|
||||
id: avatarDialog.value.id,
|
||||
imageUrl: fileUrl
|
||||
});
|
||||
} else {
|
||||
await uploadImageLegacy('avatar', {
|
||||
entityId: avatarDialog.value.id,
|
||||
imageUrl: avatarDialog.value.ref.imageUrl,
|
||||
base64File,
|
||||
blob
|
||||
});
|
||||
}
|
||||
})()
|
||||
);
|
||||
toast.success(t('message.upload.success'));
|
||||
// force refresh cover image
|
||||
const avatarId = avatarDialog.value.id;
|
||||
showAvatarDialog(avatarId, { forceRefresh: true });
|
||||
} catch (error) {
|
||||
console.error('avatar image upload process failed:', error);
|
||||
toast.error(t('message.upload.error'));
|
||||
} finally {
|
||||
changeAvatarImageLoading.value = false;
|
||||
cropDialogOpen.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param avatar
|
||||
*/
|
||||
function promptChangeAvatarDescription(avatar) {
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.change_avatar_description.header'),
|
||||
description: t('prompt.change_avatar_description.description'),
|
||||
confirmText: t('prompt.change_avatar_description.ok'),
|
||||
cancelText: t('prompt.change_avatar_description.cancel'),
|
||||
inputValue: avatar.ref.description,
|
||||
errorMessage: t('prompt.change_avatar_description.input_error')
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== avatar.ref.description) {
|
||||
avatarRequest
|
||||
.saveAvatar({
|
||||
id: avatar.id,
|
||||
description: value
|
||||
})
|
||||
.then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(t('prompt.change_avatar_description.message.success'));
|
||||
return args;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param avatar
|
||||
*/
|
||||
function promptRenameAvatar(avatar) {
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.rename_avatar.header'),
|
||||
description: t('prompt.rename_avatar.description'),
|
||||
confirmText: t('prompt.rename_avatar.ok'),
|
||||
cancelText: t('prompt.rename_avatar.cancel'),
|
||||
inputValue: avatar.ref.name,
|
||||
errorMessage: t('prompt.rename_avatar.input_error')
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== avatar.ref.name) {
|
||||
avatarRequest
|
||||
.saveAvatar({
|
||||
id: avatar.id,
|
||||
name: value
|
||||
})
|
||||
.then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(t('prompt.rename_avatar.message.success'));
|
||||
return args;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
// Register component callbacks for the command composable
|
||||
registerCallbacks({
|
||||
showSetAvatarTagsDialog: () => showSetAvatarTagsDialog(avatarDialog.value.id),
|
||||
showSetAvatarStylesDialog
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
@@ -1164,14 +856,6 @@
|
||||
copyToClipboard(id);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
function copyAvatarUrl(id) {
|
||||
copyToClipboard(`https://vrchat.com/home/avatar/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,402 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { ref } from 'vue';
|
||||
import { useAvatarDialogCommands } from '../useAvatarDialogCommands';
|
||||
|
||||
// Mock external modules
|
||||
vi.mock('../../../../api', () => ({
|
||||
avatarModerationRequest: {
|
||||
sendAvatarModeration: vi.fn(),
|
||||
deleteAvatarModeration: vi.fn()
|
||||
},
|
||||
avatarRequest: {
|
||||
saveAvatar: vi.fn(),
|
||||
deleteAvatar: vi.fn(),
|
||||
selectFallbackAvatar: vi.fn(),
|
||||
deleteImposter: vi.fn(),
|
||||
createImposter: vi.fn(),
|
||||
uploadAvatarImage: vi.fn()
|
||||
},
|
||||
favoriteRequest: {
|
||||
deleteFavorite: vi.fn()
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('../../../../shared/utils', () => ({
|
||||
copyToClipboard: vi.fn(),
|
||||
openExternalLink: vi.fn(),
|
||||
replaceVrcPackageUrl: vi.fn((url) => url)
|
||||
}));
|
||||
|
||||
vi.mock('../../../../shared/utils/imageUpload', () => ({
|
||||
handleImageUploadInput: vi.fn(),
|
||||
readFileAsBase64: vi.fn(),
|
||||
resizeImageToFitLimits: vi.fn(),
|
||||
uploadImageLegacy: vi.fn(),
|
||||
withUploadTimeout: vi.fn()
|
||||
}));
|
||||
|
||||
const { copyToClipboard, openExternalLink } =
|
||||
await import('../../../../shared/utils');
|
||||
const { favoriteRequest, avatarRequest, avatarModerationRequest } =
|
||||
await import('../../../../api');
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function createMockAvatarDialog() {
|
||||
return ref({
|
||||
visible: true,
|
||||
loading: false,
|
||||
id: 'avtr_test123',
|
||||
ref: {
|
||||
name: 'TestAvatar',
|
||||
description: 'Test desc',
|
||||
imageUrl: 'https://example.com/img.png',
|
||||
thumbnailImageUrl: 'https://example.com/thumb.png',
|
||||
authorId: 'usr_author',
|
||||
authorName: 'Author',
|
||||
releaseStatus: 'private',
|
||||
tags: ['content_horror'],
|
||||
unityPackageUrl: 'https://example.com/pkg.unitypackage',
|
||||
styles: { primary: 'style1', secondary: 'style2' }
|
||||
},
|
||||
isBlocked: false,
|
||||
hasImposter: false,
|
||||
timeSpent: 0,
|
||||
galleryLoading: false,
|
||||
galleryImages: []
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param overrides
|
||||
*/
|
||||
function createMockDeps(overrides = {}) {
|
||||
return {
|
||||
t: vi.fn((key) => key),
|
||||
toast: Object.assign(vi.fn(), {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
promise: vi.fn()
|
||||
}),
|
||||
modalStore: {
|
||||
confirm: vi.fn(() => Promise.resolve({ ok: true })),
|
||||
prompt: vi.fn(() =>
|
||||
Promise.resolve({ ok: true, value: 'new_value' })
|
||||
)
|
||||
},
|
||||
userDialog: ref({ id: 'usr_author' }),
|
||||
currentUser: ref({ id: 'usr_current', currentAvatar: 'avtr_other' }),
|
||||
cachedAvatars: new Map([
|
||||
['avtr_test123', { id: 'avtr_test123', authorId: 'usr_author' }]
|
||||
]),
|
||||
cachedAvatarModerations: new Map(),
|
||||
showAvatarDialog: vi.fn(),
|
||||
showFavoriteDialog: vi.fn(),
|
||||
applyAvatarModeration: vi.fn((json) => json),
|
||||
applyAvatar: vi.fn((json) => json),
|
||||
sortUserDialogAvatars: vi.fn(),
|
||||
uiStore: { jumpBackDialogCrumb: vi.fn() },
|
||||
...overrides
|
||||
};
|
||||
}
|
||||
|
||||
describe('useAvatarDialogCommands', () => {
|
||||
let avatarDialog;
|
||||
let deps;
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
avatarDialog = createMockAvatarDialog();
|
||||
deps = createMockDeps();
|
||||
});
|
||||
|
||||
describe('direct commands', () => {
|
||||
it('Refresh: should call showAvatarDialog with forceRefresh', () => {
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Refresh');
|
||||
expect(deps.showAvatarDialog).toHaveBeenCalledWith('avtr_test123', {
|
||||
forceRefresh: true
|
||||
});
|
||||
});
|
||||
|
||||
it('Share: should copy avatar URL', () => {
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Share');
|
||||
expect(copyToClipboard).toHaveBeenCalledWith(
|
||||
'https://vrchat.com/home/avatar/avtr_test123'
|
||||
);
|
||||
});
|
||||
|
||||
it('Add Favorite: should call showFavoriteDialog', () => {
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Add Favorite');
|
||||
expect(deps.showFavoriteDialog).toHaveBeenCalledWith(
|
||||
'avatar',
|
||||
'avtr_test123'
|
||||
);
|
||||
});
|
||||
|
||||
it('Download Unity Package: should open external link', () => {
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Download Unity Package');
|
||||
expect(openExternalLink).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Rename: should show prompt dialog', () => {
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Rename');
|
||||
expect(deps.modalStore.prompt).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Change Description: should show prompt dialog', () => {
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Change Description');
|
||||
expect(deps.modalStore.prompt).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Change Image: triggers file input (DOM-dependent, skip in node)', () => {
|
||||
// This command calls document.getElementById which is only available in browser
|
||||
// Just verify no error when command is dispatched (DOM interaction tested in e2e)
|
||||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
const mockBtn = { click: vi.fn() };
|
||||
vi.spyOn(document, 'getElementById').mockReturnValue(mockBtn);
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Change Image');
|
||||
expect(mockBtn.click).toHaveBeenCalled();
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
});
|
||||
|
||||
describe('string callback commands', () => {
|
||||
it('should delegate to registered callbacks', () => {
|
||||
const showSetAvatarTagsDialog = vi.fn();
|
||||
const { avatarDialogCommand, registerCallbacks } =
|
||||
useAvatarDialogCommands(avatarDialog, deps);
|
||||
registerCallbacks({ showSetAvatarTagsDialog });
|
||||
avatarDialogCommand('Change Content Tags');
|
||||
expect(showSetAvatarTagsDialog).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not throw when callback is not registered', () => {
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
expect(() =>
|
||||
avatarDialogCommand('Change Content Tags')
|
||||
).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('confirmed commands', () => {
|
||||
it('Delete Favorite: should confirm then delete', async () => {
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Delete Favorite');
|
||||
await vi.waitFor(() => {
|
||||
expect(deps.modalStore.confirm).toHaveBeenCalled();
|
||||
});
|
||||
await vi.waitFor(() => {
|
||||
expect(favoriteRequest.deleteFavorite).toHaveBeenCalledWith({
|
||||
objectId: 'avtr_test123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('confirmed command should not execute when cancelled', async () => {
|
||||
deps.modalStore.confirm = vi.fn(() =>
|
||||
Promise.resolve({ ok: false })
|
||||
);
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Delete Favorite');
|
||||
await vi.waitFor(() => {
|
||||
expect(deps.modalStore.confirm).toHaveBeenCalled();
|
||||
});
|
||||
expect(favoriteRequest.deleteFavorite).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Select Fallback Avatar: should confirm then select', async () => {
|
||||
avatarRequest.selectFallbackAvatar.mockResolvedValue({ json: {} });
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Select Fallback Avatar');
|
||||
await vi.waitFor(() => {
|
||||
expect(avatarRequest.selectFallbackAvatar).toHaveBeenCalledWith(
|
||||
{ avatarId: 'avtr_test123' }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('Block Avatar: should confirm then send moderation', async () => {
|
||||
avatarModerationRequest.sendAvatarModeration.mockResolvedValue({
|
||||
json: { targetAvatarId: 'avtr_test123' }
|
||||
});
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Block Avatar');
|
||||
await vi.waitFor(() => {
|
||||
expect(
|
||||
avatarModerationRequest.sendAvatarModeration
|
||||
).toHaveBeenCalledWith({
|
||||
avatarModerationType: 'block',
|
||||
targetAvatarId: 'avtr_test123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Unblock Avatar: should confirm then delete moderation', async () => {
|
||||
avatarModerationRequest.deleteAvatarModeration.mockResolvedValue({
|
||||
params: {
|
||||
targetAvatarId: 'avtr_test123',
|
||||
avatarModerationType: 'block'
|
||||
}
|
||||
});
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Unblock Avatar');
|
||||
await vi.waitFor(() => {
|
||||
expect(
|
||||
avatarModerationRequest.deleteAvatarModeration
|
||||
).toHaveBeenCalledWith({
|
||||
avatarModerationType: 'block',
|
||||
targetAvatarId: 'avtr_test123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Make Public: should save avatar with public status', async () => {
|
||||
avatarRequest.saveAvatar.mockResolvedValue({
|
||||
json: { releaseStatus: 'public' }
|
||||
});
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Make Public');
|
||||
await vi.waitFor(() => {
|
||||
expect(avatarRequest.saveAvatar).toHaveBeenCalledWith({
|
||||
id: 'avtr_test123',
|
||||
releaseStatus: 'public'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Make Private: should save avatar with private status', async () => {
|
||||
avatarRequest.saveAvatar.mockResolvedValue({
|
||||
json: { releaseStatus: 'private' }
|
||||
});
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Make Private');
|
||||
await vi.waitFor(() => {
|
||||
expect(avatarRequest.saveAvatar).toHaveBeenCalledWith({
|
||||
id: 'avtr_test123',
|
||||
releaseStatus: 'private'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Delete: should delete avatar and update cache', async () => {
|
||||
avatarRequest.deleteAvatar.mockResolvedValue({
|
||||
json: { _id: 'avtr_test123', authorId: 'usr_author' }
|
||||
});
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Delete');
|
||||
await vi.waitFor(() => {
|
||||
expect(avatarRequest.deleteAvatar).toHaveBeenCalledWith({
|
||||
avatarId: 'avtr_test123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Create Imposter: should create imposter', async () => {
|
||||
avatarRequest.createImposter.mockResolvedValue({ json: {} });
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Create Imposter');
|
||||
await vi.waitFor(() => {
|
||||
expect(avatarRequest.createImposter).toHaveBeenCalledWith({
|
||||
avatarId: 'avtr_test123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Delete Imposter: should delete imposter and refresh', async () => {
|
||||
avatarRequest.deleteImposter.mockResolvedValue({ json: {} });
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
avatarDialogCommand('Delete Imposter');
|
||||
await vi.waitFor(() => {
|
||||
expect(avatarRequest.deleteImposter).toHaveBeenCalledWith({
|
||||
avatarId: 'avtr_test123'
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('unknown command', () => {
|
||||
it('should do nothing for unknown commands', () => {
|
||||
const { avatarDialogCommand } = useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
deps
|
||||
);
|
||||
expect(() => avatarDialogCommand('NonExistent')).not.toThrow();
|
||||
expect(deps.modalStore.confirm).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('image upload state', () => {
|
||||
it('should expose crop dialog state refs', () => {
|
||||
const { cropDialogOpen, cropDialogFile, changeAvatarImageLoading } =
|
||||
useAvatarDialogCommands(avatarDialog, deps);
|
||||
expect(cropDialogOpen.value).toBe(false);
|
||||
expect(cropDialogFile.value).toBeNull();
|
||||
expect(changeAvatarImageLoading.value).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
485
src/components/dialogs/AvatarDialog/useAvatarDialogCommands.js
Normal file
485
src/components/dialogs/AvatarDialog/useAvatarDialogCommands.js
Normal file
@@ -0,0 +1,485 @@
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
avatarModerationRequest,
|
||||
avatarRequest,
|
||||
favoriteRequest
|
||||
} from '../../../api';
|
||||
import {
|
||||
copyToClipboard,
|
||||
openExternalLink,
|
||||
replaceVrcPackageUrl
|
||||
} from '../../../shared/utils';
|
||||
import {
|
||||
handleImageUploadInput,
|
||||
readFileAsBase64,
|
||||
resizeImageToFitLimits,
|
||||
uploadImageLegacy,
|
||||
withUploadTimeout
|
||||
} from '../../../shared/utils/imageUpload';
|
||||
|
||||
/**
|
||||
* Composable for AvatarDialog command dispatch.
|
||||
* Uses a command map pattern instead of nested switch-case chains.
|
||||
*
|
||||
* @param {import('vue').Ref} avatarDialog - reactive ref to the avatar dialog state
|
||||
* @param {object} deps - external dependencies
|
||||
* @returns {object} command composable API
|
||||
*/
|
||||
export function useAvatarDialogCommands(
|
||||
avatarDialog,
|
||||
{
|
||||
t,
|
||||
toast,
|
||||
modalStore,
|
||||
userDialog,
|
||||
currentUser,
|
||||
cachedAvatars,
|
||||
cachedAvatarModerations,
|
||||
showAvatarDialog,
|
||||
showFavoriteDialog,
|
||||
applyAvatarModeration,
|
||||
applyAvatar,
|
||||
sortUserDialogAvatars,
|
||||
uiStore
|
||||
}
|
||||
) {
|
||||
// --- Image crop dialog state ---
|
||||
const cropDialogOpen = ref(false);
|
||||
const cropDialogFile = ref(null);
|
||||
const changeAvatarImageLoading = ref(false);
|
||||
|
||||
// --- Image upload ---
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function showChangeAvatarImageDialog() {
|
||||
document.getElementById('AvatarImageUploadButton').click();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Event} e
|
||||
*/
|
||||
function onFileChangeAvatarImage(e) {
|
||||
const { file, clearInput } = handleImageUploadInput(e, {
|
||||
inputSelector: '#AvatarImageUploadButton',
|
||||
tooLargeMessage: () => t('message.file.too_large'),
|
||||
invalidTypeMessage: () => t('message.file.not_image')
|
||||
});
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (!avatarDialog.value.visible || avatarDialog.value.loading) {
|
||||
clearInput();
|
||||
return;
|
||||
}
|
||||
clearInput();
|
||||
cropDialogFile.value = file;
|
||||
cropDialogOpen.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Blob} blob
|
||||
*/
|
||||
async function onCropConfirmAvatar(blob) {
|
||||
changeAvatarImageLoading.value = true;
|
||||
try {
|
||||
await withUploadTimeout(
|
||||
(async () => {
|
||||
const base64Body = await readFileAsBase64(blob);
|
||||
const base64File = await resizeImageToFitLimits(base64Body);
|
||||
if (LINUX) {
|
||||
const args =
|
||||
await avatarRequest.uploadAvatarImage(base64File);
|
||||
const fileUrl =
|
||||
args.json.versions[args.json.versions.length - 1]
|
||||
.file.url;
|
||||
await avatarRequest.saveAvatar({
|
||||
id: avatarDialog.value.id,
|
||||
imageUrl: fileUrl
|
||||
});
|
||||
} else {
|
||||
await uploadImageLegacy('avatar', {
|
||||
entityId: avatarDialog.value.id,
|
||||
imageUrl: avatarDialog.value.ref.imageUrl,
|
||||
base64File,
|
||||
blob
|
||||
});
|
||||
}
|
||||
})()
|
||||
);
|
||||
toast.success(t('message.upload.success'));
|
||||
// force refresh cover image
|
||||
const avatarId = avatarDialog.value.id;
|
||||
showAvatarDialog(avatarId, { forceRefresh: true });
|
||||
} catch (error) {
|
||||
console.error('avatar image upload process failed:', error);
|
||||
toast.error(t('message.upload.error'));
|
||||
} finally {
|
||||
changeAvatarImageLoading.value = false;
|
||||
cropDialogOpen.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Prompt dialogs ---
|
||||
|
||||
/**
|
||||
* @param {object} avatar
|
||||
*/
|
||||
function promptRenameAvatar(avatar) {
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.rename_avatar.header'),
|
||||
description: t('prompt.rename_avatar.description'),
|
||||
confirmText: t('prompt.rename_avatar.ok'),
|
||||
cancelText: t('prompt.rename_avatar.cancel'),
|
||||
inputValue: avatar.ref.name,
|
||||
errorMessage: t('prompt.rename_avatar.input_error')
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== avatar.ref.name) {
|
||||
avatarRequest
|
||||
.saveAvatar({
|
||||
id: avatar.id,
|
||||
name: value
|
||||
})
|
||||
.then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(
|
||||
t('prompt.rename_avatar.message.success')
|
||||
);
|
||||
return args;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} avatar
|
||||
*/
|
||||
function promptChangeAvatarDescription(avatar) {
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.change_avatar_description.header'),
|
||||
description: t('prompt.change_avatar_description.description'),
|
||||
confirmText: t('prompt.change_avatar_description.ok'),
|
||||
cancelText: t('prompt.change_avatar_description.cancel'),
|
||||
inputValue: avatar.ref.description,
|
||||
errorMessage: t('prompt.change_avatar_description.input_error')
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== avatar.ref.description) {
|
||||
avatarRequest
|
||||
.saveAvatar({
|
||||
id: avatar.id,
|
||||
description: value
|
||||
})
|
||||
.then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(
|
||||
t(
|
||||
'prompt.change_avatar_description.message.success'
|
||||
)
|
||||
);
|
||||
return args;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
// --- Internal helper ---
|
||||
|
||||
/**
|
||||
* @param {string} id
|
||||
*/
|
||||
function copyAvatarUrl(id) {
|
||||
copyToClipboard(`https://vrchat.com/home/avatar/${id}`);
|
||||
}
|
||||
|
||||
// --- Command map ---
|
||||
// Direct commands: function
|
||||
// String commands: delegate to component callback
|
||||
// Confirmed commands: { confirm: true, label: string, handler: fn }
|
||||
|
||||
function buildCommandMap() {
|
||||
const D = () => avatarDialog.value;
|
||||
|
||||
const confirmLabelMap = {
|
||||
'Delete Favorite': () =>
|
||||
t('dialog.avatar.actions.favorite_tooltip'),
|
||||
'Select Fallback Avatar': () =>
|
||||
t('dialog.avatar.actions.select_fallback'),
|
||||
'Block Avatar': () => t('dialog.avatar.actions.block'),
|
||||
'Unblock Avatar': () => t('dialog.avatar.actions.unblock'),
|
||||
'Make Public': () => t('dialog.avatar.actions.make_public'),
|
||||
'Make Private': () => t('dialog.avatar.actions.make_private'),
|
||||
Delete: () => t('dialog.avatar.actions.delete'),
|
||||
'Delete Imposter': () => t('dialog.avatar.actions.delete_impostor'),
|
||||
'Create Imposter': () => t('dialog.avatar.actions.create_impostor'),
|
||||
'Regenerate Imposter': () =>
|
||||
t('dialog.avatar.actions.regenerate_impostor')
|
||||
};
|
||||
|
||||
return {
|
||||
// --- Direct commands ---
|
||||
Refresh: () => {
|
||||
showAvatarDialog(D().id, { forceRefresh: true });
|
||||
},
|
||||
Share: () => {
|
||||
copyAvatarUrl(D().id);
|
||||
},
|
||||
Rename: () => {
|
||||
promptRenameAvatar(D());
|
||||
},
|
||||
'Change Image': () => {
|
||||
showChangeAvatarImageDialog();
|
||||
},
|
||||
'Change Description': () => {
|
||||
promptChangeAvatarDescription(D());
|
||||
},
|
||||
'Download Unity Package': () => {
|
||||
openExternalLink(replaceVrcPackageUrl(D().ref.unityPackageUrl));
|
||||
},
|
||||
'Add Favorite': () => {
|
||||
showFavoriteDialog('avatar', D().id);
|
||||
},
|
||||
|
||||
// --- Delegated to component ---
|
||||
'Change Content Tags': 'showSetAvatarTagsDialog',
|
||||
'Change Styles and Author Tags': 'showSetAvatarStylesDialog',
|
||||
|
||||
// --- Confirmed commands ---
|
||||
'Delete Favorite': {
|
||||
confirm: true,
|
||||
label: confirmLabelMap['Delete Favorite'],
|
||||
handler: (id) => {
|
||||
favoriteRequest.deleteFavorite({ objectId: id });
|
||||
}
|
||||
},
|
||||
'Select Fallback Avatar': {
|
||||
confirm: true,
|
||||
label: confirmLabelMap['Select Fallback Avatar'],
|
||||
handler: (id) => {
|
||||
avatarRequest
|
||||
.selectFallbackAvatar({ avatarId: id })
|
||||
.then((args) => {
|
||||
toast.success(t('message.avatar.fallback_changed'));
|
||||
return args;
|
||||
});
|
||||
}
|
||||
},
|
||||
'Block Avatar': {
|
||||
confirm: true,
|
||||
label: confirmLabelMap['Block Avatar'],
|
||||
handler: (id) => {
|
||||
avatarModerationRequest
|
||||
.sendAvatarModeration({
|
||||
avatarModerationType: 'block',
|
||||
targetAvatarId: id
|
||||
})
|
||||
.then((args) => {
|
||||
// 'AVATAR-MODERATION';
|
||||
applyAvatarModeration(args.json);
|
||||
toast.success(t('message.avatar.blocked'));
|
||||
return args;
|
||||
});
|
||||
}
|
||||
},
|
||||
'Unblock Avatar': {
|
||||
confirm: true,
|
||||
label: confirmLabelMap['Unblock Avatar'],
|
||||
handler: (id) => {
|
||||
avatarModerationRequest
|
||||
.deleteAvatarModeration({
|
||||
avatarModerationType: 'block',
|
||||
targetAvatarId: id
|
||||
})
|
||||
.then((args) => {
|
||||
cachedAvatarModerations.delete(
|
||||
args.params.targetAvatarId
|
||||
);
|
||||
const D = avatarDialog.value;
|
||||
if (
|
||||
args.params.avatarModerationType === 'block' &&
|
||||
D.id === args.params.targetAvatarId
|
||||
) {
|
||||
D.isBlocked = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
'Make Public': {
|
||||
confirm: true,
|
||||
label: confirmLabelMap['Make Public'],
|
||||
handler: (id) => {
|
||||
avatarRequest
|
||||
.saveAvatar({ id, releaseStatus: 'public' })
|
||||
.then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(t('message.avatar.updated_public'));
|
||||
return args;
|
||||
});
|
||||
}
|
||||
},
|
||||
'Make Private': {
|
||||
confirm: true,
|
||||
label: confirmLabelMap['Make Private'],
|
||||
handler: (id) => {
|
||||
avatarRequest
|
||||
.saveAvatar({ id, releaseStatus: 'private' })
|
||||
.then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(t('message.avatar.updated_private'));
|
||||
return args;
|
||||
});
|
||||
}
|
||||
},
|
||||
Delete: {
|
||||
confirm: true,
|
||||
label: confirmLabelMap['Delete'],
|
||||
handler: (id) => {
|
||||
avatarRequest
|
||||
.deleteAvatar({ avatarId: id })
|
||||
.then((args) => {
|
||||
const { json } = args;
|
||||
cachedAvatars.delete(json._id);
|
||||
if (userDialog.value.id === json.authorId) {
|
||||
const map = new Map();
|
||||
for (const ref of cachedAvatars.values()) {
|
||||
if (ref.authorId === json.authorId) {
|
||||
map.set(ref.id, ref);
|
||||
}
|
||||
}
|
||||
const array = Array.from(map.values());
|
||||
sortUserDialogAvatars(array);
|
||||
}
|
||||
|
||||
toast.success(t('message.avatar.deleted'));
|
||||
uiStore.jumpBackDialogCrumb();
|
||||
return args;
|
||||
});
|
||||
}
|
||||
},
|
||||
'Delete Imposter': {
|
||||
confirm: true,
|
||||
label: confirmLabelMap['Delete Imposter'],
|
||||
handler: (id) => {
|
||||
avatarRequest
|
||||
.deleteImposter({ avatarId: id })
|
||||
.then((args) => {
|
||||
toast.success(t('message.avatar.impostor_deleted'));
|
||||
showAvatarDialog(id);
|
||||
return args;
|
||||
});
|
||||
}
|
||||
},
|
||||
'Create Imposter': {
|
||||
confirm: true,
|
||||
label: confirmLabelMap['Create Imposter'],
|
||||
handler: (id) => {
|
||||
avatarRequest
|
||||
.createImposter({ avatarId: id })
|
||||
.then((args) => {
|
||||
toast.success(t('message.avatar.impostor_queued'));
|
||||
return args;
|
||||
});
|
||||
}
|
||||
},
|
||||
'Regenerate Imposter': {
|
||||
confirm: true,
|
||||
label: confirmLabelMap['Regenerate Imposter'],
|
||||
handler: (id) => {
|
||||
avatarRequest
|
||||
.deleteImposter({ avatarId: id })
|
||||
.then((args) => {
|
||||
showAvatarDialog(id);
|
||||
return args;
|
||||
})
|
||||
.finally(() => {
|
||||
avatarRequest
|
||||
.createImposter({ avatarId: id })
|
||||
.then((args) => {
|
||||
toast.success(
|
||||
t('message.avatar.impostor_regenerated')
|
||||
);
|
||||
return args;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const commandMap = buildCommandMap();
|
||||
|
||||
// Callbacks for string-type commands (delegated to component)
|
||||
let componentCallbacks = {};
|
||||
|
||||
/**
|
||||
* Register component-level callbacks for string-type commands.
|
||||
* @param {object} callbacks
|
||||
*/
|
||||
function registerCallbacks(callbacks) {
|
||||
componentCallbacks = callbacks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatch an avatar dialog command.
|
||||
* @param {string} command
|
||||
*/
|
||||
function avatarDialogCommand(command) {
|
||||
const D = avatarDialog.value;
|
||||
const entry = commandMap[command];
|
||||
|
||||
if (!entry) {
|
||||
return;
|
||||
}
|
||||
|
||||
// String entry => delegate to component callback
|
||||
if (typeof entry === 'string') {
|
||||
const cb = componentCallbacks[entry];
|
||||
if (cb) {
|
||||
cb();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Direct function
|
||||
if (typeof entry === 'function') {
|
||||
entry();
|
||||
return;
|
||||
}
|
||||
|
||||
// Confirmed command
|
||||
if (entry.confirm) {
|
||||
const displayLabel =
|
||||
typeof entry.label === 'function' ? entry.label() : command;
|
||||
modalStore
|
||||
.confirm({
|
||||
title: t('confirm.title'),
|
||||
description: t('confirm.command_question', {
|
||||
command: displayLabel
|
||||
})
|
||||
})
|
||||
.then(({ ok }) => {
|
||||
if (ok) {
|
||||
entry.handler(D.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
cropDialogOpen,
|
||||
cropDialogFile,
|
||||
changeAvatarImageLoading,
|
||||
avatarDialogCommand,
|
||||
onFileChangeAvatarImage,
|
||||
onCropConfirmAvatar,
|
||||
registerCallbacks
|
||||
};
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
403
src/components/dialogs/GroupDialog/GroupDialogInfoTab.vue
Normal file
403
src/components/dialogs/GroupDialog/GroupDialogInfoTab.vue
Normal file
@@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<div>
|
||||
<img
|
||||
v-if="!groupDialog.loading"
|
||||
:src="groupDialog.ref.bannerUrl"
|
||||
class="cursor-pointer"
|
||||
style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: var(--radius-md)"
|
||||
@click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<div class="flex flex-wrap items-start px-2.5" style="max-height: none">
|
||||
<span v-if="groupDialog.instances.length" style="font-size: 12px; font-weight: bold; margin: 6px">
|
||||
{{ t('dialog.group.info.instances') }}
|
||||
</span>
|
||||
<div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
|
||||
<div style="margin: 6px 0" class="flex items-center">
|
||||
<Location :location="room.tag" class="text-sm" />
|
||||
<InstanceActionBar
|
||||
class="ml-1"
|
||||
:location="room.tag"
|
||||
:currentlocation="lastLocation.location"
|
||||
:instance="room.ref"
|
||||
:friendcount="room.friendCount"
|
||||
refresh-tooltip="Refresh player count"
|
||||
:on-refresh="() => refreshInstancePlayerCount(room.tag)" />
|
||||
</div>
|
||||
<div
|
||||
v-if="room.users.length"
|
||||
class="flex flex-wrap items-start"
|
||||
style="margin: 8px 0; padding: 0; max-height: unset">
|
||||
<div
|
||||
v-for="user in room.users"
|
||||
:key="user.id"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
|
||||
@click="showUserDialog(user.id)">
|
||||
<div class="relative inline-block flex-none size-9 mr-2.5" :class="userStatusClass(user)">
|
||||
<img class="size-full rounded-full object-cover" :src="userImage(user)" loading="lazy" />
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
:style="{ color: user.$userColour }"
|
||||
v-text="user.displayName" />
|
||||
<span v-if="user.location === 'traveling'" class="block truncate text-xs">
|
||||
<Spinner class="inline-block mr-1" />
|
||||
<Timer :epoch="user.$travelingToTime" />
|
||||
</span>
|
||||
<span v-else class="block truncate text-xs">
|
||||
<Timer :epoch="user.$location_at" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.group.info.announcement') }}</span>
|
||||
<span style="display: block" v-text="groupDialog.announcement.title" />
|
||||
<div v-if="groupDialog.announcement.imageUrl" style="display: inline-block; margin-right: 6px">
|
||||
<img
|
||||
:src="groupDialog.announcement.imageUrl"
|
||||
class="cursor-pointer"
|
||||
style="
|
||||
flex: none;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: var(--radius-md);
|
||||
object-fit: cover;
|
||||
"
|
||||
@click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<pre
|
||||
class="text-xs"
|
||||
style="
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
margin: 0;
|
||||
"
|
||||
>{{ groupDialog.announcement.text || '-' }}</pre
|
||||
>
|
||||
<br />
|
||||
<div v-if="groupDialog.announcement.id" class="text-xs" style="float: right; margin-left: 6px">
|
||||
<TooltipWrapper v-if="groupDialog.announcement.roleIds.length" side="top">
|
||||
<template #content>
|
||||
<span>{{ t('dialog.group.posts.visibility') }}</span>
|
||||
<br />
|
||||
<template v-for="roleId in groupDialog.announcement.roleIds" :key="roleId">
|
||||
<template v-for="role in groupDialog.ref.roles" :key="roleId + role.id"
|
||||
><span v-if="role.id === roleId" v-text="role.name"
|
||||
/></template>
|
||||
<span
|
||||
v-if="
|
||||
groupDialog.announcement.roleIds.indexOf(roleId) <
|
||||
groupDialog.announcement.roleIds.length - 1
|
||||
">
|
||||
,
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
<Eye style="margin-right: 6px" />
|
||||
</TooltipWrapper>
|
||||
<DisplayName :userid="groupDialog.announcement.authorId" style="margin-right: 6px" />
|
||||
<span v-if="groupDialog.announcement.editorId" style="margin-right: 6px">
|
||||
({{ t('dialog.group.posts.edited_by') }}
|
||||
<DisplayName :userid="groupDialog.announcement.editorId" />)
|
||||
</span>
|
||||
<TooltipWrapper side="bottom">
|
||||
<template #content>
|
||||
<span
|
||||
>{{ t('dialog.group.posts.created_at') }}
|
||||
{{ formatDateFilter(groupDialog.announcement.createdAt, 'long') }}</span
|
||||
>
|
||||
<template v-if="groupDialog.announcement.updatedAt !== groupDialog.announcement.createdAt">
|
||||
<br />
|
||||
<span
|
||||
>{{ t('dialog.group.posts.edited_at') }}
|
||||
{{ formatDateFilter(groupDialog.announcement.updatedAt, 'long') }}</span
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
<Timer :epoch="Date.parse(groupDialog.announcement.updatedAt)" />
|
||||
</TooltipWrapper>
|
||||
<template v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
|
||||
<TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
style="margin-left: 6px; padding: 0"
|
||||
@click="showGroupPostEditDialog(groupDialog.id, groupDialog.announcement)"></Button>
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper side="top" :content="t('dialog.group.posts.delete_tooltip')">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
style="margin-left: 6px; padding: 0"
|
||||
@click="confirmDeleteGroupPost(groupDialog.announcement)"></Button>
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.group.info.rules') }}</span>
|
||||
<pre
|
||||
class="text-xs"
|
||||
style="font-family: inherit; font-size: 12px; white-space: pre-wrap; margin: 0 0.5em 0 0"
|
||||
>{{ groupDialog.ref.rules || '-' }}</pre
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1" style="overflow: visible">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.group.info.upcoming_events')
|
||||
}}</span>
|
||||
<template v-if="upcomingCalenderEvents.length > 0">
|
||||
<br />
|
||||
<div class="grid-view flex flex-wrap gap-4 overflow-y-auto max-h-[360px] py-2.5">
|
||||
<GroupCalendarEventCard
|
||||
v-for="value in upcomingCalenderEvents"
|
||||
:key="value.id"
|
||||
:event="value"
|
||||
:is-following="value.userInterest?.isFollowing"
|
||||
@update-following-calendar-data="updateFollowingCalendarData"
|
||||
mode="grid"
|
||||
card-class="group-dialog-grid-card" />
|
||||
</div>
|
||||
</template>
|
||||
<span v-else class="block truncate text-xs">-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1" style="overflow: visible">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.group.info.past_events') }}</span>
|
||||
<template v-if="pastCalenderEvents.length > 0">
|
||||
<br />
|
||||
<div class="grid-view flex flex-wrap gap-4 overflow-y-auto max-h-[360px] py-2.5">
|
||||
<GroupCalendarEventCard
|
||||
v-for="value in pastCalenderEvents"
|
||||
:key="value.id"
|
||||
:event="value"
|
||||
:is-following="value.userInterest?.isFollowing"
|
||||
@update-following-calendar-data="updateFollowingCalendarData"
|
||||
mode="grid"
|
||||
card-class="group-dialog-grid-card" />
|
||||
</div>
|
||||
</template>
|
||||
<span v-else class="block truncate text-xs">-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.group.info.members') }}</span>
|
||||
<div class="block truncate text-xs">
|
||||
{{ groupDialog.ref.memberCount }} ({{ groupDialog.ref.onlineMemberCount }})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.group.info.created_at') }}</span>
|
||||
<span class="block truncate text-xs">{{ formatDateFilter(groupDialog.ref.createdAt, 'long') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="showPreviousInstancesListDialog(groupDialog.ref)">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
style="display: flex; justify-content: space-between; align-items: center">
|
||||
<span>
|
||||
{{ t('dialog.group.info.last_visited') }}
|
||||
</span>
|
||||
<TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
|
||||
<MoreHorizontal style="margin-right: 16px" />
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<span class="block truncate text-xs">{{ formatDateFilter(groupDialog.lastVisit, 'long') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.group.info.links') }}</span>
|
||||
<div
|
||||
v-if="groupDialog.ref.links && groupDialog.ref.links.length > 0"
|
||||
style="margin-top: 6px"
|
||||
class="flex">
|
||||
<template v-for="(link, index) in groupDialog.ref.links" :key="index">
|
||||
<TooltipWrapper v-if="link">
|
||||
<template #content>
|
||||
<span v-text="link" />
|
||||
</template>
|
||||
<img
|
||||
:src="getFaviconUrl(link)"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click.stop="openExternalLink(link)"
|
||||
loading="lazy" />
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else class="block truncate text-xs">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex justify-between w-full">
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-1/2">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.group.info.url') }}</span>
|
||||
<span class="block truncate text-xs"
|
||||
>{{ groupDialog.ref.$url }}
|
||||
<TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
|
||||
<Button
|
||||
class="rounded-full ml-1 text-xs"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="copyToClipboard(groupDialog.ref.$url)"
|
||||
><Copy class="h-4 w-4" />
|
||||
</Button> </TooltipWrapper
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-1/2">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.group.info.id') }}</span>
|
||||
<span class="block truncate text-xs"
|
||||
>{{ groupDialog.id }}
|
||||
<TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
|
||||
<Button
|
||||
class="rounded-full ml-1 text-xs"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="copyToClipboard(groupDialog.id)"
|
||||
><Copy class="h-4 w-4" />
|
||||
</Button> </TooltipWrapper
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="groupDialog.ref.membershipStatus === 'member'"
|
||||
class="border-t border-border"
|
||||
style="width: 100%; margin-top: 8px">
|
||||
<div style="width: 100%; display: flex; margin-top: 8px">
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.group.info.joined_at')
|
||||
}}</span>
|
||||
<span class="block truncate text-xs">{{
|
||||
formatDateFilter(groupDialog.ref.myMember.joinedAt, 'long')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.group.info.roles')
|
||||
}}</span>
|
||||
<span v-if="groupDialog.memberRoles.length === 0" class="block truncate text-xs"> - </span>
|
||||
<span v-else class="block truncate text-xs">
|
||||
<template v-for="(role, rIndex) in groupDialog.memberRoles" :key="rIndex">
|
||||
<TooltipWrapper side="top">
|
||||
<template #content>
|
||||
<span>{{ t('dialog.group.info.role') }} {{ role.name }}</span>
|
||||
<br />
|
||||
<span
|
||||
>{{ t('dialog.group.info.role_description') }} {{ role.description }}</span
|
||||
>
|
||||
<br />
|
||||
<span v-if="role.updatedAt"
|
||||
>{{ t('dialog.group.info.role_updated_at') }}
|
||||
{{ formatDateFilter(role.updatedAt, 'long') }}</span
|
||||
>
|
||||
<span v-else
|
||||
>{{ t('dialog.group.info.role_created_at') }}
|
||||
{{ formatDateFilter(role.createdAt, 'long') }}</span
|
||||
>
|
||||
<br />
|
||||
<span>{{ t('dialog.group.info.role_permissions') }}</span>
|
||||
<br />
|
||||
<template v-for="(permission, pIndex) in role.permissions" :key="pIndex">
|
||||
<span>{{ permission }}</span>
|
||||
<br />
|
||||
</template>
|
||||
</template>
|
||||
<span
|
||||
>{{ role.name
|
||||
}}{{ rIndex < groupDialog.memberRoles.length - 1 ? ', ' : '' }}</span
|
||||
>
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Copy, Eye, MoreHorizontal } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import {
|
||||
copyToClipboard,
|
||||
formatDateFilter,
|
||||
getFaviconUrl,
|
||||
hasGroupPermission,
|
||||
openExternalLink,
|
||||
refreshInstancePlayerCount,
|
||||
userImage,
|
||||
userStatusClass
|
||||
} from '../../../shared/utils';
|
||||
import { useGalleryStore, useGroupStore, useInstanceStore, useLocationStore, useUserStore } from '../../../stores';
|
||||
import { useGroupCalendarEvents } from './useGroupCalendarEvents';
|
||||
|
||||
import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
|
||||
import InstanceActionBar from '../../InstanceActionBar.vue';
|
||||
|
||||
const props = defineProps({
|
||||
showGroupPostEditDialog: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
confirmDeleteGroupPost: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { showUserDialog } = useUserStore();
|
||||
const { groupDialog } = storeToRefs(useGroupStore());
|
||||
const { lastLocation } = storeToRefs(useLocationStore());
|
||||
const { showFullscreenImageDialog } = useGalleryStore();
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
const { pastCalenderEvents, upcomingCalenderEvents, updateFollowingCalendarData } =
|
||||
useGroupCalendarEvents(groupDialog);
|
||||
|
||||
/**
|
||||
*
|
||||
* @param groupRef
|
||||
*/
|
||||
function showPreviousInstancesListDialog(groupRef) {
|
||||
instanceStore.showPreviousInstancesListDialog('group', groupRef);
|
||||
}
|
||||
</script>
|
||||
242
src/components/dialogs/GroupDialog/GroupDialogMembersTab.vue
Normal file
242
src/components/dialogs/GroupDialog/GroupDialogMembersTab.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<template v-if="groupDialog.visible">
|
||||
<span
|
||||
v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')"
|
||||
style="font-weight: bold; font-size: 16px"
|
||||
>{{ t('dialog.group.members.all_members') }}</span
|
||||
>
|
||||
<span v-else style="font-weight: bold; font-size: 16px">{{ t('dialog.group.members.friends_only') }}</span>
|
||||
<div style="margin-top: 8px">
|
||||
<Button
|
||||
class="rounded-full h-6 w-6"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
:loading="isGroupMembersLoading"
|
||||
circle
|
||||
@click="loadAllGroupMembers">
|
||||
<Spinner v-if="isGroupMembersLoading" /><RefreshCcw v-else
|
||||
/></Button>
|
||||
<Button
|
||||
class="rounded-full h-6 w-6 ml-2"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
style="margin-left: 6px"
|
||||
@click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)">
|
||||
<Download class="h-4 w-4" />
|
||||
</Button>
|
||||
<span v-if="groupDialog.memberSearch.length" style="font-size: 14px; margin-left: 6px; margin-right: 6px"
|
||||
>{{ groupDialog.memberSearchResults.length }}/{{ groupDialog.ref.memberCount }}</span
|
||||
>
|
||||
<span v-else style="font-size: 14px; margin-left: 6px; margin-right: 6px"
|
||||
>{{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}</span
|
||||
>
|
||||
<div
|
||||
v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')"
|
||||
style="float: right"
|
||||
class="flex items-center">
|
||||
<span style="margin-right: 6px">{{ t('dialog.group.members.sort_by') }}</span>
|
||||
<Select
|
||||
v-model="groupDialogMemberSortValue"
|
||||
:disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
|
||||
<SelectTrigger class="h-8 w-45 mr-1">
|
||||
<SelectValue :placeholder="t('dialog.group.members.sort_by')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="item in groupDialogSortingOptions" :key="item.value" :value="item.value">
|
||||
{{ t(item.name) }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span class="ml-2 mr-1">{{ t('dialog.group.members.filter') }}</span>
|
||||
<div style="display: inline-block; width: 220px">
|
||||
<VirtualCombobox
|
||||
v-model="groupDialogMemberFilterKey"
|
||||
:groups="groupDialogMemberFilterGroups"
|
||||
:disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"
|
||||
:placeholder="t('dialog.group.members.filter')"
|
||||
:search-placeholder="t('dialog.group.members.search')"
|
||||
:clearable="false"
|
||||
:close-on-select="true">
|
||||
<template #trigger="{ text }">
|
||||
<span class="truncate">
|
||||
{{ text || t('dialog.group.members.filter') }}
|
||||
</span>
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
</div>
|
||||
</div>
|
||||
<InputGroupField
|
||||
v-model="groupDialog.memberSearch"
|
||||
:disabled="!hasGroupPermission(groupDialog.ref, 'group-members-manage')"
|
||||
clearable
|
||||
size="sm"
|
||||
:placeholder="t('dialog.group.members.search')"
|
||||
style="margin-top: 8px; margin-bottom: 8px"
|
||||
@input="groupMembersSearch" />
|
||||
</div>
|
||||
<div
|
||||
v-if="groupDialog.memberSearch.length"
|
||||
class="flex flex-wrap items-start"
|
||||
style="margin-top: 8px; overflow: auto; max-height: 250px; min-width: 130px">
|
||||
<div
|
||||
v-for="user in groupDialog.memberSearchResults"
|
||||
:key="user.id"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
|
||||
@click="showUserDialog(user.userId)">
|
||||
<div class="relative inline-block flex-none size-9 mr-2.5">
|
||||
<img class="size-full rounded-full object-cover" :src="userImage(user.user)" loading="lazy" />
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
:style="{ color: user.user?.$userColour }"
|
||||
v-text="user.user?.displayName" />
|
||||
<span class="block truncate text-xs">
|
||||
<template v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
|
||||
<TooltipWrapper
|
||||
v-if="user.isRepresenting"
|
||||
side="top"
|
||||
:content="t('dialog.group.members.representing')">
|
||||
<Tag style="margin-right: 6px" />
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
|
||||
<template #content>
|
||||
<span>{{ t('dialog.group.members.visibility') }} {{ user.visibility }}</span>
|
||||
</template>
|
||||
<Eye style="margin-right: 6px" />
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper
|
||||
v-if="!user.isSubscribedToAnnouncements"
|
||||
side="top"
|
||||
:content="t('dialog.group.members.unsubscribed_announcements')">
|
||||
<MessageSquare style="margin-right: 6px" />
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper v-if="user.managerNotes" side="top">
|
||||
<template #content>
|
||||
<span>{{ t('dialog.group.members.manager_notes') }}</span>
|
||||
<br />
|
||||
<span>{{ user.managerNotes }}</span>
|
||||
</template>
|
||||
<Pencil style="margin-right: 6px" />
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
<template v-for="roleId in user.roleIds" :key="roleId">
|
||||
<template v-for="role in groupDialog.ref.roles" :key="role.id + roleId"
|
||||
><span v-if="role.id === roleId" v-text="role.name" /></template
|
||||
><template v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1"
|
||||
><span>, </span></template
|
||||
>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
v-else-if="groupDialog.members.length > 0"
|
||||
class="infinite-list flex flex-wrap items-start"
|
||||
style="margin-top: 8px; overflow: auto; max-height: 250px; min-width: 130px">
|
||||
<li
|
||||
v-for="user in groupDialog.members"
|
||||
:key="user.id"
|
||||
class="infinite-list-item box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
|
||||
@click="showUserDialog(user.userId)">
|
||||
<div class="relative inline-block flex-none size-9 mr-2.5">
|
||||
<img class="size-full rounded-full object-cover" :src="userImage(user.user)" loading="lazy" />
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
:style="{ color: user.user?.$userColour }"
|
||||
v-text="user.user?.displayName" />
|
||||
<span class="block truncate text-xs">
|
||||
<template v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
|
||||
<TooltipWrapper
|
||||
v-if="user.isRepresenting"
|
||||
side="top"
|
||||
:content="t('dialog.group.members.representing')">
|
||||
<Tag style="margin-right: 6px" />
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
|
||||
<template #content>
|
||||
<span>{{ t('dialog.group.members.visibility') }} {{ user.visibility }}</span>
|
||||
</template>
|
||||
<Eye style="margin-right: 6px" />
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper
|
||||
v-if="!user.isSubscribedToAnnouncements"
|
||||
side="top"
|
||||
:content="t('dialog.group.members.unsubscribed_announcements')">
|
||||
<MessageSquare style="margin-right: 6px" />
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper v-if="user.managerNotes" side="top">
|
||||
<template #content>
|
||||
<span>{{ t('dialog.group.members.manager_notes') }}</span>
|
||||
<br />
|
||||
<span>{{ user.managerNotes }}</span>
|
||||
</template>
|
||||
<Pencil style="margin-right: 6px" />
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
<template v-for="roleId in user.roleIds" :key="roleId">
|
||||
<template v-for="role in groupDialog.ref.roles" :key="roleId + role.id"
|
||||
><span v-if="role.id === roleId" v-text="role.name" /></template
|
||||
><template v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1"
|
||||
><span> </span></template
|
||||
>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<div
|
||||
v-if="!isGroupMembersDone"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer"
|
||||
style="width: 100%; height: 45px; text-align: center"
|
||||
@click="loadMoreGroupMembers">
|
||||
<div v-if="!isGroupMembersLoading" class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.group.members.load_more')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Download, Eye, MessageSquare, Pencil, RefreshCcw, Tag } from 'lucide-vue-next';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { VirtualCombobox } from '@/components/ui/virtual-combobox';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { downloadAndSaveJson, hasGroupPermission, userImage } from '../../../shared/utils';
|
||||
import { useGroupStore, useUserStore } from '../../../stores';
|
||||
import { groupDialogSortingOptions } from '../../../shared/constants';
|
||||
import { useGroupMembers } from './useGroupMembers';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { showUserDialog } = useUserStore();
|
||||
const { currentUser } = storeToRefs(useUserStore());
|
||||
const { groupDialog } = storeToRefs(useGroupStore());
|
||||
const { applyGroupMember, handleGroupMember } = useGroupStore();
|
||||
|
||||
const {
|
||||
isGroupMembersDone,
|
||||
isGroupMembersLoading,
|
||||
groupDialogMemberSortValue,
|
||||
groupDialogMemberFilterKey,
|
||||
groupDialogMemberFilterGroups,
|
||||
groupMembersSearch,
|
||||
getGroupDialogGroupMembers,
|
||||
loadMoreGroupMembers,
|
||||
loadAllGroupMembers
|
||||
} = useGroupMembers(groupDialog, { currentUser, applyGroupMember, handleGroupMember, t });
|
||||
|
||||
defineExpose({
|
||||
getGroupDialogGroupMembers
|
||||
});
|
||||
</script>
|
||||
80
src/components/dialogs/GroupDialog/GroupDialogPhotosTab.vue
Normal file
80
src/components/dialogs/GroupDialog/GroupDialogPhotosTab.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
:disabled="isGroupGalleryLoading"
|
||||
@click="getGroupGalleries">
|
||||
<Spinner v-if="isGroupGalleryLoading" />
|
||||
<RefreshCw v-else />
|
||||
</Button>
|
||||
<TabsUnderline
|
||||
v-model="groupDialogGalleryCurrentName"
|
||||
:items="groupGalleryTabs"
|
||||
:unmount-on-hide="false"
|
||||
class="mt-2.5">
|
||||
<template
|
||||
v-for="(gallery, index) in groupDialog.ref.galleries"
|
||||
:key="`label-${index}`"
|
||||
v-slot:[`label-${index}`]>
|
||||
<span style="font-weight: bold; font-size: 16px" v-text="gallery.name" />
|
||||
<i class="x-status-icon" style="margin-left: 6px" :class="groupGalleryStatus(gallery)" />
|
||||
<span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
|
||||
groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0
|
||||
}}</span>
|
||||
</template>
|
||||
<template
|
||||
v-for="(gallery, index) in groupDialog.ref.galleries"
|
||||
:key="`content-${index}`"
|
||||
v-slot:[String(index)]>
|
||||
<span class="text-muted-foreground" style="padding: 8px" v-text="gallery.description" />
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
">
|
||||
<Card
|
||||
v-for="image in groupDialog.galleries[gallery.id]"
|
||||
:key="image.id"
|
||||
class="p-0 overflow-hidden transition-shadow hover:shadow-md">
|
||||
<img
|
||||
:src="image.imageUrl"
|
||||
:class="[' cursor-pointer', 'max-w-full', 'max-h-full']"
|
||||
@click="showFullscreenImageDialog(image.imageUrl)"
|
||||
loading="lazy" />
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
</TabsUnderline>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { RefreshCw } from 'lucide-vue-next';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { TabsUnderline } from '@/components/ui/tabs';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import { useGalleryStore, useGroupStore } from '../../../stores';
|
||||
import { useGroupGalleries } from './useGroupGalleries';
|
||||
|
||||
const { groupDialog } = storeToRefs(useGroupStore());
|
||||
const { showFullscreenImageDialog } = useGalleryStore();
|
||||
|
||||
const {
|
||||
isGroupGalleryLoading,
|
||||
groupDialogGalleryCurrentName,
|
||||
groupGalleryTabs,
|
||||
groupGalleryStatus,
|
||||
getGroupGalleries
|
||||
} = useGroupGalleries(groupDialog);
|
||||
|
||||
defineExpose({
|
||||
getGroupGalleries
|
||||
});
|
||||
</script>
|
||||
136
src/components/dialogs/GroupDialog/GroupDialogPostsTab.vue
Normal file
136
src/components/dialogs/GroupDialog/GroupDialogPostsTab.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<template v-if="groupDialog.visible">
|
||||
<span style="margin-right: 8px; vertical-align: top"
|
||||
>{{ t('dialog.group.posts.posts_count') }} {{ groupDialog.posts.length }}</span
|
||||
>
|
||||
<InputGroupField
|
||||
v-model="groupDialog.postsSearch"
|
||||
clearable
|
||||
size="sm"
|
||||
:placeholder="t('dialog.group.posts.search_placeholder')"
|
||||
style="width: 89%; margin-bottom: 8px"
|
||||
@input="updateGroupPostSearch" />
|
||||
<div class="flex flex-wrap items-start">
|
||||
<div
|
||||
v-for="post in groupDialog.postsFiltered"
|
||||
:key="post.id"
|
||||
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span style="display: block" v-text="post.title" />
|
||||
<div v-if="post.imageUrl" style="display: inline-block; margin-right: 6px">
|
||||
<img
|
||||
:src="post.imageUrl"
|
||||
class="cursor-pointer"
|
||||
style="
|
||||
flex: none;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: var(--radius-md);
|
||||
object-fit: cover;
|
||||
"
|
||||
@click="showFullscreenImageDialog(post.imageUrl)"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<pre
|
||||
class="text-xs"
|
||||
style="
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
margin: 0;
|
||||
"
|
||||
>{{ post.text || '-' }}</pre
|
||||
>
|
||||
<br />
|
||||
<div v-if="post.authorId" class="text-xs" style="float: right; margin-left: 6px">
|
||||
<TooltipWrapper v-if="post.roleIds.length" side="top">
|
||||
<template #content>
|
||||
<span>{{ t('dialog.group.posts.visibility') }}</span>
|
||||
<br />
|
||||
<template v-for="roleId in post.roleIds" :key="roleId">
|
||||
<template v-for="role in groupDialog.ref.roles" :key="role.id + roleId"
|
||||
><span v-if="role.id === roleId" v-text="role.name" />
|
||||
</template>
|
||||
<template v-if="post.roleIds.indexOf(roleId) < post.roleIds.length - 1"
|
||||
><span>, </span></template
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
<Eye style="margin-right: 6px" />
|
||||
</TooltipWrapper>
|
||||
<DisplayName :userid="post.authorId" style="margin-right: 6px" />
|
||||
<span v-if="post.editorId" style="margin-right: 6px"
|
||||
>({{ t('dialog.group.posts.edited_by') }} <DisplayName :userid="post.editorId" />)</span
|
||||
>
|
||||
<TooltipWrapper side="bottom">
|
||||
<template #content>
|
||||
<span
|
||||
>{{ t('dialog.group.posts.created_at') }}
|
||||
{{ formatDateFilter(post.createdAt, 'long') }}</span
|
||||
>
|
||||
<template v-if="post.updatedAt !== post.createdAt">
|
||||
<br />
|
||||
<span
|
||||
>{{ t('dialog.group.posts.edited_at') }}
|
||||
{{ formatDateFilter(post.updatedAt, 'long') }}</span
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
<Timer :epoch="Date.parse(post.updatedAt)" />
|
||||
</TooltipWrapper>
|
||||
<template v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
|
||||
<TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
|
||||
variant="ghost"
|
||||
@click="showGroupPostEditDialog(groupDialog.id, post)"
|
||||
><Pencil class="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper side="top" :content="t('dialog.group.posts.delete_tooltip')">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
|
||||
variant="ghost"
|
||||
@click="confirmDeleteGroupPost(post)"
|
||||
><Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Eye, Pencil, Trash2 } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { formatDateFilter, hasGroupPermission } from '../../../shared/utils';
|
||||
import { useGalleryStore, useGroupStore } from '../../../stores';
|
||||
|
||||
const props = defineProps({
|
||||
showGroupPostEditDialog: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
confirmDeleteGroupPost: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { groupDialog } = storeToRefs(useGroupStore());
|
||||
const { updateGroupPostSearch } = useGroupStore();
|
||||
const { showFullscreenImageDialog } = useGalleryStore();
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
113
src/components/dialogs/GroupDialog/GroupModerationBansTab.vue
Normal file
113
src/components/dialogs/GroupDialog/GroupModerationBansTab.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div style="margin-top: 8px">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex gap-2 items-center">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
:disabled="loading"
|
||||
@click="$emit('refresh')">
|
||||
<Spinner v-if="loading" />
|
||||
<RefreshCw v-else />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
@click="$emit('select-all', tableData.data)"
|
||||
>{{ t('dialog.group_member_moderation.select_all') }}</Button
|
||||
>
|
||||
<span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
|
||||
tableData.data.length
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 items-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!tableData.data.length"
|
||||
@click="$emit('export')"
|
||||
>{{ t('dialog.group_member_moderation.export_bans') }}</Button
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!hasGroupPermission(groupRef, 'group-bans-manage')"
|
||||
@click="$emit('import')"
|
||||
>{{ t('dialog.group_member_moderation.import_bans') }}</Button
|
||||
>
|
||||
<InputGroupField
|
||||
v-model="tableData.filters[0].value"
|
||||
clearable
|
||||
size="sm"
|
||||
class="w-80"
|
||||
:placeholder="t('dialog.group.members.search')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTableLayout
|
||||
style="margin-top: 8px"
|
||||
:table="tanstackTable"
|
||||
:loading="loading"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="totalItems" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { RefreshCw } from 'lucide-vue-next';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { DataTableLayout } from '@/components/ui/data-table';
|
||||
import { hasGroupPermission } from '@/shared/utils';
|
||||
import { createColumns } from './groupMemberModerationBansColumns.jsx';
|
||||
import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
|
||||
|
||||
const props = defineProps({
|
||||
loading: { type: Boolean, default: false },
|
||||
tableData: { type: Object, required: true },
|
||||
groupRef: { type: Object, default: () => ({}) },
|
||||
pageSizes: { type: Array, required: true },
|
||||
columnContext: { type: Object, required: true }
|
||||
});
|
||||
|
||||
defineEmits(['refresh', 'select-all', 'export', 'import']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const bansSearch = computed(() =>
|
||||
String(props.tableData.filters?.[0]?.value ?? '')
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
);
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
const rows = Array.isArray(props.tableData.data) ? props.tableData.data : [];
|
||||
const q = bansSearch.value;
|
||||
if (!q) {
|
||||
return rows;
|
||||
}
|
||||
return rows.filter((r) => {
|
||||
const name = (r?.$displayName ?? r?.user?.displayName ?? '').toString().toLowerCase();
|
||||
return name.includes(q);
|
||||
});
|
||||
});
|
||||
|
||||
const columns = computed(() => createColumns(props.columnContext));
|
||||
|
||||
const { table: tanstackTable } = useVrcxVueTable({
|
||||
persistKey: 'group-moderation:bans',
|
||||
get data() {
|
||||
return filteredRows.value;
|
||||
},
|
||||
columns,
|
||||
getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
|
||||
initialPagination: { pageIndex: 0, pageSize: props.tableData.pageSize ?? 15 }
|
||||
});
|
||||
|
||||
const totalItems = computed(() => tanstackTable.getFilteredRowModel().rows.length);
|
||||
</script>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="name">{{ t('dialog.group_member_moderation.user_id') }}</span>
|
||||
<br />
|
||||
<InputGroupField
|
||||
:model-value="selectUserId"
|
||||
size="sm"
|
||||
style="margin-top: 6px"
|
||||
:placeholder="t('dialog.group_member_moderation.user_id_placeholder')"
|
||||
clearable
|
||||
@update:model-value="$emit('update:selectUserId', $event)" />
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
style="margin-top: 8px"
|
||||
:disabled="!selectUserId"
|
||||
@click="$emit('select-user')"
|
||||
>{{ t('dialog.group_member_moderation.select_user') }}</Button
|
||||
>
|
||||
<br />
|
||||
<br />
|
||||
<span class="name">{{ t('dialog.group_member_moderation.selected_users') }}</span>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="outline"
|
||||
style="margin-left: 6px"
|
||||
@click="$emit('clear-all')">
|
||||
<Trash2 />
|
||||
</Button>
|
||||
<br />
|
||||
<Badge
|
||||
v-for="user in selectedUsersArray"
|
||||
:key="user.id"
|
||||
variant="outline"
|
||||
style="margin-right: 6px; margin-top: 6px">
|
||||
<TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
|
||||
<template #content>
|
||||
<span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
|
||||
</template>
|
||||
<AlertTriangle style="margin-left: 3px; display: inline-block" />
|
||||
</TooltipWrapper>
|
||||
<span
|
||||
v-text="user.user?.displayName || user.userId"
|
||||
style="font-weight: bold; margin-left: 6px"></span>
|
||||
<button
|
||||
type="button"
|
||||
style="
|
||||
margin-left: 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="$emit('delete-user', user)">
|
||||
<X class="h-3 w-3" />
|
||||
</button>
|
||||
</Badge>
|
||||
<br />
|
||||
<br />
|
||||
<span class="name">{{ t('dialog.group_member_moderation.notes') }}</span>
|
||||
<InputGroupTextareaField
|
||||
:model-value="note"
|
||||
class="text-xs"
|
||||
:rows="2"
|
||||
:placeholder="t('dialog.group_member_moderation.note_placeholder')"
|
||||
style="margin-top: 6px"
|
||||
input-class="resize-none min-h-0"
|
||||
@update:model-value="$emit('update:note', $event)" />
|
||||
<br />
|
||||
<br />
|
||||
<span class="name">{{ t('dialog.group_member_moderation.selected_roles') }}</span>
|
||||
<br />
|
||||
<Select :model-value="selectedRoles" multiple @update:model-value="$emit('update:selectedRoles', $event)">
|
||||
<SelectTrigger style="margin-top: 6px">
|
||||
<SelectValue :placeholder="t('dialog.group_member_moderation.choose_roles_placeholder')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="role in groupRef.roles"
|
||||
:key="role.id"
|
||||
:value="role.id">
|
||||
{{ role.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<br />
|
||||
<br />
|
||||
<span class="name">{{ t('dialog.group_member_moderation.actions') }}</span>
|
||||
<br />
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="
|
||||
Boolean(
|
||||
!selectedRoles.length ||
|
||||
progressCurrent ||
|
||||
!hasGroupPermission(groupRef, 'group-roles-assign')
|
||||
)
|
||||
"
|
||||
@click="$emit('add-roles')"
|
||||
>{{ t('dialog.group_member_moderation.add_roles') }}</Button
|
||||
>
|
||||
<Button
|
||||
variant="secondary"
|
||||
:disabled="
|
||||
Boolean(
|
||||
!selectedRoles.length ||
|
||||
progressCurrent ||
|
||||
!hasGroupPermission(groupRef, 'group-roles-assign')
|
||||
)
|
||||
"
|
||||
@click="$emit('remove-roles')"
|
||||
>{{ t('dialog.group_member_moderation.remove_roles') }}</Button
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="
|
||||
Boolean(
|
||||
progressCurrent ||
|
||||
!hasGroupPermission(groupRef, 'group-members-manage')
|
||||
)
|
||||
"
|
||||
@click="$emit('save-note')"
|
||||
>{{ t('dialog.group_member_moderation.save_note') }}</Button
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="
|
||||
Boolean(
|
||||
progressCurrent ||
|
||||
!hasGroupPermission(groupRef, 'group-members-remove')
|
||||
)
|
||||
"
|
||||
@click="$emit('kick')"
|
||||
>{{ t('dialog.group_member_moderation.kick') }}</Button
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="
|
||||
Boolean(
|
||||
progressCurrent ||
|
||||
!hasGroupPermission(groupRef, 'group-bans-manage')
|
||||
)
|
||||
"
|
||||
@click="$emit('ban')"
|
||||
>{{ t('dialog.group_member_moderation.ban') }}</Button
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="
|
||||
Boolean(
|
||||
progressCurrent ||
|
||||
!hasGroupPermission(groupRef, 'group-bans-manage')
|
||||
)
|
||||
"
|
||||
@click="$emit('unban')"
|
||||
>{{ t('dialog.group_member_moderation.unban') }}</Button
|
||||
>
|
||||
<span v-if="progressCurrent" style="margin-top: 8px">
|
||||
<Spinner class="inline-block ml-2 mr-2" />
|
||||
{{ t('dialog.group_member_moderation.progress') }} {{ progressCurrent }}/{{ progressTotal }}
|
||||
</span>
|
||||
<Button
|
||||
v-if="progressCurrent"
|
||||
variant="secondary"
|
||||
style="margin-left: 6px"
|
||||
@click="$emit('cancel-progress')"
|
||||
>{{ t('dialog.group_member_moderation.cancel') }}</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { AlertTriangle, Trash2, X } from 'lucide-vue-next';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { hasGroupPermission } from '@/shared/utils';
|
||||
|
||||
defineProps({
|
||||
selectUserId: { type: String, default: '' },
|
||||
selectedUsersArray: { type: Array, default: () => [] },
|
||||
selectedRoles: { type: Array, default: () => [] },
|
||||
note: { type: String, default: '' },
|
||||
progressCurrent: { type: Number, default: 0 },
|
||||
progressTotal: { type: Number, default: 0 },
|
||||
groupRef: { type: Object, default: () => ({}) }
|
||||
});
|
||||
|
||||
defineEmits([
|
||||
'update:selectUserId',
|
||||
'update:note',
|
||||
'update:selectedRoles',
|
||||
'select-user',
|
||||
'clear-all',
|
||||
'delete-user',
|
||||
'add-roles',
|
||||
'remove-roles',
|
||||
'save-note',
|
||||
'kick',
|
||||
'ban',
|
||||
'unban',
|
||||
'cancel-progress'
|
||||
]);
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
206
src/components/dialogs/GroupDialog/GroupModerationInvitesTab.vue
Normal file
206
src/components/dialogs/GroupDialog/GroupModerationInvitesTab.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div style="margin-top: 8px">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
:disabled="loading"
|
||||
@click="$emit('refresh')">
|
||||
<Spinner v-if="loading" />
|
||||
<RefreshCw v-else />
|
||||
</Button>
|
||||
<br />
|
||||
<TabsUnderline default-value="sent" :items="invitesTabs" :unmount-on-hide="false">
|
||||
<template #label-sent>
|
||||
<span style="font-weight: bold; font-size: 16px">{{
|
||||
t('dialog.group_member_moderation.sent_invites')
|
||||
}}</span>
|
||||
<span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
|
||||
invitesTable.data.length
|
||||
}}</span>
|
||||
</template>
|
||||
<template #label-join>
|
||||
<span style="font-weight: bold; font-size: 16px">{{
|
||||
t('dialog.group_member_moderation.join_requests')
|
||||
}}</span>
|
||||
<span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
|
||||
joinRequestsTable.data.length
|
||||
}}</span>
|
||||
</template>
|
||||
<template #label-blocked>
|
||||
<span style="font-weight: bold; font-size: 16px">{{
|
||||
t('dialog.group_member_moderation.blocked_requests')
|
||||
}}</span>
|
||||
<span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
|
||||
blockedTable.data.length
|
||||
}}</span>
|
||||
</template>
|
||||
<template #sent>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
@click="$emit('select-all', invitesTable.data)"
|
||||
>{{ t('dialog.group_member_moderation.select_all') }}</Button
|
||||
>
|
||||
<DataTableLayout
|
||||
style="margin-top: 8px"
|
||||
:table="invitesTanstackTable"
|
||||
:loading="loading"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="invitesTotalItems" />
|
||||
<br />
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="inviteActionDisabled"
|
||||
@click="$emit('delete-sent-invite')"
|
||||
>{{ t('dialog.group_member_moderation.delete_sent_invite') }}</Button
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #join>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
@click="$emit('select-all', joinRequestsTable.data)"
|
||||
>{{ t('dialog.group_member_moderation.select_all') }}</Button
|
||||
>
|
||||
<DataTableLayout
|
||||
style="margin-top: 8px"
|
||||
:table="joinRequestsTanstackTable"
|
||||
:loading="loading"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="joinRequestsTotalItems" />
|
||||
<br />
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="inviteActionDisabled"
|
||||
class="mr-2"
|
||||
@click="$emit('accept-invite-request')"
|
||||
>{{ t('dialog.group_member_moderation.accept_join_requests') }}</Button
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="inviteActionDisabled"
|
||||
class="mr-2"
|
||||
@click="$emit('reject-invite-request')"
|
||||
>{{ t('dialog.group_member_moderation.reject_join_requests') }}</Button
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="inviteActionDisabled"
|
||||
@click="$emit('block-join-request')"
|
||||
>{{ t('dialog.group_member_moderation.block_join_requests') }}</Button
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #blocked>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
@click="$emit('select-all', blockedTable.data)"
|
||||
>{{ t('dialog.group_member_moderation.select_all') }}</Button
|
||||
>
|
||||
<DataTableLayout
|
||||
style="margin-top: 8px"
|
||||
:table="blockedTanstackTable"
|
||||
:loading="loading"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="blockedTotalItems" />
|
||||
<br />
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="inviteActionDisabled"
|
||||
@click="$emit('delete-blocked-request')"
|
||||
>{{ t('dialog.group_member_moderation.delete_blocked_requests') }}</Button
|
||||
>
|
||||
</template>
|
||||
</TabsUnderline>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { RefreshCw } from 'lucide-vue-next';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { TabsUnderline } from '@/components/ui/tabs';
|
||||
import { DataTableLayout } from '@/components/ui/data-table';
|
||||
import { hasGroupPermission } from '@/shared/utils';
|
||||
import { createColumns as createInvitesColumns } from './groupMemberModerationInvitesColumns.jsx';
|
||||
import { createColumns as createJoinRequestsColumns } from './groupMemberModerationJoinRequestsColumns.jsx';
|
||||
import { createColumns as createBlockedColumns } from './groupMemberModerationBlockedColumns.jsx';
|
||||
import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
|
||||
|
||||
const props = defineProps({
|
||||
loading: { type: Boolean, default: false },
|
||||
invitesTable: { type: Object, required: true },
|
||||
joinRequestsTable: { type: Object, required: true },
|
||||
blockedTable: { type: Object, required: true },
|
||||
groupRef: { type: Object, default: () => ({}) },
|
||||
progressCurrent: { type: Number, default: 0 },
|
||||
pageSizes: { type: Array, required: true },
|
||||
columnContext: { type: Object, required: true }
|
||||
});
|
||||
|
||||
defineEmits([
|
||||
'refresh',
|
||||
'select-all',
|
||||
'delete-sent-invite',
|
||||
'accept-invite-request',
|
||||
'reject-invite-request',
|
||||
'block-join-request',
|
||||
'delete-blocked-request'
|
||||
]);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const invitesTabs = computed(() => [
|
||||
{ value: 'sent', label: t('dialog.group_member_moderation.sent_invites') },
|
||||
{ value: 'join', label: t('dialog.group_member_moderation.join_requests') },
|
||||
{ value: 'blocked', label: t('dialog.group_member_moderation.blocked_requests') }
|
||||
]);
|
||||
|
||||
const inviteActionDisabled = computed(() =>
|
||||
Boolean(props.progressCurrent || !hasGroupPermission(props.groupRef, 'group-invites-manage'))
|
||||
);
|
||||
|
||||
// ── Invites TanStack table ───────────────────────────────────
|
||||
const invitesColumns = computed(() => createInvitesColumns(props.columnContext));
|
||||
const { table: invitesTanstackTable } = useVrcxVueTable({
|
||||
persistKey: 'group-moderation:invites',
|
||||
get data() {
|
||||
return computed(() => props.invitesTable.data).value;
|
||||
},
|
||||
columns: invitesColumns,
|
||||
getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
|
||||
initialPagination: { pageIndex: 0, pageSize: props.invitesTable.pageSize ?? 15 }
|
||||
});
|
||||
const invitesTotalItems = computed(() => invitesTanstackTable.getFilteredRowModel().rows.length);
|
||||
|
||||
// ── Join Requests TanStack table ─────────────────────────────
|
||||
const joinRequestsColumns = computed(() => createJoinRequestsColumns(props.columnContext));
|
||||
const { table: joinRequestsTanstackTable } = useVrcxVueTable({
|
||||
persistKey: 'group-moderation:join-requests',
|
||||
get data() {
|
||||
return computed(() => props.joinRequestsTable.data).value;
|
||||
},
|
||||
columns: joinRequestsColumns,
|
||||
getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
|
||||
initialPagination: { pageIndex: 0, pageSize: props.joinRequestsTable.pageSize ?? 15 }
|
||||
});
|
||||
const joinRequestsTotalItems = computed(() => joinRequestsTanstackTable.getFilteredRowModel().rows.length);
|
||||
|
||||
// ── Blocked TanStack table ───────────────────────────────────
|
||||
const blockedColumns = computed(() => createBlockedColumns(props.columnContext));
|
||||
const { table: blockedTanstackTable } = useVrcxVueTable({
|
||||
persistKey: 'group-moderation:blocked',
|
||||
get data() {
|
||||
return computed(() => props.blockedTable.data).value;
|
||||
},
|
||||
columns: blockedColumns,
|
||||
getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
|
||||
initialPagination: { pageIndex: 0, pageSize: props.blockedTable.pageSize ?? 15 }
|
||||
});
|
||||
const blockedTotalItems = computed(() => blockedTanstackTable.getFilteredRowModel().rows.length);
|
||||
</script>
|
||||
115
src/components/dialogs/GroupDialog/GroupModerationLogsTab.vue
Normal file
115
src/components/dialogs/GroupDialog/GroupModerationLogsTab.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div style="margin-top: 8px">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
:disabled="loading"
|
||||
@click="$emit('refresh')">
|
||||
<Spinner v-if="loading" />
|
||||
<RefreshCw v-else />
|
||||
</Button>
|
||||
<span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
|
||||
tableData.data.length
|
||||
}}</span>
|
||||
<br />
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div>
|
||||
<Select v-model="selectedAuditLogTypes" multiple>
|
||||
<SelectTrigger style="margin: 8px 0; width: 250px">
|
||||
<SelectValue
|
||||
:placeholder="t('dialog.group_member_moderation.filter_type')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="type in auditLogTypes"
|
||||
:key="type"
|
||||
:value="type">
|
||||
{{ getAuditLogTypeName(type) }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="outline" @click="$emit('export')">{{
|
||||
t('dialog.group_member_moderation.export_logs')
|
||||
}}</Button>
|
||||
</div>
|
||||
</div>
|
||||
<InputGroupField
|
||||
v-model="tableData.filters[0].value"
|
||||
clearable
|
||||
size="sm"
|
||||
:placeholder="t('dialog.group.members.search')"
|
||||
style="margin-top: 8px; margin-bottom: 8px" />
|
||||
<br />
|
||||
<DataTableLayout
|
||||
style="margin-top: 8px"
|
||||
:table="tanstackTable"
|
||||
:loading="loading"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="totalItems" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { RefreshCw } from 'lucide-vue-next';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { DataTableLayout } from '@/components/ui/data-table';
|
||||
import { getAuditLogTypeName } from './groupModerationUtils';
|
||||
import { createColumns } from './groupMemberModerationLogsColumns.jsx';
|
||||
import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
|
||||
|
||||
const props = defineProps({
|
||||
loading: { type: Boolean, default: false },
|
||||
tableData: { type: Object, required: true },
|
||||
auditLogTypes: { type: Array, default: () => [] },
|
||||
pageSizes: { type: Array, required: true },
|
||||
columnContext: { type: Object, required: true }
|
||||
});
|
||||
|
||||
const emit = defineEmits(['refresh', 'export']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const selectedAuditLogTypes = ref([]);
|
||||
|
||||
defineExpose({ selectedAuditLogTypes });
|
||||
|
||||
const logsSearch = computed(() =>
|
||||
String(props.tableData.filters?.[0]?.value ?? '')
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
);
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
const rows = Array.isArray(props.tableData.data) ? props.tableData.data : [];
|
||||
const q = logsSearch.value;
|
||||
if (!q) {
|
||||
return rows;
|
||||
}
|
||||
return rows.filter((r) => {
|
||||
const desc = (r?.description ?? '').toString().toLowerCase();
|
||||
return desc.includes(q);
|
||||
});
|
||||
});
|
||||
|
||||
const columns = computed(() => createColumns(props.columnContext));
|
||||
|
||||
const { table: tanstackTable } = useVrcxVueTable({
|
||||
persistKey: 'group-moderation:logs',
|
||||
get data() {
|
||||
return filteredRows.value;
|
||||
},
|
||||
columns,
|
||||
getRowId: (row) => String(row?.id ?? `${row?.created_at ?? ''}:${row?.eventType ?? ''}`),
|
||||
initialPagination: { pageIndex: 0, pageSize: props.tableData.pageSize ?? 15 }
|
||||
});
|
||||
|
||||
const totalItems = computed(() => tanstackTable.getFilteredRowModel().rows.length);
|
||||
</script>
|
||||
148
src/components/dialogs/GroupDialog/GroupModerationMembersTab.vue
Normal file
148
src/components/dialogs/GroupDialog/GroupModerationMembersTab.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="mt-2">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
:disabled="loading"
|
||||
@click="$emit('refresh')">
|
||||
<Spinner v-if="loading" />
|
||||
<RefreshCw v-else />
|
||||
</Button>
|
||||
<span class="ml-1.5 mr-1.5" style="font-size: 14px">
|
||||
{{ tableData.data.length }}/{{ groupRef.memberCount }}
|
||||
</span>
|
||||
<div class="mt-1.5" style="float: right">
|
||||
<span class="mr-1.5">{{ t('dialog.group.members.sort_by') }}</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
as-child
|
||||
:disabled="sortFilterDisabled">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
:disabled="sortFilterDisabled"
|
||||
@click.stop>
|
||||
{{ t(memberSortOrder.name) }}
|
||||
<ArrowDown class="ml-1.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem
|
||||
v-for="item in sortingOptions"
|
||||
:key="item.name"
|
||||
@click="$emit('sort-change', item)">
|
||||
{{ t(item.name) }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<span class="ml-2 mr-1.5">{{ t('dialog.group.members.filter') }}</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
as-child
|
||||
:disabled="sortFilterDisabled">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
:disabled="sortFilterDisabled"
|
||||
@click.stop>
|
||||
{{ t(memberFilter.name) }}
|
||||
<ArrowDown class="ml-1.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem
|
||||
v-for="item in filterOptions"
|
||||
:key="item.name"
|
||||
@click="$emit('filter-change', item)">
|
||||
{{ t(item.name) }}
|
||||
</DropdownMenuItem>
|
||||
<template v-for="role in groupRef.roles" :key="role.name">
|
||||
<DropdownMenuItem
|
||||
v-if="!role.defaultRole"
|
||||
@click="$emit('filter-change', role)">
|
||||
{{ t(role.name) }}
|
||||
</DropdownMenuItem>
|
||||
</template>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<InputGroupField
|
||||
:model-value="memberSearch"
|
||||
:disabled="!hasGroupPermission(groupRef, 'group-bans-manage')"
|
||||
clearable
|
||||
size="sm"
|
||||
:placeholder="t('dialog.group.members.search')"
|
||||
style="margin-top: 8px; margin-bottom: 8px"
|
||||
@update:model-value="$emit('update:memberSearch', $event)"
|
||||
@input="$emit('search')" />
|
||||
<Button size="sm" variant="outline" @click="$emit('select-all', tableData.data)">{{
|
||||
t('dialog.group_member_moderation.select_all')
|
||||
}}</Button>
|
||||
<DataTableLayout
|
||||
v-if="tableData.data.length"
|
||||
style="margin-top: 8px"
|
||||
:table="tanstackTable"
|
||||
:loading="loading"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="totalItems" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ArrowDown, RefreshCw } from 'lucide-vue-next';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { DataTableLayout } from '@/components/ui/data-table';
|
||||
import { hasGroupPermission } from '@/shared/utils';
|
||||
import { createColumns } from './groupMemberModerationMembersColumns.jsx';
|
||||
import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
|
||||
|
||||
const props = defineProps({
|
||||
loading: { type: Boolean, default: false },
|
||||
tableData: { type: Object, required: true },
|
||||
groupRef: { type: Object, default: () => ({}) },
|
||||
memberSortOrder: { type: Object, required: true },
|
||||
memberFilter: { type: Object, required: true },
|
||||
memberSearch: { type: String, default: '' },
|
||||
sortingOptions: { type: Array, required: true },
|
||||
filterOptions: { type: Array, required: true },
|
||||
pageSizes: { type: Array, required: true },
|
||||
columnContext: { type: Object, required: true }
|
||||
});
|
||||
|
||||
defineEmits(['refresh', 'update:memberSearch', 'search', 'sort-change', 'filter-change', 'select-all']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const sortFilterDisabled = computed(() =>
|
||||
Boolean(
|
||||
props.loading ||
|
||||
props.memberSearch.length ||
|
||||
!hasGroupPermission(props.groupRef, 'group-bans-manage')
|
||||
)
|
||||
);
|
||||
|
||||
const columns = computed(() => createColumns(props.columnContext));
|
||||
|
||||
const { table: tanstackTable } = useVrcxVueTable({
|
||||
persistKey: 'group-moderation:members',
|
||||
get data() {
|
||||
return computed(() => props.tableData.data).value;
|
||||
},
|
||||
columns,
|
||||
getRowId: (row) => String(row?.userId ?? ''),
|
||||
initialPagination: { pageIndex: 0, pageSize: props.tableData.pageSize ?? 15 }
|
||||
});
|
||||
|
||||
const totalItems = computed(() => tanstackTable.getFilteredRowModel().rows.length);
|
||||
</script>
|
||||
@@ -0,0 +1,233 @@
|
||||
import { beforeEach, describe, expect, test, vi } from 'vitest';
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import { mount } from '@vue/test-utils';
|
||||
|
||||
// ─── Mocks ───────────────────────────────────────────────────────────
|
||||
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
t: (key, params) => (params ? `${key}:${JSON.stringify(params)}` : key)
|
||||
}),
|
||||
createI18n: () => ({
|
||||
global: { t: (key) => key },
|
||||
install: vi.fn()
|
||||
})
|
||||
}));
|
||||
|
||||
vi.mock('../../../../plugin/router', () => {
|
||||
const { ref } = require('vue');
|
||||
return {
|
||||
router: {
|
||||
beforeEach: vi.fn(),
|
||||
push: vi.fn(),
|
||||
replace: vi.fn(),
|
||||
currentRoute: ref({ path: '/', name: '', meta: {} }),
|
||||
isReady: vi.fn().mockResolvedValue(true)
|
||||
},
|
||||
initRouter: vi.fn()
|
||||
};
|
||||
});
|
||||
vi.mock('vue-router', async (importOriginal) => {
|
||||
const actual = await importOriginal();
|
||||
const { ref } = require('vue');
|
||||
return {
|
||||
...actual,
|
||||
useRouter: vi.fn(() => ({
|
||||
push: vi.fn(),
|
||||
replace: vi.fn(),
|
||||
currentRoute: ref({ path: '/', name: '', meta: {} })
|
||||
}))
|
||||
};
|
||||
});
|
||||
vi.mock('../../../../plugin/interopApi', () => ({ initInteropApi: vi.fn() }));
|
||||
vi.mock('../../../../service/database', () => ({
|
||||
database: new Proxy(
|
||||
{},
|
||||
{
|
||||
get: (_target, prop) => {
|
||||
if (prop === '__esModule') return false;
|
||||
return vi.fn().mockResolvedValue(null);
|
||||
}
|
||||
}
|
||||
)
|
||||
}));
|
||||
vi.mock('../../../../service/config', () => ({
|
||||
default: {
|
||||
init: vi.fn(),
|
||||
getString: vi.fn().mockImplementation((_k, d) => d ?? '{}'),
|
||||
setString: vi.fn(),
|
||||
getBool: vi.fn().mockImplementation((_k, d) => d ?? false),
|
||||
setBool: vi.fn(),
|
||||
getInt: vi.fn().mockImplementation((_k, d) => d ?? 0),
|
||||
setInt: vi.fn(),
|
||||
getFloat: vi.fn().mockImplementation((_k, d) => d ?? 0),
|
||||
setFloat: vi.fn(),
|
||||
getObject: vi.fn().mockReturnValue(null),
|
||||
setObject: vi.fn(),
|
||||
getArray: vi.fn().mockReturnValue([]),
|
||||
setArray: vi.fn(),
|
||||
remove: vi.fn()
|
||||
}
|
||||
}));
|
||||
vi.mock('../../../../service/jsonStorage', () => ({ default: vi.fn() }));
|
||||
vi.mock('../../../../service/watchState', () => ({
|
||||
watchState: { isLoggedIn: false }
|
||||
}));
|
||||
vi.mock('../../../../service/request', () => ({
|
||||
request: vi.fn().mockResolvedValue({ json: {} }),
|
||||
processBulk: vi.fn(),
|
||||
buildRequestInit: vi.fn(),
|
||||
parseResponse: vi.fn(),
|
||||
shouldIgnoreError: vi.fn(),
|
||||
$throw: vi.fn(),
|
||||
failedGetRequests: new Map()
|
||||
}));
|
||||
vi.mock('../../../../api', () => ({
|
||||
groupRequest: {
|
||||
getCachedGroupGallery: vi
|
||||
.fn()
|
||||
.mockResolvedValue({ json: [], params: {} })
|
||||
},
|
||||
userRequest: {}
|
||||
}));
|
||||
|
||||
import GroupDialogPhotosTab from '../GroupDialogPhotosTab.vue';
|
||||
import { useGroupStore } from '../../../../stores';
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────
|
||||
|
||||
const MOCK_GALLERIES = [
|
||||
{
|
||||
id: 'g1',
|
||||
name: 'Photos',
|
||||
description: 'General photos',
|
||||
membersOnly: false
|
||||
},
|
||||
{
|
||||
id: 'g2',
|
||||
name: 'Screenshots',
|
||||
description: 'Game screenshots',
|
||||
membersOnly: true,
|
||||
roleIdsToView: null
|
||||
}
|
||||
];
|
||||
|
||||
const MOCK_GALLERY_IMAGES = {
|
||||
g1: [
|
||||
{
|
||||
id: 'img1',
|
||||
imageUrl: 'https://img/photo1.png',
|
||||
groupId: 'grp_1',
|
||||
galleryId: 'g1'
|
||||
},
|
||||
{
|
||||
id: 'img2',
|
||||
imageUrl: 'https://img/photo2.png',
|
||||
groupId: 'grp_1',
|
||||
galleryId: 'g1'
|
||||
}
|
||||
],
|
||||
g2: [
|
||||
{
|
||||
id: 'img3',
|
||||
imageUrl: 'https://img/screen1.png',
|
||||
groupId: 'grp_1',
|
||||
galleryId: 'g2'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {object} overrides
|
||||
*/
|
||||
function mountComponent(overrides = {}) {
|
||||
const pinia = createTestingPinia({
|
||||
stubActions: false
|
||||
});
|
||||
|
||||
const groupStore = useGroupStore(pinia);
|
||||
groupStore.groupDialog = {
|
||||
id: 'grp_1',
|
||||
visible: true,
|
||||
ref: {
|
||||
galleries: [...MOCK_GALLERIES]
|
||||
},
|
||||
galleries: { ...MOCK_GALLERY_IMAGES },
|
||||
...overrides
|
||||
};
|
||||
|
||||
return mount(GroupDialogPhotosTab, {
|
||||
global: {
|
||||
plugins: [pinia],
|
||||
stubs: {
|
||||
RefreshCw: { template: '<svg class="refresh-icon" />' }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Tests ───────────────────────────────────────────────────────────
|
||||
|
||||
describe('GroupDialogPhotosTab.vue', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('rendering', () => {
|
||||
test('renders gallery names', () => {
|
||||
const wrapper = mountComponent();
|
||||
expect(wrapper.text()).toContain('Photos');
|
||||
expect(wrapper.text()).toContain('Screenshots');
|
||||
});
|
||||
|
||||
test('renders gallery image counts', () => {
|
||||
const wrapper = mountComponent();
|
||||
expect(wrapper.text()).toContain('2');
|
||||
expect(wrapper.text()).toContain('1');
|
||||
});
|
||||
|
||||
test('renders gallery descriptions', () => {
|
||||
const wrapper = mountComponent();
|
||||
expect(wrapper.text()).toContain('General photos');
|
||||
});
|
||||
|
||||
test('renders gallery images', () => {
|
||||
const wrapper = mountComponent();
|
||||
const images = wrapper.findAll('img');
|
||||
expect(images.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('renders refresh button', () => {
|
||||
const wrapper = mountComponent();
|
||||
const button = wrapper.find('button');
|
||||
expect(button.exists()).toBe(true);
|
||||
});
|
||||
|
||||
test('renders zero count for empty gallery', () => {
|
||||
const wrapper = mountComponent({
|
||||
galleries: { g1: [], g2: [] }
|
||||
});
|
||||
expect(wrapper.text()).toContain('0');
|
||||
});
|
||||
});
|
||||
|
||||
describe('loading state', () => {
|
||||
test('refresh button is enabled initially', () => {
|
||||
const wrapper = mountComponent();
|
||||
const button = wrapper.find('button');
|
||||
expect(button.attributes('disabled')).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('with no galleries', () => {
|
||||
test('renders without gallery tabs when ref.galleries is empty', () => {
|
||||
const wrapper = mountComponent({
|
||||
ref: { galleries: [] },
|
||||
galleries: {}
|
||||
});
|
||||
// No gallery tabs should be rendered
|
||||
expect(wrapper.text()).not.toContain('Photos');
|
||||
expect(wrapper.text()).not.toContain('Screenshots');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,245 @@
|
||||
import { beforeEach, describe, expect, test, vi } from 'vitest';
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import { mount } from '@vue/test-utils';
|
||||
|
||||
// ─── Mocks ───────────────────────────────────────────────────────────
|
||||
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
t: (key, params) => (params ? `${key}:${JSON.stringify(params)}` : key)
|
||||
}),
|
||||
createI18n: () => ({
|
||||
global: { t: (key) => key },
|
||||
install: vi.fn()
|
||||
})
|
||||
}));
|
||||
|
||||
vi.mock('../../../../plugin/router', () => {
|
||||
const { ref } = require('vue');
|
||||
return {
|
||||
router: {
|
||||
beforeEach: vi.fn(),
|
||||
push: vi.fn(),
|
||||
replace: vi.fn(),
|
||||
currentRoute: ref({ path: '/', name: '', meta: {} }),
|
||||
isReady: vi.fn().mockResolvedValue(true)
|
||||
},
|
||||
initRouter: vi.fn()
|
||||
};
|
||||
});
|
||||
vi.mock('vue-router', async (importOriginal) => {
|
||||
const actual = await importOriginal();
|
||||
const { ref } = require('vue');
|
||||
return {
|
||||
...actual,
|
||||
useRouter: vi.fn(() => ({
|
||||
push: vi.fn(),
|
||||
replace: vi.fn(),
|
||||
currentRoute: ref({ path: '/', name: '', meta: {} })
|
||||
}))
|
||||
};
|
||||
});
|
||||
vi.mock('../../../../plugin/interopApi', () => ({ initInteropApi: vi.fn() }));
|
||||
vi.mock('../../../../service/database', () => ({
|
||||
database: new Proxy(
|
||||
{},
|
||||
{
|
||||
get: (_target, prop) => {
|
||||
if (prop === '__esModule') return false;
|
||||
return vi.fn().mockResolvedValue(null);
|
||||
}
|
||||
}
|
||||
)
|
||||
}));
|
||||
vi.mock('../../../../service/config', () => ({
|
||||
default: {
|
||||
init: vi.fn(),
|
||||
getString: vi.fn().mockImplementation((_k, d) => d ?? '{}'),
|
||||
setString: vi.fn(),
|
||||
getBool: vi.fn().mockImplementation((_k, d) => d ?? false),
|
||||
setBool: vi.fn(),
|
||||
getInt: vi.fn().mockImplementation((_k, d) => d ?? 0),
|
||||
setInt: vi.fn(),
|
||||
getFloat: vi.fn().mockImplementation((_k, d) => d ?? 0),
|
||||
setFloat: vi.fn(),
|
||||
getObject: vi.fn().mockReturnValue(null),
|
||||
setObject: vi.fn(),
|
||||
getArray: vi.fn().mockReturnValue([]),
|
||||
setArray: vi.fn(),
|
||||
remove: vi.fn()
|
||||
}
|
||||
}));
|
||||
vi.mock('../../../../service/jsonStorage', () => ({ default: vi.fn() }));
|
||||
vi.mock('../../../../service/watchState', () => ({
|
||||
watchState: { isLoggedIn: false }
|
||||
}));
|
||||
vi.mock('../../../../service/request', () => ({
|
||||
request: vi.fn().mockResolvedValue({ json: {} }),
|
||||
processBulk: vi.fn(),
|
||||
buildRequestInit: vi.fn(),
|
||||
parseResponse: vi.fn(),
|
||||
shouldIgnoreError: vi.fn(),
|
||||
$throw: vi.fn(),
|
||||
failedGetRequests: new Map()
|
||||
}));
|
||||
|
||||
import GroupDialogPostsTab from '../GroupDialogPostsTab.vue';
|
||||
import { useGroupStore } from '../../../../stores';
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────
|
||||
|
||||
const MOCK_POSTS = [
|
||||
{
|
||||
id: 'post_1',
|
||||
title: 'Welcome Post',
|
||||
text: 'Hello everyone!',
|
||||
imageUrl: 'https://img/post1.png',
|
||||
authorId: 'usr_author1',
|
||||
editorId: null,
|
||||
roleIds: [],
|
||||
createdAt: '2024-01-01T00:00:00Z',
|
||||
updatedAt: '2024-01-01T00:00:00Z'
|
||||
},
|
||||
{
|
||||
id: 'post_2',
|
||||
title: 'Rules Update',
|
||||
text: 'Updated rules here.',
|
||||
imageUrl: null,
|
||||
authorId: 'usr_author2',
|
||||
editorId: 'usr_editor',
|
||||
roleIds: ['role_1'],
|
||||
createdAt: '2024-02-01T00:00:00Z',
|
||||
updatedAt: '2024-02-15T00:00:00Z'
|
||||
},
|
||||
{
|
||||
id: 'post_3',
|
||||
title: 'Event Announcement',
|
||||
text: '',
|
||||
imageUrl: null,
|
||||
authorId: 'usr_author1',
|
||||
editorId: null,
|
||||
roleIds: [],
|
||||
createdAt: '2024-03-01T00:00:00Z',
|
||||
updatedAt: '2024-03-01T00:00:00Z'
|
||||
}
|
||||
];
|
||||
|
||||
/**
|
||||
* @param {Object} overrides
|
||||
*/
|
||||
function mountComponent(overrides = {}) {
|
||||
const pinia = createTestingPinia({
|
||||
stubActions: false
|
||||
});
|
||||
|
||||
const groupStore = useGroupStore(pinia);
|
||||
groupStore.groupDialog = {
|
||||
id: 'grp_1',
|
||||
visible: true,
|
||||
posts: [...MOCK_POSTS],
|
||||
postsFiltered: [...MOCK_POSTS],
|
||||
postsSearch: '',
|
||||
ref: {
|
||||
roles: [
|
||||
{ id: 'role_1', name: 'Admin' },
|
||||
{ id: 'role_2', name: 'Member' }
|
||||
],
|
||||
permissions: []
|
||||
},
|
||||
...overrides
|
||||
};
|
||||
|
||||
return mount(GroupDialogPostsTab, {
|
||||
global: {
|
||||
plugins: [pinia],
|
||||
stubs: {
|
||||
Eye: { template: '<svg class="eye-icon" />' },
|
||||
Pencil: { template: '<svg class="pencil-icon" />' },
|
||||
Trash2: { template: '<svg class="trash-icon" />' }
|
||||
}
|
||||
},
|
||||
props: {
|
||||
showGroupPostEditDialog: vi.fn(),
|
||||
confirmDeleteGroupPost: vi.fn()
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Tests ───────────────────────────────────────────────────────────
|
||||
|
||||
describe('GroupDialogPostsTab.vue', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('rendering', () => {
|
||||
test('renders post count', () => {
|
||||
const wrapper = mountComponent();
|
||||
expect(wrapper.text()).toContain('3');
|
||||
});
|
||||
|
||||
test('renders all post titles', () => {
|
||||
const wrapper = mountComponent();
|
||||
expect(wrapper.text()).toContain('Welcome Post');
|
||||
expect(wrapper.text()).toContain('Rules Update');
|
||||
expect(wrapper.text()).toContain('Event Announcement');
|
||||
});
|
||||
|
||||
test('renders post text', () => {
|
||||
const wrapper = mountComponent();
|
||||
expect(wrapper.text()).toContain('Hello everyone!');
|
||||
expect(wrapper.text()).toContain('Updated rules here.');
|
||||
});
|
||||
|
||||
test('renders dash for empty post text', () => {
|
||||
const wrapper = mountComponent({
|
||||
posts: [MOCK_POSTS[2]],
|
||||
postsFiltered: [MOCK_POSTS[2]]
|
||||
});
|
||||
const preElements = wrapper.findAll('pre');
|
||||
expect(preElements.some((pre) => pre.text() === '-')).toBe(true);
|
||||
});
|
||||
|
||||
test('renders post image when imageUrl exists', () => {
|
||||
const wrapper = mountComponent();
|
||||
const images = wrapper.findAll('img');
|
||||
expect(
|
||||
images.some(
|
||||
(img) => img.attributes('src') === 'https://img/post1.png'
|
||||
)
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
test('does not render image for posts without imageUrl', () => {
|
||||
const wrapper = mountComponent({
|
||||
posts: [MOCK_POSTS[1]],
|
||||
postsFiltered: [MOCK_POSTS[1]]
|
||||
});
|
||||
expect(wrapper.findAll('img')).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('renders search input', () => {
|
||||
const wrapper = mountComponent();
|
||||
expect(
|
||||
wrapper.findComponent({ name: 'InputGroupField' }).exists()
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
test('renders empty state when no posts', () => {
|
||||
const wrapper = mountComponent({ posts: [], postsFiltered: [] });
|
||||
expect(wrapper.text()).toContain('0');
|
||||
});
|
||||
});
|
||||
|
||||
describe('filtered posts', () => {
|
||||
test('renders only filtered posts', () => {
|
||||
const wrapper = mountComponent({
|
||||
postsFiltered: [MOCK_POSTS[0]]
|
||||
});
|
||||
const postItems = wrapper.findAll('.cursor-default');
|
||||
// should only render 1 filtered post
|
||||
expect(postItems).toHaveLength(1);
|
||||
expect(wrapper.text()).toContain('Welcome Post');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,268 @@
|
||||
import { beforeEach, describe, expect, test, vi } from 'vitest';
|
||||
import { mount } from '@vue/test-utils';
|
||||
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
t: (key) => key
|
||||
}),
|
||||
createI18n: () => ({
|
||||
global: { t: (key) => key },
|
||||
install: vi.fn()
|
||||
})
|
||||
}));
|
||||
|
||||
vi.mock('../../../../shared/utils', () => ({
|
||||
hasGroupPermission: vi.fn((_group, permission) => {
|
||||
if (_group?._mockPermissions) {
|
||||
return _group._mockPermissions.includes(permission);
|
||||
}
|
||||
return true;
|
||||
})
|
||||
}));
|
||||
|
||||
import GroupModerationBulkActions from '../GroupModerationBulkActions.vue';
|
||||
|
||||
function mountComponent(props = {}) {
|
||||
return mount(GroupModerationBulkActions, {
|
||||
props: {
|
||||
selectUserId: '',
|
||||
selectedUsersArray: [],
|
||||
selectedRoles: [],
|
||||
note: '',
|
||||
progressCurrent: 0,
|
||||
progressTotal: 0,
|
||||
groupRef: {
|
||||
roles: [
|
||||
{ id: 'role_1', name: 'Admin' },
|
||||
{ id: 'role_2', name: 'Moderator' }
|
||||
],
|
||||
_mockPermissions: [
|
||||
'group-roles-assign',
|
||||
'group-members-manage',
|
||||
'group-members-remove',
|
||||
'group-bans-manage'
|
||||
]
|
||||
},
|
||||
...props
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
AlertTriangle: { template: '<svg class="alert-icon" />' },
|
||||
Trash2: { template: '<svg class="trash-icon" />' },
|
||||
X: { template: '<svg class="x-icon" />' },
|
||||
TooltipWrapper: {
|
||||
template: '<div class="tooltip-stub"><slot /><slot name="content" /></div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
describe('GroupModerationBulkActions.vue', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('rendering', () => {
|
||||
test('renders user ID input field', () => {
|
||||
const wrapper = mountComponent();
|
||||
expect(wrapper.text()).toContain('dialog.group_member_moderation.user_id');
|
||||
});
|
||||
|
||||
test('renders selected users section', () => {
|
||||
const wrapper = mountComponent();
|
||||
expect(wrapper.text()).toContain('dialog.group_member_moderation.selected_users');
|
||||
});
|
||||
|
||||
test('renders roles dropdown with available roles', () => {
|
||||
const wrapper = mountComponent();
|
||||
expect(wrapper.text()).toContain('dialog.group_member_moderation.selected_roles');
|
||||
});
|
||||
|
||||
test('renders action buttons', () => {
|
||||
const wrapper = mountComponent();
|
||||
const text = wrapper.text();
|
||||
expect(text).toContain('dialog.group_member_moderation.add_roles');
|
||||
expect(text).toContain('dialog.group_member_moderation.remove_roles');
|
||||
expect(text).toContain('dialog.group_member_moderation.save_note');
|
||||
expect(text).toContain('dialog.group_member_moderation.kick');
|
||||
expect(text).toContain('dialog.group_member_moderation.ban');
|
||||
expect(text).toContain('dialog.group_member_moderation.unban');
|
||||
});
|
||||
|
||||
test('renders selected user badges', () => {
|
||||
const wrapper = mountComponent({
|
||||
selectedUsersArray: [
|
||||
{ id: 'usr_1', userId: 'usr_1', membershipStatus: 'member', user: { displayName: 'Alice' } },
|
||||
{ id: 'usr_2', userId: 'usr_2', membershipStatus: 'member', user: { displayName: 'Bob' } }
|
||||
]
|
||||
});
|
||||
expect(wrapper.text()).toContain('Alice');
|
||||
expect(wrapper.text()).toContain('Bob');
|
||||
});
|
||||
|
||||
test('shows warning tooltip for non-member users', () => {
|
||||
const wrapper = mountComponent({
|
||||
selectedUsersArray: [
|
||||
{ id: 'usr_1', userId: 'usr_1', membershipStatus: 'banned', user: { displayName: 'Charlie' } }
|
||||
]
|
||||
});
|
||||
expect(wrapper.text()).toContain('dialog.group_member_moderation.user_isnt_in_group');
|
||||
});
|
||||
|
||||
test('does not show warning for member users', () => {
|
||||
const wrapper = mountComponent({
|
||||
selectedUsersArray: [
|
||||
{ id: 'usr_1', userId: 'usr_1', membershipStatus: 'member', user: { displayName: 'Alice' } }
|
||||
]
|
||||
});
|
||||
expect(wrapper.text()).not.toContain('dialog.group_member_moderation.user_isnt_in_group');
|
||||
});
|
||||
});
|
||||
|
||||
describe('progress indicator', () => {
|
||||
test('shows progress when progressCurrent > 0', () => {
|
||||
const wrapper = mountComponent({ progressCurrent: 3, progressTotal: 10 });
|
||||
expect(wrapper.text()).toContain('dialog.group_member_moderation.progress');
|
||||
expect(wrapper.text()).toContain('3/10');
|
||||
});
|
||||
|
||||
test('shows cancel button during progress', () => {
|
||||
const wrapper = mountComponent({ progressCurrent: 3, progressTotal: 10 });
|
||||
expect(wrapper.text()).toContain('dialog.group_member_moderation.cancel');
|
||||
});
|
||||
|
||||
test('hides progress when not in progress', () => {
|
||||
const wrapper = mountComponent({ progressCurrent: 0 });
|
||||
expect(wrapper.text()).not.toContain('dialog.group_member_moderation.progress');
|
||||
});
|
||||
});
|
||||
|
||||
describe('button disabled states', () => {
|
||||
test('add/remove roles disabled when no roles selected', () => {
|
||||
const wrapper = mountComponent({ selectedRoles: [] });
|
||||
const addBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.add_roles')
|
||||
);
|
||||
expect(addBtn.attributes('disabled')).toBeDefined();
|
||||
});
|
||||
|
||||
test('add/remove roles enabled when roles are selected', () => {
|
||||
const wrapper = mountComponent({ selectedRoles: ['role_1'] });
|
||||
const addBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.add_roles')
|
||||
);
|
||||
expect(addBtn.attributes('disabled')).toBeUndefined();
|
||||
});
|
||||
|
||||
test('action buttons disabled during progress', () => {
|
||||
const wrapper = mountComponent({
|
||||
selectedRoles: ['role_1'],
|
||||
progressCurrent: 5,
|
||||
progressTotal: 10
|
||||
});
|
||||
const kickBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.kick')
|
||||
);
|
||||
expect(kickBtn.attributes('disabled')).toBeDefined();
|
||||
});
|
||||
|
||||
test('select user button disabled when no user ID entered', () => {
|
||||
const wrapper = mountComponent({ selectUserId: '' });
|
||||
const selectBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.select_user')
|
||||
);
|
||||
expect(selectBtn.attributes('disabled')).toBeDefined();
|
||||
});
|
||||
|
||||
test('select user button enabled when user ID is entered', () => {
|
||||
const wrapper = mountComponent({ selectUserId: 'usr_test' });
|
||||
const selectBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.select_user')
|
||||
);
|
||||
expect(selectBtn.attributes('disabled')).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('permissions', () => {
|
||||
test('disables kick when missing group-members-remove permission', () => {
|
||||
const wrapper = mountComponent({
|
||||
groupRef: {
|
||||
roles: [],
|
||||
_mockPermissions: ['group-bans-manage']
|
||||
}
|
||||
});
|
||||
const kickBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.kick')
|
||||
);
|
||||
expect(kickBtn.attributes('disabled')).toBeDefined();
|
||||
});
|
||||
|
||||
test('disables ban/unban when missing group-bans-manage permission', () => {
|
||||
const wrapper = mountComponent({
|
||||
groupRef: {
|
||||
roles: [],
|
||||
_mockPermissions: ['group-members-remove']
|
||||
}
|
||||
});
|
||||
const banBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.ban')
|
||||
);
|
||||
const unbanBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.unban')
|
||||
);
|
||||
expect(banBtn.attributes('disabled')).toBeDefined();
|
||||
expect(unbanBtn.attributes('disabled')).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('events', () => {
|
||||
test('emits select-user on select button click', async () => {
|
||||
const wrapper = mountComponent({ selectUserId: 'usr_test' });
|
||||
const selectBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.select_user')
|
||||
);
|
||||
await selectBtn.trigger('click');
|
||||
expect(wrapper.emitted('select-user')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('emits clear-all on trash button click', async () => {
|
||||
const wrapper = mountComponent();
|
||||
// The trash button is the rounded-full icon-sm button after "selected_users" label
|
||||
const buttons = wrapper.findAll('button');
|
||||
const trashBtn = buttons.find((b) => {
|
||||
const classes = b.classes();
|
||||
return classes.includes('rounded-full');
|
||||
});
|
||||
await trashBtn.trigger('click');
|
||||
expect(wrapper.emitted('clear-all')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('emits delete-user when removing a selected user', async () => {
|
||||
const user = { id: 'usr_1', userId: 'usr_1', membershipStatus: 'member', user: { displayName: 'Alice' } };
|
||||
const wrapper = mountComponent({ selectedUsersArray: [user] });
|
||||
// The X button is a native <button type="button"> inside each Badge
|
||||
const deleteBtn = wrapper.find('button[type="button"]');
|
||||
await deleteBtn.trigger('click');
|
||||
expect(wrapper.emitted('delete-user')?.[0]?.[0]).toEqual(user);
|
||||
});
|
||||
|
||||
test('emits ban on ban button click', async () => {
|
||||
const wrapper = mountComponent();
|
||||
const banBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.ban')
|
||||
);
|
||||
await banBtn.trigger('click');
|
||||
expect(wrapper.emitted('ban')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('emits cancel-progress on cancel click', async () => {
|
||||
const wrapper = mountComponent({ progressCurrent: 3, progressTotal: 10 });
|
||||
const cancelBtn = wrapper.findAll('button').find((b) =>
|
||||
b.text().includes('dialog.group_member_moderation.cancel')
|
||||
);
|
||||
await cancelBtn.trigger('click');
|
||||
expect(wrapper.emitted('cancel-progress')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,170 @@
|
||||
import { describe, expect, test, vi, beforeEach } from 'vitest';
|
||||
import { ref } from 'vue';
|
||||
import { useGroupCalendarEvents } from '../useGroupCalendarEvents';
|
||||
|
||||
function createGroupDialog(calendar = []) {
|
||||
return ref({
|
||||
calendar
|
||||
});
|
||||
}
|
||||
|
||||
const PAST_DATE = '2020-01-01T00:00:00Z';
|
||||
const FUTURE_DATE = '2099-12-31T23:59:59Z';
|
||||
|
||||
describe('useGroupCalendarEvents', () => {
|
||||
describe('pastCalenderEvents', () => {
|
||||
test('returns empty array when calendar is null', () => {
|
||||
const groupDialog = ref({ calendar: null });
|
||||
const { pastCalenderEvents } = useGroupCalendarEvents(groupDialog);
|
||||
expect(pastCalenderEvents.value).toEqual([]);
|
||||
});
|
||||
|
||||
test('returns empty array when calendar is undefined', () => {
|
||||
const groupDialog = ref({});
|
||||
const { pastCalenderEvents } = useGroupCalendarEvents(groupDialog);
|
||||
expect(pastCalenderEvents.value).toEqual([]);
|
||||
});
|
||||
|
||||
test('returns empty array when no past events exist', () => {
|
||||
const groupDialog = createGroupDialog([
|
||||
{ id: '1', endsAt: FUTURE_DATE }
|
||||
]);
|
||||
const { pastCalenderEvents } = useGroupCalendarEvents(groupDialog);
|
||||
expect(pastCalenderEvents.value).toEqual([]);
|
||||
});
|
||||
|
||||
test('returns only past events', () => {
|
||||
const groupDialog = createGroupDialog([
|
||||
{ id: '1', endsAt: PAST_DATE },
|
||||
{ id: '2', endsAt: FUTURE_DATE },
|
||||
{ id: '3', endsAt: PAST_DATE }
|
||||
]);
|
||||
const { pastCalenderEvents } = useGroupCalendarEvents(groupDialog);
|
||||
expect(pastCalenderEvents.value).toHaveLength(2);
|
||||
expect(pastCalenderEvents.value.map((e) => e.id)).toEqual([
|
||||
'1',
|
||||
'3'
|
||||
]);
|
||||
});
|
||||
|
||||
test('is reactive to calendar changes', () => {
|
||||
const groupDialog = createGroupDialog([]);
|
||||
const { pastCalenderEvents } = useGroupCalendarEvents(groupDialog);
|
||||
expect(pastCalenderEvents.value).toHaveLength(0);
|
||||
|
||||
groupDialog.value.calendar = [{ id: '1', endsAt: PAST_DATE }];
|
||||
expect(pastCalenderEvents.value).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('upcomingCalenderEvents', () => {
|
||||
test('returns empty array when calendar is null', () => {
|
||||
const groupDialog = ref({ calendar: null });
|
||||
const { upcomingCalenderEvents } =
|
||||
useGroupCalendarEvents(groupDialog);
|
||||
expect(upcomingCalenderEvents.value).toEqual([]);
|
||||
});
|
||||
|
||||
test('returns empty array when no upcoming events exist', () => {
|
||||
const groupDialog = createGroupDialog([
|
||||
{ id: '1', endsAt: PAST_DATE }
|
||||
]);
|
||||
const { upcomingCalenderEvents } =
|
||||
useGroupCalendarEvents(groupDialog);
|
||||
expect(upcomingCalenderEvents.value).toEqual([]);
|
||||
});
|
||||
|
||||
test('returns only upcoming events', () => {
|
||||
const groupDialog = createGroupDialog([
|
||||
{ id: '1', endsAt: PAST_DATE },
|
||||
{ id: '2', endsAt: FUTURE_DATE },
|
||||
{ id: '3', endsAt: FUTURE_DATE }
|
||||
]);
|
||||
const { upcomingCalenderEvents } =
|
||||
useGroupCalendarEvents(groupDialog);
|
||||
expect(upcomingCalenderEvents.value).toHaveLength(2);
|
||||
expect(upcomingCalenderEvents.value.map((e) => e.id)).toEqual([
|
||||
'2',
|
||||
'3'
|
||||
]);
|
||||
});
|
||||
|
||||
test('past and upcoming are mutually exclusive', () => {
|
||||
const events = [
|
||||
{ id: '1', endsAt: PAST_DATE },
|
||||
{ id: '2', endsAt: FUTURE_DATE }
|
||||
];
|
||||
const groupDialog = createGroupDialog(events);
|
||||
const { pastCalenderEvents, upcomingCalenderEvents } =
|
||||
useGroupCalendarEvents(groupDialog);
|
||||
|
||||
const allIds = [
|
||||
...pastCalenderEvents.value.map((e) => e.id),
|
||||
...upcomingCalenderEvents.value.map((e) => e.id)
|
||||
];
|
||||
expect(allIds).toHaveLength(2);
|
||||
expect(new Set(allIds).size).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateFollowingCalendarData', () => {
|
||||
test('updates an existing event by id', () => {
|
||||
const groupDialog = createGroupDialog([
|
||||
{ id: '1', title: 'Old Title', endsAt: FUTURE_DATE },
|
||||
{ id: '2', title: 'Other', endsAt: FUTURE_DATE }
|
||||
]);
|
||||
const { updateFollowingCalendarData } =
|
||||
useGroupCalendarEvents(groupDialog);
|
||||
|
||||
updateFollowingCalendarData({ id: '1', title: 'New Title' });
|
||||
|
||||
expect(groupDialog.value.calendar[0].title).toBe('New Title');
|
||||
expect(groupDialog.value.calendar[0].endsAt).toBe(FUTURE_DATE);
|
||||
});
|
||||
|
||||
test('does not modify other events', () => {
|
||||
const groupDialog = createGroupDialog([
|
||||
{ id: '1', title: 'Event 1', endsAt: FUTURE_DATE },
|
||||
{ id: '2', title: 'Event 2', endsAt: FUTURE_DATE }
|
||||
]);
|
||||
const { updateFollowingCalendarData } =
|
||||
useGroupCalendarEvents(groupDialog);
|
||||
|
||||
updateFollowingCalendarData({ id: '1', title: 'Updated' });
|
||||
|
||||
expect(groupDialog.value.calendar[1].title).toBe('Event 2');
|
||||
});
|
||||
|
||||
test('does nothing when event id is not found', () => {
|
||||
const events = [{ id: '1', title: 'Event 1', endsAt: FUTURE_DATE }];
|
||||
const groupDialog = createGroupDialog([...events]);
|
||||
const { updateFollowingCalendarData } =
|
||||
useGroupCalendarEvents(groupDialog);
|
||||
|
||||
updateFollowingCalendarData({
|
||||
id: 'nonexistent',
|
||||
title: 'Updated'
|
||||
});
|
||||
|
||||
expect(groupDialog.value.calendar[0].title).toBe('Event 1');
|
||||
});
|
||||
|
||||
test('merges new properties into the event', () => {
|
||||
const groupDialog = createGroupDialog([
|
||||
{ id: '1', title: 'Event', endsAt: FUTURE_DATE }
|
||||
]);
|
||||
const { updateFollowingCalendarData } =
|
||||
useGroupCalendarEvents(groupDialog);
|
||||
|
||||
updateFollowingCalendarData({
|
||||
id: '1',
|
||||
userInterest: { isFollowing: true }
|
||||
});
|
||||
|
||||
expect(groupDialog.value.calendar[0].title).toBe('Event');
|
||||
expect(groupDialog.value.calendar[0].userInterest.isFollowing).toBe(
|
||||
true
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,248 @@
|
||||
import { describe, expect, test, vi, beforeEach } from 'vitest';
|
||||
import { ref } from 'vue';
|
||||
|
||||
vi.mock('../../../../api', () => ({
|
||||
groupRequest: {
|
||||
getCachedGroupGallery: vi.fn()
|
||||
}
|
||||
}));
|
||||
|
||||
import { useGroupGalleries } from '../useGroupGalleries';
|
||||
import { groupRequest } from '../../../../api';
|
||||
|
||||
function createGroupDialog(overrides = {}) {
|
||||
return ref({
|
||||
id: 'grp_1',
|
||||
ref: {
|
||||
galleries: []
|
||||
},
|
||||
galleries: {},
|
||||
...overrides
|
||||
});
|
||||
}
|
||||
|
||||
describe('useGroupGalleries', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('groupGalleryTabs', () => {
|
||||
test('returns empty array when no galleries', () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { groupGalleryTabs } = useGroupGalleries(groupDialog);
|
||||
expect(groupGalleryTabs.value).toEqual([]);
|
||||
});
|
||||
|
||||
test('maps galleries to tabs with index values', () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
ref: {
|
||||
galleries: [
|
||||
{ id: 'g1', name: 'Photos' },
|
||||
{ id: 'g2', name: 'Screenshots' }
|
||||
]
|
||||
}
|
||||
});
|
||||
const { groupGalleryTabs } = useGroupGalleries(groupDialog);
|
||||
expect(groupGalleryTabs.value).toEqual([
|
||||
{ value: '0', label: 'Photos' },
|
||||
{ value: '1', label: 'Screenshots' }
|
||||
]);
|
||||
});
|
||||
|
||||
test('handles galleries with null name', () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
ref: {
|
||||
galleries: [{ id: 'g1', name: null }]
|
||||
}
|
||||
});
|
||||
const { groupGalleryTabs } = useGroupGalleries(groupDialog);
|
||||
expect(groupGalleryTabs.value).toEqual([{ value: '0', label: '' }]);
|
||||
});
|
||||
|
||||
test('is reactive to gallery changes', () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { groupGalleryTabs } = useGroupGalleries(groupDialog);
|
||||
expect(groupGalleryTabs.value).toHaveLength(0);
|
||||
|
||||
groupDialog.value.ref.galleries = [
|
||||
{ id: 'g1', name: 'New Gallery' }
|
||||
];
|
||||
expect(groupGalleryTabs.value).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('groupGalleryStatus', () => {
|
||||
test('returns blue for non-members-only gallery', () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { groupGalleryStatus } = useGroupGalleries(groupDialog);
|
||||
expect(groupGalleryStatus({ membersOnly: false })).toEqual({
|
||||
blue: true
|
||||
});
|
||||
});
|
||||
|
||||
test('returns green for members-only without role restriction', () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { groupGalleryStatus } = useGroupGalleries(groupDialog);
|
||||
expect(
|
||||
groupGalleryStatus({ membersOnly: true, roleIdsToView: null })
|
||||
).toEqual({ green: true });
|
||||
});
|
||||
|
||||
test('returns red for role-restricted gallery', () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { groupGalleryStatus } = useGroupGalleries(groupDialog);
|
||||
expect(
|
||||
groupGalleryStatus({
|
||||
membersOnly: true,
|
||||
roleIdsToView: ['role1']
|
||||
})
|
||||
).toEqual({ red: true });
|
||||
});
|
||||
});
|
||||
|
||||
describe('getGroupGalleries', () => {
|
||||
test('resets galleries and tab before loading', async () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
galleries: { old: [1, 2, 3] }
|
||||
});
|
||||
const { getGroupGalleries, groupDialogGalleryCurrentName } =
|
||||
useGroupGalleries(groupDialog);
|
||||
groupDialogGalleryCurrentName.value = '2';
|
||||
|
||||
await getGroupGalleries();
|
||||
|
||||
expect(groupDialogGalleryCurrentName.value).toBe('0');
|
||||
});
|
||||
|
||||
test('sets loading state correctly during fetch', async () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
ref: {
|
||||
galleries: [{ id: 'g1', name: 'Gallery' }]
|
||||
}
|
||||
});
|
||||
groupRequest.getCachedGroupGallery.mockResolvedValue({
|
||||
json: [],
|
||||
params: { groupId: 'grp_1' }
|
||||
});
|
||||
|
||||
const { getGroupGalleries, isGroupGalleryLoading } =
|
||||
useGroupGalleries(groupDialog);
|
||||
expect(isGroupGalleryLoading.value).toBe(false);
|
||||
|
||||
const promise = getGroupGalleries();
|
||||
expect(isGroupGalleryLoading.value).toBe(true);
|
||||
|
||||
await promise;
|
||||
expect(isGroupGalleryLoading.value).toBe(false);
|
||||
});
|
||||
|
||||
test('calls getCachedGroupGallery for each gallery', async () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
ref: {
|
||||
galleries: [
|
||||
{ id: 'g1', name: 'A' },
|
||||
{ id: 'g2', name: 'B' }
|
||||
]
|
||||
}
|
||||
});
|
||||
groupRequest.getCachedGroupGallery.mockResolvedValue({
|
||||
json: [],
|
||||
params: { groupId: 'grp_1' }
|
||||
});
|
||||
|
||||
const { getGroupGalleries } = useGroupGalleries(groupDialog);
|
||||
await getGroupGalleries();
|
||||
|
||||
expect(groupRequest.getCachedGroupGallery).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getGroupGallery', () => {
|
||||
test('populates gallery images from API response', async () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { getGroupGallery } = useGroupGalleries(groupDialog);
|
||||
|
||||
groupRequest.getCachedGroupGallery.mockResolvedValueOnce({
|
||||
json: [
|
||||
{
|
||||
groupId: 'grp_1',
|
||||
galleryId: 'g1',
|
||||
id: 'img1',
|
||||
imageUrl: 'url1'
|
||||
},
|
||||
{
|
||||
groupId: 'grp_1',
|
||||
galleryId: 'g1',
|
||||
id: 'img2',
|
||||
imageUrl: 'url2'
|
||||
}
|
||||
],
|
||||
params: { groupId: 'grp_1' }
|
||||
});
|
||||
|
||||
await getGroupGallery('grp_1', 'g1');
|
||||
|
||||
expect(groupDialog.value.galleries['g1']).toHaveLength(2);
|
||||
expect(groupDialog.value.galleries['g1'][0].id).toBe('img1');
|
||||
});
|
||||
|
||||
test('ignores images from different groups', async () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { getGroupGallery } = useGroupGalleries(groupDialog);
|
||||
|
||||
groupRequest.getCachedGroupGallery.mockResolvedValueOnce({
|
||||
json: [
|
||||
{
|
||||
groupId: 'grp_other',
|
||||
galleryId: 'g1',
|
||||
id: 'img1',
|
||||
imageUrl: 'url1'
|
||||
}
|
||||
],
|
||||
params: { groupId: 'grp_other' }
|
||||
});
|
||||
|
||||
await getGroupGallery('grp_1', 'g1');
|
||||
|
||||
expect(groupDialog.value.galleries['g1']).toBeUndefined();
|
||||
});
|
||||
|
||||
test('stops pagination when fewer than 100 results returned', async () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { getGroupGallery } = useGroupGalleries(groupDialog);
|
||||
|
||||
groupRequest.getCachedGroupGallery.mockResolvedValueOnce({
|
||||
json: Array.from({ length: 50 }, (_, i) => ({
|
||||
groupId: 'grp_1',
|
||||
galleryId: 'g1',
|
||||
id: `img${i}`,
|
||||
imageUrl: `url${i}`
|
||||
})),
|
||||
params: { groupId: 'grp_1' }
|
||||
});
|
||||
|
||||
await getGroupGallery('grp_1', 'g1');
|
||||
|
||||
expect(groupRequest.getCachedGroupGallery).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('handles API errors gracefully', async () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { getGroupGallery } = useGroupGalleries(groupDialog);
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
|
||||
groupRequest.getCachedGroupGallery.mockRejectedValueOnce(
|
||||
new Error('API Error')
|
||||
);
|
||||
|
||||
await expect(
|
||||
getGroupGallery('grp_1', 'g1')
|
||||
).resolves.toBeUndefined();
|
||||
expect(consoleSpy).toHaveBeenCalled();
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,464 @@
|
||||
import { describe, expect, test, vi, beforeEach } from 'vitest';
|
||||
import { ref } from 'vue';
|
||||
|
||||
vi.mock('../../../../api', () => ({
|
||||
groupRequest: {
|
||||
getGroupMembersSearch: vi.fn(),
|
||||
getCachedGroupMember: vi.fn(),
|
||||
getCachedGroupMembers: vi.fn()
|
||||
},
|
||||
userRequest: {}
|
||||
}));
|
||||
vi.mock('../../../../plugin/router', () => {
|
||||
const { ref } = require('vue');
|
||||
return {
|
||||
router: {
|
||||
beforeEach: vi.fn(),
|
||||
push: vi.fn(),
|
||||
replace: vi.fn(),
|
||||
currentRoute: ref({ path: '/', name: '', meta: {} }),
|
||||
isReady: vi.fn().mockResolvedValue(true)
|
||||
},
|
||||
initRouter: vi.fn()
|
||||
};
|
||||
});
|
||||
vi.mock('vue-router', async (importOriginal) => {
|
||||
const actual = await importOriginal();
|
||||
const { ref } = require('vue');
|
||||
return {
|
||||
...actual,
|
||||
useRouter: vi.fn(() => ({
|
||||
push: vi.fn(),
|
||||
replace: vi.fn(),
|
||||
currentRoute: ref({ path: '/', name: '', meta: {} })
|
||||
}))
|
||||
};
|
||||
});
|
||||
vi.mock('../../../../plugin/interopApi', () => ({ initInteropApi: vi.fn() }));
|
||||
vi.mock('../../../../service/database', () => ({
|
||||
database: new Proxy(
|
||||
{},
|
||||
{
|
||||
get: (_target, prop) => {
|
||||
if (prop === '__esModule') return false;
|
||||
return vi.fn().mockResolvedValue(null);
|
||||
}
|
||||
}
|
||||
)
|
||||
}));
|
||||
vi.mock('../../../../service/config', () => ({
|
||||
default: {
|
||||
init: vi.fn(),
|
||||
getString: vi.fn().mockImplementation((_k, d) => d ?? '{}'),
|
||||
setString: vi.fn(),
|
||||
getBool: vi.fn().mockImplementation((_k, d) => d ?? false),
|
||||
setBool: vi.fn(),
|
||||
getInt: vi.fn().mockImplementation((_k, d) => d ?? 0),
|
||||
setInt: vi.fn(),
|
||||
getFloat: vi.fn().mockImplementation((_k, d) => d ?? 0),
|
||||
setFloat: vi.fn(),
|
||||
getObject: vi.fn().mockReturnValue(null),
|
||||
setObject: vi.fn(),
|
||||
getArray: vi.fn().mockReturnValue([]),
|
||||
setArray: vi.fn(),
|
||||
remove: vi.fn()
|
||||
}
|
||||
}));
|
||||
vi.mock('../../../../service/jsonStorage', () => ({ default: vi.fn() }));
|
||||
vi.mock('../../../../service/watchState', () => ({
|
||||
watchState: { isLoggedIn: false }
|
||||
}));
|
||||
vi.mock('../../../../service/request', () => ({
|
||||
request: vi.fn().mockResolvedValue({ json: {} }),
|
||||
processBulk: vi.fn(),
|
||||
buildRequestInit: vi.fn(),
|
||||
parseResponse: vi.fn(),
|
||||
shouldIgnoreError: vi.fn(),
|
||||
$throw: vi.fn(),
|
||||
failedGetRequests: new Map()
|
||||
}));
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
t: (key) => key
|
||||
}),
|
||||
createI18n: () => ({
|
||||
global: { t: (key) => key },
|
||||
install: vi.fn()
|
||||
})
|
||||
}));
|
||||
vi.mock('worker-timers', () => ({
|
||||
setTimeout: (fn, ms) => globalThis.setTimeout(fn, ms),
|
||||
clearTimeout: (id) => globalThis.clearTimeout(id)
|
||||
}));
|
||||
|
||||
import { useGroupMembers } from '../useGroupMembers';
|
||||
import { groupRequest } from '../../../../api';
|
||||
import { groupDialogFilterOptions } from '../../../../shared/constants';
|
||||
|
||||
/**
|
||||
*
|
||||
* @param overrides
|
||||
*/
|
||||
function createGroupDialog(overrides = {}) {
|
||||
return ref({
|
||||
id: 'grp_1',
|
||||
visible: true,
|
||||
inGroup: false,
|
||||
members: [],
|
||||
memberSearch: '',
|
||||
memberSearchResults: [],
|
||||
memberSortOrder: { value: '' },
|
||||
memberFilter: { id: null, name: 'Everyone' },
|
||||
ref: { roles: [], memberCount: 0 },
|
||||
...overrides
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param overrides
|
||||
*/
|
||||
function createDeps(overrides = {}) {
|
||||
return {
|
||||
currentUser: ref({ id: 'usr_me' }),
|
||||
applyGroupMember: vi.fn((json) => json),
|
||||
handleGroupMember: vi.fn(),
|
||||
t: (key) => key,
|
||||
...overrides
|
||||
};
|
||||
}
|
||||
|
||||
describe('useGroupMembers', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
groupRequest.getCachedGroupMembers.mockReset();
|
||||
});
|
||||
|
||||
describe('groupDialogMemberSortValue', () => {
|
||||
test('returns current sort order value', () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
memberSortOrder: { value: 'joinedAt:desc', name: 'sort.joined' }
|
||||
});
|
||||
const { groupDialogMemberSortValue } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
expect(groupDialogMemberSortValue.value).toBe('joinedAt:desc');
|
||||
});
|
||||
|
||||
test('returns empty string when no sort order', () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
memberSortOrder: {}
|
||||
});
|
||||
const { groupDialogMemberSortValue } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
expect(groupDialogMemberSortValue.value).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('groupDialogMemberFilterKey', () => {
|
||||
test('returns everyone when filter id is null', () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
memberFilter: { id: null }
|
||||
});
|
||||
const { groupDialogMemberFilterKey } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
expect(groupDialogMemberFilterKey.value).toBe('everyone');
|
||||
});
|
||||
|
||||
test('returns usersWithNoRole when filter id is empty string', () => {
|
||||
const groupDialog = createGroupDialog({ memberFilter: { id: '' } });
|
||||
const { groupDialogMemberFilterKey } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
expect(groupDialogMemberFilterKey.value).toBe('usersWithNoRole');
|
||||
});
|
||||
|
||||
test('returns role:id for role-based filters', () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
memberFilter: { id: 'role_123' }
|
||||
});
|
||||
const { groupDialogMemberFilterKey } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
expect(groupDialogMemberFilterKey.value).toBe('role:role_123');
|
||||
});
|
||||
|
||||
test('returns null when no filter', () => {
|
||||
const groupDialog = createGroupDialog({ memberFilter: null });
|
||||
const { groupDialogMemberFilterKey } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
expect(groupDialogMemberFilterKey.value).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('groupDialogMemberFilterGroups', () => {
|
||||
test('includes filter options and role groups', () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
ref: {
|
||||
roles: [
|
||||
{ id: 'role_1', name: 'Admin', defaultRole: false },
|
||||
{ id: 'role_2', name: 'Member', defaultRole: true }
|
||||
],
|
||||
memberCount: 10
|
||||
}
|
||||
});
|
||||
const { groupDialogMemberFilterGroups } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
const groups = groupDialogMemberFilterGroups.value;
|
||||
|
||||
expect(groups.length).toBeGreaterThanOrEqual(1);
|
||||
// should have a filters group
|
||||
const filtersGroup = groups.find((g) => g.key === 'filters');
|
||||
expect(filtersGroup).toBeDefined();
|
||||
expect(filtersGroup.items.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('excludes default roles from role items', () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
ref: {
|
||||
roles: [
|
||||
{ id: 'role_1', name: 'Admin', defaultRole: false },
|
||||
{ id: 'role_2', name: 'Default', defaultRole: true }
|
||||
],
|
||||
memberCount: 10
|
||||
}
|
||||
});
|
||||
const { groupDialogMemberFilterGroups } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
const rolesGroup = groupDialogMemberFilterGroups.value.find(
|
||||
(g) => g.key === 'roles'
|
||||
);
|
||||
|
||||
if (rolesGroup) {
|
||||
expect(rolesGroup.items).toHaveLength(1);
|
||||
expect(rolesGroup.items[0].label).toBe('Admin');
|
||||
}
|
||||
});
|
||||
|
||||
test('omits roles group when no non-default roles exist', () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
ref: {
|
||||
roles: [
|
||||
{ id: 'role_1', name: 'Default', defaultRole: true }
|
||||
],
|
||||
memberCount: 10
|
||||
}
|
||||
});
|
||||
const { groupDialogMemberFilterGroups } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
const rolesGroup = groupDialogMemberFilterGroups.value.find(
|
||||
(g) => g.key === 'roles'
|
||||
);
|
||||
expect(rolesGroup).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('groupMembersSearch', () => {
|
||||
test('clears results when search is less than 3 characters', () => {
|
||||
const groupDialog = createGroupDialog({ memberSearch: 'ab' });
|
||||
const { groupMembersSearch, isGroupMembersLoading } =
|
||||
useGroupMembers(groupDialog, createDeps());
|
||||
|
||||
groupMembersSearch();
|
||||
|
||||
expect(groupDialog.value.memberSearchResults).toEqual([]);
|
||||
expect(isGroupMembersLoading.value).toBe(false);
|
||||
});
|
||||
|
||||
test('calls API when search is 3 or more characters', async () => {
|
||||
const groupDialog = createGroupDialog({ memberSearch: 'abc' });
|
||||
groupRequest.getGroupMembersSearch.mockResolvedValue({
|
||||
json: { results: [{ userId: 'usr_1' }] },
|
||||
params: { groupId: 'grp_1' }
|
||||
});
|
||||
|
||||
const deps = createDeps();
|
||||
const { groupMembersSearch } = useGroupMembers(groupDialog, deps);
|
||||
groupMembersSearch();
|
||||
|
||||
// wait for the debounced call
|
||||
await vi.waitFor(() => {
|
||||
expect(groupRequest.getGroupMembersSearch).toHaveBeenCalledWith(
|
||||
{
|
||||
groupId: 'grp_1',
|
||||
query: 'abc',
|
||||
n: 100,
|
||||
offset: 0
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('loadMoreGroupMembers', () => {
|
||||
test('does not load when already done', async () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { loadMoreGroupMembers, isGroupMembersDone } =
|
||||
useGroupMembers(groupDialog, createDeps());
|
||||
isGroupMembersDone.value = true;
|
||||
|
||||
await loadMoreGroupMembers();
|
||||
|
||||
expect(groupRequest.getCachedGroupMembers).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('does not load when already loading', async () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
const { loadMoreGroupMembers, isGroupMembersLoading } =
|
||||
useGroupMembers(groupDialog, createDeps());
|
||||
isGroupMembersLoading.value = true;
|
||||
|
||||
await loadMoreGroupMembers();
|
||||
|
||||
expect(groupRequest.getCachedGroupMembers).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('marks done when fewer than n results returned', async () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
groupRequest.getCachedGroupMembers.mockResolvedValue({
|
||||
json: [{ userId: 'usr_1' }],
|
||||
params: { groupId: 'grp_1', n: 100, offset: 0 }
|
||||
});
|
||||
|
||||
const {
|
||||
loadMoreGroupMembers,
|
||||
isGroupMembersDone,
|
||||
loadMoreGroupMembersParams
|
||||
} = useGroupMembers(groupDialog, createDeps());
|
||||
|
||||
loadMoreGroupMembersParams.value = {
|
||||
n: 100,
|
||||
offset: 0,
|
||||
groupId: 'grp_1',
|
||||
sort: 'joinedAt:desc'
|
||||
};
|
||||
|
||||
await loadMoreGroupMembers();
|
||||
|
||||
expect(isGroupMembersDone.value).toBe(true);
|
||||
});
|
||||
|
||||
test('appends members to groupDialog.members', async () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
members: [{ userId: 'existing' }]
|
||||
});
|
||||
groupRequest.getCachedGroupMembers.mockResolvedValue({
|
||||
json: [{ userId: 'usr_new' }],
|
||||
params: { groupId: 'grp_1', n: 100, offset: 0 }
|
||||
});
|
||||
|
||||
const { loadMoreGroupMembers, loadMoreGroupMembersParams } =
|
||||
useGroupMembers(groupDialog, createDeps());
|
||||
|
||||
loadMoreGroupMembersParams.value = {
|
||||
n: 100,
|
||||
offset: 0,
|
||||
groupId: 'grp_1',
|
||||
sort: 'joinedAt:desc'
|
||||
};
|
||||
|
||||
await loadMoreGroupMembers();
|
||||
|
||||
expect(groupDialog.value.members).toHaveLength(2);
|
||||
});
|
||||
|
||||
test('removes duplicate current user from first position', async () => {
|
||||
const deps = createDeps();
|
||||
const groupDialog = createGroupDialog({
|
||||
members: [{ userId: 'usr_me' }]
|
||||
});
|
||||
groupRequest.getCachedGroupMembers.mockResolvedValue({
|
||||
json: [{ userId: 'usr_me' }, { userId: 'usr_2' }],
|
||||
params: { groupId: 'grp_1', n: 100, offset: 0 }
|
||||
});
|
||||
|
||||
const { loadMoreGroupMembers, loadMoreGroupMembersParams } =
|
||||
useGroupMembers(groupDialog, deps);
|
||||
|
||||
loadMoreGroupMembersParams.value = {
|
||||
n: 100,
|
||||
offset: 0,
|
||||
groupId: 'grp_1',
|
||||
sort: 'joinedAt:desc'
|
||||
};
|
||||
|
||||
await loadMoreGroupMembers();
|
||||
|
||||
// duplicate at position 0 should be removed
|
||||
const userIds = groupDialog.value.members.map((m) => m.userId);
|
||||
expect(userIds).toEqual(['usr_me', 'usr_2']);
|
||||
});
|
||||
|
||||
test('marks done on error', async () => {
|
||||
const groupDialog = createGroupDialog();
|
||||
groupRequest.getCachedGroupMembers.mockRejectedValue(
|
||||
new Error('fail')
|
||||
);
|
||||
|
||||
const {
|
||||
loadMoreGroupMembers,
|
||||
isGroupMembersDone,
|
||||
loadMoreGroupMembersParams
|
||||
} = useGroupMembers(groupDialog, createDeps());
|
||||
|
||||
loadMoreGroupMembersParams.value = {
|
||||
n: 100,
|
||||
offset: 0,
|
||||
groupId: 'grp_1',
|
||||
sort: 'joinedAt:desc'
|
||||
};
|
||||
|
||||
await expect(loadMoreGroupMembers()).rejects.toThrow('fail');
|
||||
expect(isGroupMembersDone.value).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setGroupMemberSortOrder', () => {
|
||||
test('does not reload when sort order unchanged', async () => {
|
||||
const groupDialog = createGroupDialog({
|
||||
memberSortOrder: { value: 'joinedAt:desc' }
|
||||
});
|
||||
const { setGroupMemberSortOrder } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
await setGroupMemberSortOrder({ value: 'joinedAt:desc' });
|
||||
|
||||
expect(groupRequest.getCachedGroupMembers).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('setGroupMemberFilter', () => {
|
||||
test('does not reload when filter unchanged', async () => {
|
||||
const { markRaw } = require('vue');
|
||||
const filter = markRaw(groupDialogFilterOptions.everyone);
|
||||
const groupDialog = createGroupDialog();
|
||||
// Use markRaw to prevent Vue from wrapping the filter in a Proxy
|
||||
groupDialog.value.memberFilter = filter;
|
||||
const { setGroupMemberFilter } = useGroupMembers(
|
||||
groupDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
await setGroupMemberFilter(filter);
|
||||
|
||||
expect(groupRequest.getCachedGroupMembers).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,436 @@
|
||||
import { reactive, ref } from 'vue';
|
||||
import { describe, expect, test, vi, beforeEach } from 'vitest';
|
||||
|
||||
vi.mock('vue-sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
t: (key) => key
|
||||
}),
|
||||
createI18n: () => ({
|
||||
global: { t: (key) => key },
|
||||
install: vi.fn()
|
||||
})
|
||||
}));
|
||||
vi.mock('../../../../plugin/router', () => {
|
||||
const { ref: vRef } = require('vue');
|
||||
return {
|
||||
router: {
|
||||
beforeEach: vi.fn(),
|
||||
push: vi.fn(),
|
||||
replace: vi.fn(),
|
||||
currentRoute: vRef({ path: '/', name: '', meta: {} }),
|
||||
isReady: vi.fn().mockResolvedValue(true)
|
||||
},
|
||||
initRouter: vi.fn()
|
||||
};
|
||||
});
|
||||
vi.mock('vue-router', async (importOriginal) => {
|
||||
const actual = await importOriginal();
|
||||
const { ref: vRef } = require('vue');
|
||||
return {
|
||||
...actual,
|
||||
useRouter: vi.fn(() => ({
|
||||
push: vi.fn(),
|
||||
replace: vi.fn(),
|
||||
currentRoute: vRef({ path: '/', name: '', meta: {} })
|
||||
}))
|
||||
};
|
||||
});
|
||||
vi.mock('../../../../plugin/interopApi', () => ({ initInteropApi: vi.fn() }));
|
||||
vi.mock('../../../../service/database', () => ({
|
||||
database: new Proxy(
|
||||
{},
|
||||
{
|
||||
get: (_target, prop) => {
|
||||
if (prop === '__esModule') return false;
|
||||
return vi.fn().mockResolvedValue(null);
|
||||
}
|
||||
}
|
||||
)
|
||||
}));
|
||||
vi.mock('../../../../service/config', () => ({
|
||||
default: {
|
||||
init: vi.fn(),
|
||||
getString: vi.fn().mockImplementation((_k, d) => d ?? '{}'),
|
||||
setString: vi.fn(),
|
||||
getBool: vi.fn().mockImplementation((_k, d) => d ?? false),
|
||||
setBool: vi.fn(),
|
||||
getInt: vi.fn().mockImplementation((_k, d) => d ?? 0),
|
||||
setInt: vi.fn(),
|
||||
getFloat: vi.fn().mockImplementation((_k, d) => d ?? 0),
|
||||
setFloat: vi.fn(),
|
||||
getObject: vi.fn().mockReturnValue(null),
|
||||
setObject: vi.fn(),
|
||||
getArray: vi.fn().mockReturnValue([]),
|
||||
setArray: vi.fn(),
|
||||
remove: vi.fn()
|
||||
}
|
||||
}));
|
||||
vi.mock('../../../../service/jsonStorage', () => ({ default: vi.fn() }));
|
||||
vi.mock('../../../../service/watchState', () => ({
|
||||
watchState: { isLoggedIn: false }
|
||||
}));
|
||||
vi.mock('../../../../service/request', () => ({
|
||||
request: vi.fn().mockResolvedValue({ json: {} }),
|
||||
processBulk: vi.fn(),
|
||||
buildRequestInit: vi.fn(),
|
||||
parseResponse: vi.fn(),
|
||||
shouldIgnoreError: vi.fn(),
|
||||
$throw: vi.fn(),
|
||||
failedGetRequests: new Map()
|
||||
}));
|
||||
vi.mock('../../../../api', () => ({
|
||||
groupRequest: {},
|
||||
userRequest: {}
|
||||
}));
|
||||
|
||||
import { useGroupModerationData } from '../useGroupModerationData';
|
||||
|
||||
function createTables() {
|
||||
return {
|
||||
members: reactive({ data: [], pageSize: 15 }),
|
||||
bans: reactive({ data: [], filters: [{ prop: ['$displayName'], value: '' }], pageSize: 15 }),
|
||||
invites: reactive({ data: [], pageSize: 15 }),
|
||||
joinRequests: reactive({ data: [], pageSize: 15 }),
|
||||
blocked: reactive({ data: [], pageSize: 15 }),
|
||||
logs: reactive({ data: [], filters: [{ prop: ['description'], value: '' }], pageSize: 15 })
|
||||
};
|
||||
}
|
||||
|
||||
function createDeps(overrides = {}) {
|
||||
const tables = createTables();
|
||||
return {
|
||||
groupMemberModeration: ref({
|
||||
id: 'grp_test',
|
||||
visible: true,
|
||||
groupRef: { memberCount: 10, roles: [] }
|
||||
}),
|
||||
currentUser: ref({ id: 'usr_self' }),
|
||||
applyGroupMember: vi.fn((json) => json),
|
||||
handleGroupMember: vi.fn(),
|
||||
tables,
|
||||
selection: {
|
||||
selectedUsers: {},
|
||||
setSelectedUsers: vi.fn()
|
||||
},
|
||||
groupRequest: {
|
||||
getGroupBans: vi.fn(),
|
||||
getGroupLogs: vi.fn(),
|
||||
getGroupInvites: vi.fn(),
|
||||
getGroupJoinRequests: vi.fn(),
|
||||
getGroupMember: vi.fn(),
|
||||
getGroupMembers: vi.fn(),
|
||||
getGroupMembersSearch: vi.fn()
|
||||
},
|
||||
userRequest: {
|
||||
getCachedUser: vi.fn()
|
||||
},
|
||||
...overrides
|
||||
};
|
||||
}
|
||||
|
||||
describe('useGroupModerationData', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('getAllGroupBans', () => {
|
||||
test('populates bans table with fetched data', async () => {
|
||||
const deps = createDeps();
|
||||
const bans = [
|
||||
{ userId: 'usr_1', user: { displayName: 'Alice' } },
|
||||
{ userId: 'usr_2', user: { displayName: 'Bob' } }
|
||||
];
|
||||
deps.groupRequest.getGroupBans.mockResolvedValue({
|
||||
json: bans,
|
||||
params: { groupId: 'grp_test' }
|
||||
});
|
||||
|
||||
const { getAllGroupBans } = useGroupModerationData(deps);
|
||||
await getAllGroupBans('grp_test');
|
||||
|
||||
expect(deps.tables.bans.data).toHaveLength(2);
|
||||
expect(deps.groupRequest.getGroupBans).toHaveBeenCalledWith({
|
||||
groupId: 'grp_test',
|
||||
n: 100,
|
||||
offset: 0
|
||||
});
|
||||
});
|
||||
|
||||
test('paginates through multiple pages', async () => {
|
||||
const deps = createDeps();
|
||||
const page1 = Array.from({ length: 100 }, (_, i) => ({
|
||||
userId: `usr_${i}`,
|
||||
user: { displayName: `User${i}` }
|
||||
}));
|
||||
const page2 = [{ userId: 'usr_100', user: { displayName: 'User100' } }];
|
||||
|
||||
deps.groupRequest.getGroupBans
|
||||
.mockResolvedValueOnce({ json: page1, params: { groupId: 'grp_test' } })
|
||||
.mockResolvedValueOnce({ json: page2, params: { groupId: 'grp_test' } });
|
||||
|
||||
const { getAllGroupBans } = useGroupModerationData(deps);
|
||||
await getAllGroupBans('grp_test');
|
||||
|
||||
expect(deps.tables.bans.data).toHaveLength(101);
|
||||
expect(deps.groupRequest.getGroupBans).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
test('skips data from wrong group', async () => {
|
||||
const deps = createDeps();
|
||||
deps.groupRequest.getGroupBans.mockResolvedValue({
|
||||
json: [{ userId: 'usr_1' }],
|
||||
params: { groupId: 'grp_other' }
|
||||
});
|
||||
|
||||
const { getAllGroupBans } = useGroupModerationData(deps);
|
||||
await getAllGroupBans('grp_test');
|
||||
|
||||
// Should have continued past the mismatched group and eventually exhausted pages
|
||||
// The data won't contain the mismatched entry because it was skipped
|
||||
expect(deps.tables.bans.data).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('handles API error gracefully', async () => {
|
||||
const { toast } = await import('vue-sonner');
|
||||
const deps = createDeps();
|
||||
deps.groupRequest.getGroupBans.mockRejectedValue(new Error('Network error'));
|
||||
|
||||
const { getAllGroupBans, isGroupMembersLoading } = useGroupModerationData(deps);
|
||||
await getAllGroupBans('grp_test');
|
||||
|
||||
expect(toast.error).toHaveBeenCalledWith('Failed to get group bans');
|
||||
expect(isGroupMembersLoading.value).toBe(false);
|
||||
});
|
||||
|
||||
test('stops when dialog is no longer visible', async () => {
|
||||
const deps = createDeps();
|
||||
const page1 = Array.from({ length: 100 }, (_, i) => ({
|
||||
userId: `usr_${i}`
|
||||
}));
|
||||
deps.groupRequest.getGroupBans
|
||||
.mockResolvedValueOnce({ json: page1, params: { groupId: 'grp_test' } })
|
||||
.mockImplementation(() => {
|
||||
deps.groupMemberModeration.value.visible = false;
|
||||
return Promise.resolve({ json: [{ userId: 'usr_extra' }], params: { groupId: 'grp_test' } });
|
||||
});
|
||||
|
||||
const { getAllGroupBans } = useGroupModerationData(deps);
|
||||
await getAllGroupBans('grp_test');
|
||||
|
||||
// Should stop after detecting visible=false
|
||||
expect(deps.groupRequest.getGroupBans).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getAllGroupLogs', () => {
|
||||
test('populates logs table and deduplicates', async () => {
|
||||
const deps = createDeps();
|
||||
const logs = [
|
||||
{ id: 'log_1', description: 'event 1' },
|
||||
{ id: 'log_2', description: 'event 2' },
|
||||
{ id: 'log_1', description: 'event 1 dup' }
|
||||
];
|
||||
deps.groupRequest.getGroupLogs.mockResolvedValue({
|
||||
json: { results: logs, hasNext: false },
|
||||
params: { groupId: 'grp_test' }
|
||||
});
|
||||
|
||||
const { getAllGroupLogs } = useGroupModerationData(deps);
|
||||
await getAllGroupLogs('grp_test');
|
||||
|
||||
expect(deps.tables.logs.data).toHaveLength(2);
|
||||
});
|
||||
|
||||
test('passes eventTypes filter when provided', async () => {
|
||||
const deps = createDeps();
|
||||
deps.groupRequest.getGroupLogs.mockResolvedValue({
|
||||
json: { results: [], hasNext: false },
|
||||
params: { groupId: 'grp_test' }
|
||||
});
|
||||
|
||||
const { getAllGroupLogs } = useGroupModerationData(deps);
|
||||
await getAllGroupLogs('grp_test', ['group.member.ban', 'group.member.kick']);
|
||||
|
||||
expect(deps.groupRequest.getGroupLogs).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
eventTypes: ['group.member.ban', 'group.member.kick']
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getAllGroupInvitesAndJoinRequests', () => {
|
||||
test('fetches invites, join requests, and blocked in parallel', async () => {
|
||||
const deps = createDeps();
|
||||
deps.groupRequest.getGroupInvites.mockResolvedValue({
|
||||
json: [{ userId: 'usr_inv' }],
|
||||
params: { groupId: 'grp_test' }
|
||||
});
|
||||
deps.groupRequest.getGroupJoinRequests
|
||||
.mockResolvedValueOnce({
|
||||
json: [{ userId: 'usr_join' }],
|
||||
params: { groupId: 'grp_test' }
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
json: [{ userId: 'usr_block' }],
|
||||
params: { groupId: 'grp_test' }
|
||||
});
|
||||
|
||||
const { getAllGroupInvitesAndJoinRequests } = useGroupModerationData(deps);
|
||||
await getAllGroupInvitesAndJoinRequests('grp_test');
|
||||
|
||||
expect(deps.tables.invites.data).toHaveLength(1);
|
||||
expect(deps.tables.joinRequests.data).toHaveLength(1);
|
||||
expect(deps.tables.blocked.data).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('selectGroupMemberUserId', () => {
|
||||
test('parses multiple user IDs from input', async () => {
|
||||
const deps = createDeps();
|
||||
deps.groupRequest.getGroupMember.mockResolvedValue({
|
||||
json: { userId: 'usr_aaaa1111-2222-3333-4444-555566667777', user: { displayName: 'A' } },
|
||||
params: {}
|
||||
});
|
||||
|
||||
const { selectGroupMemberUserId } = useGroupModerationData(deps);
|
||||
await selectGroupMemberUserId(
|
||||
'usr_aaaa1111-2222-3333-4444-555566667777 usr_bbbb1111-2222-3333-4444-555566667777'
|
||||
);
|
||||
|
||||
expect(deps.groupRequest.getGroupMember).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
test('falls back to raw input when no usr_ pattern found', async () => {
|
||||
const deps = createDeps();
|
||||
deps.groupRequest.getGroupMember.mockResolvedValue({
|
||||
json: { userId: 'some_input', user: { displayName: 'Test' } },
|
||||
params: {}
|
||||
});
|
||||
|
||||
const { selectGroupMemberUserId } = useGroupModerationData(deps);
|
||||
await selectGroupMemberUserId('some_input');
|
||||
|
||||
expect(deps.groupRequest.getGroupMember).toHaveBeenCalledWith({
|
||||
groupId: 'grp_test',
|
||||
userId: 'some_input'
|
||||
});
|
||||
});
|
||||
|
||||
test('does nothing with empty input', async () => {
|
||||
const deps = createDeps();
|
||||
const { selectGroupMemberUserId } = useGroupModerationData(deps);
|
||||
await selectGroupMemberUserId('');
|
||||
|
||||
expect(deps.groupRequest.getGroupMember).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('addGroupMemberToSelection', () => {
|
||||
test('uses group member data when available', async () => {
|
||||
const deps = createDeps();
|
||||
const member = { userId: 'usr_1', user: { displayName: 'Alice' } };
|
||||
deps.groupRequest.getGroupMember.mockResolvedValue({
|
||||
json: member,
|
||||
params: {}
|
||||
});
|
||||
deps.applyGroupMember.mockReturnValue(member);
|
||||
|
||||
const { addGroupMemberToSelection } = useGroupModerationData(deps);
|
||||
await addGroupMemberToSelection('usr_1');
|
||||
|
||||
expect(deps.selection.setSelectedUsers).toHaveBeenCalledWith('usr_1', member);
|
||||
expect(deps.userRequest.getCachedUser).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('falls back to user API when member has no user object', async () => {
|
||||
const deps = createDeps();
|
||||
deps.groupRequest.getGroupMember.mockResolvedValue({
|
||||
json: { userId: 'usr_1' },
|
||||
params: {}
|
||||
});
|
||||
deps.applyGroupMember.mockReturnValue({ userId: 'usr_1' });
|
||||
deps.userRequest.getCachedUser.mockResolvedValue({
|
||||
json: { id: 'usr_1', displayName: 'Alice' }
|
||||
});
|
||||
|
||||
const { addGroupMemberToSelection } = useGroupModerationData(deps);
|
||||
await addGroupMemberToSelection('usr_1');
|
||||
|
||||
expect(deps.userRequest.getCachedUser).toHaveBeenCalledWith({ userId: 'usr_1' });
|
||||
expect(deps.selection.setSelectedUsers).toHaveBeenCalledWith('usr_1', expect.objectContaining({
|
||||
userId: 'usr_1',
|
||||
displayName: 'Alice'
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
describe('resetData', () => {
|
||||
test('clears all table data and search state', () => {
|
||||
const deps = createDeps();
|
||||
deps.tables.members.data = [{ userId: 'usr_1' }];
|
||||
deps.tables.bans.data = [{ userId: 'usr_2' }];
|
||||
|
||||
const { resetData, memberSearch } = useGroupModerationData(deps);
|
||||
memberSearch.value = 'test';
|
||||
resetData();
|
||||
|
||||
expect(deps.tables.members.data).toHaveLength(0);
|
||||
expect(deps.tables.bans.data).toHaveLength(0);
|
||||
expect(deps.tables.invites.data).toHaveLength(0);
|
||||
expect(deps.tables.joinRequests.data).toHaveLength(0);
|
||||
expect(deps.tables.blocked.data).toHaveLength(0);
|
||||
expect(deps.tables.logs.data).toHaveLength(0);
|
||||
expect(memberSearch.value).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('member search / sort / filter', () => {
|
||||
test('groupMembersSearch clears table when search is too short', () => {
|
||||
const deps = createDeps();
|
||||
deps.tables.members.data = [{ userId: 'usr_1' }];
|
||||
|
||||
const { groupMembersSearch, memberSearch, isGroupMembersLoading } = useGroupModerationData(deps);
|
||||
memberSearch.value = 'ab';
|
||||
groupMembersSearch();
|
||||
|
||||
expect(deps.tables.members.data).toHaveLength(0);
|
||||
expect(isGroupMembersLoading.value).toBe(false);
|
||||
});
|
||||
|
||||
test('setGroupMemberSortOrder does nothing when sort is the same', async () => {
|
||||
const deps = createDeps();
|
||||
deps.groupRequest.getGroupMember.mockResolvedValue({ json: null, params: {} });
|
||||
|
||||
const { setGroupMemberSortOrder, memberSortOrder } = useGroupModerationData(deps);
|
||||
const currentSort = memberSortOrder.value;
|
||||
await setGroupMemberSortOrder(currentSort);
|
||||
|
||||
// getGroupMember should not have been called since sort didn't change
|
||||
expect(deps.groupRequest.getGroupMember).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('setGroupMemberFilter does nothing when filter is the same', async () => {
|
||||
const deps = createDeps();
|
||||
|
||||
const { setGroupMemberFilter, memberFilter } = useGroupModerationData(deps);
|
||||
const currentFilter = memberFilter.value;
|
||||
await setGroupMemberFilter(currentFilter);
|
||||
|
||||
expect(deps.groupRequest.getGroupMember).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('loadAllGroupMembers', () => {
|
||||
test('does nothing when already loading', async () => {
|
||||
const deps = createDeps();
|
||||
const { loadAllGroupMembers, isGroupMembersLoading } = useGroupModerationData(deps);
|
||||
isGroupMembersLoading.value = true;
|
||||
|
||||
await loadAllGroupMembers();
|
||||
|
||||
expect(deps.groupRequest.getGroupMember).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
58
src/components/dialogs/GroupDialog/useGroupCalendarEvents.js
Normal file
58
src/components/dialogs/GroupDialog/useGroupCalendarEvents.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import { computed } from 'vue';
|
||||
|
||||
/**
|
||||
* Composable for filtering group calendar events into past and upcoming,
|
||||
* and updating follow state on individual events.
|
||||
*
|
||||
* @param {import('vue').Ref} groupDialog - reactive ref to the group dialog state
|
||||
* @returns {{
|
||||
* pastCalenderEvents: import('vue').ComputedRef<Array>,
|
||||
* upcomingCalenderEvents: import('vue').ComputedRef<Array>,
|
||||
* updateFollowingCalendarData: (event: Object) => void
|
||||
* }}
|
||||
*/
|
||||
export function useGroupCalendarEvents(groupDialog) {
|
||||
const pastCalenderEvents = computed(() => {
|
||||
if (!groupDialog.value.calendar) {
|
||||
return [];
|
||||
}
|
||||
const now = Date.now();
|
||||
return groupDialog.value.calendar.filter((event) => {
|
||||
const eventEnd = new Date(event.endsAt).getTime();
|
||||
return eventEnd < now;
|
||||
});
|
||||
});
|
||||
|
||||
const upcomingCalenderEvents = computed(() => {
|
||||
if (!groupDialog.value.calendar) {
|
||||
return [];
|
||||
}
|
||||
const now = Date.now();
|
||||
return groupDialog.value.calendar.filter((event) => {
|
||||
const eventEnd = new Date(event.endsAt).getTime();
|
||||
return eventEnd >= now;
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {Object} event
|
||||
*/
|
||||
function updateFollowingCalendarData(event) {
|
||||
const calendar = groupDialog.value.calendar;
|
||||
for (let i = 0; i < calendar.length; i++) {
|
||||
if (calendar[i].id === event.id) {
|
||||
calendar[i] = {
|
||||
...calendar[i],
|
||||
...event
|
||||
};
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
pastCalenderEvents,
|
||||
upcomingCalenderEvents,
|
||||
updateFollowingCalendarData
|
||||
};
|
||||
}
|
||||
114
src/components/dialogs/GroupDialog/useGroupGalleries.js
Normal file
114
src/components/dialogs/GroupDialog/useGroupGalleries.js
Normal file
@@ -0,0 +1,114 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import { groupRequest } from '../../../api';
|
||||
|
||||
/**
|
||||
* Composable for managing group gallery loading and display state.
|
||||
*
|
||||
* @param {import('vue').Ref} groupDialog - reactive ref to the group dialog state
|
||||
* @returns {{
|
||||
* isGroupGalleryLoading: import('vue').Ref<boolean>,
|
||||
* groupDialogGalleryCurrentName: import('vue').Ref<string>,
|
||||
* groupGalleryTabs: import('vue').ComputedRef<Array>,
|
||||
* groupGalleryStatus: (gallery: Object) => Object,
|
||||
* getGroupGalleries: () => Promise<void>,
|
||||
* getGroupGallery: (groupId: string, galleryId: string) => Promise<void>
|
||||
* }}
|
||||
*/
|
||||
export function useGroupGalleries(groupDialog) {
|
||||
const groupDialogGalleryCurrentName = ref('0');
|
||||
const isGroupGalleryLoading = ref(false);
|
||||
|
||||
const groupGalleryTabs = computed(() =>
|
||||
(groupDialog.value?.ref?.galleries || []).map((gallery, index) => ({
|
||||
value: String(index),
|
||||
label: gallery?.name ?? ''
|
||||
}))
|
||||
);
|
||||
|
||||
/**
|
||||
* @param {Object} gallery
|
||||
*/
|
||||
function groupGalleryStatus(gallery) {
|
||||
const style = {};
|
||||
if (!gallery.membersOnly) {
|
||||
style.blue = true;
|
||||
} else if (!gallery.roleIdsToView) {
|
||||
style.green = true;
|
||||
} else {
|
||||
style.red = true;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function updateGroupDialogData(obj) {
|
||||
groupDialog.value = {
|
||||
...groupDialog.value,
|
||||
...obj
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async function getGroupGalleries() {
|
||||
updateGroupDialogData({ ...groupDialog.value, galleries: {} });
|
||||
groupDialogGalleryCurrentName.value = '0';
|
||||
isGroupGalleryLoading.value = true;
|
||||
const groupId = groupDialog.value.id;
|
||||
const tasks = (groupDialog.value.ref.galleries || []).map((gallery) =>
|
||||
getGroupGallery(groupId, gallery.id)
|
||||
);
|
||||
await Promise.allSettled(tasks);
|
||||
isGroupGalleryLoading.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} groupId
|
||||
* @param {string} galleryId
|
||||
*/
|
||||
async function getGroupGallery(groupId, galleryId) {
|
||||
try {
|
||||
const params = {
|
||||
groupId,
|
||||
galleryId,
|
||||
n: 100,
|
||||
offset: 0
|
||||
};
|
||||
const count = 50; // 5000 max
|
||||
for (let i = 0; i < count; i++) {
|
||||
const args = await groupRequest.getCachedGroupGallery(params);
|
||||
if (args) {
|
||||
for (const json of args.json) {
|
||||
if (groupDialog.value.id === json.groupId) {
|
||||
if (!groupDialog.value.galleries[json.galleryId]) {
|
||||
groupDialog.value.galleries[json.galleryId] =
|
||||
[];
|
||||
}
|
||||
groupDialog.value.galleries[json.galleryId].push(
|
||||
json
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
params.offset += 100;
|
||||
if (args.json.length < 100) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isGroupGalleryLoading,
|
||||
groupDialogGalleryCurrentName,
|
||||
groupGalleryTabs,
|
||||
groupGalleryStatus,
|
||||
getGroupGalleries,
|
||||
getGroupGallery
|
||||
};
|
||||
}
|
||||
318
src/components/dialogs/GroupDialog/useGroupMembers.js
Normal file
318
src/components/dialogs/GroupDialog/useGroupMembers.js
Normal file
@@ -0,0 +1,318 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import { debounce } from '../../../shared/utils';
|
||||
import {
|
||||
groupDialogFilterOptions,
|
||||
groupDialogSortingOptions
|
||||
} from '../../../shared/constants';
|
||||
import { groupRequest } from '../../../api';
|
||||
import * as workerTimers from 'worker-timers';
|
||||
|
||||
/**
|
||||
* Composable for managing group member loading, searching, sorting, and filtering.
|
||||
*
|
||||
* @param {import('vue').Ref} groupDialog - reactive ref to the group dialog state
|
||||
* @param {Object} deps - external dependencies
|
||||
* @param {import('vue').Ref} deps.currentUser - reactive ref to the current user
|
||||
* @param {Function} deps.applyGroupMember - function to apply group member data
|
||||
* @param {Function} deps.handleGroupMember - function to handle group member updates
|
||||
* @param {Function} deps.t - i18n translation function
|
||||
* @returns {Object} members composable API
|
||||
*/
|
||||
export function useGroupMembers(
|
||||
groupDialog,
|
||||
{ currentUser, applyGroupMember, handleGroupMember, t }
|
||||
) {
|
||||
const isGroupMembersDone = ref(false);
|
||||
const isGroupMembersLoading = ref(false);
|
||||
|
||||
let loadMoreGroupMembersParams = ref({
|
||||
n: 100,
|
||||
offset: 0,
|
||||
groupId: '',
|
||||
sort: '',
|
||||
roleId: ''
|
||||
});
|
||||
|
||||
const groupDialogMemberSortValue = computed({
|
||||
get() {
|
||||
return groupDialog.value?.memberSortOrder?.value ?? '';
|
||||
},
|
||||
set(value) {
|
||||
const option = Object.values(groupDialogSortingOptions).find(
|
||||
(item) => item.value === value
|
||||
);
|
||||
if (option) {
|
||||
setGroupMemberSortOrder(option);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const groupDialogMemberFilterKey = computed({
|
||||
get() {
|
||||
const filter = groupDialog.value?.memberFilter;
|
||||
if (!filter) return null;
|
||||
|
||||
if (filter.id === null) return 'everyone';
|
||||
if (filter.id === '') return 'usersWithNoRole';
|
||||
return `role:${filter.id}`;
|
||||
},
|
||||
set(key) {
|
||||
if (!key) return;
|
||||
|
||||
if (key === 'everyone') {
|
||||
setGroupMemberFilter(groupDialogFilterOptions.everyone);
|
||||
return;
|
||||
}
|
||||
if (key === 'usersWithNoRole') {
|
||||
setGroupMemberFilter(groupDialogFilterOptions.usersWithNoRole);
|
||||
return;
|
||||
}
|
||||
|
||||
if (key.startsWith('role:')) {
|
||||
const roleId = key.slice('role:'.length);
|
||||
const role = groupDialog.value?.ref?.roles?.find(
|
||||
(r) => r.id === roleId
|
||||
);
|
||||
if (role) {
|
||||
setGroupMemberFilter(role);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const groupDialogMemberFilterGroups = computed(() => {
|
||||
const filterItems = Object.values(groupDialogFilterOptions).map(
|
||||
(item) => ({
|
||||
value:
|
||||
item.id === null
|
||||
? 'everyone'
|
||||
: item.id === ''
|
||||
? 'usersWithNoRole'
|
||||
: `role:${item.id}`,
|
||||
label: t(item.name),
|
||||
search: t(item.name)
|
||||
})
|
||||
);
|
||||
|
||||
const roleItems = (groupDialog.value?.ref?.roles ?? [])
|
||||
.filter((role) => !role.defaultRole)
|
||||
.map((role) => ({
|
||||
value: `role:${role.id}`,
|
||||
label: role.name,
|
||||
search: role.name
|
||||
}));
|
||||
|
||||
return [
|
||||
{
|
||||
key: 'filters',
|
||||
label: t('dialog.group.members.filter'),
|
||||
items: filterItems
|
||||
},
|
||||
{
|
||||
key: 'roles',
|
||||
label: 'Roles',
|
||||
items: roleItems
|
||||
}
|
||||
].filter((group) => group.items.length);
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function groupMembersSearch() {
|
||||
if (groupDialog.value.memberSearch.length < 3) {
|
||||
groupDialog.value.memberSearchResults = [];
|
||||
isGroupMembersLoading.value = false;
|
||||
return;
|
||||
}
|
||||
debounce(groupMembersSearchDebounced, 200)();
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function groupMembersSearchDebounced() {
|
||||
const D = groupDialog.value;
|
||||
const search = D.memberSearch;
|
||||
D.memberSearchResults = [];
|
||||
if (!search || search.length < 3) {
|
||||
return;
|
||||
}
|
||||
isGroupMembersLoading.value = true;
|
||||
groupRequest
|
||||
.getGroupMembersSearch({
|
||||
groupId: D.id,
|
||||
query: search,
|
||||
n: 100,
|
||||
offset: 0
|
||||
})
|
||||
.then((args) => {
|
||||
for (const json of args.json.results) {
|
||||
handleGroupMember({
|
||||
json,
|
||||
params: {
|
||||
groupId: args.params.groupId
|
||||
}
|
||||
});
|
||||
}
|
||||
if (D.id === args.params.groupId) {
|
||||
D.memberSearchResults = args.json.results;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
isGroupMembersLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async function getGroupDialogGroupMembers() {
|
||||
const D = groupDialog.value;
|
||||
D.members = [];
|
||||
isGroupMembersDone.value = false;
|
||||
loadMoreGroupMembersParams.value = {
|
||||
sort: 'joinedAt:desc',
|
||||
roleId: '',
|
||||
n: 100,
|
||||
offset: 0,
|
||||
groupId: D.id
|
||||
};
|
||||
if (D.memberSortOrder.value) {
|
||||
loadMoreGroupMembersParams.value.sort = D.memberSortOrder.value;
|
||||
}
|
||||
if (D.memberFilter.id !== null) {
|
||||
loadMoreGroupMembersParams.value.roleId = D.memberFilter.id;
|
||||
}
|
||||
if (D.inGroup) {
|
||||
await groupRequest
|
||||
.getCachedGroupMember({
|
||||
groupId: D.id,
|
||||
userId: currentUser.value.id
|
||||
})
|
||||
.then((args) => {
|
||||
args.ref = applyGroupMember(args.json);
|
||||
if (args.json) {
|
||||
args.json.user = currentUser.value;
|
||||
if (D.memberFilter.id === null) {
|
||||
// when flitered by role don't include self
|
||||
D.members.push(args.json);
|
||||
}
|
||||
}
|
||||
return args;
|
||||
});
|
||||
}
|
||||
await loadMoreGroupMembers();
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async function loadMoreGroupMembers() {
|
||||
if (isGroupMembersDone.value || isGroupMembersLoading.value) {
|
||||
return;
|
||||
}
|
||||
const D = groupDialog.value;
|
||||
const params = loadMoreGroupMembersParams.value;
|
||||
if (params.roleId === '') {
|
||||
delete params.roleId;
|
||||
}
|
||||
D.memberSearch = '';
|
||||
isGroupMembersLoading.value = true;
|
||||
await groupRequest
|
||||
.getCachedGroupMembers(params)
|
||||
.finally(() => {
|
||||
isGroupMembersLoading.value = false;
|
||||
})
|
||||
.then((args) => {
|
||||
for (const json of args.json) {
|
||||
handleGroupMember({
|
||||
json,
|
||||
params: {
|
||||
groupId: args.params.groupId
|
||||
}
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < args.json.length; i++) {
|
||||
const member = args.json[i];
|
||||
if (member.userId === currentUser.value.id) {
|
||||
if (
|
||||
D.members.length > 0 &&
|
||||
D.members[0].userId === currentUser.value.id
|
||||
) {
|
||||
// remove duplicate and keep sort order
|
||||
D.members.splice(0, 1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (args.json.length < params.n) {
|
||||
isGroupMembersDone.value = true;
|
||||
}
|
||||
D.members = [...D.members, ...args.json];
|
||||
params.offset += params.n;
|
||||
return args;
|
||||
})
|
||||
.catch((err) => {
|
||||
isGroupMembersDone.value = true;
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async function loadAllGroupMembers() {
|
||||
if (isGroupMembersLoading.value) {
|
||||
return;
|
||||
}
|
||||
await getGroupDialogGroupMembers();
|
||||
while (groupDialog.value.visible && !isGroupMembersDone.value) {
|
||||
isGroupMembersLoading.value = true;
|
||||
await new Promise((resolve) => {
|
||||
workerTimers.setTimeout(resolve, 1000);
|
||||
});
|
||||
isGroupMembersLoading.value = false;
|
||||
await loadMoreGroupMembers();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Object} sortOrder
|
||||
*/
|
||||
async function setGroupMemberSortOrder(sortOrder) {
|
||||
const D = groupDialog.value;
|
||||
if (D.memberSortOrder?.value === sortOrder?.value) {
|
||||
return;
|
||||
}
|
||||
D.memberSortOrder = sortOrder;
|
||||
await getGroupDialogGroupMembers();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Object} filter
|
||||
*/
|
||||
async function setGroupMemberFilter(filter) {
|
||||
const D = groupDialog.value;
|
||||
if (D.memberFilter === filter) {
|
||||
return;
|
||||
}
|
||||
D.memberFilter = filter;
|
||||
await getGroupDialogGroupMembers();
|
||||
}
|
||||
|
||||
return {
|
||||
isGroupMembersDone,
|
||||
isGroupMembersLoading,
|
||||
loadMoreGroupMembersParams,
|
||||
groupDialogMemberSortValue,
|
||||
groupDialogMemberFilterKey,
|
||||
groupDialogMemberFilterGroups,
|
||||
groupMembersSearch,
|
||||
getGroupDialogGroupMembers,
|
||||
loadMoreGroupMembers,
|
||||
loadAllGroupMembers,
|
||||
setGroupMemberSortOrder,
|
||||
setGroupMemberFilter
|
||||
};
|
||||
}
|
||||
485
src/components/dialogs/GroupDialog/useGroupModerationData.js
Normal file
485
src/components/dialogs/GroupDialog/useGroupModerationData.js
Normal file
@@ -0,0 +1,485 @@
|
||||
import { ref } from 'vue';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { debounce } from '../../../shared/utils';
|
||||
import * as workerTimers from 'worker-timers';
|
||||
|
||||
/**
|
||||
* Composable for group moderation data fetching, member management,
|
||||
* searching, sorting and filtering.
|
||||
*
|
||||
* @param {object} deps
|
||||
* @param {import('vue').Ref} deps.groupMemberModeration - store ref
|
||||
* @param {import('vue').Ref} deps.currentUser - store ref
|
||||
* @param {Function} deps.applyGroupMember - store action
|
||||
* @param {Function} deps.handleGroupMember - store action
|
||||
* @param {object} deps.tables - reactive table data objects
|
||||
* @param {object} deps.tables.members
|
||||
* @param {object} deps.tables.bans
|
||||
* @param {object} deps.tables.invites
|
||||
* @param {object} deps.tables.joinRequests
|
||||
* @param {object} deps.tables.blocked
|
||||
* @param {object} deps.tables.logs
|
||||
* @param {object} deps.selection - from useGroupModerationSelection
|
||||
* @param {object} deps.selection.selectedUsers
|
||||
* @param {Function} deps.selection.setSelectedUsers
|
||||
* @param {object} deps.groupRequest - API module
|
||||
* @param {object} deps.userRequest - API module
|
||||
*/
|
||||
export function useGroupModerationData(deps) {
|
||||
const {
|
||||
groupMemberModeration,
|
||||
currentUser,
|
||||
applyGroupMember,
|
||||
handleGroupMember,
|
||||
tables,
|
||||
selection,
|
||||
groupRequest,
|
||||
userRequest
|
||||
} = deps;
|
||||
|
||||
const isGroupMembersLoading = ref(false);
|
||||
const isGroupMembersDone = ref(false);
|
||||
const memberFilter = ref({
|
||||
id: null,
|
||||
name: 'dialog.group.members.filters.everyone'
|
||||
});
|
||||
const memberSortOrder = ref({
|
||||
id: '',
|
||||
name: 'dialog.group.members.sorting.joined_at_desc',
|
||||
value: 'joinedAt:desc'
|
||||
});
|
||||
const memberSearch = ref('');
|
||||
const members = ref([]);
|
||||
const loadMoreGroupMembersParams = ref({
|
||||
n: 100,
|
||||
offset: 0,
|
||||
groupId: '',
|
||||
sort: 'joinedAt:desc',
|
||||
roleId: ''
|
||||
});
|
||||
|
||||
// ── Members ──────────────────────────────────────────────────
|
||||
|
||||
async function getGroupMembers() {
|
||||
members.value = [];
|
||||
isGroupMembersDone.value = false;
|
||||
loadMoreGroupMembersParams.value = {
|
||||
sort: 'joinedAt:desc',
|
||||
roleId: '',
|
||||
n: 100,
|
||||
offset: 0,
|
||||
groupId: groupMemberModeration.value.id
|
||||
};
|
||||
if (memberSortOrder.value.value) {
|
||||
loadMoreGroupMembersParams.value.sort = memberSortOrder.value.value;
|
||||
}
|
||||
if (memberFilter.value.id !== null) {
|
||||
loadMoreGroupMembersParams.value.roleId = memberFilter.value.id;
|
||||
}
|
||||
await groupRequest
|
||||
.getGroupMember({
|
||||
groupId: groupMemberModeration.value.id,
|
||||
userId: currentUser.value.id
|
||||
})
|
||||
.then((args) => {
|
||||
args.ref = applyGroupMember(args.json);
|
||||
if (args.json) {
|
||||
args.json.user = currentUser.value;
|
||||
if (memberFilter.value.id === null) {
|
||||
members.value.push(args.json);
|
||||
}
|
||||
}
|
||||
return args;
|
||||
});
|
||||
await loadMoreGroupMembers();
|
||||
}
|
||||
|
||||
async function loadMoreGroupMembers() {
|
||||
if (isGroupMembersDone.value || isGroupMembersLoading.value) {
|
||||
return;
|
||||
}
|
||||
const params = loadMoreGroupMembersParams.value;
|
||||
if (params.roleId === '') {
|
||||
delete params.roleId;
|
||||
}
|
||||
memberSearch.value = '';
|
||||
isGroupMembersLoading.value = true;
|
||||
await groupRequest
|
||||
.getGroupMembers(params)
|
||||
.finally(() => {
|
||||
isGroupMembersLoading.value = false;
|
||||
})
|
||||
.then((args) => {
|
||||
for (const json of args.json) {
|
||||
handleGroupMember({
|
||||
json,
|
||||
params: { groupId: args.params.groupId }
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < args.json.length; i++) {
|
||||
const member = args.json[i];
|
||||
if (member.userId === currentUser.value.id) {
|
||||
if (members.value.length > 0 && members.value[0].userId === currentUser.value.id) {
|
||||
members.value.splice(0, 1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (args.json.length < params.n) {
|
||||
isGroupMembersDone.value = true;
|
||||
}
|
||||
members.value = [...members.value, ...args.json];
|
||||
tables.members.data = members.value.map((member) => ({
|
||||
...member,
|
||||
$selected: Boolean(selection.selectedUsers[member.userId])
|
||||
}));
|
||||
params.offset += params.n;
|
||||
return args;
|
||||
})
|
||||
.catch((err) => {
|
||||
isGroupMembersDone.value = true;
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
|
||||
async function loadAllGroupMembers() {
|
||||
if (isGroupMembersLoading.value) {
|
||||
return;
|
||||
}
|
||||
await getGroupMembers();
|
||||
while (groupMemberModeration.value.visible && !isGroupMembersDone.value) {
|
||||
isGroupMembersLoading.value = true;
|
||||
await new Promise((resolve) => {
|
||||
workerTimers.setTimeout(resolve, 1000);
|
||||
});
|
||||
isGroupMembersLoading.value = false;
|
||||
await loadMoreGroupMembers();
|
||||
}
|
||||
}
|
||||
|
||||
async function setGroupMemberSortOrder(sortOrder) {
|
||||
if (memberSortOrder.value === sortOrder) {
|
||||
return;
|
||||
}
|
||||
memberSortOrder.value = sortOrder;
|
||||
await getGroupMembers();
|
||||
}
|
||||
|
||||
async function setGroupMemberFilter(filter) {
|
||||
if (memberFilter.value === filter) {
|
||||
return;
|
||||
}
|
||||
memberFilter.value = filter;
|
||||
await getGroupMembers();
|
||||
}
|
||||
|
||||
function groupMembersSearch() {
|
||||
if (memberSearch.value.length < 3) {
|
||||
tables.members.data = [];
|
||||
isGroupMembersLoading.value = false;
|
||||
return;
|
||||
}
|
||||
isGroupMembersLoading.value = true;
|
||||
debounce(groupMembersSearchDebounced, 200)();
|
||||
}
|
||||
|
||||
function groupMembersSearchDebounced() {
|
||||
const groupId = groupMemberModeration.value.id;
|
||||
const search = memberSearch.value;
|
||||
tables.members.data = [];
|
||||
if (memberSearch.value.length < 3) {
|
||||
return;
|
||||
}
|
||||
isGroupMembersLoading.value = true;
|
||||
groupRequest
|
||||
.getGroupMembersSearch({
|
||||
groupId,
|
||||
query: search,
|
||||
n: 100,
|
||||
offset: 0
|
||||
})
|
||||
.then((args) => {
|
||||
for (const json of args.json.results) {
|
||||
handleGroupMember({
|
||||
json,
|
||||
params: { groupId: args.params.groupId }
|
||||
});
|
||||
}
|
||||
if (groupId === args.params.groupId) {
|
||||
tables.members.data = args.json.results.map((member) => ({
|
||||
...member,
|
||||
$selected: Boolean(selection.selectedUsers[member.userId])
|
||||
}));
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
isGroupMembersLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// ── Bans ─────────────────────────────────────────────────────
|
||||
|
||||
async function getAllGroupBans(groupId) {
|
||||
tables.bans.data = [];
|
||||
const params = { groupId, n: 100, offset: 0 };
|
||||
const count = 50; // 5000 max
|
||||
isGroupMembersLoading.value = true;
|
||||
const fetchedBans = [];
|
||||
try {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const args = await groupRequest.getGroupBans(params);
|
||||
if (args && args.json) {
|
||||
if (groupMemberModeration.value.id !== args.params.groupId) {
|
||||
continue;
|
||||
}
|
||||
args.json.forEach((json) => {
|
||||
const ref = applyGroupMember(json);
|
||||
fetchedBans.push(ref);
|
||||
});
|
||||
if (args.json.length < params.n) {
|
||||
break;
|
||||
}
|
||||
params.offset += params.n;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
if (!groupMemberModeration.value.visible) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
tables.bans.data = fetchedBans;
|
||||
} catch {
|
||||
toast.error('Failed to get group bans');
|
||||
} finally {
|
||||
isGroupMembersLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Invites / Join Requests / Blocked ────────────────────────
|
||||
|
||||
async function getAllGroupInvites(groupId) {
|
||||
tables.invites.data = [];
|
||||
const params = { groupId, n: 100, offset: 0 };
|
||||
const count = 50; // 5000 max
|
||||
isGroupMembersLoading.value = true;
|
||||
let newData = [];
|
||||
try {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const args = await groupRequest.getGroupInvites(params);
|
||||
if (args) {
|
||||
if (groupMemberModeration.value.id !== args.params.groupId) {
|
||||
return;
|
||||
}
|
||||
for (const json of args.json) {
|
||||
const ref = applyGroupMember(json);
|
||||
newData.push(ref);
|
||||
}
|
||||
}
|
||||
params.offset += params.n;
|
||||
if (args.json.length < params.n) {
|
||||
break;
|
||||
}
|
||||
if (!groupMemberModeration.value.visible) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
tables.invites.data = newData;
|
||||
} catch {
|
||||
toast.error('Failed to get group invites');
|
||||
} finally {
|
||||
isGroupMembersLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function getAllGroupJoinRequests(groupId) {
|
||||
tables.joinRequests.data = [];
|
||||
const params = { groupId, n: 100, offset: 0, blocked: false };
|
||||
const count = 50; // 5000 max
|
||||
isGroupMembersLoading.value = true;
|
||||
let newData = [];
|
||||
try {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const args = await groupRequest.getGroupJoinRequests(params);
|
||||
if (groupMemberModeration.value.id !== args.params.groupId) {
|
||||
return;
|
||||
}
|
||||
for (const json of args.json) {
|
||||
const ref = applyGroupMember(json);
|
||||
newData.push(ref);
|
||||
}
|
||||
params.offset += params.n;
|
||||
if (args.json.length < params.n) {
|
||||
break;
|
||||
}
|
||||
if (!groupMemberModeration.value.visible) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
tables.joinRequests.data = newData;
|
||||
} catch {
|
||||
toast.error('Failed to get group join requests');
|
||||
} finally {
|
||||
isGroupMembersLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function getAllGroupBlockedRequests(groupId) {
|
||||
tables.blocked.data = [];
|
||||
const params = { groupId, n: 100, offset: 0, blocked: true };
|
||||
const count = 50; // 5000
|
||||
isGroupMembersLoading.value = true;
|
||||
let newData = [];
|
||||
try {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const args = await groupRequest.getGroupJoinRequests(params);
|
||||
if (groupMemberModeration.value.id !== args.params.groupId) {
|
||||
return;
|
||||
}
|
||||
for (const json of args.json) {
|
||||
const ref = applyGroupMember(json);
|
||||
newData.push(ref);
|
||||
}
|
||||
params.offset += params.n;
|
||||
if (args.json.length < params.n) {
|
||||
break;
|
||||
}
|
||||
if (!groupMemberModeration.value.visible) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
tables.blocked.data = newData;
|
||||
} catch {
|
||||
toast.error('Failed to get group join requests');
|
||||
} finally {
|
||||
isGroupMembersLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function getAllGroupInvitesAndJoinRequests(groupId) {
|
||||
try {
|
||||
await Promise.all([
|
||||
getAllGroupInvites(groupId),
|
||||
getAllGroupJoinRequests(groupId),
|
||||
getAllGroupBlockedRequests(groupId)
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('Error fetching group invites/requests:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Logs ─────────────────────────────────────────────────────
|
||||
|
||||
async function getAllGroupLogs(groupId, eventTypes = []) {
|
||||
tables.logs.data = [];
|
||||
const params = { groupId, n: 100, offset: 0 };
|
||||
if (eventTypes.length) {
|
||||
params.eventTypes = eventTypes;
|
||||
}
|
||||
const count = 50; // 5000 max
|
||||
isGroupMembersLoading.value = true;
|
||||
let newData = [];
|
||||
try {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const args = await groupRequest.getGroupLogs(params);
|
||||
if (args) {
|
||||
if (groupMemberModeration.value.id !== args.params.groupId) {
|
||||
continue;
|
||||
}
|
||||
for (const json of args.json.results) {
|
||||
const existsInData = newData.some((dataItem) => dataItem.id === json.id);
|
||||
if (!existsInData) {
|
||||
newData.push(json);
|
||||
}
|
||||
}
|
||||
}
|
||||
params.offset += params.n;
|
||||
if (!args.json.hasNext) {
|
||||
break;
|
||||
}
|
||||
if (!groupMemberModeration.value.visible) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
tables.logs.data = newData;
|
||||
} catch {
|
||||
toast.error('Failed to get group logs');
|
||||
} finally {
|
||||
isGroupMembersLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── User Selection ───────────────────────────────────────────
|
||||
|
||||
async function addGroupMemberToSelection(userId) {
|
||||
const D = groupMemberModeration.value;
|
||||
let member = {};
|
||||
const memberArgs = await groupRequest.getGroupMember({ groupId: D.id, userId });
|
||||
if (memberArgs && memberArgs.json) {
|
||||
member = applyGroupMember(memberArgs.json);
|
||||
}
|
||||
if (member && member.user) {
|
||||
selection.setSelectedUsers(member.userId, member);
|
||||
return;
|
||||
}
|
||||
const userArgs = await userRequest.getCachedUser({ userId });
|
||||
member.userId = userArgs.json.id;
|
||||
member.user = userArgs.json;
|
||||
member.displayName = userArgs.json.displayName;
|
||||
selection.setSelectedUsers(member.userId, member);
|
||||
}
|
||||
|
||||
async function selectGroupMemberUserId(userIdInput) {
|
||||
if (!userIdInput) return;
|
||||
const regexUserId = /usr_[0-9A-Fa-f]{8}-([0-9A-Fa-f]{4}-){3}[0-9A-Fa-f]{12}/g;
|
||||
let match;
|
||||
const userIdList = new Set();
|
||||
while ((match = regexUserId.exec(userIdInput)) !== null) {
|
||||
userIdList.add(match[0]);
|
||||
}
|
||||
if (userIdList.size === 0) {
|
||||
userIdList.add(userIdInput);
|
||||
}
|
||||
const promises = [];
|
||||
userIdList.forEach((userId) => {
|
||||
promises.push(addGroupMemberToSelection(userId));
|
||||
});
|
||||
await Promise.allSettled(promises);
|
||||
}
|
||||
|
||||
// ── Reset ────────────────────────────────────────────────────
|
||||
|
||||
function resetData() {
|
||||
tables.members.data = [];
|
||||
tables.bans.data = [];
|
||||
tables.invites.data = [];
|
||||
tables.joinRequests.data = [];
|
||||
tables.blocked.data = [];
|
||||
tables.logs.data = [];
|
||||
memberSearch.value = '';
|
||||
members.value = [];
|
||||
isGroupMembersDone.value = false;
|
||||
}
|
||||
|
||||
return {
|
||||
isGroupMembersLoading,
|
||||
isGroupMembersDone,
|
||||
memberFilter,
|
||||
memberSortOrder,
|
||||
memberSearch,
|
||||
members,
|
||||
loadAllGroupMembers,
|
||||
getGroupMembers,
|
||||
setGroupMemberSortOrder,
|
||||
setGroupMemberFilter,
|
||||
groupMembersSearch,
|
||||
selectGroupMemberUserId,
|
||||
addGroupMemberToSelection,
|
||||
getAllGroupBans,
|
||||
getAllGroupLogs,
|
||||
getAllGroupInvites,
|
||||
getAllGroupJoinRequests,
|
||||
getAllGroupBlockedRequests,
|
||||
getAllGroupInvitesAndJoinRequests,
|
||||
resetData
|
||||
};
|
||||
}
|
||||
@@ -602,50 +602,26 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
AlertTriangle,
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
Copy,
|
||||
Download,
|
||||
DownloadIcon,
|
||||
Eye,
|
||||
Info,
|
||||
Languages,
|
||||
LogOut,
|
||||
MoreHorizontal,
|
||||
Pencil,
|
||||
RefreshCw,
|
||||
Tag,
|
||||
Trash2
|
||||
} from 'lucide-vue-next';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
|
||||
import { Copy, Info, Languages, MoreHorizontal, Pencil, Trash2 } from 'lucide-vue-next';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { DataTableEmpty } from '@/components/ui/data-table';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { TabsUnderline } from '@/components/ui/tabs';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import DeprecationAlert from '@/components/DeprecationAlert.vue';
|
||||
import VueJsonPretty from 'vue-json-pretty';
|
||||
|
||||
import {
|
||||
useAdvancedSettingsStore,
|
||||
useAppearanceSettingsStore,
|
||||
useAuthStore,
|
||||
useAvatarStore,
|
||||
useFavoriteStore,
|
||||
useFriendStore,
|
||||
@@ -657,19 +633,16 @@
|
||||
useModalStore,
|
||||
useModerationStore,
|
||||
useNotificationStore,
|
||||
useUiStore,
|
||||
useUserStore,
|
||||
useWorldStore
|
||||
} from '../../../stores';
|
||||
import {
|
||||
copyToClipboard,
|
||||
downloadAndSaveJson,
|
||||
formatDateFilter,
|
||||
getFaviconUrl,
|
||||
isFriendOnline,
|
||||
isRealInstance,
|
||||
openExternalLink,
|
||||
parseLocation,
|
||||
refreshInstancePlayerCount,
|
||||
timeToText,
|
||||
userImage,
|
||||
@@ -677,18 +650,9 @@
|
||||
userOnlineForTimestamp,
|
||||
userStatusClass
|
||||
} from '../../../shared/utils';
|
||||
import {
|
||||
favoriteRequest,
|
||||
friendRequest,
|
||||
miscRequest,
|
||||
notificationRequest,
|
||||
playerModerationRequest,
|
||||
userRequest,
|
||||
worldRequest
|
||||
} from '../../../api';
|
||||
import { database } from '../../../service/database';
|
||||
import { miscRequest, userRequest } from '../../../api';
|
||||
import { formatJsonVars } from '../../../shared/utils/base/ui';
|
||||
import { processBulk } from '../../../service/request';
|
||||
import { useUserDialogCommands } from './useUserDialogCommands';
|
||||
|
||||
import DialogJsonTab from '../DialogJsonTab.vue';
|
||||
import InstanceActionBar from '../../InstanceActionBar.vue';
|
||||
@@ -757,6 +721,39 @@
|
||||
|
||||
const { applyPlayerModeration, handlePlayerModerationDelete } = useModerationStore();
|
||||
|
||||
const {
|
||||
sendInviteDialogVisible,
|
||||
sendInviteDialog,
|
||||
sendInviteRequestDialogVisible,
|
||||
userDialogCommand,
|
||||
registerCallbacks
|
||||
} = useUserDialogCommands(userDialog, {
|
||||
t,
|
||||
toast,
|
||||
modalStore,
|
||||
currentUser,
|
||||
cachedUsers,
|
||||
friendLogTable,
|
||||
lastLocation,
|
||||
lastLocationDestination,
|
||||
inviteGroupDialog,
|
||||
showUserDialog,
|
||||
showFavoriteDialog,
|
||||
showAvatarDialog,
|
||||
showAvatarAuthorDialog,
|
||||
showModerateGroupDialog,
|
||||
showSendBoopDialog,
|
||||
showGalleryPage,
|
||||
getFriendRequest,
|
||||
handleFriendDelete,
|
||||
applyPlayerModeration,
|
||||
handlePlayerModerationDelete,
|
||||
refreshInviteMessageTableData,
|
||||
clearInviteImageUpload,
|
||||
instanceStore,
|
||||
useNotificationStore
|
||||
});
|
||||
|
||||
watch(
|
||||
() => userDialog.value.loading,
|
||||
() => {
|
||||
@@ -778,14 +775,6 @@
|
||||
const userDialogLastWorld = ref('');
|
||||
const userDialogLastFavoriteWorld = ref('');
|
||||
|
||||
const sendInviteDialogVisible = ref(false);
|
||||
const sendInviteDialog = ref({
|
||||
messageSlot: {},
|
||||
userId: '',
|
||||
params: {}
|
||||
});
|
||||
const sendInviteRequestDialogVisible = ref(false);
|
||||
|
||||
const socialStatusDialog = ref({
|
||||
visible: false,
|
||||
loading: false,
|
||||
@@ -966,6 +955,17 @@
|
||||
D.visible = true;
|
||||
}
|
||||
|
||||
// Register simple dialog openers as callbacks for the command composable
|
||||
registerCallbacks({
|
||||
showSocialStatusDialog,
|
||||
showLanguageDialog,
|
||||
showBioDialog,
|
||||
showPronounsDialog,
|
||||
showEditNoteAndMemoDialog: () => {
|
||||
isEditNoteAndMemoDialogVisible.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
@@ -1028,450 +1028,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userId
|
||||
* @param type
|
||||
*/
|
||||
function setPlayerModeration(userId, type) {
|
||||
const D = userDialog.value;
|
||||
AppApi.SetVRChatUserModeration(currentUser.value.id, userId, type).then((result) => {
|
||||
if (result) {
|
||||
if (type === 4) {
|
||||
D.isShowAvatar = false;
|
||||
D.isHideAvatar = true;
|
||||
} else if (type === 5) {
|
||||
D.isShowAvatar = true;
|
||||
D.isHideAvatar = false;
|
||||
} else {
|
||||
D.isShowAvatar = false;
|
||||
D.isHideAvatar = false;
|
||||
}
|
||||
} else {
|
||||
toast.error(t('message.avatar.change_moderation_failed'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param params
|
||||
* @param userId
|
||||
*/
|
||||
function showSendInviteDialog(params, userId) {
|
||||
sendInviteDialog.value = {
|
||||
params,
|
||||
userId,
|
||||
messageSlot: {}
|
||||
};
|
||||
refreshInviteMessageTableData('message');
|
||||
clearInviteImageUpload();
|
||||
sendInviteDialogVisible.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param params
|
||||
* @param userId
|
||||
*/
|
||||
function showSendInviteRequestDialog(params, userId) {
|
||||
sendInviteDialog.value = {
|
||||
params,
|
||||
userId,
|
||||
messageSlot: {}
|
||||
};
|
||||
refreshInviteMessageTableData('request');
|
||||
clearInviteImageUpload();
|
||||
sendInviteRequestDialogVisible.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param groupId
|
||||
* @param userId
|
||||
*/
|
||||
function showInviteGroupDialog(groupId, userId) {
|
||||
inviteGroupDialog.value.groupId = groupId;
|
||||
inviteGroupDialog.value.userId = userId;
|
||||
inviteGroupDialog.value.visible = true;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param command
|
||||
*/
|
||||
function userDialogCommand(command) {
|
||||
let L;
|
||||
const D = userDialog.value;
|
||||
if (D.visible === false) {
|
||||
return;
|
||||
}
|
||||
if (command === 'Refresh') {
|
||||
const userId = D.id;
|
||||
D.id = '';
|
||||
showUserDialog(userId);
|
||||
} else if (command === 'Share') {
|
||||
copyUserURL(D.id);
|
||||
} else if (command === 'Add Favorite') {
|
||||
showFavoriteDialog('friend', D.id);
|
||||
} else if (command === 'Edit Social Status') {
|
||||
showSocialStatusDialog();
|
||||
} else if (command === 'Edit Language') {
|
||||
showLanguageDialog();
|
||||
} else if (command === 'Edit Bio') {
|
||||
showBioDialog();
|
||||
} else if (command === 'Edit Pronouns') {
|
||||
showPronounsDialog();
|
||||
} else if (command === 'Request Invite') {
|
||||
notificationRequest
|
||||
.sendRequestInvite(
|
||||
{
|
||||
platform: 'standalonewindows'
|
||||
},
|
||||
D.id
|
||||
)
|
||||
.then((args) => {
|
||||
toast('Request invite sent');
|
||||
return args;
|
||||
});
|
||||
} else if (command === 'Invite Message') {
|
||||
L = parseLocation(lastLocation.value.location);
|
||||
worldRequest
|
||||
.getCachedWorld({
|
||||
worldId: L.worldId
|
||||
})
|
||||
.then((args) => {
|
||||
showSendInviteDialog(
|
||||
{
|
||||
instanceId: lastLocation.value.location,
|
||||
worldId: lastLocation.value.location,
|
||||
worldName: args.ref.name
|
||||
},
|
||||
D.id
|
||||
);
|
||||
});
|
||||
} else if (command === 'Request Invite Message') {
|
||||
showSendInviteRequestDialog(
|
||||
{
|
||||
platform: 'standalonewindows'
|
||||
},
|
||||
D.id
|
||||
);
|
||||
} else if (command === 'Invite') {
|
||||
let currentLocation = lastLocation.value.location;
|
||||
if (lastLocation.value.location === 'traveling') {
|
||||
currentLocation = lastLocationDestination.value;
|
||||
}
|
||||
L = parseLocation(currentLocation);
|
||||
worldRequest
|
||||
.getCachedWorld({
|
||||
worldId: L.worldId
|
||||
})
|
||||
.then((args) => {
|
||||
notificationRequest
|
||||
.sendInvite(
|
||||
{
|
||||
instanceId: L.tag,
|
||||
worldId: L.tag,
|
||||
worldName: args.ref.name
|
||||
},
|
||||
D.id
|
||||
)
|
||||
.then((_args) => {
|
||||
toast(t('message.invite.sent'));
|
||||
return _args;
|
||||
});
|
||||
});
|
||||
} else if (command === 'Show Avatar Author') {
|
||||
const { currentAvatarImageUrl } = D.ref;
|
||||
showAvatarAuthorDialog(D.id, D.$avatarInfo.ownerId, currentAvatarImageUrl);
|
||||
} else if (command === 'Show Fallback Avatar Details') {
|
||||
const { fallbackAvatar } = D.ref;
|
||||
if (fallbackAvatar) {
|
||||
showAvatarDialog(fallbackAvatar);
|
||||
} else {
|
||||
toast.error('No fallback avatar set');
|
||||
}
|
||||
} else if (command === 'Previous Instances') {
|
||||
showPreviousInstancesListDialog(D.ref);
|
||||
} else if (command === 'Manage Gallery') {
|
||||
userDialog.value.visible = false;
|
||||
showGalleryPage();
|
||||
} else if (command === 'Invite To Group') {
|
||||
showInviteGroupDialog('', D.id);
|
||||
} else if (command === 'Send Boop') {
|
||||
showSendBoopDialog(D.id);
|
||||
} else if (command === 'Group Moderation') {
|
||||
showModerateGroupDialog(D.id);
|
||||
} else if (command === 'Hide Avatar') {
|
||||
if (D.isHideAvatar) {
|
||||
setPlayerModeration(D.id, 0);
|
||||
} else {
|
||||
setPlayerModeration(D.id, 4);
|
||||
}
|
||||
} else if (command === 'Show Avatar') {
|
||||
if (D.isShowAvatar) {
|
||||
setPlayerModeration(D.id, 0);
|
||||
} else {
|
||||
setPlayerModeration(D.id, 5);
|
||||
}
|
||||
} else if (command === 'Edit Note Memo') {
|
||||
isEditNoteAndMemoDialogVisible.value = true;
|
||||
} else {
|
||||
const i18nPreFix = 'dialog.user.actions.';
|
||||
const formattedCommand = command.toLowerCase().replace(/ /g, '_');
|
||||
const displayCommandText = t(`${i18nPreFix}${formattedCommand}`).includes('i18nPreFix')
|
||||
? command
|
||||
: t(`${i18nPreFix}${formattedCommand}`);
|
||||
|
||||
modalStore
|
||||
.confirm({
|
||||
description: t('confirm.message', {
|
||||
command: displayCommandText
|
||||
}),
|
||||
title: t('confirm.title'),
|
||||
confirmText: t('confirm.confirm_button'),
|
||||
cancelText: t('confirm.cancel_button')
|
||||
})
|
||||
.then(({ ok }) => {
|
||||
if (ok) {
|
||||
performUserDialogCommand(command, D.id);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param args
|
||||
*/
|
||||
function handleSendFriendRequest(args) {
|
||||
const ref = cachedUsers.get(args.params.userId);
|
||||
if (typeof ref === 'undefined') {
|
||||
return;
|
||||
}
|
||||
const friendLogHistory = {
|
||||
created_at: new Date().toJSON(),
|
||||
type: 'FriendRequest',
|
||||
userId: ref.id,
|
||||
displayName: ref.displayName
|
||||
};
|
||||
friendLogTable.value.data.push(friendLogHistory);
|
||||
database.addFriendLogHistory(friendLogHistory);
|
||||
|
||||
const D = userDialog.value;
|
||||
if (D.visible === false || D.id !== args.params.userId) {
|
||||
return;
|
||||
}
|
||||
if (args.json.success) {
|
||||
D.isFriend = true;
|
||||
} else {
|
||||
D.outgoingRequest = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param args
|
||||
*/
|
||||
function handleCancelFriendRequest(args) {
|
||||
const ref = cachedUsers.get(args.params.userId);
|
||||
if (typeof ref === 'undefined') {
|
||||
return;
|
||||
}
|
||||
const friendLogHistory = {
|
||||
created_at: new Date().toJSON(),
|
||||
type: 'CancelFriendRequest',
|
||||
userId: ref.id,
|
||||
displayName: ref.displayName
|
||||
};
|
||||
friendLogTable.value.data.push(friendLogHistory);
|
||||
database.addFriendLogHistory(friendLogHistory);
|
||||
const D = userDialog.value;
|
||||
if (D.visible === false || D.id !== args.params.userId) {
|
||||
return;
|
||||
}
|
||||
D.outgoingRequest = false;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param args
|
||||
*/
|
||||
function handleSendPlayerModeration(args) {
|
||||
const ref = applyPlayerModeration(args.json);
|
||||
const D = userDialog.value;
|
||||
if (D.visible === false || (ref.targetUserId !== D.id && ref.sourceUserId !== currentUser.value.id)) {
|
||||
return;
|
||||
}
|
||||
if (ref.type === 'block') {
|
||||
D.isBlock = true;
|
||||
} else if (ref.type === 'mute') {
|
||||
D.isMute = true;
|
||||
} else if (ref.type === 'interactOff') {
|
||||
D.isInteractOff = true;
|
||||
} else if (ref.type === 'muteChat') {
|
||||
D.isMuteChat = true;
|
||||
}
|
||||
toast.success(t('message.user.moderated'));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param command
|
||||
* @param userId
|
||||
*/
|
||||
async function performUserDialogCommand(command, userId) {
|
||||
let args;
|
||||
let key;
|
||||
switch (command) {
|
||||
case 'Delete Favorite':
|
||||
favoriteRequest.deleteFavorite({
|
||||
objectId: userId
|
||||
});
|
||||
break;
|
||||
case 'Accept Friend Request':
|
||||
key = getFriendRequest(userId);
|
||||
if (key === '') {
|
||||
const args = await friendRequest.sendFriendRequest({
|
||||
userId
|
||||
});
|
||||
handleSendFriendRequest(args);
|
||||
} else {
|
||||
notificationRequest
|
||||
.acceptFriendRequestNotification({
|
||||
notificationId: key
|
||||
})
|
||||
.then((args) => {
|
||||
useNotificationStore().handleNotificationAccept(args);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err && err.message && err.message.includes('404')) {
|
||||
useNotificationStore().handleNotificationHide(key);
|
||||
}
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'Decline Friend Request':
|
||||
key = getFriendRequest(userId);
|
||||
if (key === '') {
|
||||
const args = await friendRequest.cancelFriendRequest({
|
||||
userId
|
||||
});
|
||||
handleCancelFriendRequest(args);
|
||||
} else {
|
||||
notificationRequest
|
||||
.hideNotification({
|
||||
notificationId: key
|
||||
})
|
||||
.then(() => {
|
||||
useNotificationStore().handleNotificationHide(key);
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'Cancel Friend Request': {
|
||||
args = await friendRequest.cancelFriendRequest({
|
||||
userId
|
||||
});
|
||||
handleCancelFriendRequest(args);
|
||||
break;
|
||||
}
|
||||
case 'Send Friend Request': {
|
||||
args = await friendRequest.sendFriendRequest({
|
||||
userId
|
||||
});
|
||||
handleSendFriendRequest(args);
|
||||
break;
|
||||
}
|
||||
case 'Moderation Unblock':
|
||||
args = await playerModerationRequest.deletePlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'block'
|
||||
});
|
||||
handlePlayerModerationDelete(args);
|
||||
break;
|
||||
case 'Moderation Block': {
|
||||
args = await playerModerationRequest.sendPlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'block'
|
||||
});
|
||||
handleSendPlayerModeration(args);
|
||||
break;
|
||||
}
|
||||
case 'Moderation Unmute':
|
||||
args = await playerModerationRequest.deletePlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'mute'
|
||||
});
|
||||
handlePlayerModerationDelete(args);
|
||||
break;
|
||||
case 'Moderation Mute': {
|
||||
args = await playerModerationRequest.sendPlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'mute'
|
||||
});
|
||||
handleSendPlayerModeration(args);
|
||||
break;
|
||||
}
|
||||
case 'Moderation Enable Avatar Interaction':
|
||||
args = await playerModerationRequest.deletePlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'interactOff'
|
||||
});
|
||||
handlePlayerModerationDelete(args);
|
||||
break;
|
||||
case 'Moderation Disable Avatar Interaction': {
|
||||
args = await playerModerationRequest.sendPlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'interactOff'
|
||||
});
|
||||
handleSendPlayerModeration(args);
|
||||
break;
|
||||
}
|
||||
case 'Moderation Enable Chatbox':
|
||||
args = await playerModerationRequest.deletePlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'muteChat'
|
||||
});
|
||||
handlePlayerModerationDelete(args);
|
||||
break;
|
||||
case 'Moderation Disable Chatbox': {
|
||||
args = await playerModerationRequest.sendPlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'muteChat'
|
||||
});
|
||||
handleSendPlayerModeration(args);
|
||||
break;
|
||||
}
|
||||
case 'Report Hacking':
|
||||
reportUserForHacking(userId);
|
||||
break;
|
||||
case 'Unfriend':
|
||||
args = await friendRequest.deleteFriend(
|
||||
{
|
||||
userId
|
||||
},
|
||||
t('dialog.user.actions.unfriend_success_msg')
|
||||
);
|
||||
handleFriendDelete(args);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userId
|
||||
*/
|
||||
function reportUserForHacking(userId) {
|
||||
miscRequest.reportUser({
|
||||
userId,
|
||||
contentType: 'user',
|
||||
reason: 'behavior-hacking',
|
||||
type: 'report'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,532 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { ref } from 'vue';
|
||||
import { useUserDialogCommands } from '../useUserDialogCommands';
|
||||
|
||||
// Mock external modules
|
||||
vi.mock('../../../../api', () => ({
|
||||
favoriteRequest: {
|
||||
deleteFavorite: vi.fn()
|
||||
},
|
||||
friendRequest: {
|
||||
sendFriendRequest: vi.fn(),
|
||||
cancelFriendRequest: vi.fn(),
|
||||
deleteFriend: vi.fn()
|
||||
},
|
||||
miscRequest: {
|
||||
reportUser: vi.fn()
|
||||
},
|
||||
notificationRequest: {
|
||||
sendRequestInvite: vi.fn(() => Promise.resolve({})),
|
||||
sendInvite: vi.fn(() => Promise.resolve({})),
|
||||
acceptFriendRequestNotification: vi.fn(() => Promise.resolve({})),
|
||||
hideNotification: vi.fn(() => Promise.resolve({}))
|
||||
},
|
||||
playerModerationRequest: {
|
||||
sendPlayerModeration: vi.fn(),
|
||||
deletePlayerModeration: vi.fn()
|
||||
},
|
||||
worldRequest: {
|
||||
getCachedWorld: vi.fn(() =>
|
||||
Promise.resolve({ ref: { name: 'TestWorld' } })
|
||||
)
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('../../../../shared/utils', () => ({
|
||||
copyToClipboard: vi.fn(),
|
||||
parseLocation: vi.fn(() => ({ worldId: 'wrld_test', tag: 'wrld_test~123' }))
|
||||
}));
|
||||
|
||||
vi.mock('../../../../service/database', () => ({
|
||||
database: {
|
||||
addFriendLogHistory: vi.fn()
|
||||
}
|
||||
}));
|
||||
|
||||
// Import mocks after vi.mock
|
||||
const { copyToClipboard } = await import('../../../../shared/utils');
|
||||
const {
|
||||
favoriteRequest,
|
||||
friendRequest,
|
||||
notificationRequest,
|
||||
playerModerationRequest,
|
||||
miscRequest
|
||||
} = await import('../../../../api');
|
||||
const { database } = await import('../../../../service/database');
|
||||
|
||||
function createMockUserDialog() {
|
||||
return ref({
|
||||
visible: true,
|
||||
id: 'usr_test123',
|
||||
ref: {
|
||||
displayName: 'TestUser',
|
||||
currentAvatarImageUrl: 'https://example.com/avatar.png',
|
||||
fallbackAvatar: 'avtr_fallback',
|
||||
location: 'wrld_test~123'
|
||||
},
|
||||
$avatarInfo: { ownerId: 'usr_owner' },
|
||||
isFriend: true,
|
||||
isBlock: false,
|
||||
isMute: false,
|
||||
isInteractOff: false,
|
||||
isMuteChat: false,
|
||||
isShowAvatar: false,
|
||||
isHideAvatar: false,
|
||||
outgoingRequest: false,
|
||||
incomingRequest: false
|
||||
});
|
||||
}
|
||||
|
||||
function createMockDeps(overrides = {}) {
|
||||
return {
|
||||
t: vi.fn((key) => key),
|
||||
toast: Object.assign(vi.fn(), {
|
||||
success: vi.fn(),
|
||||
error: vi.fn()
|
||||
}),
|
||||
modalStore: {
|
||||
confirm: vi.fn(() => Promise.resolve({ ok: true }))
|
||||
},
|
||||
currentUser: ref({ id: 'usr_current', isBoopingEnabled: true }),
|
||||
cachedUsers: new Map([
|
||||
['usr_test123', { id: 'usr_test123', displayName: 'TestUser' }]
|
||||
]),
|
||||
friendLogTable: ref({ data: [] }),
|
||||
lastLocation: ref({ location: 'wrld_test~123' }),
|
||||
lastLocationDestination: ref('wrld_dest~456'),
|
||||
inviteGroupDialog: ref({ groupId: '', userId: '', visible: false }),
|
||||
showUserDialog: vi.fn(),
|
||||
showFavoriteDialog: vi.fn(),
|
||||
showAvatarDialog: vi.fn(),
|
||||
showAvatarAuthorDialog: vi.fn(),
|
||||
showModerateGroupDialog: vi.fn(),
|
||||
showSendBoopDialog: vi.fn(),
|
||||
showGalleryPage: vi.fn(),
|
||||
getFriendRequest: vi.fn(() => ''),
|
||||
handleFriendDelete: vi.fn(),
|
||||
applyPlayerModeration: vi.fn((json) => json),
|
||||
handlePlayerModerationDelete: vi.fn(),
|
||||
refreshInviteMessageTableData: vi.fn(),
|
||||
clearInviteImageUpload: vi.fn(),
|
||||
instanceStore: {
|
||||
showPreviousInstancesListDialog: vi.fn()
|
||||
},
|
||||
useNotificationStore: vi.fn(() => ({
|
||||
handleNotificationAccept: vi.fn(),
|
||||
handleNotificationHide: vi.fn()
|
||||
})),
|
||||
...overrides
|
||||
};
|
||||
}
|
||||
|
||||
describe('useUserDialogCommands', () => {
|
||||
let userDialog;
|
||||
let deps;
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
userDialog = createMockUserDialog();
|
||||
deps = createMockDeps();
|
||||
});
|
||||
|
||||
describe('userDialogCommand — direct commands', () => {
|
||||
it('should not execute when dialog is not visible', () => {
|
||||
userDialog.value.visible = false;
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Refresh');
|
||||
expect(deps.showUserDialog).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Refresh: should reset id and reopen dialog', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Refresh');
|
||||
expect(userDialog.value.id).toBe('');
|
||||
expect(deps.showUserDialog).toHaveBeenCalledWith('usr_test123');
|
||||
});
|
||||
|
||||
it('Share: should copy user URL', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Share');
|
||||
expect(copyToClipboard).toHaveBeenCalledWith(
|
||||
'https://vrchat.com/home/user/usr_test123',
|
||||
'User URL copied to clipboard'
|
||||
);
|
||||
});
|
||||
|
||||
it('Add Favorite: should call showFavoriteDialog', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Add Favorite');
|
||||
expect(deps.showFavoriteDialog).toHaveBeenCalledWith(
|
||||
'friend',
|
||||
'usr_test123'
|
||||
);
|
||||
});
|
||||
|
||||
it('Show Avatar Author: should call showAvatarAuthorDialog', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Show Avatar Author');
|
||||
expect(deps.showAvatarAuthorDialog).toHaveBeenCalledWith(
|
||||
'usr_test123',
|
||||
'usr_owner',
|
||||
'https://example.com/avatar.png'
|
||||
);
|
||||
});
|
||||
|
||||
it('Show Fallback Avatar Details: should call showAvatarDialog with fallback', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Show Fallback Avatar Details');
|
||||
expect(deps.showAvatarDialog).toHaveBeenCalledWith('avtr_fallback');
|
||||
});
|
||||
|
||||
it('Show Fallback Avatar Details: should toast error when no fallback', () => {
|
||||
userDialog.value.ref.fallbackAvatar = null;
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Show Fallback Avatar Details');
|
||||
expect(deps.toast.error).toHaveBeenCalledWith(
|
||||
'No fallback avatar set'
|
||||
);
|
||||
});
|
||||
|
||||
it('Send Boop: should call showSendBoopDialog', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Send Boop');
|
||||
expect(deps.showSendBoopDialog).toHaveBeenCalledWith('usr_test123');
|
||||
});
|
||||
|
||||
it('Group Moderation: should call showModerateGroupDialog', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Group Moderation');
|
||||
expect(deps.showModerateGroupDialog).toHaveBeenCalledWith(
|
||||
'usr_test123'
|
||||
);
|
||||
});
|
||||
|
||||
it('Manage Gallery: should hide dialog and show gallery', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Manage Gallery');
|
||||
expect(userDialog.value.visible).toBe(false);
|
||||
expect(deps.showGalleryPage).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Previous Instances: should call instanceStore', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Previous Instances');
|
||||
expect(
|
||||
deps.instanceStore.showPreviousInstancesListDialog
|
||||
).toHaveBeenCalledWith('user', userDialog.value.ref);
|
||||
});
|
||||
|
||||
it('Invite To Group: should set invite group dialog state', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Invite To Group');
|
||||
expect(deps.inviteGroupDialog.value.groupId).toBe('');
|
||||
expect(deps.inviteGroupDialog.value.userId).toBe('usr_test123');
|
||||
expect(deps.inviteGroupDialog.value.visible).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('userDialogCommand — string callback commands', () => {
|
||||
it('should delegate string-type commands to registered callbacks', () => {
|
||||
const showSocialStatusDialog = vi.fn();
|
||||
const { userDialogCommand, registerCallbacks } =
|
||||
useUserDialogCommands(userDialog, deps);
|
||||
registerCallbacks({ showSocialStatusDialog });
|
||||
userDialogCommand('Edit Social Status');
|
||||
expect(showSocialStatusDialog).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not throw when callback is not registered', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
expect(() => userDialogCommand('Edit Bio')).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('userDialogCommand — confirmed commands', () => {
|
||||
it('Delete Favorite: should confirm then delete', async () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Delete Favorite');
|
||||
await vi.waitFor(() => {
|
||||
expect(deps.modalStore.confirm).toHaveBeenCalled();
|
||||
});
|
||||
await vi.waitFor(() => {
|
||||
expect(favoriteRequest.deleteFavorite).toHaveBeenCalledWith({
|
||||
objectId: 'usr_test123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('confirmed command should not execute when user cancels', async () => {
|
||||
deps.modalStore.confirm = vi.fn(() =>
|
||||
Promise.resolve({ ok: false })
|
||||
);
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Delete Favorite');
|
||||
await vi.waitFor(() => {
|
||||
expect(deps.modalStore.confirm).toHaveBeenCalled();
|
||||
});
|
||||
expect(favoriteRequest.deleteFavorite).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Send Friend Request: should confirm then send', async () => {
|
||||
friendRequest.sendFriendRequest.mockResolvedValue({
|
||||
params: { userId: 'usr_test123' },
|
||||
json: { success: true }
|
||||
});
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Send Friend Request');
|
||||
await vi.waitFor(() => {
|
||||
expect(friendRequest.sendFriendRequest).toHaveBeenCalledWith({
|
||||
userId: 'usr_test123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Cancel Friend Request: should confirm then cancel', async () => {
|
||||
friendRequest.cancelFriendRequest.mockResolvedValue({
|
||||
params: { userId: 'usr_test123' },
|
||||
json: {}
|
||||
});
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Cancel Friend Request');
|
||||
await vi.waitFor(() => {
|
||||
expect(friendRequest.cancelFriendRequest).toHaveBeenCalledWith({
|
||||
userId: 'usr_test123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Moderation Block: should confirm then send moderation', async () => {
|
||||
playerModerationRequest.sendPlayerModeration.mockResolvedValue({
|
||||
json: {
|
||||
targetUserId: 'usr_test123',
|
||||
sourceUserId: 'usr_current',
|
||||
type: 'block'
|
||||
}
|
||||
});
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Moderation Block');
|
||||
await vi.waitFor(() => {
|
||||
expect(
|
||||
playerModerationRequest.sendPlayerModeration
|
||||
).toHaveBeenCalledWith({
|
||||
moderated: 'usr_test123',
|
||||
type: 'block'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Moderation Unblock: should confirm then delete moderation', async () => {
|
||||
playerModerationRequest.deletePlayerModeration.mockResolvedValue(
|
||||
{}
|
||||
);
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Moderation Unblock');
|
||||
await vi.waitFor(() => {
|
||||
expect(
|
||||
playerModerationRequest.deletePlayerModeration
|
||||
).toHaveBeenCalledWith({
|
||||
moderated: 'usr_test123',
|
||||
type: 'block'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Report Hacking: should confirm then report', async () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Report Hacking');
|
||||
await vi.waitFor(() => {
|
||||
expect(miscRequest.reportUser).toHaveBeenCalledWith({
|
||||
userId: 'usr_test123',
|
||||
contentType: 'user',
|
||||
reason: 'behavior-hacking',
|
||||
type: 'report'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Unfriend: should confirm then delete friend', async () => {
|
||||
friendRequest.deleteFriend.mockResolvedValue({});
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Unfriend');
|
||||
await vi.waitFor(() => {
|
||||
expect(friendRequest.deleteFriend).toHaveBeenCalledWith(
|
||||
{ userId: 'usr_test123' },
|
||||
'dialog.user.actions.unfriend_success_msg'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('invite dialog state', () => {
|
||||
it('Request Invite Message: should open send invite request dialog', () => {
|
||||
const {
|
||||
userDialogCommand,
|
||||
sendInviteRequestDialogVisible,
|
||||
sendInviteDialog
|
||||
} = useUserDialogCommands(userDialog, deps);
|
||||
userDialogCommand('Request Invite Message');
|
||||
expect(sendInviteRequestDialogVisible.value).toBe(true);
|
||||
expect(sendInviteDialog.value.userId).toBe('usr_test123');
|
||||
expect(deps.refreshInviteMessageTableData).toHaveBeenCalledWith(
|
||||
'request'
|
||||
);
|
||||
expect(deps.clearInviteImageUpload).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleSendFriendRequest (internal)', () => {
|
||||
it('should add friend log and update dialog state on success', async () => {
|
||||
friendRequest.sendFriendRequest.mockResolvedValue({
|
||||
params: { userId: 'usr_test123' },
|
||||
json: { success: true }
|
||||
});
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Send Friend Request');
|
||||
await vi.waitFor(() => {
|
||||
expect(database.addFriendLogHistory).toHaveBeenCalled();
|
||||
});
|
||||
expect(userDialog.value.isFriend).toBe(true);
|
||||
});
|
||||
|
||||
it('should set outgoingRequest when not success', async () => {
|
||||
friendRequest.sendFriendRequest.mockResolvedValue({
|
||||
params: { userId: 'usr_test123' },
|
||||
json: { success: false }
|
||||
});
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Send Friend Request');
|
||||
await vi.waitFor(() => {
|
||||
expect(database.addFriendLogHistory).toHaveBeenCalled();
|
||||
});
|
||||
expect(userDialog.value.outgoingRequest).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleSendPlayerModeration (internal)', () => {
|
||||
it('should update isBlock when moderation type is block', async () => {
|
||||
deps.applyPlayerModeration = vi.fn(() => ({
|
||||
targetUserId: 'usr_test123',
|
||||
sourceUserId: 'usr_current',
|
||||
type: 'block'
|
||||
}));
|
||||
playerModerationRequest.sendPlayerModeration.mockResolvedValue({
|
||||
json: {
|
||||
targetUserId: 'usr_test123',
|
||||
sourceUserId: 'usr_current',
|
||||
type: 'block'
|
||||
}
|
||||
});
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Moderation Block');
|
||||
await vi.waitFor(() => {
|
||||
expect(userDialog.value.isBlock).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('should update isMute when moderation type is mute', async () => {
|
||||
deps.applyPlayerModeration = vi.fn(() => ({
|
||||
targetUserId: 'usr_test123',
|
||||
sourceUserId: 'usr_current',
|
||||
type: 'mute'
|
||||
}));
|
||||
playerModerationRequest.sendPlayerModeration.mockResolvedValue({
|
||||
json: {
|
||||
targetUserId: 'usr_test123',
|
||||
sourceUserId: 'usr_current',
|
||||
type: 'mute'
|
||||
}
|
||||
});
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
userDialogCommand('Moderation Mute');
|
||||
await vi.waitFor(() => {
|
||||
expect(userDialog.value.isMute).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('unknown command', () => {
|
||||
it('should do nothing for unknown commands', () => {
|
||||
const { userDialogCommand } = useUserDialogCommands(
|
||||
userDialog,
|
||||
deps
|
||||
);
|
||||
expect(() => userDialogCommand('NonExistentCommand')).not.toThrow();
|
||||
expect(deps.modalStore.confirm).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
637
src/components/dialogs/UserDialog/useUserDialogCommands.js
Normal file
637
src/components/dialogs/UserDialog/useUserDialogCommands.js
Normal file
@@ -0,0 +1,637 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
import {
|
||||
favoriteRequest,
|
||||
friendRequest,
|
||||
miscRequest,
|
||||
notificationRequest,
|
||||
playerModerationRequest,
|
||||
worldRequest
|
||||
} from '../../../api';
|
||||
import { copyToClipboard, parseLocation } from '../../../shared/utils';
|
||||
import { database } from '../../../service/database';
|
||||
|
||||
/**
|
||||
* Composable for UserDialog command dispatch.
|
||||
* Uses a command map pattern instead of if-else/switch-case chains.
|
||||
* @param {import('vue').Ref} userDialog - reactive ref to the user dialog state
|
||||
* @param {object} deps - external dependencies
|
||||
* @param deps.t
|
||||
* @param deps.toast
|
||||
* @param deps.modalStore
|
||||
* @param deps.currentUser
|
||||
* @param deps.cachedUsers
|
||||
* @param deps.friendLogTable
|
||||
* @param deps.lastLocation
|
||||
* @param deps.lastLocationDestination
|
||||
* @param deps.inviteGroupDialog
|
||||
* @param deps.showUserDialog
|
||||
* @param deps.showFavoriteDialog
|
||||
* @param deps.showAvatarDialog
|
||||
* @param deps.showAvatarAuthorDialog
|
||||
* @param deps.showModerateGroupDialog
|
||||
* @param deps.showSendBoopDialog
|
||||
* @param deps.showGalleryPage
|
||||
* @param deps.getFriendRequest
|
||||
* @param deps.handleFriendDelete
|
||||
* @param deps.applyPlayerModeration
|
||||
* @param deps.handlePlayerModerationDelete
|
||||
* @param deps.refreshInviteMessageTableData
|
||||
* @param deps.clearInviteImageUpload
|
||||
* @param deps.instanceStore
|
||||
* @param deps.useNotificationStore
|
||||
* @returns {object} command composable API
|
||||
*/
|
||||
export function useUserDialogCommands(
|
||||
userDialog,
|
||||
{
|
||||
t,
|
||||
toast,
|
||||
modalStore,
|
||||
currentUser,
|
||||
cachedUsers,
|
||||
friendLogTable,
|
||||
lastLocation,
|
||||
lastLocationDestination,
|
||||
inviteGroupDialog,
|
||||
showUserDialog,
|
||||
showFavoriteDialog,
|
||||
showAvatarDialog,
|
||||
showAvatarAuthorDialog,
|
||||
showModerateGroupDialog,
|
||||
showSendBoopDialog,
|
||||
showGalleryPage,
|
||||
getFriendRequest,
|
||||
handleFriendDelete,
|
||||
applyPlayerModeration,
|
||||
handlePlayerModerationDelete,
|
||||
refreshInviteMessageTableData,
|
||||
clearInviteImageUpload,
|
||||
instanceStore,
|
||||
useNotificationStore
|
||||
}
|
||||
) {
|
||||
// --- Invite dialog state ---
|
||||
const sendInviteDialogVisible = ref(false);
|
||||
const sendInviteDialog = ref({
|
||||
messageSlot: {},
|
||||
userId: '',
|
||||
params: {}
|
||||
});
|
||||
const sendInviteRequestDialogVisible = ref(false);
|
||||
|
||||
// --- Internal helpers ---
|
||||
|
||||
/**
|
||||
* @param {object} args
|
||||
*/
|
||||
function handleSendFriendRequest(args) {
|
||||
const ref = cachedUsers.get(args.params.userId);
|
||||
if (typeof ref === 'undefined') {
|
||||
return;
|
||||
}
|
||||
const friendLogHistory = {
|
||||
created_at: new Date().toJSON(),
|
||||
type: 'FriendRequest',
|
||||
userId: ref.id,
|
||||
displayName: ref.displayName
|
||||
};
|
||||
friendLogTable.value.data.push(friendLogHistory);
|
||||
database.addFriendLogHistory(friendLogHistory);
|
||||
|
||||
const D = userDialog.value;
|
||||
if (D.visible === false || D.id !== args.params.userId) {
|
||||
return;
|
||||
}
|
||||
if (args.json.success) {
|
||||
D.isFriend = true;
|
||||
} else {
|
||||
D.outgoingRequest = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} args
|
||||
*/
|
||||
function handleCancelFriendRequest(args) {
|
||||
const ref = cachedUsers.get(args.params.userId);
|
||||
if (typeof ref === 'undefined') {
|
||||
return;
|
||||
}
|
||||
const friendLogHistory = {
|
||||
created_at: new Date().toJSON(),
|
||||
type: 'CancelFriendRequest',
|
||||
userId: ref.id,
|
||||
displayName: ref.displayName
|
||||
};
|
||||
friendLogTable.value.data.push(friendLogHistory);
|
||||
database.addFriendLogHistory(friendLogHistory);
|
||||
const D = userDialog.value;
|
||||
if (D.visible === false || D.id !== args.params.userId) {
|
||||
return;
|
||||
}
|
||||
D.outgoingRequest = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} args
|
||||
*/
|
||||
function handleSendPlayerModeration(args) {
|
||||
const ref = applyPlayerModeration(args.json);
|
||||
const D = userDialog.value;
|
||||
if (
|
||||
D.visible === false ||
|
||||
(ref.targetUserId !== D.id &&
|
||||
ref.sourceUserId !== currentUser.value.id)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (ref.type === 'block') {
|
||||
D.isBlock = true;
|
||||
} else if (ref.type === 'mute') {
|
||||
D.isMute = true;
|
||||
} else if (ref.type === 'interactOff') {
|
||||
D.isInteractOff = true;
|
||||
} else if (ref.type === 'muteChat') {
|
||||
D.isMuteChat = true;
|
||||
}
|
||||
toast.success(t('message.user.moderated'));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} userId
|
||||
* @param {number} type
|
||||
*/
|
||||
function setPlayerModeration(userId, type) {
|
||||
const D = userDialog.value;
|
||||
AppApi.SetVRChatUserModeration(currentUser.value.id, userId, type).then(
|
||||
(result) => {
|
||||
if (result) {
|
||||
if (type === 4) {
|
||||
D.isShowAvatar = false;
|
||||
D.isHideAvatar = true;
|
||||
} else if (type === 5) {
|
||||
D.isShowAvatar = true;
|
||||
D.isHideAvatar = false;
|
||||
} else {
|
||||
D.isShowAvatar = false;
|
||||
D.isHideAvatar = false;
|
||||
}
|
||||
} else {
|
||||
toast.error(t('message.avatar.change_moderation_failed'));
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} params
|
||||
* @param {string} userId
|
||||
*/
|
||||
function showSendInviteDialogFn(params, userId) {
|
||||
sendInviteDialog.value = {
|
||||
params,
|
||||
userId,
|
||||
messageSlot: {}
|
||||
};
|
||||
refreshInviteMessageTableData('message');
|
||||
clearInviteImageUpload();
|
||||
sendInviteDialogVisible.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} params
|
||||
* @param {string} userId
|
||||
*/
|
||||
function showSendInviteRequestDialogFn(params, userId) {
|
||||
sendInviteDialog.value = {
|
||||
params,
|
||||
userId,
|
||||
messageSlot: {}
|
||||
};
|
||||
refreshInviteMessageTableData('request');
|
||||
clearInviteImageUpload();
|
||||
sendInviteRequestDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// --- Command map ---
|
||||
// Direct commands: function
|
||||
// Confirmed commands: { confirm: true, handler: fn }
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function buildCommandMap() {
|
||||
const D = () => userDialog.value;
|
||||
|
||||
return {
|
||||
// --- Direct commands ---
|
||||
Refresh: () => {
|
||||
const userId = D().id;
|
||||
D().id = '';
|
||||
showUserDialog(userId);
|
||||
},
|
||||
Share: () => {
|
||||
copyToClipboard(
|
||||
`https://vrchat.com/home/user/${D().id}`,
|
||||
'User URL copied to clipboard'
|
||||
);
|
||||
},
|
||||
'Add Favorite': () => {
|
||||
showFavoriteDialog('friend', D().id);
|
||||
},
|
||||
'Edit Social Status': 'showSocialStatusDialog',
|
||||
'Edit Language': 'showLanguageDialog',
|
||||
'Edit Bio': 'showBioDialog',
|
||||
'Edit Pronouns': 'showPronounsDialog',
|
||||
'Request Invite': () => {
|
||||
notificationRequest
|
||||
.sendRequestInvite(
|
||||
{
|
||||
platform: 'standalonewindows'
|
||||
},
|
||||
D().id
|
||||
)
|
||||
.then((args) => {
|
||||
toast('Request invite sent');
|
||||
return args;
|
||||
});
|
||||
},
|
||||
'Invite Message': () => {
|
||||
const L = parseLocation(lastLocation.value.location);
|
||||
worldRequest
|
||||
.getCachedWorld({
|
||||
worldId: L.worldId
|
||||
})
|
||||
.then((args) => {
|
||||
showSendInviteDialogFn(
|
||||
{
|
||||
instanceId: lastLocation.value.location,
|
||||
worldId: lastLocation.value.location,
|
||||
worldName: args.ref.name
|
||||
},
|
||||
D().id
|
||||
);
|
||||
});
|
||||
},
|
||||
'Request Invite Message': () => {
|
||||
showSendInviteRequestDialogFn(
|
||||
{
|
||||
platform: 'standalonewindows'
|
||||
},
|
||||
D().id
|
||||
);
|
||||
},
|
||||
Invite: () => {
|
||||
let currentLocation = lastLocation.value.location;
|
||||
if (lastLocation.value.location === 'traveling') {
|
||||
currentLocation = lastLocationDestination.value;
|
||||
}
|
||||
const L = parseLocation(currentLocation);
|
||||
worldRequest
|
||||
.getCachedWorld({
|
||||
worldId: L.worldId
|
||||
})
|
||||
.then((args) => {
|
||||
notificationRequest
|
||||
.sendInvite(
|
||||
{
|
||||
instanceId: L.tag,
|
||||
worldId: L.tag,
|
||||
worldName: args.ref.name
|
||||
},
|
||||
D().id
|
||||
)
|
||||
.then((_args) => {
|
||||
toast(t('message.invite.sent'));
|
||||
return _args;
|
||||
});
|
||||
});
|
||||
},
|
||||
'Show Avatar Author': () => {
|
||||
const { currentAvatarImageUrl } = D().ref;
|
||||
showAvatarAuthorDialog(
|
||||
D().id,
|
||||
D().$avatarInfo.ownerId,
|
||||
currentAvatarImageUrl
|
||||
);
|
||||
},
|
||||
'Show Fallback Avatar Details': () => {
|
||||
const { fallbackAvatar } = D().ref;
|
||||
if (fallbackAvatar) {
|
||||
showAvatarDialog(fallbackAvatar);
|
||||
} else {
|
||||
toast.error('No fallback avatar set');
|
||||
}
|
||||
},
|
||||
'Previous Instances': () => {
|
||||
instanceStore.showPreviousInstancesListDialog('user', D().ref);
|
||||
},
|
||||
'Manage Gallery': () => {
|
||||
userDialog.value.visible = false;
|
||||
showGalleryPage();
|
||||
},
|
||||
'Invite To Group': () => {
|
||||
inviteGroupDialog.value.groupId = '';
|
||||
inviteGroupDialog.value.userId = D().id;
|
||||
inviteGroupDialog.value.visible = true;
|
||||
},
|
||||
'Send Boop': () => {
|
||||
showSendBoopDialog(D().id);
|
||||
},
|
||||
'Group Moderation': () => {
|
||||
showModerateGroupDialog(D().id);
|
||||
},
|
||||
'Hide Avatar': () => {
|
||||
if (D().isHideAvatar) {
|
||||
setPlayerModeration(D().id, 0);
|
||||
} else {
|
||||
setPlayerModeration(D().id, 4);
|
||||
}
|
||||
},
|
||||
'Show Avatar': () => {
|
||||
if (D().isShowAvatar) {
|
||||
setPlayerModeration(D().id, 0);
|
||||
} else {
|
||||
setPlayerModeration(D().id, 5);
|
||||
}
|
||||
},
|
||||
'Edit Note Memo': 'showEditNoteAndMemoDialog',
|
||||
|
||||
// --- Confirmed commands ---
|
||||
'Delete Favorite': {
|
||||
confirm: true,
|
||||
handler: (userId) => {
|
||||
favoriteRequest.deleteFavorite({
|
||||
objectId: userId
|
||||
});
|
||||
}
|
||||
},
|
||||
'Accept Friend Request': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const key = getFriendRequest(userId);
|
||||
if (key === '') {
|
||||
const args = await friendRequest.sendFriendRequest({
|
||||
userId
|
||||
});
|
||||
handleSendFriendRequest(args);
|
||||
} else {
|
||||
notificationRequest
|
||||
.acceptFriendRequestNotification({
|
||||
notificationId: key
|
||||
})
|
||||
.then((args) => {
|
||||
useNotificationStore().handleNotificationAccept(
|
||||
args
|
||||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (
|
||||
err &&
|
||||
err.message &&
|
||||
err.message.includes('404')
|
||||
) {
|
||||
useNotificationStore().handleNotificationHide(
|
||||
key
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
'Decline Friend Request': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const key = getFriendRequest(userId);
|
||||
if (key === '') {
|
||||
const args = await friendRequest.cancelFriendRequest({
|
||||
userId
|
||||
});
|
||||
handleCancelFriendRequest(args);
|
||||
} else {
|
||||
notificationRequest
|
||||
.hideNotification({
|
||||
notificationId: key
|
||||
})
|
||||
.then(() => {
|
||||
useNotificationStore().handleNotificationHide(
|
||||
key
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
'Cancel Friend Request': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args = await friendRequest.cancelFriendRequest({
|
||||
userId
|
||||
});
|
||||
handleCancelFriendRequest(args);
|
||||
}
|
||||
},
|
||||
'Send Friend Request': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args = await friendRequest.sendFriendRequest({
|
||||
userId
|
||||
});
|
||||
handleSendFriendRequest(args);
|
||||
}
|
||||
},
|
||||
'Moderation Unblock': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args =
|
||||
await playerModerationRequest.deletePlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'block'
|
||||
});
|
||||
handlePlayerModerationDelete(args);
|
||||
}
|
||||
},
|
||||
'Moderation Block': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args =
|
||||
await playerModerationRequest.sendPlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'block'
|
||||
});
|
||||
handleSendPlayerModeration(args);
|
||||
}
|
||||
},
|
||||
'Moderation Unmute': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args =
|
||||
await playerModerationRequest.deletePlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'mute'
|
||||
});
|
||||
handlePlayerModerationDelete(args);
|
||||
}
|
||||
},
|
||||
'Moderation Mute': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args =
|
||||
await playerModerationRequest.sendPlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'mute'
|
||||
});
|
||||
handleSendPlayerModeration(args);
|
||||
}
|
||||
},
|
||||
'Moderation Enable Avatar Interaction': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args =
|
||||
await playerModerationRequest.deletePlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'interactOff'
|
||||
});
|
||||
handlePlayerModerationDelete(args);
|
||||
}
|
||||
},
|
||||
'Moderation Disable Avatar Interaction': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args =
|
||||
await playerModerationRequest.sendPlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'interactOff'
|
||||
});
|
||||
handleSendPlayerModeration(args);
|
||||
}
|
||||
},
|
||||
'Moderation Enable Chatbox': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args =
|
||||
await playerModerationRequest.deletePlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'muteChat'
|
||||
});
|
||||
handlePlayerModerationDelete(args);
|
||||
}
|
||||
},
|
||||
'Moderation Disable Chatbox': {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args =
|
||||
await playerModerationRequest.sendPlayerModeration({
|
||||
moderated: userId,
|
||||
type: 'muteChat'
|
||||
});
|
||||
handleSendPlayerModeration(args);
|
||||
}
|
||||
},
|
||||
'Report Hacking': {
|
||||
confirm: true,
|
||||
handler: (userId) => {
|
||||
miscRequest.reportUser({
|
||||
userId,
|
||||
contentType: 'user',
|
||||
reason: 'behavior-hacking',
|
||||
type: 'report'
|
||||
});
|
||||
}
|
||||
},
|
||||
Unfriend: {
|
||||
confirm: true,
|
||||
handler: async (userId) => {
|
||||
const args = await friendRequest.deleteFriend(
|
||||
{
|
||||
userId
|
||||
},
|
||||
t('dialog.user.actions.unfriend_success_msg')
|
||||
);
|
||||
handleFriendDelete(args);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const commandMap = buildCommandMap();
|
||||
|
||||
// Callbacks for string-type commands (delegated to component)
|
||||
let componentCallbacks = {};
|
||||
|
||||
/**
|
||||
* Register component-level callbacks for string-type commands.
|
||||
* These are simple dialog openers that stay in the component.
|
||||
* @param {object} callbacks
|
||||
*/
|
||||
function registerCallbacks(callbacks) {
|
||||
componentCallbacks = callbacks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatch a user dialog command.
|
||||
* @param {string} command
|
||||
*/
|
||||
function userDialogCommand(command) {
|
||||
const D = userDialog.value;
|
||||
if (D.visible === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
const entry = commandMap[command];
|
||||
|
||||
if (!entry) {
|
||||
return;
|
||||
}
|
||||
|
||||
// String entry => delegate to component callback
|
||||
if (typeof entry === 'string') {
|
||||
const cb = componentCallbacks[entry];
|
||||
if (cb) {
|
||||
cb();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Direct function
|
||||
if (typeof entry === 'function') {
|
||||
entry();
|
||||
return;
|
||||
}
|
||||
|
||||
// Confirmed command
|
||||
if (entry.confirm) {
|
||||
const i18nPreFix = 'dialog.user.actions.';
|
||||
const formattedCommand = command.toLowerCase().replace(/ /g, '_');
|
||||
const displayCommandText = t(
|
||||
`${i18nPreFix}${formattedCommand}`
|
||||
).includes('i18nPreFix')
|
||||
? command
|
||||
: t(`${i18nPreFix}${formattedCommand}`);
|
||||
|
||||
modalStore
|
||||
.confirm({
|
||||
description: t('confirm.message', {
|
||||
command: displayCommandText
|
||||
}),
|
||||
title: t('confirm.title'),
|
||||
confirmText: t('confirm.confirm_button'),
|
||||
cancelText: t('confirm.cancel_button')
|
||||
})
|
||||
.then(({ ok }) => {
|
||||
if (ok) {
|
||||
entry.handler(D.id);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
sendInviteDialogVisible,
|
||||
sendInviteDialog,
|
||||
sendInviteRequestDialogVisible,
|
||||
userDialogCommand,
|
||||
registerCallbacks
|
||||
};
|
||||
}
|
||||
@@ -59,10 +59,7 @@
|
||||
return props.worldAllowedDomainsDialog.visible;
|
||||
},
|
||||
set(val) {
|
||||
emit('update:worldAllowedDomainsDialog', {
|
||||
...props.worldAllowedDomainsDialog,
|
||||
visible: val
|
||||
});
|
||||
props.worldAllowedDomainsDialog.visible = val;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
305
src/components/dialogs/WorldDialog/WorldDialogInfoTab.vue
Normal file
305
src/components/dialogs/WorldDialog/WorldDialogInfoTab.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap items-start px-2.5" style="max-height: none">
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.memo') }}
|
||||
</span>
|
||||
<InputGroupTextareaField
|
||||
v-model="memo"
|
||||
class="text-xs"
|
||||
:rows="2"
|
||||
:placeholder="t('dialog.world.info.memo_placeholder')"
|
||||
input-class="resize-none min-h-0"
|
||||
@change="onWorldMemoChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; display: flex">
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.id') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs" style="display: inline">
|
||||
{{ worldDialog.id }}
|
||||
</span>
|
||||
<TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button class="rounded-full text-xs" size="icon-sm" variant="ghost" @click.stop
|
||||
><Copy class="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="copyWorldId()">
|
||||
{{ t('dialog.world.info.copy_id') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="copyWorldUrl()">
|
||||
{{ t('dialog.world.info.copy_url') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="copyWorldName()">
|
||||
{{ t('dialog.world.info.copy_name') }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="worldDialog.ref.previewYoutubeId"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer"
|
||||
style="width: 350px"
|
||||
@click="openExternalLink(`https://www.youtube.com/watch?v=${worldDialog.ref.previewYoutubeId}`)">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.youtube_preview') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">
|
||||
https://www.youtube.com/watch?v={{ worldDialog.ref.previewYoutubeId }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.author_tags') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="worldDialog.ref.tags?.filter((tag) => tag.startsWith('author_tag')).length > 0"
|
||||
class="block truncate text-xs">
|
||||
{{ worldTags }}
|
||||
</span>
|
||||
<span v-else class="block truncate text-xs"> - </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.players') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ commaNumber(worldDialog.ref.occupants) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.favorites') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ commaNumber(worldDialog.ref.favorites)
|
||||
}}<span v-if="worldDialog.ref?.favorites > 0 && worldDialog.ref?.visits > 0" class="text-xs">
|
||||
({{ favoriteRate }}%)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.visits') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ commaNumber(worldDialog.ref.visits) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.capacity') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ commaNumber(worldDialog.ref.recommendedCapacity) }} ({{ commaNumber(worldDialog.ref.capacity) }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.created_at') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ formatDateFilter(worldDialog.ref.created_at, 'long') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]" style="display: inline">
|
||||
{{ t('dialog.world.info.last_updated') }}
|
||||
</span>
|
||||
<TooltipWrapper v-if="Object.keys(worldDialog.fileAnalysis).length" side="top" style="margin-left: 6px">
|
||||
<template #content>
|
||||
<template v-for="(created_at, platform) in worldDialogPlatformCreatedAt" :key="platform">
|
||||
<div class="flex justify-between w-full">
|
||||
<span class="mr-1">{{ platform }}:</span>
|
||||
<span>{{ formatDateFilter(created_at, 'long') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<ChevronDown class="inline-block" />
|
||||
</TooltipWrapper>
|
||||
<span class="block truncate text-xs">
|
||||
{{ formatDateFilter(worldDialog.ref.updated_at, 'long') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="worldDialog.ref.labsPublicationDate !== 'none'"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.labs_publication_date') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ formatDateFilter(worldDialog.ref.labsPublicationDate, 'long') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="worldDialog.ref.publicationDate !== 'none'"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]" style="display: inline">
|
||||
{{ t('dialog.world.info.publication_date') }}
|
||||
</span>
|
||||
<TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 6px">
|
||||
<template #content>
|
||||
<span>
|
||||
{{ t('dialog.world.info.time_in_labs') }}
|
||||
{{ timeInLab }}
|
||||
</span>
|
||||
</template>
|
||||
<ChevronDown class="inline-block" />
|
||||
</TooltipWrapper>
|
||||
<span class="block truncate text-xs">
|
||||
{{ formatDateFilter(worldDialog.ref.publicationDate, 'long') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.version') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs" v-text="worldDialog.ref.version" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.heat') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ commaNumber(worldDialog.ref.heat) }} {{ '🔥'.repeat(worldDialog.ref.heat) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.popularity') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ commaNumber(worldDialog.ref.popularity) }}
|
||||
{{ '💖'.repeat(worldDialog.ref.popularity) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.platform') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs" style="white-space: normal">{{ worldDialogPlatform }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.last_visited') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">{{ formatDateFilter(worldDialog.lastVisit, 'long') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="showPreviousInstancesListDialog(worldDialog.ref)">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div>
|
||||
{{ t('dialog.world.info.visit_count') }}
|
||||
</div>
|
||||
|
||||
<TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
|
||||
<MoreHorizontal style="margin-right: 16px" />
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<span v-if="worldDialog.visitCount === 0" class="block truncate text-xs">-</span>
|
||||
<span v-else class="block truncate text-xs" v-text="worldDialog.visitCount"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.world.info.time_spent') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ worldDialog.timeSpent === 0 ? ' - ' : timeSpent }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ChevronDown, Copy, MoreHorizontal } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../ui/dropdown-menu';
|
||||
import { useInstanceStore, useWorldStore } from '../../../stores';
|
||||
import { openExternalLink } from '../../../shared/utils';
|
||||
import { useWorldDialogInfo } from './useWorldDialogInfo';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { worldDialog } = storeToRefs(useWorldStore());
|
||||
const { showPreviousInstancesListDialog: openPreviousInstancesListDialog } = useInstanceStore();
|
||||
|
||||
const {
|
||||
memo,
|
||||
isTimeInLabVisible,
|
||||
timeInLab,
|
||||
favoriteRate,
|
||||
worldTags,
|
||||
timeSpent,
|
||||
worldDialogPlatform,
|
||||
worldDialogPlatformCreatedAt,
|
||||
onWorldMemoChange,
|
||||
copyWorldId,
|
||||
copyWorldUrl,
|
||||
copyWorldName,
|
||||
commaNumber,
|
||||
formatDateFilter
|
||||
} = useWorldDialogInfo(worldDialog, { t, toast });
|
||||
|
||||
/**
|
||||
*
|
||||
* @param worldRef
|
||||
*/
|
||||
function showPreviousInstancesListDialog(worldRef) {
|
||||
openPreviousInstancesListDialog('world', worldRef);
|
||||
}
|
||||
</script>
|
||||
131
src/components/dialogs/WorldDialog/WorldDialogInstancesTab.vue
Normal file
131
src/components/dialogs/WorldDialog/WorldDialogInstancesTab.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center text-sm">
|
||||
<User />
|
||||
{{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
|
||||
<User style="margin-left: 8px" />
|
||||
{{
|
||||
t('dialog.world.instances.private_count', {
|
||||
count: worldDialog.ref.privateOccupants
|
||||
})
|
||||
}}
|
||||
<Check style="margin-left: 8px" />
|
||||
{{
|
||||
t('dialog.world.instances.capacity_count', {
|
||||
count: worldDialog.ref.recommendedCapacity,
|
||||
max: worldDialog.ref.capacity
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<div v-for="room in worldDialog.rooms" :key="room.id">
|
||||
<template v-if="isAgeGatedInstancesVisible || !(room.ageGate || room.location?.includes('~ageGate'))">
|
||||
<div style="margin: 6px 0">
|
||||
<div class="flex items-center">
|
||||
<LocationWorld
|
||||
class="text-sm"
|
||||
:locationobject="room.$location"
|
||||
:currentuserid="currentUser.id"
|
||||
:worlddialogshortname="worldDialog.$location.shortName" />
|
||||
<InstanceActionBar
|
||||
class="ml-1 text-sm"
|
||||
:location="room.$location.tag"
|
||||
:launch-location="room.tag"
|
||||
:instance-location="room.tag"
|
||||
:shortname="room.$location.shortName"
|
||||
:currentlocation="lastLocation.location"
|
||||
:instance="room.ref"
|
||||
:friendcount="room.friendCount"
|
||||
:refresh-tooltip="t('dialog.world.instances.refresh_instance_info')"
|
||||
:show-history="!!instanceJoinHistory.get(room.$location.tag)"
|
||||
:history-tooltip="t('dialog.previous_instances.info')"
|
||||
:on-refresh="() => refreshInstancePlayerCount(room.tag)"
|
||||
:on-history="() => showPreviousInstancesInfoDialog(room.location)" />
|
||||
</div>
|
||||
<div
|
||||
v-if="room.$location.userId || room.users.length"
|
||||
class="flex flex-wrap items-start"
|
||||
style="margin: 8px 0; max-height: unset">
|
||||
<div
|
||||
v-if="room.$location.userId"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
|
||||
@click="showUserDialog(room.$location.userId)">
|
||||
<template v-if="room.$location.user">
|
||||
<div
|
||||
class="relative inline-block flex-none size-9 mr-2.5"
|
||||
:class="userStatusClass(room.$location.user)">
|
||||
<img
|
||||
class="size-full rounded-full object-cover"
|
||||
:src="userImage(room.$location.user, true)"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
:style="{ color: room.$location.user.$userColour }"
|
||||
v-text="room.$location.user.displayName" />
|
||||
<span class="block truncate text-xs">
|
||||
{{ t('dialog.world.instances.instance_creator') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="room.$location.userId" />
|
||||
</div>
|
||||
<div
|
||||
v-for="user in room.users"
|
||||
:key="user.id"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
|
||||
@click="showUserDialog(user.id)">
|
||||
<div class="relative inline-block flex-none size-9 mr-2.5" :class="userStatusClass(user)">
|
||||
<img
|
||||
class="size-full rounded-full object-cover"
|
||||
:src="userImage(user, true)"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
:style="{ color: user.$userColour }"
|
||||
v-text="user.displayName" />
|
||||
<span v-if="user.location === 'traveling'" class="block truncate text-xs">
|
||||
<Spinner class="inline-block mr-1" />
|
||||
<Timer :epoch="user.$travelingToTime" />
|
||||
</span>
|
||||
<span v-else class="block truncate text-xs">
|
||||
<Timer :epoch="user.$location_at" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Check, User } from 'lucide-vue-next';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { refreshInstancePlayerCount, userImage, userStatusClass } from '../../../shared/utils';
|
||||
import {
|
||||
useAppearanceSettingsStore,
|
||||
useInstanceStore,
|
||||
useLocationStore,
|
||||
useUserStore,
|
||||
useWorldStore
|
||||
} from '../../../stores';
|
||||
|
||||
import InstanceActionBar from '../../InstanceActionBar.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { isAgeGatedInstancesVisible } = storeToRefs(useAppearanceSettingsStore());
|
||||
const { showUserDialog } = useUserStore();
|
||||
const { currentUser } = storeToRefs(useUserStore());
|
||||
const { worldDialog } = storeToRefs(useWorldStore());
|
||||
const { lastLocation } = storeToRefs(useLocationStore());
|
||||
const { showPreviousInstancesInfoDialog } = useInstanceStore();
|
||||
const { instanceJoinHistory } = storeToRefs(useInstanceStore());
|
||||
</script>
|
||||
@@ -0,0 +1,540 @@
|
||||
import { describe, expect, test, vi, beforeEach } from 'vitest';
|
||||
import { ref } from 'vue';
|
||||
import { useWorldDialogCommands } from '../useWorldDialogCommands';
|
||||
|
||||
vi.mock('../../../../api', () => ({
|
||||
favoriteRequest: {
|
||||
deleteFavorite: vi.fn()
|
||||
},
|
||||
miscRequest: {
|
||||
deleteWorldPersistData: vi.fn()
|
||||
},
|
||||
userRequest: {
|
||||
saveCurrentUser: vi.fn()
|
||||
},
|
||||
worldRequest: {
|
||||
saveWorld: vi.fn(),
|
||||
publishWorld: vi.fn(),
|
||||
unpublishWorld: vi.fn(),
|
||||
deleteWorld: vi.fn()
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('../../../../shared/utils', () => ({
|
||||
openExternalLink: vi.fn(),
|
||||
replaceVrcPackageUrl: vi.fn((url) => url)
|
||||
}));
|
||||
|
||||
vi.mock('../../../../shared/utils/imageUpload', () => ({
|
||||
handleImageUploadInput: vi.fn(),
|
||||
readFileAsBase64: vi.fn(),
|
||||
resizeImageToFitLimits: vi.fn(),
|
||||
uploadImageLegacy: vi.fn(),
|
||||
withUploadTimeout: vi.fn((p) => p)
|
||||
}));
|
||||
|
||||
const { favoriteRequest, miscRequest, userRequest, worldRequest } =
|
||||
await import('../../../../api');
|
||||
const { openExternalLink } = await import('../../../../shared/utils');
|
||||
|
||||
function createWorldDialog(overrides = {}) {
|
||||
return ref({
|
||||
id: 'wrld_123',
|
||||
visible: true,
|
||||
loading: false,
|
||||
hasPersistData: true,
|
||||
isFavorite: false,
|
||||
$location: {
|
||||
tag: 'wrld_123:12345~region(us)',
|
||||
shortName: 'Test World'
|
||||
},
|
||||
ref: {
|
||||
name: 'Test World',
|
||||
description: 'A test world',
|
||||
authorId: 'usr_author',
|
||||
capacity: 20,
|
||||
recommendedCapacity: 10,
|
||||
previewYoutubeId: 'abc123',
|
||||
imageUrl: 'https://example.com/image.jpg',
|
||||
unityPackageUrl: 'https://example.com/package.unitypackage',
|
||||
urlList: ['https://example.com'],
|
||||
tags: ['system_approved']
|
||||
},
|
||||
...overrides
|
||||
});
|
||||
}
|
||||
|
||||
function createDeps(overrides = {}) {
|
||||
return {
|
||||
t: vi.fn((key) => key),
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn()
|
||||
},
|
||||
modalStore: {
|
||||
confirm: vi.fn().mockResolvedValue({ ok: true }),
|
||||
prompt: vi.fn().mockResolvedValue({ ok: true, value: 'new value' })
|
||||
},
|
||||
userDialog: ref({ worlds: [] }),
|
||||
cachedWorlds: new Map(),
|
||||
showWorldDialog: vi.fn(),
|
||||
showFavoriteDialog: vi.fn(),
|
||||
newInstanceSelfInvite: vi.fn(),
|
||||
showPreviousInstancesListDialog: vi.fn(),
|
||||
showFullscreenImageDialog: vi.fn(),
|
||||
...overrides
|
||||
};
|
||||
}
|
||||
|
||||
describe('useWorldDialogCommands', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('initial state', () => {
|
||||
test('provides reactive state refs', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const {
|
||||
worldAllowedDomainsDialog,
|
||||
isSetWorldTagsDialogVisible,
|
||||
newInstanceDialogLocationTag,
|
||||
cropDialogOpen,
|
||||
cropDialogFile
|
||||
} = useWorldDialogCommands(worldDialog, createDeps());
|
||||
|
||||
expect(worldAllowedDomainsDialog.value.visible).toBe(false);
|
||||
expect(isSetWorldTagsDialogVisible.value).toBe(false);
|
||||
expect(newInstanceDialogLocationTag.value).toBe('');
|
||||
expect(cropDialogOpen.value).toBe(false);
|
||||
expect(cropDialogFile.value).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('worldDialogCommand', () => {
|
||||
test('returns early when dialog is not visible', () => {
|
||||
const worldDialog = createWorldDialog({ visible: false });
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Refresh');
|
||||
expect(deps.showWorldDialog).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('Refresh command calls showWorldDialog with forceRefresh', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Refresh');
|
||||
expect(deps.showWorldDialog).toHaveBeenCalledWith(
|
||||
worldDialog.value.$location.tag,
|
||||
worldDialog.value.$location.shortName,
|
||||
{ forceRefresh: true }
|
||||
);
|
||||
});
|
||||
|
||||
test('Add Favorite command calls showFavoriteDialog', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Add Favorite');
|
||||
expect(deps.showFavoriteDialog).toHaveBeenCalledWith(
|
||||
'world',
|
||||
'wrld_123'
|
||||
);
|
||||
});
|
||||
|
||||
test('New Instance and Self Invite calls newInstanceSelfInvite', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('New Instance and Self Invite');
|
||||
expect(deps.newInstanceSelfInvite).toHaveBeenCalledWith('wrld_123');
|
||||
});
|
||||
|
||||
test('Previous Instances calls showPreviousInstancesListDialog', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Previous Instances');
|
||||
expect(deps.showPreviousInstancesListDialog).toHaveBeenCalledWith(
|
||||
'world',
|
||||
worldDialog.value.ref
|
||||
);
|
||||
});
|
||||
|
||||
test('Change Tags sets isSetWorldTagsDialogVisible to true', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand, isSetWorldTagsDialogVisible } =
|
||||
useWorldDialogCommands(worldDialog, deps);
|
||||
|
||||
worldDialogCommand('Change Tags');
|
||||
expect(isSetWorldTagsDialogVisible.value).toBe(true);
|
||||
});
|
||||
|
||||
test('Download Unity Package opens external link', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Download Unity Package');
|
||||
expect(openExternalLink).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('Share copies world URL', () => {
|
||||
Object.defineProperty(navigator, 'clipboard', {
|
||||
value: { writeText: vi.fn().mockResolvedValue(undefined) },
|
||||
writable: true,
|
||||
configurable: true
|
||||
});
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Share');
|
||||
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
|
||||
'https://vrchat.com/home/world/wrld_123'
|
||||
);
|
||||
});
|
||||
|
||||
test('Change Allowed Domains opens the allowed domains dialog', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand, worldAllowedDomainsDialog } =
|
||||
useWorldDialogCommands(worldDialog, deps);
|
||||
|
||||
worldDialogCommand('Change Allowed Domains');
|
||||
expect(worldAllowedDomainsDialog.value.visible).toBe(true);
|
||||
expect(worldAllowedDomainsDialog.value.worldId).toBe('wrld_123');
|
||||
});
|
||||
});
|
||||
|
||||
describe('confirmation commands', () => {
|
||||
test('Delete Favorite shows confirm then calls API', async () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Delete Favorite');
|
||||
await vi.waitFor(() => {
|
||||
expect(deps.modalStore.confirm).toHaveBeenCalled();
|
||||
expect(favoriteRequest.deleteFavorite).toHaveBeenCalledWith({
|
||||
objectId: 'wrld_123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('Make Home calls saveCurrentUser with homeLocation', async () => {
|
||||
userRequest.saveCurrentUser.mockResolvedValue({ ok: true });
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Make Home');
|
||||
await vi.waitFor(() => {
|
||||
expect(userRequest.saveCurrentUser).toHaveBeenCalledWith({
|
||||
homeLocation: 'wrld_123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('Reset Home calls saveCurrentUser with empty homeLocation', async () => {
|
||||
userRequest.saveCurrentUser.mockResolvedValue({ ok: true });
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Reset Home');
|
||||
await vi.waitFor(() => {
|
||||
expect(userRequest.saveCurrentUser).toHaveBeenCalledWith({
|
||||
homeLocation: ''
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('Publish calls publishWorld', async () => {
|
||||
worldRequest.publishWorld.mockResolvedValue({ ok: true });
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Publish');
|
||||
await vi.waitFor(() => {
|
||||
expect(worldRequest.publishWorld).toHaveBeenCalledWith({
|
||||
worldId: 'wrld_123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('Unpublish calls unpublishWorld', async () => {
|
||||
worldRequest.unpublishWorld.mockResolvedValue({ ok: true });
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Unpublish');
|
||||
await vi.waitFor(() => {
|
||||
expect(worldRequest.unpublishWorld).toHaveBeenCalledWith({
|
||||
worldId: 'wrld_123'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('Delete Persistent Data calls deleteWorldPersistData', async () => {
|
||||
miscRequest.deleteWorldPersistData.mockResolvedValue({
|
||||
params: { worldId: 'wrld_123' }
|
||||
});
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Delete Persistent Data');
|
||||
await vi.waitFor(() => {
|
||||
expect(miscRequest.deleteWorldPersistData).toHaveBeenCalledWith(
|
||||
{ worldId: 'wrld_123' }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test('confirmation cancelled does not call API', async () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
deps.modalStore.confirm.mockResolvedValue({ ok: false });
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Make Home');
|
||||
await vi.waitFor(() => {
|
||||
expect(deps.modalStore.confirm).toHaveBeenCalled();
|
||||
});
|
||||
expect(userRequest.saveCurrentUser).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('prompt commands', () => {
|
||||
test('Rename calls prompt then saveWorld', async () => {
|
||||
worldRequest.saveWorld.mockResolvedValue({ ok: true });
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
deps.modalStore.prompt.mockResolvedValue({
|
||||
ok: true,
|
||||
value: 'New Name'
|
||||
});
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Rename');
|
||||
await vi.waitFor(() => {
|
||||
expect(worldRequest.saveWorld).toHaveBeenCalledWith({
|
||||
id: 'wrld_123',
|
||||
name: 'New Name'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('Change Description calls prompt then saveWorld', async () => {
|
||||
worldRequest.saveWorld.mockResolvedValue({ ok: true });
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
deps.modalStore.prompt.mockResolvedValue({
|
||||
ok: true,
|
||||
value: 'New Desc'
|
||||
});
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Change Description');
|
||||
await vi.waitFor(() => {
|
||||
expect(worldRequest.saveWorld).toHaveBeenCalledWith({
|
||||
id: 'wrld_123',
|
||||
description: 'New Desc'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('Change Capacity calls prompt then saveWorld with number', async () => {
|
||||
worldRequest.saveWorld.mockResolvedValue({ ok: true });
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
deps.modalStore.prompt.mockResolvedValue({ ok: true, value: '30' });
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Change Capacity');
|
||||
await vi.waitFor(() => {
|
||||
expect(worldRequest.saveWorld).toHaveBeenCalledWith({
|
||||
id: 'wrld_123',
|
||||
capacity: 30
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('Change Recommended Capacity calls prompt then saveWorld', async () => {
|
||||
worldRequest.saveWorld.mockResolvedValue({ ok: true });
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
deps.modalStore.prompt.mockResolvedValue({ ok: true, value: '15' });
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Change Recommended Capacity');
|
||||
await vi.waitFor(() => {
|
||||
expect(worldRequest.saveWorld).toHaveBeenCalledWith({
|
||||
id: 'wrld_123',
|
||||
recommendedCapacity: 15
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('prompt cancelled does not call saveWorld', async () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
deps.modalStore.prompt.mockResolvedValue({ ok: false });
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Rename');
|
||||
await vi.waitFor(() => {
|
||||
expect(deps.modalStore.prompt).toHaveBeenCalled();
|
||||
});
|
||||
expect(worldRequest.saveWorld).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('promptChangeWorldYouTubePreview', () => {
|
||||
test('parses YouTube URL with v parameter', async () => {
|
||||
worldRequest.saveWorld.mockResolvedValue({ ok: true });
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
deps.modalStore.prompt.mockResolvedValue({
|
||||
ok: true,
|
||||
value: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
|
||||
});
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Change YouTube Preview');
|
||||
await vi.waitFor(() => {
|
||||
expect(worldRequest.saveWorld).toHaveBeenCalledWith({
|
||||
id: 'wrld_123',
|
||||
previewYoutubeId: 'dQw4w9WgXcQ'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('uses short id directly', async () => {
|
||||
worldRequest.saveWorld.mockResolvedValue({ ok: true });
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
deps.modalStore.prompt.mockResolvedValue({
|
||||
ok: true,
|
||||
value: 'dQw4w9WgXcQ'
|
||||
});
|
||||
const { worldDialogCommand } = useWorldDialogCommands(
|
||||
worldDialog,
|
||||
deps
|
||||
);
|
||||
|
||||
worldDialogCommand('Change YouTube Preview');
|
||||
await vi.waitFor(() => {
|
||||
expect(worldRequest.saveWorld).toHaveBeenCalledWith({
|
||||
id: 'wrld_123',
|
||||
previewYoutubeId: 'dQw4w9WgXcQ'
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('clipboard operations', () => {
|
||||
beforeEach(() => {
|
||||
Object.defineProperty(navigator, 'clipboard', {
|
||||
value: { writeText: vi.fn().mockResolvedValue(undefined) },
|
||||
writable: true,
|
||||
configurable: true
|
||||
});
|
||||
});
|
||||
|
||||
test('copyWorldUrl writes correct URL', async () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { copyWorldUrl } = useWorldDialogCommands(worldDialog, deps);
|
||||
|
||||
copyWorldUrl();
|
||||
await vi.waitFor(() => {
|
||||
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
|
||||
'https://vrchat.com/home/world/wrld_123'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test('copyWorldName writes world name', async () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { copyWorldName } = useWorldDialogCommands(worldDialog, deps);
|
||||
|
||||
copyWorldName();
|
||||
await vi.waitFor(() => {
|
||||
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
|
||||
'Test World'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,388 @@
|
||||
import { describe, expect, test, vi, beforeEach } from 'vitest';
|
||||
import { ref } from 'vue';
|
||||
import { useWorldDialogInfo } from '../useWorldDialogInfo';
|
||||
|
||||
vi.mock('../../../../shared/utils', () => ({
|
||||
commaNumber: vi.fn((n) => n?.toLocaleString()),
|
||||
compareUnityVersion: vi.fn(() => true),
|
||||
formatDateFilter: vi.fn((d) => d),
|
||||
timeToText: vi.fn((ms) => `${Math.floor(ms / 1000)}s`)
|
||||
}));
|
||||
|
||||
vi.mock('../../../../service/database', () => ({
|
||||
database: {
|
||||
setWorldMemo: vi.fn(),
|
||||
deleteWorldMemo: vi.fn()
|
||||
}
|
||||
}));
|
||||
|
||||
const { database } = await import('../../../../service/database');
|
||||
const { compareUnityVersion } = await import('../../../../shared/utils');
|
||||
|
||||
/**
|
||||
*
|
||||
* @param overrides
|
||||
*/
|
||||
function createWorldDialog(overrides = {}) {
|
||||
return ref({
|
||||
id: 'wrld_123',
|
||||
memo: '',
|
||||
timeSpent: 60000,
|
||||
ref: {
|
||||
name: 'Test World',
|
||||
description: 'A test world',
|
||||
publicationDate: '2024-06-01T00:00:00Z',
|
||||
labsPublicationDate: '2024-05-01T00:00:00Z',
|
||||
favorites: 100,
|
||||
visits: 500,
|
||||
tags: ['author_tag_fun', 'author_tag_social', 'content_horror'],
|
||||
unityPackages: [
|
||||
{
|
||||
platform: 'standalonewindows',
|
||||
unityVersion: '2022.3.6f1',
|
||||
unitySortNumber: 20220306,
|
||||
variant: 'standard',
|
||||
created_at: '2024-05-15T00:00:00Z'
|
||||
},
|
||||
{
|
||||
platform: 'android',
|
||||
unityVersion: '2022.3.6f1',
|
||||
unitySortNumber: 20220306,
|
||||
variant: 'standard',
|
||||
created_at: '2024-05-20T00:00:00Z'
|
||||
}
|
||||
]
|
||||
},
|
||||
...overrides
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param overrides
|
||||
*/
|
||||
function createDeps(overrides = {}) {
|
||||
return {
|
||||
t: vi.fn((key) => key),
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn()
|
||||
},
|
||||
...overrides
|
||||
};
|
||||
}
|
||||
|
||||
describe('useWorldDialogInfo', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
compareUnityVersion.mockReturnValue(true);
|
||||
});
|
||||
|
||||
describe('memo computed', () => {
|
||||
test('gets memo value from worldDialog', () => {
|
||||
const worldDialog = createWorldDialog({ memo: 'my memo' });
|
||||
const { memo } = useWorldDialogInfo(worldDialog, createDeps());
|
||||
|
||||
expect(memo.value).toBe('my memo');
|
||||
});
|
||||
|
||||
test('sets memo value on worldDialog', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const { memo } = useWorldDialogInfo(worldDialog, createDeps());
|
||||
|
||||
memo.value = 'new memo';
|
||||
expect(worldDialog.value.memo).toBe('new memo');
|
||||
});
|
||||
});
|
||||
|
||||
describe('isTimeInLabVisible', () => {
|
||||
test('returns true when both dates exist and are not "none"', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const { isTimeInLabVisible } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
expect(isTimeInLabVisible.value).toBe(true);
|
||||
});
|
||||
|
||||
test('returns false when publicationDate is "none"', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
worldDialog.value.ref.publicationDate = 'none';
|
||||
const { isTimeInLabVisible } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
expect(isTimeInLabVisible.value).toBe(false);
|
||||
});
|
||||
|
||||
test('returns false when labsPublicationDate is falsy', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
worldDialog.value.ref.labsPublicationDate = '';
|
||||
const { isTimeInLabVisible } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
expect(isTimeInLabVisible.value).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('timeInLab', () => {
|
||||
test('computes time difference between publication and labs dates', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const { timeInLab } = useWorldDialogInfo(worldDialog, createDeps());
|
||||
|
||||
// Should call timeToText with the ms difference
|
||||
expect(timeInLab.value).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('favoriteRate', () => {
|
||||
test('calculates favorite rate based on favorites and visits', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const { favoriteRate } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
// ((100 - 500) / 500 * 100 + 100) * 100 / 100
|
||||
// = (-80 + 100) = 20
|
||||
expect(favoriteRate.value).toBe(20);
|
||||
});
|
||||
});
|
||||
|
||||
describe('worldTags', () => {
|
||||
test('filters and formats author tags', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const { worldTags } = useWorldDialogInfo(worldDialog, createDeps());
|
||||
|
||||
expect(worldTags.value).toBe('fun, social');
|
||||
});
|
||||
|
||||
test('returns empty string when no author tags', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
worldDialog.value.ref.tags = ['content_horror'];
|
||||
const { worldTags } = useWorldDialogInfo(worldDialog, createDeps());
|
||||
|
||||
expect(worldTags.value).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('timeSpent', () => {
|
||||
test('converts milliseconds to text', () => {
|
||||
const worldDialog = createWorldDialog({ timeSpent: 120000 });
|
||||
const { timeSpent } = useWorldDialogInfo(worldDialog, createDeps());
|
||||
|
||||
expect(timeSpent.value).toBe('120s');
|
||||
});
|
||||
});
|
||||
|
||||
describe('worldDialogPlatform', () => {
|
||||
test('formats platform strings from unity packages', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const { worldDialogPlatform } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
expect(worldDialogPlatform.value).toContain('PC/2022.3.6f1');
|
||||
expect(worldDialogPlatform.value).toContain('Android/2022.3.6f1');
|
||||
});
|
||||
|
||||
test('skips packages filtered by compareUnityVersion', () => {
|
||||
compareUnityVersion.mockReturnValue(false);
|
||||
const worldDialog = createWorldDialog();
|
||||
const { worldDialogPlatform } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
expect(worldDialogPlatform.value).toBe('');
|
||||
});
|
||||
|
||||
test('uses platform name directly for unknown platforms', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
worldDialog.value.ref.unityPackages = [
|
||||
{
|
||||
platform: 'ios',
|
||||
unityVersion: '2022.3.6f1',
|
||||
unitySortNumber: 20220306
|
||||
}
|
||||
];
|
||||
const { worldDialogPlatform } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
expect(worldDialogPlatform.value).toBe('ios/2022.3.6f1');
|
||||
});
|
||||
});
|
||||
|
||||
describe('worldDialogPlatformCreatedAt', () => {
|
||||
test('returns newest created_at per platform', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const { worldDialogPlatformCreatedAt } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
expect(worldDialogPlatformCreatedAt.value).toEqual({
|
||||
standalonewindows: '2024-05-15T00:00:00Z',
|
||||
android: '2024-05-20T00:00:00Z'
|
||||
});
|
||||
});
|
||||
|
||||
test('returns null when no unityPackages', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
worldDialog.value.ref.unityPackages = undefined;
|
||||
const { worldDialogPlatformCreatedAt } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
expect(worldDialogPlatformCreatedAt.value).toBeNull();
|
||||
});
|
||||
|
||||
test('skips non-standard variants', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
worldDialog.value.ref.unityPackages = [
|
||||
{
|
||||
platform: 'standalonewindows',
|
||||
variant: 'custom',
|
||||
created_at: '2024-05-15T00:00:00Z'
|
||||
}
|
||||
];
|
||||
const { worldDialogPlatformCreatedAt } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
expect(worldDialogPlatformCreatedAt.value).toEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
describe('onWorldMemoChange', () => {
|
||||
test('saves memo when it has value', () => {
|
||||
const worldDialog = createWorldDialog({ memo: 'test memo' });
|
||||
const { onWorldMemoChange } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
onWorldMemoChange();
|
||||
|
||||
expect(database.setWorldMemo).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
worldId: 'wrld_123',
|
||||
memo: 'test memo'
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
test('deletes memo when it is empty', () => {
|
||||
const worldDialog = createWorldDialog({ memo: '' });
|
||||
const { onWorldMemoChange } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
onWorldMemoChange();
|
||||
|
||||
expect(database.deleteWorldMemo).toHaveBeenCalledWith('wrld_123');
|
||||
});
|
||||
});
|
||||
|
||||
describe('clipboard operations', () => {
|
||||
let originalClipboard;
|
||||
|
||||
beforeEach(() => {
|
||||
originalClipboard = navigator.clipboard;
|
||||
Object.defineProperty(navigator, 'clipboard', {
|
||||
value: {
|
||||
writeText: vi.fn().mockResolvedValue(undefined)
|
||||
},
|
||||
writable: true,
|
||||
configurable: true
|
||||
});
|
||||
});
|
||||
|
||||
test('copyWorldId copies world id', async () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { copyWorldId } = useWorldDialogInfo(worldDialog, deps);
|
||||
|
||||
copyWorldId();
|
||||
await vi.waitFor(() => {
|
||||
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
|
||||
'wrld_123'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test('copyWorldUrl copies full url', async () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { copyWorldUrl } = useWorldDialogInfo(worldDialog, deps);
|
||||
|
||||
copyWorldUrl();
|
||||
await vi.waitFor(() => {
|
||||
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
|
||||
'https://vrchat.com/home/world/wrld_123'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test('copyWorldName copies world name', async () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { copyWorldName } = useWorldDialogInfo(worldDialog, deps);
|
||||
|
||||
copyWorldName();
|
||||
await vi.waitFor(() => {
|
||||
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
|
||||
'Test World'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test('shows toast on clipboard success', async () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { copyWorldId } = useWorldDialogInfo(worldDialog, deps);
|
||||
|
||||
copyWorldId();
|
||||
await vi.waitFor(() => {
|
||||
expect(deps.toast.success).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
test('shows error toast on clipboard failure', async () => {
|
||||
navigator.clipboard.writeText = vi
|
||||
.fn()
|
||||
.mockRejectedValue(new Error('denied'));
|
||||
const worldDialog = createWorldDialog();
|
||||
const deps = createDeps();
|
||||
const { copyWorldId } = useWorldDialogInfo(worldDialog, deps);
|
||||
|
||||
copyWorldId();
|
||||
await vi.waitFor(() => {
|
||||
expect(deps.toast.error).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('utility re-exports', () => {
|
||||
test('re-exports commaNumber and formatDateFilter', () => {
|
||||
const worldDialog = createWorldDialog();
|
||||
const { commaNumber, formatDateFilter } = useWorldDialogInfo(
|
||||
worldDialog,
|
||||
createDeps()
|
||||
);
|
||||
|
||||
expect(commaNumber).toBeDefined();
|
||||
expect(formatDateFilter).toBeDefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
601
src/components/dialogs/WorldDialog/useWorldDialogCommands.js
Normal file
601
src/components/dialogs/WorldDialog/useWorldDialogCommands.js
Normal file
@@ -0,0 +1,601 @@
|
||||
import { nextTick, ref } from 'vue';
|
||||
|
||||
import {
|
||||
handleImageUploadInput,
|
||||
readFileAsBase64,
|
||||
resizeImageToFitLimits,
|
||||
uploadImageLegacy,
|
||||
withUploadTimeout
|
||||
} from '../../../shared/utils/imageUpload';
|
||||
import {
|
||||
favoriteRequest,
|
||||
miscRequest,
|
||||
userRequest,
|
||||
worldRequest
|
||||
} from '../../../api';
|
||||
import { openExternalLink, replaceVrcPackageUrl } from '../../../shared/utils';
|
||||
|
||||
/**
|
||||
* Composable for WorldDialog commands, prompt functions, and image upload.
|
||||
* @param {import('vue').Ref} worldDialog - reactive ref to the world dialog state
|
||||
* @param {object} deps - external dependencies
|
||||
* @param {Function} deps.t - i18n translation function
|
||||
* @param {Function} deps.toast - toast notification function
|
||||
* @param {object} deps.modalStore - modal store for confirm/prompt dialogs
|
||||
* @param {import('vue').Ref} deps.userDialog - reactive ref to the user dialog state
|
||||
* @param {Map} deps.cachedWorlds - cached worlds map
|
||||
* @param {Function} deps.showWorldDialog - function to show world dialog
|
||||
* @param {Function} deps.showFavoriteDialog - function to show favorite dialog
|
||||
* @param {Function} deps.newInstanceSelfInvite - function for new instance self invite
|
||||
* @param {Function} deps.showPreviousInstancesListDialog - function to show previous instances
|
||||
* @param {Function} deps.showFullscreenImageDialog - function to show fullscreen image
|
||||
* @returns {object} commands composable API
|
||||
*/
|
||||
export function useWorldDialogCommands(
|
||||
worldDialog,
|
||||
{
|
||||
t,
|
||||
toast,
|
||||
modalStore,
|
||||
userDialog,
|
||||
cachedWorlds,
|
||||
showWorldDialog,
|
||||
showFavoriteDialog,
|
||||
newInstanceSelfInvite,
|
||||
showPreviousInstancesListDialog: openPreviousInstancesListDialog,
|
||||
showFullscreenImageDialog
|
||||
}
|
||||
) {
|
||||
const worldAllowedDomainsDialog = ref({
|
||||
visible: false,
|
||||
worldId: '',
|
||||
urlList: []
|
||||
});
|
||||
const isSetWorldTagsDialogVisible = ref(false);
|
||||
const newInstanceDialogLocationTag = ref('');
|
||||
const cropDialogOpen = ref(false);
|
||||
const cropDialogFile = ref(null);
|
||||
const changeWorldImageLoading = ref(false);
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function showChangeWorldImageDialog() {
|
||||
document.getElementById('WorldImageUploadButton').click();
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param e
|
||||
*/
|
||||
function onFileChangeWorldImage(e) {
|
||||
const { file, clearInput } = handleImageUploadInput(e, {
|
||||
inputSelector: '#WorldImageUploadButton',
|
||||
tooLargeMessage: () => t('message.file.too_large'),
|
||||
invalidTypeMessage: () => t('message.file.not_image')
|
||||
});
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (!worldDialog.value.visible || worldDialog.value.loading) {
|
||||
clearInput();
|
||||
return;
|
||||
}
|
||||
clearInput();
|
||||
cropDialogFile.value = file;
|
||||
cropDialogOpen.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param blob
|
||||
*/
|
||||
async function onCropConfirmWorld(blob) {
|
||||
changeWorldImageLoading.value = true;
|
||||
try {
|
||||
await withUploadTimeout(
|
||||
(async () => {
|
||||
const base64Body = await readFileAsBase64(blob);
|
||||
const base64File = await resizeImageToFitLimits(base64Body);
|
||||
await uploadImageLegacy('world', {
|
||||
entityId: worldDialog.value.id,
|
||||
imageUrl: worldDialog.value.ref.imageUrl,
|
||||
base64File,
|
||||
blob
|
||||
});
|
||||
})()
|
||||
);
|
||||
toast.success(t('message.upload.success'));
|
||||
} catch (error) {
|
||||
console.error('World image upload process failed:', error);
|
||||
toast.error(t('message.upload.error'));
|
||||
} finally {
|
||||
changeWorldImageLoading.value = false;
|
||||
cropDialogOpen.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
function showNewInstanceDialog(tag) {
|
||||
// trigger watcher
|
||||
newInstanceDialogLocationTag.value = '';
|
||||
nextTick(() => (newInstanceDialogLocationTag.value = tag));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function copyWorldUrl() {
|
||||
navigator.clipboard
|
||||
.writeText(`https://vrchat.com/home/world/${worldDialog.value.id}`)
|
||||
.then(() => {
|
||||
toast.success(t('message.world.url_copied'));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('copy failed:', err);
|
||||
toast.error(t('message.copy_failed'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function copyWorldName() {
|
||||
navigator.clipboard
|
||||
.writeText(worldDialog.value.ref.name)
|
||||
.then(() => {
|
||||
toast.success(t('message.world.name_copied'));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('copy failed:', err);
|
||||
toast.error(t('message.copy_failed'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function showWorldAllowedDomainsDialog() {
|
||||
const D = worldAllowedDomainsDialog.value;
|
||||
D.worldId = worldDialog.value.id;
|
||||
D.urlList = worldDialog.value.ref?.urlList ?? [];
|
||||
D.visible = true;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param worldRef
|
||||
*/
|
||||
function showPreviousInstancesListDialog(worldRef) {
|
||||
openPreviousInstancesListDialog('world', worldRef);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param world
|
||||
*/
|
||||
function promptRenameWorld(world) {
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.rename_world.header'),
|
||||
description: t('prompt.rename_world.description'),
|
||||
confirmText: t('prompt.rename_world.ok'),
|
||||
cancelText: t('prompt.rename_world.cancel'),
|
||||
inputValue: world.ref.name,
|
||||
errorMessage: t('prompt.rename_world.input_error')
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== world.ref.name) {
|
||||
worldRequest
|
||||
.saveWorld({
|
||||
id: world.id,
|
||||
name: value
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(
|
||||
t('prompt.rename_world.message.success')
|
||||
);
|
||||
return args;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @param world
|
||||
*/
|
||||
function promptChangeWorldDescription(world) {
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.change_world_description.header'),
|
||||
description: t('prompt.change_world_description.description'),
|
||||
confirmText: t('prompt.change_world_description.ok'),
|
||||
cancelText: t('prompt.change_world_description.cancel'),
|
||||
inputValue: world.ref.description,
|
||||
errorMessage: t('prompt.change_world_description.input_error')
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== world.ref.description) {
|
||||
worldRequest
|
||||
.saveWorld({
|
||||
id: world.id,
|
||||
description: value
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(
|
||||
t(
|
||||
'prompt.change_world_description.message.success'
|
||||
)
|
||||
);
|
||||
return args;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param world
|
||||
*/
|
||||
function promptChangeWorldCapacity(world) {
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.change_world_capacity.header'),
|
||||
description: t('prompt.change_world_capacity.description'),
|
||||
confirmText: t('prompt.change_world_capacity.ok'),
|
||||
cancelText: t('prompt.change_world_capacity.cancel'),
|
||||
inputValue: world.ref.capacity,
|
||||
pattern: /\d+$/,
|
||||
errorMessage: t('prompt.change_world_capacity.input_error')
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== world.ref.capacity) {
|
||||
worldRequest
|
||||
.saveWorld({
|
||||
id: world.id,
|
||||
capacity: Number(value)
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(
|
||||
t(
|
||||
'prompt.change_world_capacity.message.success'
|
||||
)
|
||||
);
|
||||
return args;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param world
|
||||
*/
|
||||
function promptChangeWorldRecommendedCapacity(world) {
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.change_world_recommended_capacity.header'),
|
||||
description: t(
|
||||
'prompt.change_world_recommended_capacity.description'
|
||||
),
|
||||
confirmText: t('prompt.change_world_capacity.ok'),
|
||||
cancelText: t('prompt.change_world_capacity.cancel'),
|
||||
inputValue: world.ref.recommendedCapacity,
|
||||
pattern: /\d+$/,
|
||||
errorMessage: t(
|
||||
'prompt.change_world_recommended_capacity.input_error'
|
||||
)
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== world.ref.recommendedCapacity) {
|
||||
worldRequest
|
||||
.saveWorld({
|
||||
id: world.id,
|
||||
recommendedCapacity: Number(value)
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(
|
||||
t(
|
||||
'prompt.change_world_recommended_capacity.message.success'
|
||||
)
|
||||
);
|
||||
return args;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param world
|
||||
*/
|
||||
function promptChangeWorldYouTubePreview(world) {
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.change_world_preview.header'),
|
||||
description: t('prompt.change_world_preview.description'),
|
||||
confirmText: t('prompt.change_world_preview.ok'),
|
||||
cancelText: t('prompt.change_world_preview.cancel'),
|
||||
inputValue: world.ref.previewYoutubeId,
|
||||
errorMessage: t('prompt.change_world_preview.input_error')
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== world.ref.previewYoutubeId) {
|
||||
let processedValue = value;
|
||||
if (value.length > 11) {
|
||||
try {
|
||||
const url = new URL(value);
|
||||
const id1 = url.pathname;
|
||||
const id2 = url.searchParams.get('v');
|
||||
if (id1 && id1.length === 12) {
|
||||
processedValue = id1.substring(1, 12);
|
||||
}
|
||||
if (id2 && id2.length === 11) {
|
||||
processedValue = id2;
|
||||
}
|
||||
} catch {
|
||||
toast.error(
|
||||
t('prompt.change_world_preview.message.error')
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (processedValue !== world.ref.previewYoutubeId) {
|
||||
worldRequest
|
||||
.saveWorld({
|
||||
id: world.id,
|
||||
previewYoutubeId: processedValue
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(
|
||||
t(
|
||||
'prompt.change_world_preview.message.success'
|
||||
)
|
||||
);
|
||||
return args;
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param command
|
||||
*/
|
||||
function worldDialogCommand(command) {
|
||||
const D = worldDialog.value;
|
||||
if (D.visible === false) {
|
||||
return;
|
||||
}
|
||||
switch (command) {
|
||||
case 'Delete Favorite':
|
||||
case 'Make Home':
|
||||
case 'Reset Home':
|
||||
case 'Publish':
|
||||
case 'Unpublish':
|
||||
case 'Delete Persistent Data':
|
||||
case 'Delete':
|
||||
const commandLabelMap = {
|
||||
'Delete Favorite': t(
|
||||
'dialog.world.actions.favorites_tooltip'
|
||||
),
|
||||
'Make Home': t('dialog.world.actions.make_home'),
|
||||
'Reset Home': t('dialog.world.actions.reset_home'),
|
||||
Publish: t('dialog.world.actions.publish_to_labs'),
|
||||
Unpublish: t('dialog.world.actions.unpublish'),
|
||||
'Delete Persistent Data': t(
|
||||
'dialog.world.actions.delete_persistent_data'
|
||||
),
|
||||
Delete: t('dialog.world.actions.delete')
|
||||
};
|
||||
modalStore
|
||||
.confirm({
|
||||
description: t('confirm.command_question', {
|
||||
command: commandLabelMap[command] ?? command
|
||||
}),
|
||||
title: t('confirm.title')
|
||||
})
|
||||
.then(({ ok }) => {
|
||||
if (!ok) return;
|
||||
switch (command) {
|
||||
case 'Delete Favorite':
|
||||
favoriteRequest.deleteFavorite({
|
||||
objectId: D.id
|
||||
});
|
||||
break;
|
||||
case 'Make Home':
|
||||
userRequest
|
||||
.saveCurrentUser({
|
||||
homeLocation: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(
|
||||
t('message.world.home_updated')
|
||||
);
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Reset Home':
|
||||
userRequest
|
||||
.saveCurrentUser({
|
||||
homeLocation: ''
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(
|
||||
t('message.world.home_reset')
|
||||
);
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Publish':
|
||||
worldRequest
|
||||
.publishWorld({
|
||||
worldId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(
|
||||
t('message.world.published')
|
||||
);
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Unpublish':
|
||||
worldRequest
|
||||
.unpublishWorld({
|
||||
worldId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success(
|
||||
t('message.world.unpublished')
|
||||
);
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Delete Persistent Data':
|
||||
miscRequest
|
||||
.deleteWorldPersistData({
|
||||
worldId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
if (
|
||||
args.params.worldId ===
|
||||
worldDialog.value.id &&
|
||||
worldDialog.value.visible
|
||||
) {
|
||||
worldDialog.value.hasPersistData = false;
|
||||
}
|
||||
toast.success(
|
||||
t(
|
||||
'message.world.persistent_data_deleted'
|
||||
)
|
||||
);
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
case 'Delete':
|
||||
worldRequest
|
||||
.deleteWorld({
|
||||
worldId: D.id
|
||||
})
|
||||
.then((args) => {
|
||||
const { json } = args;
|
||||
cachedWorlds.delete(json.id);
|
||||
if (
|
||||
worldDialog.value.ref.authorId ===
|
||||
json.authorId
|
||||
) {
|
||||
const map = new Map();
|
||||
for (const ref of cachedWorlds.values()) {
|
||||
if (
|
||||
ref.authorId ===
|
||||
json.authorId
|
||||
) {
|
||||
map.set(ref.id, ref);
|
||||
}
|
||||
}
|
||||
const array = Array.from(
|
||||
map.values()
|
||||
);
|
||||
userDialog.value.worlds = array;
|
||||
}
|
||||
toast.success(
|
||||
t('message.world.deleted')
|
||||
);
|
||||
D.visible = false;
|
||||
return args;
|
||||
});
|
||||
break;
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
break;
|
||||
case 'Previous Instances':
|
||||
showPreviousInstancesListDialog(D.ref);
|
||||
break;
|
||||
case 'Share':
|
||||
copyWorldUrl();
|
||||
break;
|
||||
case 'Change Allowed Domains':
|
||||
showWorldAllowedDomainsDialog();
|
||||
break;
|
||||
case 'Change Tags':
|
||||
isSetWorldTagsDialogVisible.value = true;
|
||||
break;
|
||||
case 'Download Unity Package':
|
||||
openExternalLink(
|
||||
replaceVrcPackageUrl(worldDialog.value.ref.unityPackageUrl)
|
||||
);
|
||||
break;
|
||||
case 'Change Image':
|
||||
showChangeWorldImageDialog();
|
||||
break;
|
||||
case 'Refresh':
|
||||
const { tag, shortName } = worldDialog.value.$location;
|
||||
showWorldDialog(tag, shortName, { forceRefresh: true });
|
||||
break;
|
||||
case 'New Instance':
|
||||
showNewInstanceDialog(D.$location.tag);
|
||||
break;
|
||||
case 'Add Favorite':
|
||||
showFavoriteDialog('world', D.id);
|
||||
break;
|
||||
case 'New Instance and Self Invite':
|
||||
newInstanceSelfInvite(D.id);
|
||||
break;
|
||||
case 'Rename':
|
||||
promptRenameWorld(D);
|
||||
break;
|
||||
case 'Change Description':
|
||||
promptChangeWorldDescription(D);
|
||||
break;
|
||||
case 'Change Capacity':
|
||||
promptChangeWorldCapacity(D);
|
||||
break;
|
||||
case 'Change Recommended Capacity':
|
||||
promptChangeWorldRecommendedCapacity(D);
|
||||
break;
|
||||
case 'Change YouTube Preview':
|
||||
promptChangeWorldYouTubePreview(D);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
worldAllowedDomainsDialog,
|
||||
isSetWorldTagsDialogVisible,
|
||||
newInstanceDialogLocationTag,
|
||||
cropDialogOpen,
|
||||
cropDialogFile,
|
||||
changeWorldImageLoading,
|
||||
worldDialogCommand,
|
||||
onFileChangeWorldImage,
|
||||
onCropConfirmWorld,
|
||||
showNewInstanceDialog,
|
||||
copyWorldUrl,
|
||||
copyWorldName,
|
||||
showWorldAllowedDomainsDialog,
|
||||
showPreviousInstancesListDialog,
|
||||
showFullscreenImageDialog,
|
||||
promptRenameWorld,
|
||||
promptChangeWorldDescription,
|
||||
promptChangeWorldCapacity,
|
||||
promptChangeWorldRecommendedCapacity,
|
||||
promptChangeWorldYouTubePreview
|
||||
};
|
||||
}
|
||||
195
src/components/dialogs/WorldDialog/useWorldDialogInfo.js
Normal file
195
src/components/dialogs/WorldDialog/useWorldDialogInfo.js
Normal file
@@ -0,0 +1,195 @@
|
||||
import { computed } from 'vue';
|
||||
import {
|
||||
commaNumber,
|
||||
compareUnityVersion,
|
||||
formatDateFilter,
|
||||
timeToText
|
||||
} from '../../../shared/utils';
|
||||
import { database } from '../../../service/database';
|
||||
|
||||
/**
|
||||
* Composable for WorldDialogInfoTab computed properties and actions.
|
||||
*
|
||||
* @param {import('vue').Ref} worldDialog - reactive ref to the world dialog state
|
||||
* @param {Object} deps - external dependencies
|
||||
* @param {Function} deps.t - i18n translation function
|
||||
* @param {Function} deps.toast - toast notification function
|
||||
* @returns {Object} info composable API
|
||||
*/
|
||||
export function useWorldDialogInfo(worldDialog, { t, toast }) {
|
||||
const memo = computed({
|
||||
get() {
|
||||
return worldDialog.value.memo;
|
||||
},
|
||||
set(value) {
|
||||
worldDialog.value.memo = value;
|
||||
}
|
||||
});
|
||||
|
||||
const isTimeInLabVisible = computed(() => {
|
||||
return (
|
||||
worldDialog.value.ref.publicationDate &&
|
||||
worldDialog.value.ref.publicationDate !== 'none' &&
|
||||
worldDialog.value.ref.labsPublicationDate &&
|
||||
worldDialog.value.ref.labsPublicationDate !== 'none'
|
||||
);
|
||||
});
|
||||
|
||||
const timeInLab = computed(() => {
|
||||
return timeToText(
|
||||
new Date(worldDialog.value.ref.publicationDate).getTime() -
|
||||
new Date(worldDialog.value.ref.labsPublicationDate).getTime()
|
||||
);
|
||||
});
|
||||
|
||||
const favoriteRate = computed(() => {
|
||||
return (
|
||||
Math.round(
|
||||
(((worldDialog.value.ref?.favorites -
|
||||
worldDialog.value.ref?.visits) /
|
||||
worldDialog.value.ref?.visits) *
|
||||
100 +
|
||||
100) *
|
||||
100
|
||||
) / 100
|
||||
);
|
||||
});
|
||||
|
||||
const worldTags = computed(() => {
|
||||
return worldDialog.value.ref?.tags
|
||||
.filter((tag) => tag.startsWith('author_tag'))
|
||||
.map((tag) => tag.replace('author_tag_', ''))
|
||||
.join(', ');
|
||||
});
|
||||
|
||||
const timeSpent = computed(() => {
|
||||
return timeToText(worldDialog.value.timeSpent);
|
||||
});
|
||||
|
||||
const worldDialogPlatform = computed(() => {
|
||||
const { ref } = worldDialog.value;
|
||||
const platforms = [];
|
||||
if (ref.unityPackages) {
|
||||
for (const unityPackage of ref.unityPackages) {
|
||||
if (!compareUnityVersion(unityPackage.unitySortNumber)) {
|
||||
continue;
|
||||
}
|
||||
let platform = 'PC';
|
||||
if (unityPackage.platform === 'standalonewindows') {
|
||||
platform = 'PC';
|
||||
} else if (unityPackage.platform === 'android') {
|
||||
platform = 'Android';
|
||||
} else if (unityPackage.platform) {
|
||||
platform = unityPackage.platform;
|
||||
}
|
||||
platforms.unshift(`${platform}/${unityPackage.unityVersion}`);
|
||||
}
|
||||
}
|
||||
return platforms.join(', ');
|
||||
});
|
||||
|
||||
const worldDialogPlatformCreatedAt = computed(() => {
|
||||
const { ref } = worldDialog.value;
|
||||
if (!ref.unityPackages) {
|
||||
return null;
|
||||
}
|
||||
let newest = {};
|
||||
for (const unityPackage of ref.unityPackages) {
|
||||
if (
|
||||
unityPackage.variant &&
|
||||
unityPackage.variant !== 'standard' &&
|
||||
unityPackage.variant !== 'security'
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
const platform = unityPackage.platform;
|
||||
const createdAt = unityPackage.created_at;
|
||||
if (
|
||||
!newest[platform] ||
|
||||
new Date(createdAt) > new Date(newest[platform])
|
||||
) {
|
||||
newest[platform] = createdAt;
|
||||
}
|
||||
}
|
||||
return newest;
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function onWorldMemoChange() {
|
||||
const worldId = worldDialog.value.id;
|
||||
const memo = worldDialog.value.memo;
|
||||
if (memo) {
|
||||
database.setWorldMemo({
|
||||
worldId,
|
||||
editedAt: new Date().toJSON(),
|
||||
memo
|
||||
});
|
||||
} else {
|
||||
database.deleteWorldMemo(worldId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function copyWorldId() {
|
||||
navigator.clipboard
|
||||
.writeText(worldDialog.value.id)
|
||||
.then(() => {
|
||||
toast.success(t('message.world.id_copied'));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('copy failed:', err);
|
||||
toast.error(t('message.copy_failed'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function copyWorldUrl() {
|
||||
navigator.clipboard
|
||||
.writeText(`https://vrchat.com/home/world/${worldDialog.value.id}`)
|
||||
.then(() => {
|
||||
toast.success(t('message.world.url_copied'));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('copy failed:', err);
|
||||
toast.error(t('message.copy_failed'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function copyWorldName() {
|
||||
navigator.clipboard
|
||||
.writeText(worldDialog.value.ref.name)
|
||||
.then(() => {
|
||||
toast.success(t('message.world.name_copied'));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('copy failed:', err);
|
||||
toast.error(t('message.copy_failed'));
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
memo,
|
||||
isTimeInLabVisible,
|
||||
timeInLab,
|
||||
favoriteRate,
|
||||
worldTags,
|
||||
timeSpent,
|
||||
worldDialogPlatform,
|
||||
worldDialogPlatformCreatedAt,
|
||||
onWorldMemoChange,
|
||||
copyWorldId,
|
||||
copyWorldUrl,
|
||||
copyWorldName,
|
||||
commaNumber,
|
||||
formatDateFilter
|
||||
};
|
||||
}
|
||||
132
src/stores/__tests__/vrcStatus.test.js
Normal file
132
src/stores/__tests__/vrcStatus.test.js
Normal file
@@ -0,0 +1,132 @@
|
||||
import { beforeEach, describe, expect, test, vi } from 'vitest';
|
||||
import { createPinia, setActivePinia } from 'pinia';
|
||||
|
||||
const mocks = vi.hoisted(() => ({
|
||||
execute: vi.fn(),
|
||||
formatDateFilter: vi.fn(() => 'formatted-time'),
|
||||
openExternalLink: vi.fn(),
|
||||
toast: {
|
||||
warning: vi.fn(),
|
||||
success: vi.fn(),
|
||||
dismiss: vi.fn()
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('../../service/webapi', () => ({
|
||||
default: {
|
||||
execute: (...args) => mocks.execute(...args)
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('../../shared/utils', () => ({
|
||||
formatDateFilter: (...args) => mocks.formatDateFilter(...args),
|
||||
openExternalLink: (...args) => mocks.openExternalLink(...args)
|
||||
}));
|
||||
|
||||
vi.mock('vue-sonner', () => ({
|
||||
toast: mocks.toast
|
||||
}));
|
||||
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
t: (key) => key
|
||||
})
|
||||
}));
|
||||
|
||||
vi.mock('worker-timers', () => ({
|
||||
setInterval: vi.fn(),
|
||||
clearInterval: vi.fn(),
|
||||
setTimeout: vi.fn(),
|
||||
clearTimeout: vi.fn()
|
||||
}));
|
||||
|
||||
function flushPromises() {
|
||||
return new Promise((resolve) => setTimeout(resolve, 0));
|
||||
}
|
||||
|
||||
import { useVrcStatusStore } from '../vrcStatus';
|
||||
|
||||
describe('useVrcStatusStore.getVrcStatus', () => {
|
||||
beforeEach(async () => {
|
||||
mocks.execute.mockResolvedValue({
|
||||
status: 200,
|
||||
data: JSON.stringify({
|
||||
page: { updated_at: '2026-01-01T00:00:00.000Z' },
|
||||
status: { description: 'All Systems Operational' }
|
||||
})
|
||||
});
|
||||
|
||||
setActivePinia(createPinia());
|
||||
useVrcStatusStore();
|
||||
await flushPromises();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test('sets failed status when API returns non-200', async () => {
|
||||
const store = useVrcStatusStore();
|
||||
mocks.execute.mockResolvedValueOnce({
|
||||
status: 503,
|
||||
data: 'service unavailable'
|
||||
});
|
||||
|
||||
await store.getVrcStatus();
|
||||
|
||||
expect(mocks.execute).toHaveBeenCalledWith({
|
||||
url: 'https://status.vrchat.com/api/v2/status.json',
|
||||
method: 'GET',
|
||||
headers: { Referer: 'https://vrcx.app' }
|
||||
});
|
||||
expect(store.lastStatus).toBe('Failed to fetch VRC status');
|
||||
expect(mocks.toast.warning).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('fetches summary for incident status and appends component summary', async () => {
|
||||
const store = useVrcStatusStore();
|
||||
mocks.execute
|
||||
.mockResolvedValueOnce({
|
||||
status: 200,
|
||||
data: JSON.stringify({
|
||||
page: { updated_at: '2026-01-02T00:00:00.000Z' },
|
||||
status: { description: 'Partial System Outage' }
|
||||
})
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
status: 200,
|
||||
data: JSON.stringify({
|
||||
components: [
|
||||
{ name: 'API', status: 'major_outage' },
|
||||
{ name: 'Website', status: 'operational' },
|
||||
{ name: 'CDN', status: 'partial_outage' }
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
await store.getVrcStatus();
|
||||
await flushPromises();
|
||||
|
||||
expect(mocks.execute).toHaveBeenCalledTimes(2);
|
||||
expect(mocks.execute.mock.calls[1][0].url).toBe(
|
||||
'https://status.vrchat.com/api/v2/summary.json'
|
||||
);
|
||||
expect(store.lastStatus).toBe('Partial System Outage');
|
||||
expect(store.statusText).toBe('Partial System Outage: API, CDN');
|
||||
expect(mocks.toast.warning).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('clears status when all systems are operational', async () => {
|
||||
const store = useVrcStatusStore();
|
||||
mocks.execute.mockResolvedValueOnce({
|
||||
status: 200,
|
||||
data: JSON.stringify({
|
||||
page: { updated_at: '2026-01-03T00:00:00.000Z' },
|
||||
status: { description: 'All Systems Operational' }
|
||||
})
|
||||
});
|
||||
|
||||
await store.getVrcStatus();
|
||||
|
||||
expect(mocks.execute).toHaveBeenCalledTimes(1);
|
||||
expect(store.lastStatus).toBe('');
|
||||
expect(store.statusText).toBe('');
|
||||
});
|
||||
});
|
||||
96
src/stores/__tests__/vrcxUpdater.test.js
Normal file
96
src/stores/__tests__/vrcxUpdater.test.js
Normal file
@@ -0,0 +1,96 @@
|
||||
import { beforeEach, describe, expect, test, vi } from 'vitest';
|
||||
import { createPinia, setActivePinia } from 'pinia';
|
||||
|
||||
const mocks = vi.hoisted(() => ({
|
||||
configRepository: {
|
||||
getString: vi.fn(),
|
||||
setString: vi.fn()
|
||||
},
|
||||
changeLogRemoveLinks: vi.fn((value) => value),
|
||||
toast: {
|
||||
error: vi.fn(),
|
||||
success: vi.fn(),
|
||||
warning: vi.fn()
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('../../service/config', () => ({
|
||||
default: mocks.configRepository
|
||||
}));
|
||||
|
||||
vi.mock('../../shared/utils', () => ({
|
||||
changeLogRemoveLinks: (...args) => mocks.changeLogRemoveLinks(...args)
|
||||
}));
|
||||
|
||||
vi.mock('vue-sonner', () => ({
|
||||
toast: mocks.toast
|
||||
}));
|
||||
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
t: (key) => key
|
||||
})
|
||||
}));
|
||||
|
||||
function flushPromises() {
|
||||
return new Promise((resolve) => setTimeout(resolve, 0));
|
||||
}
|
||||
|
||||
import { useVRCXUpdaterStore } from '../vrcxUpdater';
|
||||
|
||||
describe('useVRCXUpdaterStore.setAutoUpdateVRCX', () => {
|
||||
beforeEach(async () => {
|
||||
mocks.configRepository.getString.mockImplementation(
|
||||
(key, defaultValue) => {
|
||||
if (key === 'VRCX_autoUpdateVRCX') {
|
||||
return Promise.resolve('Off');
|
||||
}
|
||||
if (key === 'VRCX_id') {
|
||||
return Promise.resolve('test-vrcx-id');
|
||||
}
|
||||
if (key === 'VRCX_lastVRCXVersion') {
|
||||
return Promise.resolve('2026.1.0');
|
||||
}
|
||||
return Promise.resolve(defaultValue ?? '');
|
||||
}
|
||||
);
|
||||
mocks.configRepository.setString.mockResolvedValue(undefined);
|
||||
|
||||
globalThis.AppApi = {
|
||||
GetVersion: vi.fn().mockResolvedValue('2026.1.0')
|
||||
};
|
||||
|
||||
setActivePinia(createPinia());
|
||||
useVRCXUpdaterStore();
|
||||
await flushPromises();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test('sets autoUpdateVRCX to Off, clears pending flag, and persists config', async () => {
|
||||
const store = useVRCXUpdaterStore();
|
||||
store.pendingVRCXUpdate = true;
|
||||
|
||||
await store.setAutoUpdateVRCX('Off');
|
||||
|
||||
expect(store.autoUpdateVRCX).toBe('Off');
|
||||
expect(store.pendingVRCXUpdate).toBe(false);
|
||||
expect(mocks.configRepository.setString).toHaveBeenCalledWith(
|
||||
'VRCX_autoUpdateVRCX',
|
||||
'Off'
|
||||
);
|
||||
});
|
||||
|
||||
test('updates autoUpdateVRCX for non-Off values and keeps pending flag', async () => {
|
||||
const store = useVRCXUpdaterStore();
|
||||
store.pendingVRCXUpdate = true;
|
||||
|
||||
await store.setAutoUpdateVRCX('Notify');
|
||||
|
||||
expect(store.autoUpdateVRCX).toBe('Notify');
|
||||
expect(store.pendingVRCXUpdate).toBe(true);
|
||||
expect(mocks.configRepository.setString).toHaveBeenCalledWith(
|
||||
'VRCX_autoUpdateVRCX',
|
||||
'Notify'
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -168,14 +168,11 @@ export const useGroupStore = defineStore('Group', () => {
|
||||
D.members = [];
|
||||
D.memberFilter = groupDialogFilterOptions.everyone;
|
||||
D.calendar = [];
|
||||
const loadGroupRequest = forceRefresh
|
||||
? groupRequest.getGroup({
|
||||
groupId,
|
||||
includeRoles: false
|
||||
})
|
||||
: groupRequest.getCachedGroup({
|
||||
groupId
|
||||
});
|
||||
const loadGroupRequest = groupRequest.getGroup({
|
||||
groupId,
|
||||
includeRoles: false
|
||||
});
|
||||
|
||||
loadGroupRequest
|
||||
.catch((err) => {
|
||||
D.loading = false;
|
||||
@@ -962,6 +959,9 @@ export const useGroupStore = defineStore('Group', () => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function clearGroupInstances() {
|
||||
groupInstances.value = [];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user