mirror of
https://github.com/vrcx-team/VRCX.git
synced 2026-04-06 00:32:02 +02:00
refactor: use item component for favorites world item
This commit is contained in:
pa
@@ -305,8 +305,7 @@
|
||||
:favorite="favorite"
|
||||
:edit-mode="worldEditMode"
|
||||
:selected="selectedFavoriteWorlds.includes(favorite.id)"
|
||||
@toggle-select="toggleWorldSelection(favorite.id, $event)"
|
||||
@click="showWorldDialog(favorite.id)" />
|
||||
@toggle-select="toggleWorldSelection(favorite.id, $event)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="flex items-center justify-center text-[13px] h-full">
|
||||
@@ -339,9 +338,7 @@
|
||||
:group="activeLocalGroupName"
|
||||
:favorite="favorite.favorite"
|
||||
:edit-mode="worldEditMode"
|
||||
is-local-favorite
|
||||
@remove-local-world-favorite="removeLocalWorldFavorite"
|
||||
@click="showWorldDialog(favorite.favorite.id)" />
|
||||
is-local-favorite />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,175 +1,105 @@
|
||||
<template>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger as-child>
|
||||
<div :class="cardClasses" @click="$emit('click')">
|
||||
<template v-if="localFavRef?.name">
|
||||
<div class="favorites-search-card__content">
|
||||
<div
|
||||
class="favorites-search-card__avatar"
|
||||
:class="{ 'is-empty': !localFavRef.thumbnailImageUrl }"
|
||||
v-once>
|
||||
<img
|
||||
v-if="localFavRef.thumbnailImageUrl"
|
||||
:src="smallThumbnail"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low" />
|
||||
</div>
|
||||
<div class="favorites-search-card__detail">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="name text-sm">{{ localFavRef.name }}</span>
|
||||
<span
|
||||
v-if="
|
||||
!isLocalFavorite &&
|
||||
(favorite.deleted || localFavRef.releaseStatus === 'private')
|
||||
"
|
||||
class="inline-flex items-center gap-1 text-sm">
|
||||
<AlertTriangle
|
||||
v-if="favorite.deleted"
|
||||
:title="t('view.favorite.unavailable_tooltip')"
|
||||
class="h-4 w-4" />
|
||||
<Lock
|
||||
v-if="localFavRef.releaseStatus === 'private'"
|
||||
:title="t('view.favorite.private')"
|
||||
class="h-4 w-4" />
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
{{ localFavRef.authorName }}
|
||||
<template v-if="localFavRef.occupants"> ({{ localFavRef.occupants }}) </template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="favorites-search-card__actions">
|
||||
<template v-if="editMode">
|
||||
<div
|
||||
v-if="!isLocalFavorite"
|
||||
class="flex justify-end w-full favorites-search-card__action--checkbox"
|
||||
@click.stop>
|
||||
<Checkbox v-model="isSelected" />
|
||||
</div>
|
||||
<div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
|
||||
<div class="flex justify-end w-full flex-1" @click.stop>
|
||||
<FavoritesMoveDropdown
|
||||
:favoriteGroup="favoriteWorldGroups"
|
||||
:currentFavorite="props.favorite"
|
||||
:currentGroup="group"
|
||||
class="w-full"
|
||||
:is-local-favorite="isLocalFavorite"
|
||||
type="world" />
|
||||
</div>
|
||||
<div class="flex justify-end w-full">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
:variant="
|
||||
isLocalFavorite && shiftHeld
|
||||
? 'destructive'
|
||||
: isLocalFavorite
|
||||
? 'outline'
|
||||
: 'ghost'
|
||||
"
|
||||
class="rounded-full text-xs h-6 w-6"
|
||||
@click.stop="handlePrimaryDeleteAction">
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
|
||||
<div class="flex justify-end w-full">
|
||||
<TooltipWrapper side="top" :content="inviteOrLaunchText">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="rounded-full text-xs h-6 w-6"
|
||||
@click.stop="newInstanceSelfInvite(favorite.id)"
|
||||
><Mail class="h-4 w-4"
|
||||
/></Button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="flex justify-end w-full">
|
||||
<TooltipWrapper
|
||||
v-if="showDangerUnfavorite"
|
||||
side="top"
|
||||
:content="t('view.favorite.unfavorite_tooltip')">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="destructive"
|
||||
class="rounded-full text-xs h-6 w-6"
|
||||
@click.stop="handleDeleteFavorite"
|
||||
><Trash2 class="h-4 w-4"
|
||||
/></Button>
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper
|
||||
v-else
|
||||
side="top"
|
||||
:content="t('view.favorite.edit_favorite_tooltip')">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="rounded-full text-xs h-6 w-6"
|
||||
@click.stop="showFavoriteDialog('world', favorite.id)"
|
||||
><Star class="h-4 w-4"
|
||||
/></Button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="favorites-search-card__content">
|
||||
<div class="favorites-search-card__avatar is-empty"></div>
|
||||
<div class="favorites-search-card__detail" v-once>
|
||||
<span>{{ favorite.name || favorite.id }}</span>
|
||||
<AlertTriangle
|
||||
v-if="!isLocalFavorite && favorite.deleted"
|
||||
:title="t('view.favorite.unavailable_tooltip')"
|
||||
class="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="favorites-search-card__actions">
|
||||
<div class="flex justify-end w-full">
|
||||
<Button
|
||||
class="rounded-full text-xs h-6 w-6"
|
||||
size="icon-sm"
|
||||
:variant="isLocalFavorite ? 'outline' : 'ghost'"
|
||||
@click.stop="handleDeleteFavorite">
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
|
||||
<ItemMedia variant="image">
|
||||
<img
|
||||
v-if="smallThumbnail"
|
||||
:src="smallThumbnail"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low"
|
||||
class="object-cover" />
|
||||
<Avatar v-else>
|
||||
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent class="min-w-0">
|
||||
<ItemTitle class="truncate max-w-full">
|
||||
{{ displayName }}
|
||||
<AlertTriangle
|
||||
v-if="showUnavailable"
|
||||
:title="t('view.favorite.unavailable_tooltip')"
|
||||
class="h-4 w-4" />
|
||||
<Lock v-if="isPrivateWorld" :title="t('view.favorite.private')" class="h-4 w-4" />
|
||||
</ItemTitle>
|
||||
<ItemDescription class="truncate line-clamp-1 text-xs">
|
||||
{{ authorText }}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions v-if="editMode && !isLocalFavorite" @click.stop>
|
||||
<Checkbox v-model="isSelected" />
|
||||
</ItemActions>
|
||||
<DropdownMenu v-else-if="!editMode">
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button size="icon-sm" variant="ghost" class="rounded-full" @click.stop>
|
||||
<MoreHorizontal class="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem @click="handleViewDetails">
|
||||
{{ t('common.actions.view_details') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="handleNewInstance">
|
||||
{{ t('dialog.world.actions.new_instance') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="handleSelfInvite">
|
||||
{{ inviteOrLaunchText }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem @click="showFavoriteDialog('world', favorite.id)">
|
||||
{{ t('view.favorite.edit_favorite_tooltip') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem variant="destructive" @click="handleDeleteFavorite">
|
||||
{{ deleteMenuLabel }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</Item>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem @click="handleNewInstance">
|
||||
<Plus class="size-4" />
|
||||
{{ t('dialog.world.actions.new_instance') }}
|
||||
<ContextMenuItem @click="handleViewDetails">{{ t('common.actions.view_details') }}</ContextMenuItem>
|
||||
<ContextMenuItem @click="handleNewInstance">{{ t('dialog.world.actions.new_instance') }}</ContextMenuItem>
|
||||
<ContextMenuItem @click="handleSelfInvite">{{ inviteOrLaunchText }}</ContextMenuItem>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem @click="showFavoriteDialog('world', favorite.id)">
|
||||
{{ t('view.favorite.edit_favorite_tooltip') }}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="newInstanceSelfInvite(favorite.id)">
|
||||
<Mail class="size-4" />
|
||||
{{ inviteOrLaunchText }}
|
||||
<ContextMenuItem variant="destructive" @click="handleDeleteFavorite">
|
||||
{{ deleteMenuLabel }}
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { AlertTriangle, Lock, Mail, Plus, Star, Trash2 } from 'lucide-vue-next';
|
||||
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
|
||||
import { AlertTriangle, Lock, MoreHorizontal } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuTrigger
|
||||
} from '@/components/ui/context-menu';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useFavoriteStore, useInstanceStore, useInviteStore, useUiStore } from '../../../stores';
|
||||
import { runNewInstanceSelfInviteFlow as newInstanceSelfInvite } from '../../../coordinators/inviteCoordinator';
|
||||
import { favoriteRequest } from '../../../api';
|
||||
|
||||
import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
|
||||
import { removeLocalWorldFavorite } from '../../../coordinators/favoriteCoordinator';
|
||||
import { runNewInstanceSelfInviteFlow as newInstanceSelfInvite } from '../../../coordinators/inviteCoordinator';
|
||||
import { showWorldDialog } from '../../../coordinators/worldCoordinator';
|
||||
import { useFavoriteStore, useInstanceStore, useInviteStore } from '../../../stores';
|
||||
|
||||
const props = defineProps({
|
||||
group: [Object, String],
|
||||
@@ -179,13 +109,12 @@
|
||||
selected: { type: Boolean, default: false }
|
||||
});
|
||||
|
||||
const emit = defineEmits(['toggle-select', 'remove-local-world-favorite', 'click']);
|
||||
const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
|
||||
const emit = defineEmits(['toggle-select']);
|
||||
const { showFavoriteDialog } = useFavoriteStore();
|
||||
|
||||
const { t } = useI18n();
|
||||
const { canOpenInstanceInGame } = useInviteStore();
|
||||
const { shiftHeld } = storeToRefs(useUiStore());
|
||||
const { createNewInstance } = useInstanceStore();
|
||||
|
||||
const isSelected = computed({
|
||||
get: () => props.selected,
|
||||
@@ -194,18 +123,19 @@
|
||||
|
||||
const localFavRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite?.ref));
|
||||
|
||||
const showDangerUnfavorite = computed(() => {
|
||||
return shiftHeld.value;
|
||||
});
|
||||
const displayName = computed(() => localFavRef.value?.name || props.favorite?.name || props.favorite?.id);
|
||||
|
||||
const cardClasses = computed(() => [
|
||||
'favorites-search-card',
|
||||
'favorites-search-card--world',
|
||||
{
|
||||
'is-selected': props.selected,
|
||||
'is-edit-mode': props.editMode
|
||||
}
|
||||
]);
|
||||
const avatarFallback = computed(() => displayName.value?.charAt(0)?.toUpperCase() || '?');
|
||||
|
||||
const showUnavailable = computed(() => !props.isLocalFavorite && props.favorite?.deleted);
|
||||
|
||||
const isPrivateWorld = computed(() => localFavRef.value?.releaseStatus === 'private');
|
||||
|
||||
const authorText = computed(() => {
|
||||
const author = localFavRef.value?.authorName || '';
|
||||
const occupants = localFavRef.value?.occupants;
|
||||
return occupants ? `${author} (${occupants})` : author;
|
||||
});
|
||||
|
||||
const smallThumbnail = computed(() => {
|
||||
const url = localFavRef.value?.thumbnailImageUrl?.replace('256', '128');
|
||||
@@ -218,50 +148,36 @@
|
||||
: t('dialog.world.actions.new_instance_and_self_invite');
|
||||
});
|
||||
|
||||
/**
|
||||
* @returns {void}
|
||||
*/
|
||||
function handlePrimaryDeleteAction() {
|
||||
if (props.isLocalFavorite) {
|
||||
if (shiftHeld.value) {
|
||||
emit('remove-local-world-favorite', props.favorite.id, props.group);
|
||||
return;
|
||||
}
|
||||
showFavoriteDialog('world', props.favorite.id);
|
||||
return;
|
||||
}
|
||||
deleteFavorite(props.favorite.id);
|
||||
const deleteMenuLabel = computed(() =>
|
||||
props.isLocalFavorite ? t('view.favorite.delete_tooltip') : t('view.favorite.unfavorite_tooltip')
|
||||
);
|
||||
|
||||
const itemStyle = computed(() => ({
|
||||
padding: 'var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px)',
|
||||
gap: 'var(--favorites-card-content-gap, 10px)',
|
||||
minWidth: 'var(--favorites-card-min-width, 220px)',
|
||||
maxWidth: 'var(--favorites-card-target-width, 220px)',
|
||||
width: '100%',
|
||||
fontSize: 'calc(0.875rem * var(--favorites-card-scale, 1))'
|
||||
}));
|
||||
|
||||
function handleViewDetails() {
|
||||
showWorldDialog(props.favorite.id);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function handleDeleteFavorite() {
|
||||
if (props.isLocalFavorite) {
|
||||
emit('remove-local-world-favorite', props.favorite.id, props.group);
|
||||
} else {
|
||||
deleteFavorite(props.favorite.id);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param objectId
|
||||
*/
|
||||
function deleteFavorite(objectId) {
|
||||
favoriteRequest.deleteFavorite({ objectId });
|
||||
}
|
||||
|
||||
const { createNewInstance } = useInstanceStore();
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function handleNewInstance() {
|
||||
createNewInstance(props.favorite.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import './favorites-card.css';
|
||||
</style>
|
||||
function handleSelfInvite() {
|
||||
newInstanceSelfInvite(props.favorite.id);
|
||||
}
|
||||
|
||||
function handleDeleteFavorite() {
|
||||
if (props.isLocalFavorite) {
|
||||
removeLocalWorldFavorite(props.favorite.id, props.group);
|
||||
return;
|
||||
}
|
||||
favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,204 +0,0 @@
|
||||
<template>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger as-child>
|
||||
<div :class="cardClasses" @click="$emit('click')">
|
||||
<template v-if="favorite.name">
|
||||
<div class="favorites-search-card__content">
|
||||
<div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
|
||||
<img
|
||||
v-if="favorite.thumbnailImageUrl"
|
||||
:src="smallThumbnail"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low" />
|
||||
</div>
|
||||
<div class="favorites-search-card__detail">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="name text-sm">{{ props.favorite.name }}</span>
|
||||
</div>
|
||||
<span class="text-xs">
|
||||
{{ props.favorite.authorName }}
|
||||
<template v-if="props.favorite.occupants"> ({{ props.favorite.occupants }}) </template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="favorites-search-card__actions">
|
||||
<template v-if="editMode">
|
||||
<div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
|
||||
<div class="flex justify-end w-full flex-1" @click.stop>
|
||||
<FavoritesMoveDropdown
|
||||
:favoriteGroup="favoriteWorldGroups"
|
||||
:currentFavorite="props.favorite"
|
||||
class="w-full"
|
||||
isLocalFavorite
|
||||
type="world" />
|
||||
</div>
|
||||
<div class="flex justify-end w-full">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
:variant="shiftHeld ? 'destructive' : 'outline'"
|
||||
class="rounded-full text-xs h-6 w-6"
|
||||
@click.stop="handlePrimaryDeleteAction">
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
|
||||
<div class="flex justify-end w-full">
|
||||
<TooltipWrapper side="top" :content="inviteOrLaunchText">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="rounded-full text-xs h-6 w-6"
|
||||
@click.stop="newInstanceSelfInvite(favorite.id)"
|
||||
><Mail class="h-4 w-4"
|
||||
/></Button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="flex justify-end w-full">
|
||||
<TooltipWrapper
|
||||
v-if="showDangerUnfavorite"
|
||||
side="top"
|
||||
:content="t('view.favorite.unfavorite_tooltip')">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="destructive"
|
||||
class="rounded-full text-xs h-6 w-6"
|
||||
@click.stop="handleDeleteFavorite"
|
||||
><Trash2 class="h-4 w-4"
|
||||
/></Button>
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper
|
||||
v-else
|
||||
side="top"
|
||||
:content="t('view.favorite.edit_favorite_tooltip')">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="rounded-full text-xs h-6 w-6"
|
||||
@click.stop="showFavoriteDialog('world', favorite.id)"
|
||||
><Star class="h-4 w-4"
|
||||
/></Button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="favorites-search-card__content">
|
||||
<div class="favorites-search-card__avatar is-empty"></div>
|
||||
<div class="favorites-search-card__detail" v-once>
|
||||
<span class="name">{{ favorite.name || favorite.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="favorites-search-card__actions">
|
||||
<div class="flex justify-end w-full">
|
||||
<Button
|
||||
class="rounded-full text-xs h-6 w-6"
|
||||
size="icon-sm"
|
||||
variant="outline"
|
||||
@click.stop="handleDeleteFavorite">
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem @click="handleNewInstance">
|
||||
<Plus class="size-4" />
|
||||
{{ t('dialog.world.actions.new_instance') }}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="newInstanceSelfInvite(favorite.id)">
|
||||
<Mail class="size-4" />
|
||||
{{ inviteOrLaunchText }}
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
|
||||
import { Mail, Plus, Star, Trash2 } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useFavoriteStore, useInstanceStore, useInviteStore, useUiStore } from '../../../stores';
|
||||
import { runNewInstanceSelfInviteFlow as newInstanceSelfInvite } from '../../../coordinators/inviteCoordinator';
|
||||
|
||||
import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
|
||||
|
||||
const props = defineProps({
|
||||
group: [Object, String],
|
||||
favorite: Object,
|
||||
editMode: { type: Boolean, default: false }
|
||||
});
|
||||
|
||||
const emit = defineEmits(['remove-local-world-favorite', 'click']);
|
||||
const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
|
||||
const { showFavoriteDialog } = useFavoriteStore();
|
||||
|
||||
const { shiftHeld } = storeToRefs(useUiStore());
|
||||
const { t } = useI18n();
|
||||
const { canOpenInstanceInGame } = useInviteStore();
|
||||
|
||||
const cardClasses = computed(() => [
|
||||
'favorites-search-card',
|
||||
'favorites-search-card--world',
|
||||
{
|
||||
'is-edit-mode': props.editMode
|
||||
}
|
||||
]);
|
||||
|
||||
const smallThumbnail = computed(() => {
|
||||
const url = props.favorite.thumbnailImageUrl?.replace('256', '128');
|
||||
return url || props.favorite.thumbnailImageUrl;
|
||||
});
|
||||
|
||||
const inviteOrLaunchText = computed(() => {
|
||||
return canOpenInstanceInGame
|
||||
? t('dialog.world.actions.new_instance_and_open_ingame')
|
||||
: t('dialog.world.actions.new_instance_and_self_invite');
|
||||
});
|
||||
|
||||
const showDangerUnfavorite = computed(() => {
|
||||
return shiftHeld.value;
|
||||
});
|
||||
|
||||
/**
|
||||
* @returns {void}
|
||||
*/
|
||||
function handlePrimaryDeleteAction() {
|
||||
if (shiftHeld.value) {
|
||||
emit('remove-local-world-favorite', props.favorite.id, props.group);
|
||||
return;
|
||||
}
|
||||
showFavoriteDialog('world', props.favorite.id);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function handleDeleteFavorite() {
|
||||
emit('remove-local-world-favorite', props.favorite.id, props.group);
|
||||
}
|
||||
|
||||
const { createNewInstance } = useInstanceStore();
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function handleNewInstance() {
|
||||
createNewInstance(props.favorite.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import './favorites-card.css';
|
||||
</style>
|
||||
@@ -1,14 +1,14 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const mocks = vi.hoisted(() => ({
|
||||
favoriteWorldGroups: null,
|
||||
shiftHeld: null,
|
||||
showFavoriteDialog: vi.fn(),
|
||||
deleteFavorite: vi.fn(),
|
||||
removeLocalWorldFavorite: vi.fn(),
|
||||
newInstanceSelfInvite: vi.fn(),
|
||||
createNewInstance: vi.fn()
|
||||
createNewInstance: vi.fn(),
|
||||
showWorldDialog: vi.fn(),
|
||||
canOpenInstanceInGame: false
|
||||
}));
|
||||
|
||||
vi.mock('pinia', async (importOriginal) => {
|
||||
@@ -21,10 +21,9 @@ vi.mock('pinia', async (importOriginal) => {
|
||||
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
t: (key) => key
|
||||
,
|
||||
locale: require('vue').ref('en')
|
||||
})
|
||||
t: (key) => key,
|
||||
locale: { value: 'en' }
|
||||
})
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/context-menu', () => ({
|
||||
@@ -37,17 +36,50 @@ vi.mock('@/components/ui/context-menu', () => ({
|
||||
ContextMenuContent: {
|
||||
template: '<div><slot /></div>'
|
||||
},
|
||||
ContextMenuSeparator: {
|
||||
template: '<hr />'
|
||||
},
|
||||
ContextMenuItem: {
|
||||
emits: ['click'],
|
||||
template: '<button @click="$emit(\'click\')"><slot /></button>'
|
||||
template: '<button data-testid="ctx-item" @click="$emit(\'click\')"><slot /></button>'
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/dropdown-menu', () => ({
|
||||
DropdownMenu: {
|
||||
template: '<div><slot /></div>'
|
||||
},
|
||||
DropdownMenuTrigger: {
|
||||
template: '<div><slot /></div>'
|
||||
},
|
||||
DropdownMenuContent: {
|
||||
template: '<div><slot /></div>'
|
||||
},
|
||||
DropdownMenuSeparator: {
|
||||
template: '<hr />'
|
||||
},
|
||||
DropdownMenuItem: {
|
||||
emits: ['click'],
|
||||
template: '<button data-testid="dd-item" @click="$emit(\'click\')"><slot /></button>'
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/item', () => ({
|
||||
Item: {
|
||||
emits: ['click'],
|
||||
template: '<div data-testid="item" @click="$emit(\'click\', $event)"><slot /></div>'
|
||||
},
|
||||
ItemActions: { template: '<div><slot /></div>' },
|
||||
ItemMedia: { template: '<div><slot /></div>' },
|
||||
ItemContent: { template: '<div><slot /></div>' },
|
||||
ItemTitle: { template: '<div><slot /></div>' },
|
||||
ItemDescription: { template: '<div><slot /></div>' }
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/button', () => ({
|
||||
Button: {
|
||||
emits: ['click'],
|
||||
template:
|
||||
'<button data-testid="btn" @click="$emit(\'click\', $event)"><slot /></button>'
|
||||
template: '<button data-testid="btn" @click="$emit(\'click\', $event)"><slot /></button>'
|
||||
}
|
||||
}));
|
||||
|
||||
@@ -56,33 +88,25 @@ vi.mock('@/components/ui/checkbox', () => ({
|
||||
props: ['modelValue'],
|
||||
emits: ['update:modelValue'],
|
||||
template:
|
||||
'<input type="checkbox" :checked="modelValue" @change="$emit(\'update:modelValue\', $event.target.checked)" />'
|
||||
'<input data-testid="checkbox" type="checkbox" :checked="modelValue" @change="$emit(\'update:modelValue\', $event.target.checked)" />'
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('lucide-vue-next', () => ({
|
||||
AlertTriangle: { template: '<i />' },
|
||||
Lock: { template: '<i />' },
|
||||
Mail: { template: '<i />' },
|
||||
Plus: { template: '<i />' },
|
||||
Star: { template: '<i />' },
|
||||
Trash2: { template: '<i />' }
|
||||
MoreHorizontal: { template: '<i />' }
|
||||
}));
|
||||
|
||||
vi.mock('../../../../stores', () => ({
|
||||
useFavoriteStore: () => ({
|
||||
favoriteWorldGroups: mocks.favoriteWorldGroups,
|
||||
showFavoriteDialog: (...args) => mocks.showFavoriteDialog(...args)
|
||||
}),
|
||||
useInviteStore: () => ({
|
||||
newInstanceSelfInvite: (...args) => mocks.newInstanceSelfInvite(...args),
|
||||
canOpenInstanceInGame: false
|
||||
canOpenInstanceInGame: mocks.canOpenInstanceInGame
|
||||
}),
|
||||
useInstanceStore: () => ({
|
||||
createNewInstance: (...args) => mocks.createNewInstance(...args)
|
||||
}),
|
||||
useUiStore: () => ({
|
||||
shiftHeld: mocks.shiftHeld
|
||||
})
|
||||
}));
|
||||
|
||||
@@ -92,90 +116,167 @@ vi.mock('../../../../api', () => ({
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('../../../../coordinators/inviteCoordinator', () => ({
|
||||
runNewInstanceSelfInviteFlow: (...args) => mocks.newInstanceSelfInvite(...args)
|
||||
}));
|
||||
|
||||
vi.mock('../../../../coordinators/worldCoordinator', () => ({
|
||||
showWorldDialog: (...args) => mocks.showWorldDialog(...args)
|
||||
}));
|
||||
|
||||
vi.mock('../../../../coordinators/favoriteCoordinator', () => ({
|
||||
removeLocalWorldFavorite: (...args) => mocks.removeLocalWorldFavorite(...args)
|
||||
}));
|
||||
|
||||
import FavoritesWorldItem from '../FavoritesWorldItem.vue';
|
||||
|
||||
/**
|
||||
*
|
||||
* @param props
|
||||
* @param {Record<string, any>} props
|
||||
*/
|
||||
function mountItem(props = {}) {
|
||||
return mount(FavoritesWorldItem, {
|
||||
props: {
|
||||
favorite: {
|
||||
id: 'wrld_default',
|
||||
name: 'Default World',
|
||||
authorName: 'Author'
|
||||
ref: {
|
||||
name: 'Default World',
|
||||
authorName: 'Author',
|
||||
thumbnailImageUrl: '',
|
||||
releaseStatus: 'public'
|
||||
}
|
||||
},
|
||||
group: 'Favorites',
|
||||
isLocalFavorite: true,
|
||||
isLocalFavorite: false,
|
||||
editMode: false,
|
||||
selected: false,
|
||||
...props
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
TooltipWrapper: {
|
||||
template: '<div><slot /></div>'
|
||||
},
|
||||
FavoritesMoveDropdown: {
|
||||
template: '<div />'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param wrapper
|
||||
* @param text
|
||||
*/
|
||||
async function clickMenuItem(wrapper, text) {
|
||||
const buttons = wrapper.findAll('button');
|
||||
const target = buttons.find((btn) => btn.text().includes(text));
|
||||
expect(target, `menu item not found: ${text}`).toBeTruthy();
|
||||
await target.trigger('click');
|
||||
}
|
||||
|
||||
describe('FavoritesWorldItem.vue', () => {
|
||||
beforeEach(() => {
|
||||
mocks.favoriteWorldGroups = ref([]);
|
||||
mocks.shiftHeld = ref(false);
|
||||
mocks.showFavoriteDialog.mockReset();
|
||||
mocks.deleteFavorite.mockReset();
|
||||
mocks.removeLocalWorldFavorite.mockReset();
|
||||
mocks.newInstanceSelfInvite.mockReset();
|
||||
mocks.createNewInstance.mockReset();
|
||||
mocks.showWorldDialog.mockReset();
|
||||
mocks.canOpenInstanceInGame = false;
|
||||
});
|
||||
|
||||
it('renders fallback text when local favorite has no name', () => {
|
||||
it('opens world details when item is clicked', async () => {
|
||||
const wrapper = mountItem();
|
||||
|
||||
await wrapper.get('[data-testid="item"]').trigger('click');
|
||||
|
||||
expect(mocks.showWorldDialog).toHaveBeenCalledWith('wrld_default');
|
||||
});
|
||||
|
||||
it('renders the full 5-item action menu', () => {
|
||||
const wrapper = mountItem();
|
||||
const text = wrapper.text();
|
||||
|
||||
expect(text).toContain('common.actions.view_details');
|
||||
expect(text).toContain('dialog.world.actions.new_instance');
|
||||
expect(text).toContain('dialog.world.actions.new_instance_and_self_invite');
|
||||
expect(text).toContain('view.favorite.edit_favorite_tooltip');
|
||||
expect(text).toContain('view.favorite.unfavorite_tooltip');
|
||||
});
|
||||
|
||||
it('opens world details from menu action', async () => {
|
||||
const wrapper = mountItem();
|
||||
|
||||
await clickMenuItem(wrapper, 'common.actions.view_details');
|
||||
|
||||
expect(mocks.showWorldDialog).toHaveBeenCalledWith('wrld_default');
|
||||
});
|
||||
|
||||
it('opens edit favorite dialog from menu action', async () => {
|
||||
const wrapper = mountItem();
|
||||
|
||||
await clickMenuItem(wrapper, 'view.favorite.edit_favorite_tooltip');
|
||||
|
||||
expect(mocks.showFavoriteDialog).toHaveBeenCalledWith('world', 'wrld_default');
|
||||
});
|
||||
|
||||
it('emits toggle-select in edit mode for remote favorites', async () => {
|
||||
const wrapper = mountItem({ editMode: true });
|
||||
|
||||
await wrapper.get('[data-testid="checkbox"]').setValue(true);
|
||||
|
||||
expect(wrapper.emitted('toggle-select')).toEqual([[true]]);
|
||||
});
|
||||
|
||||
it('does not show checkbox in edit mode for local favorites', () => {
|
||||
const wrapper = mountItem({
|
||||
editMode: true,
|
||||
isLocalFavorite: true,
|
||||
favorite: {
|
||||
id: 'wrld_missing_name'
|
||||
id: 'wrld_local_1',
|
||||
name: 'Local World'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.text()).toContain('wrld_missing_name');
|
||||
expect(wrapper.find('[data-testid="checkbox"]').exists()).toBe(false);
|
||||
});
|
||||
|
||||
it('emits local remove event in fallback mode when delete is clicked', async () => {
|
||||
it('renders fallback id when world ref is missing', () => {
|
||||
const wrapper = mountItem({
|
||||
favorite: {
|
||||
id: 'wrld_missing_name'
|
||||
id: 'wrld_missing_ref'
|
||||
},
|
||||
group: 'LocalGroup'
|
||||
isLocalFavorite: true
|
||||
});
|
||||
|
||||
await wrapper.get('[data-testid="btn"]').trigger('click');
|
||||
|
||||
expect(wrapper.emitted('remove-local-world-favorite')).toEqual([
|
||||
['wrld_missing_name', 'LocalGroup']
|
||||
]);
|
||||
expect(mocks.deleteFavorite).not.toHaveBeenCalled();
|
||||
expect(wrapper.text()).toContain('wrld_missing_ref');
|
||||
});
|
||||
|
||||
it('opens local favorite dialog in edit mode when shift is not held', async () => {
|
||||
it('deletes local favorite via coordinator', async () => {
|
||||
const wrapper = mountItem({
|
||||
favorite: {
|
||||
id: 'wrld_local_1',
|
||||
name: 'Local World',
|
||||
authorName: 'Author'
|
||||
name: 'Local World'
|
||||
},
|
||||
editMode: true
|
||||
group: 'LocalGroup',
|
||||
isLocalFavorite: true
|
||||
});
|
||||
|
||||
await wrapper.get('[data-testid="btn"]').trigger('click');
|
||||
await clickMenuItem(wrapper, 'view.favorite.delete_tooltip');
|
||||
|
||||
expect(mocks.showFavoriteDialog).toHaveBeenCalledWith(
|
||||
'world',
|
||||
'wrld_local_1'
|
||||
);
|
||||
expect(wrapper.emitted('remove-local-world-favorite')).toBeUndefined();
|
||||
expect(mocks.removeLocalWorldFavorite).toHaveBeenCalledWith('wrld_local_1', 'LocalGroup');
|
||||
expect(mocks.deleteFavorite).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('deletes remote favorite via API', async () => {
|
||||
const wrapper = mountItem({ isLocalFavorite: false });
|
||||
|
||||
await clickMenuItem(wrapper, 'view.favorite.unfavorite_tooltip');
|
||||
|
||||
expect(mocks.deleteFavorite).toHaveBeenCalledWith({ objectId: 'wrld_default' });
|
||||
expect(mocks.removeLocalWorldFavorite).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('runs new instance and self invite actions from menu', async () => {
|
||||
const wrapper = mountItem();
|
||||
|
||||
await clickMenuItem(wrapper, 'dialog.world.actions.new_instance');
|
||||
await clickMenuItem(wrapper, 'dialog.world.actions.new_instance_and_self_invite');
|
||||
|
||||
expect(mocks.createNewInstance).toHaveBeenCalledWith('wrld_default');
|
||||
expect(mocks.newInstanceSelfInvite).toHaveBeenCalledWith('wrld_default');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user