mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-07 06:56:04 +02:00
add context menu to favorite world avatar item
This commit is contained in:
pa
@@ -1,133 +1,152 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="cardClasses" @click="$emit('click')">
|
<ContextMenu>
|
||||||
<template v-if="localFavFakeRef">
|
<ContextMenuTrigger as-child>
|
||||||
<div class="favorites-search-card__content">
|
<div :class="cardClasses" @click="$emit('click')">
|
||||||
<div class="favorites-search-card__avatar" :class="{ 'is-empty': !localFavFakeRef.thumbnailImageUrl }">
|
<template v-if="localFavFakeRef">
|
||||||
<img v-if="localFavFakeRef.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
|
<div class="favorites-search-card__content">
|
||||||
</div>
|
<div
|
||||||
<div class="favorites-search-card__detail">
|
class="favorites-search-card__avatar"
|
||||||
<div class="favorites-search-card__title">
|
:class="{ 'is-empty': !localFavFakeRef.thumbnailImageUrl }">
|
||||||
<span class="name text-sm">{{ localFavFakeRef.name }}</span>
|
<img v-if="localFavFakeRef.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
|
||||||
<span class="favorites-search-card__badges">
|
|
||||||
<TooltipWrapper
|
|
||||||
v-if="favorite.deleted"
|
|
||||||
side="top"
|
|
||||||
:content="t('view.favorite.unavailable_tooltip')">
|
|
||||||
<AlertTriangle class="h-4 w-4" />
|
|
||||||
</TooltipWrapper>
|
|
||||||
<TooltipWrapper
|
|
||||||
v-if="!isLocalFavorite && favorite.ref?.releaseStatus === 'private'"
|
|
||||||
side="top"
|
|
||||||
:content="t('view.favorite.private')">
|
|
||||||
<Lock class="h-4 w-4" />
|
|
||||||
</TooltipWrapper>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-xs text-muted-foreground">{{ localFavFakeRef.authorName }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="favorites-search-card__actions">
|
|
||||||
<template v-if="editMode">
|
|
||||||
<div
|
|
||||||
v-if="!isLocalFavorite"
|
|
||||||
class="favorites-search-card__action favorites-search-card__action--checkbox"
|
|
||||||
@click.stop>
|
|
||||||
<Checkbox v-model="isSelected" />
|
|
||||||
</div>
|
|
||||||
<div class="favorites-search-card__action-group">
|
|
||||||
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
|
|
||||||
<FavoritesMoveDropdown
|
|
||||||
:favoriteGroup="favoriteAvatarGroups"
|
|
||||||
:currentFavorite="props.favorite"
|
|
||||||
:currentGroup="group"
|
|
||||||
class="favorites-search-card__dropdown"
|
|
||||||
:is-local-favorite="isLocalFavorite"
|
|
||||||
type="avatar" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="favorites-search-card__action">
|
<div class="favorites-search-card__detail">
|
||||||
<TooltipWrapper
|
<div class="favorites-search-card__title">
|
||||||
side="left"
|
<span class="name text-sm">{{ localFavFakeRef.name }}</span>
|
||||||
:content="
|
<span class="favorites-search-card__badges">
|
||||||
isLocalFavorite
|
<TooltipWrapper
|
||||||
? t('view.favorite.delete_tooltip')
|
v-if="favorite.deleted"
|
||||||
: t('view.favorite.unfavorite_tooltip')
|
side="top"
|
||||||
">
|
:content="t('view.favorite.unavailable_tooltip')">
|
||||||
<Button
|
<AlertTriangle class="h-4 w-4" />
|
||||||
size="icon-sm"
|
</TooltipWrapper>
|
||||||
variant="outline"
|
<TooltipWrapper
|
||||||
class="rounded-full text-xs h-6 w-6"
|
v-if="!isLocalFavorite && favorite.ref?.releaseStatus === 'private'"
|
||||||
@click.stop="handlePrimaryDeleteAction">
|
side="top"
|
||||||
<Trash2 class="h-4 w-4" />
|
:content="t('view.favorite.private')">
|
||||||
</Button>
|
<Lock class="h-4 w-4" />
|
||||||
</TooltipWrapper>
|
</TooltipWrapper>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-muted-foreground">{{ localFavFakeRef.authorName }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="favorites-search-card__actions">
|
||||||
|
<template v-if="editMode">
|
||||||
|
<div
|
||||||
|
v-if="!isLocalFavorite"
|
||||||
|
class="favorites-search-card__action favorites-search-card__action--checkbox"
|
||||||
|
@click.stop>
|
||||||
|
<Checkbox v-model="isSelected" />
|
||||||
|
</div>
|
||||||
|
<div class="favorites-search-card__action-group">
|
||||||
|
<div
|
||||||
|
class="favorites-search-card__action favorites-search-card__action--full"
|
||||||
|
@click.stop>
|
||||||
|
<FavoritesMoveDropdown
|
||||||
|
:favoriteGroup="favoriteAvatarGroups"
|
||||||
|
:currentFavorite="props.favorite"
|
||||||
|
:currentGroup="group"
|
||||||
|
class="favorites-search-card__dropdown"
|
||||||
|
:is-local-favorite="isLocalFavorite"
|
||||||
|
type="avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="favorites-search-card__action">
|
||||||
|
<TooltipWrapper
|
||||||
|
side="left"
|
||||||
|
:content="
|
||||||
|
isLocalFavorite
|
||||||
|
? t('view.favorite.delete_tooltip')
|
||||||
|
: t('view.favorite.unfavorite_tooltip')
|
||||||
|
">
|
||||||
|
<Button
|
||||||
|
size="icon-sm"
|
||||||
|
variant="outline"
|
||||||
|
class="rounded-full text-xs h-6 w-6"
|
||||||
|
@click.stop="handlePrimaryDeleteAction">
|
||||||
|
<Trash2 class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</TooltipWrapper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="favorites-search-card__action-group">
|
||||||
|
<div class="favorites-search-card__action" v-if="canSelectAvatar">
|
||||||
|
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
|
||||||
|
<Button
|
||||||
|
size="icon-sm"
|
||||||
|
variant="ghost"
|
||||||
|
:disabled="currentUser.currentAvatar === favorite.id"
|
||||||
|
class="rounded-full text-xs h-6 w-6"
|
||||||
|
@click.stop="selectAvatarWithConfirmation(favorite.id)"
|
||||||
|
><Check class="h-4 w-4"
|
||||||
|
/></Button>
|
||||||
|
</TooltipWrapper>
|
||||||
|
</div>
|
||||||
|
<div class="favorites-search-card__action">
|
||||||
|
<TooltipWrapper
|
||||||
|
v-if="showDangerUnfavorite"
|
||||||
|
side="bottom"
|
||||||
|
:content="t('view.favorite.unfavorite_tooltip')">
|
||||||
|
<Button
|
||||||
|
size="icon-sm"
|
||||||
|
variant="destructive"
|
||||||
|
class="rounded-full text-xs h-6 w-6"
|
||||||
|
@click.stop="handlePrimaryDeleteAction"
|
||||||
|
><Trash2 class="h-4 w-4"
|
||||||
|
/></Button>
|
||||||
|
</TooltipWrapper>
|
||||||
|
<TooltipWrapper
|
||||||
|
v-else
|
||||||
|
side="bottom"
|
||||||
|
: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('avatar', favorite.id)"
|
||||||
|
><Star class="h-4 w-4"
|
||||||
|
/></Button>
|
||||||
|
</TooltipWrapper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="favorites-search-card__action-group">
|
<div class="favorites-search-card__content">
|
||||||
<div class="favorites-search-card__action" v-if="canSelectAvatar">
|
<div class="favorites-search-card__avatar is-empty"></div>
|
||||||
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
|
<div class="favorites-search-card__detail">
|
||||||
<Button
|
<span>{{ favorite.name || favorite.id }}</span>
|
||||||
size="icon-sm"
|
|
||||||
variant="ghost"
|
|
||||||
:disabled="currentUser.currentAvatar === favorite.id"
|
|
||||||
class="rounded-full text-xs h-6 w-6"
|
|
||||||
@click.stop="selectAvatarWithConfirmation(favorite.id)"
|
|
||||||
><Check class="h-4 w-4"
|
|
||||||
/></Button>
|
|
||||||
</TooltipWrapper>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="favorites-search-card__actions">
|
||||||
<div class="favorites-search-card__action">
|
<div class="favorites-search-card__action">
|
||||||
<TooltipWrapper
|
<Button
|
||||||
v-if="showDangerUnfavorite"
|
class="rounded-full text-xs h-6 w-6"
|
||||||
side="bottom"
|
size="icon-sm"
|
||||||
:content="t('view.favorite.unfavorite_tooltip')">
|
variant="ghost"
|
||||||
<Button
|
@click.stop="handlePrimaryDeleteAction">
|
||||||
size="icon-sm"
|
<Trash2 class="h-4 w-4" />
|
||||||
variant="destructive"
|
</Button>
|
||||||
class="rounded-full text-xs h-6 w-6"
|
|
||||||
@click.stop="handlePrimaryDeleteAction"
|
|
||||||
><Trash2 class="h-4 w-4"
|
|
||||||
/></Button>
|
|
||||||
</TooltipWrapper>
|
|
||||||
<TooltipWrapper v-else side="bottom" :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('avatar', favorite.id)"
|
|
||||||
><Star class="h-4 w-4"
|
|
||||||
/></Button>
|
|
||||||
</TooltipWrapper>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</ContextMenuTrigger>
|
||||||
<template v-else>
|
<ContextMenuContent>
|
||||||
<div class="favorites-search-card__content">
|
<ContextMenuItem
|
||||||
<div class="favorites-search-card__avatar is-empty"></div>
|
:disabled="currentUser.currentAvatar === favorite.id"
|
||||||
<div class="favorites-search-card__detail">
|
@click="selectAvatarWithConfirmation(favorite.id)">
|
||||||
<span>{{ favorite.name || favorite.id }}</span>
|
{{ t('view.favorite.select_avatar_tooltip') }}
|
||||||
</div>
|
</ContextMenuItem>
|
||||||
</div>
|
</ContextMenuContent>
|
||||||
<div class="favorites-search-card__actions">
|
</ContextMenu>
|
||||||
<div class="favorites-search-card__action">
|
|
||||||
<Button
|
|
||||||
class="rounded-full text-xs h-6 w-6"
|
|
||||||
size="icon-sm"
|
|
||||||
variant="ghost"
|
|
||||||
@click.stop="handlePrimaryDeleteAction">
|
|
||||||
<Trash2 class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { AlertTriangle, Check, Lock, Star, Trash2 } from 'lucide-vue-next';
|
import { AlertTriangle, Check, Lock, Star, Trash2 } from 'lucide-vue-next';
|
||||||
|
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
@@ -199,6 +218,9 @@
|
|||||||
return shiftHeld.value;
|
return shiftHeld.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
function handlePrimaryDeleteAction() {
|
function handlePrimaryDeleteAction() {
|
||||||
if (props.isLocalFavorite) {
|
if (props.isLocalFavorite) {
|
||||||
removeLocalAvatarFavorite(props.favorite.id, favoriteGroupName.value);
|
removeLocalAvatarFavorite(props.favorite.id, favoriteGroupName.value);
|
||||||
@@ -207,6 +229,10 @@
|
|||||||
deleteFavorite(props.favorite.id);
|
deleteFavorite(props.favorite.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param objectId
|
||||||
|
*/
|
||||||
function deleteFavorite(objectId) {
|
function deleteFavorite(objectId) {
|
||||||
favoriteRequest.deleteFavorite({ objectId });
|
favoriteRequest.deleteFavorite({ objectId });
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,57 +1,69 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="cardClasses" @click="$emit('click')">
|
<ContextMenu>
|
||||||
<div class="favorites-search-card__content">
|
<ContextMenuTrigger as-child>
|
||||||
<div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
|
<div :class="cardClasses" @click="$emit('click')">
|
||||||
<img v-if="favorite.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
|
<div class="favorites-search-card__content">
|
||||||
</div>
|
<div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
|
||||||
<div class="favorites-search-card__detail">
|
<img v-if="favorite.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
|
||||||
<div class="favorites-search-card__title">
|
</div>
|
||||||
<span class="name text-sm">{{ favorite.name }}</span>
|
<div class="favorites-search-card__detail">
|
||||||
|
<div class="favorites-search-card__title">
|
||||||
|
<span class="name text-sm">{{ favorite.name }}</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs">{{ favorite.authorName }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-xs">{{ favorite.authorName }}</span>
|
<div class="favorites-search-card__actions">
|
||||||
</div>
|
<div class="favorites-search-card__action-group">
|
||||||
</div>
|
<div class="favorites-search-card__action">
|
||||||
<div class="favorites-search-card__actions">
|
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
|
||||||
<div class="favorites-search-card__action-group">
|
<Button
|
||||||
<div class="favorites-search-card__action">
|
size="icon-sm"
|
||||||
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
|
variant="ghost"
|
||||||
<Button
|
:disabled="currentUser.currentAvatar === favorite.id"
|
||||||
size="icon-sm"
|
class="rounded-full text-xs h-6 w-6"
|
||||||
variant="ghost"
|
@click.stop="selectAvatarWithConfirmation(favorite.id)">
|
||||||
:disabled="currentUser.currentAvatar === favorite.id"
|
<Check class="h-4 w-4" />
|
||||||
class="rounded-full text-xs h-6 w-6"
|
></Button
|
||||||
@click.stop="selectAvatarWithConfirmation(favorite.id)">
|
>
|
||||||
<Check class="h-4 w-4" />
|
</TooltipWrapper>
|
||||||
></Button
|
</div>
|
||||||
>
|
<div class="favorites-search-card__action">
|
||||||
</TooltipWrapper>
|
<TooltipWrapper side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
|
||||||
</div>
|
<Button
|
||||||
<div class="favorites-search-card__action">
|
v-if="favoriteExists"
|
||||||
<TooltipWrapper side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
|
size="icon-sm"
|
||||||
<Button
|
variant="ghost"
|
||||||
v-if="favoriteExists"
|
class="rounded-full text-xs h-6 w-6"
|
||||||
size="icon-sm"
|
@click.stop="showFavoriteDialog('avatar', favorite.id)">
|
||||||
variant="ghost"
|
<Star class="h-4 w-4" />
|
||||||
class="rounded-full text-xs h-6 w-6"
|
</Button>
|
||||||
@click.stop="showFavoriteDialog('avatar', favorite.id)">
|
<Button
|
||||||
<Star class="h-4 w-4" />
|
v-else
|
||||||
</Button>
|
size="icon-sm"
|
||||||
<Button
|
variant="ghost"
|
||||||
v-else
|
class="rounded-full text-xs h-6 w-6"
|
||||||
size="icon-sm"
|
@click.stop="showFavoriteDialog('avatar', favorite.id)">
|
||||||
variant="ghost"
|
<Star class="h-4 w-4" />
|
||||||
class="rounded-full text-xs h-6 w-6"
|
</Button>
|
||||||
@click.stop="showFavoriteDialog('avatar', favorite.id)">
|
</TooltipWrapper>
|
||||||
<Star class="h-4 w-4" />
|
</div>
|
||||||
</Button>
|
</div>
|
||||||
</TooltipWrapper>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ContextMenuTrigger>
|
||||||
</div>
|
<ContextMenuContent>
|
||||||
|
<ContextMenuItem
|
||||||
|
:disabled="currentUser.currentAvatar === favorite.id"
|
||||||
|
@click="selectAvatarWithConfirmation(favorite.id)">
|
||||||
|
{{ t('view.favorite.select_avatar_tooltip') }}
|
||||||
|
</ContextMenuItem>
|
||||||
|
</ContextMenuContent>
|
||||||
|
</ContextMenu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
|
||||||
import { Check, Star } from 'lucide-vue-next';
|
import { Check, Star } from 'lucide-vue-next';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|||||||
@@ -1,140 +1,164 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="cardClasses" @click="$emit('click')">
|
<ContextMenu>
|
||||||
<template v-if="favorite.ref">
|
<ContextMenuTrigger as-child>
|
||||||
<div class="favorites-search-card__content">
|
<div :class="cardClasses" @click="$emit('click')">
|
||||||
<div
|
<template v-if="favorite.ref">
|
||||||
class="favorites-search-card__avatar"
|
<div class="favorites-search-card__content">
|
||||||
:class="{ 'is-empty': !favorite.ref.thumbnailImageUrl }"
|
<div
|
||||||
v-once>
|
class="favorites-search-card__avatar"
|
||||||
<img
|
:class="{ 'is-empty': !favorite.ref.thumbnailImageUrl }"
|
||||||
v-if="favorite.ref.thumbnailImageUrl"
|
v-once>
|
||||||
:src="smallThumbnail"
|
<img
|
||||||
loading="lazy"
|
v-if="favorite.ref.thumbnailImageUrl"
|
||||||
decoding="async"
|
:src="smallThumbnail"
|
||||||
fetchpriority="low" />
|
loading="lazy"
|
||||||
</div>
|
decoding="async"
|
||||||
<div class="favorites-search-card__detail">
|
fetchpriority="low" />
|
||||||
<div class="favorites-search-card__title">
|
</div>
|
||||||
<span class="name text-sm">{{ props.favorite.ref.name }}</span>
|
<div class="favorites-search-card__detail">
|
||||||
<span
|
<div class="favorites-search-card__title">
|
||||||
v-if="favorite.deleted || favorite.ref.releaseStatus === 'private'"
|
<span class="name text-sm">{{ props.favorite.ref.name }}</span>
|
||||||
class="favorites-search-card__badges">
|
<span
|
||||||
|
v-if="favorite.deleted || favorite.ref.releaseStatus === 'private'"
|
||||||
|
class="favorites-search-card__badges">
|
||||||
|
<AlertTriangle
|
||||||
|
v-if="favorite.deleted"
|
||||||
|
:title="t('view.favorite.unavailable_tooltip')"
|
||||||
|
class="h-4 w-4" />
|
||||||
|
<Lock
|
||||||
|
v-if="favorite.ref.releaseStatus === 'private'"
|
||||||
|
:title="t('view.favorite.private')"
|
||||||
|
class="h-4 w-4" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-muted-foreground">
|
||||||
|
{{ props.favorite.ref.authorName }}
|
||||||
|
<template v-if="props.favorite.ref.occupants">
|
||||||
|
({{ props.favorite.ref.occupants }})
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="favorites-search-card__actions">
|
||||||
|
<template v-if="editMode">
|
||||||
|
<div
|
||||||
|
class="favorites-search-card__action favorites-search-card__action--checkbox"
|
||||||
|
@click.stop>
|
||||||
|
<Checkbox v-model="isSelected" />
|
||||||
|
</div>
|
||||||
|
<div class="favorites-search-card__action-group">
|
||||||
|
<div
|
||||||
|
class="favorites-search-card__action favorites-search-card__action--full"
|
||||||
|
@click.stop>
|
||||||
|
<FavoritesMoveDropdown
|
||||||
|
:favoriteGroup="favoriteWorldGroups"
|
||||||
|
:currentFavorite="props.favorite"
|
||||||
|
:currentGroup="group"
|
||||||
|
class="favorites-search-card__dropdown"
|
||||||
|
type="world" />
|
||||||
|
</div>
|
||||||
|
<div class="favorites-search-card__action">
|
||||||
|
<Button
|
||||||
|
size="icon-sm"
|
||||||
|
variant="ghost"
|
||||||
|
class="rounded-full text-xs h-6 w-6"
|
||||||
|
@click.stop="handleDeleteFavorite">
|
||||||
|
<Trash2 class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="favorites-search-card__action-group">
|
||||||
|
<div class="favorites-search-card__action">
|
||||||
|
<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="favorites-search-card__action">
|
||||||
|
<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
|
<AlertTriangle
|
||||||
v-if="favorite.deleted"
|
v-if="favorite.deleted"
|
||||||
:title="t('view.favorite.unavailable_tooltip')"
|
:title="t('view.favorite.unavailable_tooltip')"
|
||||||
class="h-4 w-4" />
|
class="h-4 w-4" />
|
||||||
<Lock
|
|
||||||
v-if="favorite.ref.releaseStatus === 'private'"
|
|
||||||
:title="t('view.favorite.private')"
|
|
||||||
class="h-4 w-4" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-xs text-muted-foreground">
|
|
||||||
{{ props.favorite.ref.authorName }}
|
|
||||||
<template v-if="props.favorite.ref.occupants"> ({{ props.favorite.ref.occupants }}) </template>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="favorites-search-card__actions">
|
|
||||||
<template v-if="editMode">
|
|
||||||
<div class="favorites-search-card__action favorites-search-card__action--checkbox" @click.stop>
|
|
||||||
<Checkbox v-model="isSelected" />
|
|
||||||
</div>
|
|
||||||
<div class="favorites-search-card__action-group">
|
|
||||||
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
|
|
||||||
<FavoritesMoveDropdown
|
|
||||||
:favoriteGroup="favoriteWorldGroups"
|
|
||||||
:currentFavorite="props.favorite"
|
|
||||||
:currentGroup="group"
|
|
||||||
class="favorites-search-card__dropdown"
|
|
||||||
type="world" />
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="favorites-search-card__actions">
|
||||||
<div class="favorites-search-card__action">
|
<div class="favorites-search-card__action">
|
||||||
<Button
|
<Button
|
||||||
|
class="rounded-full text-xs h-6 w-6"
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
class="rounded-full text-xs h-6 w-6"
|
|
||||||
@click.stop="handleDeleteFavorite">
|
@click.stop="handleDeleteFavorite">
|
||||||
<Trash2 class="h-4 w-4" />
|
<Trash2 class="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
|
||||||
<div class="favorites-search-card__action-group">
|
|
||||||
<div class="favorites-search-card__action">
|
|
||||||
<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="favorites-search-card__action">
|
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</ContextMenuTrigger>
|
||||||
<template v-else>
|
<ContextMenuContent>
|
||||||
<div class="favorites-search-card__content">
|
<ContextMenuItem @click="handleNewInstance">
|
||||||
<div class="favorites-search-card__avatar is-empty"></div>
|
<Plus class="size-4" />
|
||||||
<div class="favorites-search-card__detail" v-once>
|
{{ t('dialog.world.actions.new_instance') }}
|
||||||
<span>{{ favorite.name || favorite.id }}</span>
|
</ContextMenuItem>
|
||||||
<AlertTriangle
|
<ContextMenuItem @click="newInstanceSelfInvite(favorite.id)">
|
||||||
v-if="favorite.deleted"
|
<Mail class="size-4" />
|
||||||
:title="t('view.favorite.unavailable_tooltip')"
|
{{ inviteOrLaunchText }}
|
||||||
class="h-4 w-4" />
|
</ContextMenuItem>
|
||||||
</div>
|
</ContextMenuContent>
|
||||||
</div>
|
</ContextMenu>
|
||||||
<div class="favorites-search-card__actions">
|
|
||||||
<div class="favorites-search-card__action">
|
|
||||||
<Button
|
|
||||||
class="rounded-full text-xs h-6 w-6"
|
|
||||||
size="icon-sm"
|
|
||||||
variant="ghost"
|
|
||||||
@click.stop="handleDeleteFavorite">
|
|
||||||
<Trash2 class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { AlertTriangle, Lock, Mail, Star, Trash2 } from 'lucide-vue-next';
|
import { AlertTriangle, Lock, Mail, Plus, Star, Trash2 } from 'lucide-vue-next';
|
||||||
|
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import { useFavoriteStore, useInviteStore, useUiStore } from '../../../stores';
|
import { useFavoriteStore, useInstanceStore, useInviteStore, useUiStore } from '../../../stores';
|
||||||
import { favoriteRequest } from '../../../api';
|
import { favoriteRequest } from '../../../api';
|
||||||
|
|
||||||
import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
|
import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
|
||||||
@@ -184,6 +208,9 @@
|
|||||||
: t('dialog.world.actions.new_instance_and_self_invite');
|
: t('dialog.world.actions.new_instance_and_self_invite');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
function handleDeleteFavorite() {
|
function handleDeleteFavorite() {
|
||||||
if (props.isLocalFavorite) {
|
if (props.isLocalFavorite) {
|
||||||
emit('remove-local-world-favorite', props.favorite.id, props.group);
|
emit('remove-local-world-favorite', props.favorite.id, props.group);
|
||||||
@@ -192,9 +219,22 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param objectId
|
||||||
|
*/
|
||||||
function deleteFavorite(objectId) {
|
function deleteFavorite(objectId) {
|
||||||
favoriteRequest.deleteFavorite({ objectId });
|
favoriteRequest.deleteFavorite({ objectId });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { createNewInstance } = useInstanceStore();
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
function handleNewInstance() {
|
||||||
|
createNewInstance(props.favorite.id);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
@@ -1,117 +1,137 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="cardClasses" @click="$emit('click')">
|
<ContextMenu>
|
||||||
<template v-if="favorite.name">
|
<ContextMenuTrigger as-child>
|
||||||
<div class="favorites-search-card__content">
|
<div :class="cardClasses" @click="$emit('click')">
|
||||||
<div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
|
<template v-if="favorite.name">
|
||||||
<img
|
<div class="favorites-search-card__content">
|
||||||
v-if="favorite.thumbnailImageUrl"
|
<div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
|
||||||
:src="smallThumbnail"
|
<img
|
||||||
loading="lazy"
|
v-if="favorite.thumbnailImageUrl"
|
||||||
decoding="async"
|
:src="smallThumbnail"
|
||||||
fetchpriority="low" />
|
loading="lazy"
|
||||||
</div>
|
decoding="async"
|
||||||
<div class="favorites-search-card__detail">
|
fetchpriority="low" />
|
||||||
<div class="favorites-search-card__title">
|
|
||||||
<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="favorites-search-card__action-group">
|
|
||||||
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
|
|
||||||
<FavoritesMoveDropdown
|
|
||||||
:favoriteGroup="favoriteWorldGroups"
|
|
||||||
:currentFavorite="props.favorite"
|
|
||||||
class="favorites-search-card__dropdown"
|
|
||||||
isLocalFavorite
|
|
||||||
type="world" />
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="favorites-search-card__detail">
|
||||||
|
<div class="favorites-search-card__title">
|
||||||
|
<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="favorites-search-card__action-group">
|
||||||
|
<div
|
||||||
|
class="favorites-search-card__action favorites-search-card__action--full"
|
||||||
|
@click.stop>
|
||||||
|
<FavoritesMoveDropdown
|
||||||
|
:favoriteGroup="favoriteWorldGroups"
|
||||||
|
:currentFavorite="props.favorite"
|
||||||
|
class="favorites-search-card__dropdown"
|
||||||
|
isLocalFavorite
|
||||||
|
type="world" />
|
||||||
|
</div>
|
||||||
|
<div class="favorites-search-card__action">
|
||||||
|
<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="favorites-search-card__action-group">
|
||||||
|
<div class="favorites-search-card__action">
|
||||||
|
<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="favorites-search-card__action">
|
||||||
|
<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="favorites-search-card__action">
|
<div class="favorites-search-card__action">
|
||||||
<Button
|
<Button
|
||||||
size="icon-sm"
|
|
||||||
:variant="shiftHeld ? 'destructive' : 'outline'"
|
|
||||||
class="rounded-full text-xs h-6 w-6"
|
class="rounded-full text-xs h-6 w-6"
|
||||||
@click.stop="handlePrimaryDeleteAction">
|
size="icon-sm"
|
||||||
|
variant="outline"
|
||||||
|
@click.stop="handleDeleteFavorite">
|
||||||
<Trash2 class="h-4 w-4" />
|
<Trash2 class="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
|
||||||
<div class="favorites-search-card__action-group">
|
|
||||||
<div class="favorites-search-card__action">
|
|
||||||
<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="favorites-search-card__action">
|
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</ContextMenuTrigger>
|
||||||
<template v-else>
|
<ContextMenuContent>
|
||||||
<div class="favorites-search-card__content">
|
<ContextMenuItem @click="handleNewInstance">
|
||||||
<div class="favorites-search-card__avatar is-empty"></div>
|
<Plus class="size-4" />
|
||||||
<div class="favorites-search-card__detail" v-once>
|
{{ t('dialog.world.actions.new_instance') }}
|
||||||
<span class="name">{{ favorite.name || favorite.id }}</span>
|
</ContextMenuItem>
|
||||||
</div>
|
<ContextMenuItem @click="newInstanceSelfInvite(favorite.id)">
|
||||||
</div>
|
<Mail class="size-4" />
|
||||||
<div class="favorites-search-card__actions">
|
{{ inviteOrLaunchText }}
|
||||||
<div class="favorites-search-card__action">
|
</ContextMenuItem>
|
||||||
<Button
|
</ContextMenuContent>
|
||||||
class="rounded-full text-xs h-6 w-6"
|
</ContextMenu>
|
||||||
size="icon-sm"
|
|
||||||
variant="outline"
|
|
||||||
@click.stop="handleDeleteFavorite">
|
|
||||||
<Trash2 class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Mail, Star, Trash2 } from 'lucide-vue-next';
|
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 { Button } from '@/components/ui/button';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import { useFavoriteStore, useInviteStore, useUiStore } from '../../../stores';
|
import { useFavoriteStore, useInstanceStore, useInviteStore, useUiStore } from '../../../stores';
|
||||||
|
|
||||||
import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
|
import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
|
||||||
|
|
||||||
@@ -152,6 +172,9 @@
|
|||||||
return shiftHeld.value;
|
return shiftHeld.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
function handlePrimaryDeleteAction() {
|
function handlePrimaryDeleteAction() {
|
||||||
if (shiftHeld.value) {
|
if (shiftHeld.value) {
|
||||||
emit('remove-local-world-favorite', props.favorite.id, props.group);
|
emit('remove-local-world-favorite', props.favorite.id, props.group);
|
||||||
@@ -160,9 +183,21 @@
|
|||||||
showFavoriteDialog('world', props.favorite.id);
|
showFavoriteDialog('world', props.favorite.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
function handleDeleteFavorite() {
|
function handleDeleteFavorite() {
|
||||||
emit('remove-local-world-favorite', props.favorite.id, props.group);
|
emit('remove-local-world-favorite', props.favorite.id, props.group);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { createNewInstance } = useInstanceStore();
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
function handleNewInstance() {
|
||||||
|
createNewInstance(props.favorite.id);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
Reference in New Issue
Block a user