split FavoritesMoveDropdown

src/views/Favorites/components/FavoritesAvatarItem.vue

@@ -10,27 +10,11 @@
                     <span class="extra" v-text="localFavFakeRef.authorName"></span>
                 </div>
                 <div class="editing">
-                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
+                    <FavoritesMoveDropdown
-                        <div>
+                        :favoriteGroup="favoriteAvatarGroups"
-                            <el-button type="default" :icon="Back" size="small" circle></el-button>
+                        :currentFavorite="props.favorite"
-                        </div>
+                        :currentGroup="group"
-                        <template #dropdown>
+                        type="avatar" />
-                            <span style="font-weight: bold; display: block; text-align: center">
-                                {{ t(tooltipContent) }}
-                            </span>
-                            <el-dropdown-menu>
-                                <template v-for="groupAPI in favoriteAvatarGroups" :key="groupAPI.name">
-                                    <el-dropdown-item
-                                        v-if="isLocalFavorite || groupAPI.name !== group.name"
-                                        style="display: block; margin: 10px 0"
-                                        :disabled="groupAPI.count >= groupAPI.capacity"
-                                        @click="handleDropdownItemClick(groupAPI)">
-                                        {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
-                                    </el-dropdown-item>
-                                </template>
-                            </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
                     <el-button v-if="!isLocalFavorite" type="text" size="small" style="margin-left: 5px" @click.stop>
                         <el-checkbox v-model="isSelected"></el-checkbox>
                     </el-button>
@@ -147,8 +131,7 @@
 </template>
 
 <script setup>
-    import { Back, Check, Close, Star, Warning } from '@element-plus/icons-vue';
+    import { Check, Close, Star, Warning } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -156,6 +139,8 @@
     import { useAvatarStore, useFavoriteStore, useUiStore, useUserStore } from '../../../stores';
     import { favoriteRequest } from '../../../api';
 
+    import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
+
     const props = defineProps({
         favorite: Object,
         group: [Object, String],
@@ -176,9 +161,7 @@
         set: (value) => emit('handle-select', value)
     });
     const localFavFakeRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite.ref));
-    const tooltipContent = computed(() =>
+
-        t(props.isLocalFavorite ? 'view.favorite.copy_tooltip' : 'view.favorite.move_tooltip')
-    );
     const smallThumbnail = computed(
         () => localFavFakeRef.value.thumbnailImageUrl?.replace('256', '128') || localFavFakeRef.value.thumbnailImageUrl
     );
@@ -190,41 +173,7 @@
         }
     });
 
-    function moveFavorite(ref, group, type) {
-        favoriteRequest.deleteFavorite({ objectId: ref.id }).then(() => {
-            favoriteRequest.addFavorite({
-                type,
-                favoriteId: ref.id,
-                tags: group.name
-            });
-        });
-    }
-
     function deleteFavorite(objectId) {
         favoriteRequest.deleteFavorite({ objectId });
     }
-
-    function addFavoriteAvatar(groupAPI) {
-        return favoriteRequest
-            .addFavorite({
-                type: 'avatar',
-                favoriteId: props.favorite.id,
-                tags: groupAPI.name
-            })
-            .then((args) => {
-                ElMessage({
-                    message: 'Avatar added to favorites',
-                    type: 'success'
-                });
-                return args;
-            });
-    }
-
-    function handleDropdownItemClick(groupAPI) {
-        if (props.isLocalFavorite) {
-            addFavoriteAvatar(groupAPI);
-        } else {
-            moveFavorite(props.favorite.ref, groupAPI, 'avatar');
-        }
-    }
 </script>

src/views/Favorites/components/FavoritesFriendItem.vue

@@ -19,27 +19,11 @@
                     <span v-else v-text="favorite.ref.statusDescription"></span>
                 </div>
                 <div class="editing">
-                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
+                    <FavoritesMoveDropdown
-                        <div>
+                        :favoriteGroup="favoriteFriendGroups"
-                            <el-button type="default" :icon="Back" size="small" circle></el-button>
+                        :currentGroup="group"
-                        </div>
+                        :currentFavorite="favorite"
-                        <template #dropdown>
+                        type="friend" />
-                            <span style="font-weight: bold; display: block; text-align: center">
-                                {{ t('view.favorite.move_tooltip') }}
-                            </span>
-                            <el-dropdown-menu>
-                                <template v-for="groupAPI in favoriteFriendGroups" :key="groupAPI.name">
-                                    <el-dropdown-item
-                                        v-if="groupAPI.name !== group.name"
-                                        style="display: block; margin: 10px 0"
-                                        :disabled="groupAPI.count >= groupAPI.capacity"
-                                        @click="moveFavorite(favorite.ref, groupAPI, 'friend')">
-                                        {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
-                                    </el-dropdown-item>
-                                </template>
-                            </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
                     <el-button type="text" size="small" style="margin-left: 5px" @click.stop>
                         <el-checkbox v-model="favorite.$selected"></el-checkbox>
                     </el-button>
@@ -81,7 +65,7 @@
 </template>
 
 <script setup>
-    import { Back, Close, Star } from '@element-plus/icons-vue';
+    import { Close, Star } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -89,6 +73,8 @@
     import { userImage, userStatusClass } from '../../../shared/utils';
     import { favoriteRequest } from '../../../api';
 
+    import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
+
     defineProps({
         favorite: { type: Object, required: true },
         group: { type: Object, required: true }
@@ -101,16 +87,6 @@
     const { shiftHeld } = storeToRefs(useUiStore());
     const { t } = useI18n();
 
-    function moveFavorite(ref, group, type) {
-        favoriteRequest.deleteFavorite({ objectId: ref.id }).then(() => {
-            favoriteRequest.addFavorite({
-                type,
-                favoriteId: ref.id,
-                tags: group.name
-            });
-        });
-    }
-
     function deleteFavorite(objectId) {
         favoriteRequest.deleteFavorite({ objectId });
     }

src/views/Favorites/components/FavoritesMoveDropdown.vue

@@ -0,0 +1,112 @@
+<template>
+    <el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
+        <div>
+            <el-button type="default" :icon="Back" size="small" circle></el-button>
+        </div>
+        <template #dropdown>
+            <span style="font-weight: bold; display: block; text-align: center">
+                {{ t(tooltipContent) }}
+            </span>
+            <el-dropdown-menu>
+                <template v-for="groupAPI in favoriteGroup" :key="groupAPI.name">
+                    <el-dropdown-item
+                        v-if="isLocalFavorite || groupAPI.name !== currentGroup?.name"
+                        style="display: block; margin: 10px 0"
+                        :disabled="groupAPI.count >= groupAPI.capacity"
+                        @click="handleDropdownItemClick(groupAPI)">
+                        {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
+                    </el-dropdown-item>
+                </template>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
+</template>
+
+<script setup>
+    import { Back } from '@element-plus/icons-vue';
+    import { ElMessage } from 'element-plus';
+    import { computed } from 'vue';
+    import { useI18n } from 'vue-i18n';
+
+    import { favoriteRequest } from '../../../api';
+
+    const { t } = useI18n();
+
+    const props = defineProps({
+        favoriteGroup: {
+            type: Object,
+            required: true
+        },
+        currentGroup: {
+            type: [Object, String],
+            required: false
+        },
+        currentFavorite: {
+            type: Object,
+            required: true
+        },
+        isLocalFavorite: {
+            type: Boolean,
+            required: false
+        },
+        type: {
+            type: String,
+            required: true
+        }
+    });
+
+    const tooltipContent = computed(() =>
+        props.isLocalFavorite ? t('view.favorite.copy_tooltip') : t('view.favorite.move_tooltip')
+    );
+
+    function handleDropdownItemClick(groupAPI) {
+        if (props.isLocalFavorite) {
+            if (props.type === 'world') {
+                addFavoriteWorld(groupAPI);
+            } else if (props.type === 'avatar') {
+                addFavoriteAvatar(groupAPI);
+            }
+        } else {
+            moveFavorite(props.currentFavorite.ref, groupAPI, props.type);
+        }
+    }
+
+    function moveFavorite(ref, group, type) {
+        favoriteRequest.deleteFavorite({ objectId: ref.id }).then(() => {
+            favoriteRequest.addFavorite({
+                type,
+                favoriteId: ref.id,
+                tags: group.name
+            });
+        });
+    }
+
+    function addFavoriteAvatar(groupAPI) {
+        return favoriteRequest
+            .addFavorite({
+                type: 'avatar',
+                favoriteId: props.currentFavorite.id,
+                tags: groupAPI.name
+            })
+            .then((args) => {
+                ElMessage({
+                    message: 'Avatar added to favorites',
+                    type: 'success'
+                });
+                return args;
+            });
+    }
+
+    function addFavoriteWorld(groupAPI) {
+        return favoriteRequest
+            .addFavorite({
+                type: 'world',
+                favoriteId: props.currentFavorite.id,
+                tags: groupAPI.name
+            })
+            .then((args) => {
+                ElMessage({ message: 'World added to favorites', type: 'success' });
+                return args;
+            });
+    }
+</script>

src/views/Favorites/components/FavoritesWorldItem.vue

@@ -13,27 +13,11 @@
                     <span v-else class="extra">{{ props.favorite.ref.authorName }}</span>
                 </div>
                 <div class="editing">
-                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
+                    <FavoritesMoveDropdown
-                        <div>
+                        :favoriteGroup="favoriteWorldGroups"
-                            <el-button type="default" :icon="Back" size="small" circle></el-button>
+                        :currentFavorite="props.favorite"
-                        </div>
+                        :currentGroup="group"
-                        <template #dropdown>
+                        type="world" />
-                            <span style="font-weight: bold; display: block; text-align: center">
-                                {{ t(tooltipContent) }}
-                            </span>
-                            <el-dropdown-menu>
-                                <template v-for="groupAPI in favoriteWorldGroups" :key="groupAPI.name">
-                                    <el-dropdown-item
-                                        v-if="groupAPI.name !== group.name"
-                                        style="display: block; margin: 10px 0"
-                                        :disabled="groupAPI.count >= groupAPI.capacity"
-                                        @click="handleDropdownItemClick(groupAPI)">
-                                        {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
-                                    </el-dropdown-item>
-                                </template>
-                            </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
                     <el-button type="text" size="small" @click.stop style="margin-left: 5px">
                         <el-checkbox v-model="isSelected"></el-checkbox>
                     </el-button>
@@ -111,8 +95,7 @@
 </template>
 
 <script setup>
-    import { Back, Close, Message, Star, Warning } from '@element-plus/icons-vue';
+    import { Close, Message, Star, Warning } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -120,6 +103,8 @@
     import { useFavoriteStore, useInviteStore, useUiStore } from '../../../stores';
     import { favoriteRequest } from '../../../api';
 
+    import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
+
     const props = defineProps({
         group: [Object, String],
         favorite: Object,
@@ -139,23 +124,11 @@
         set: (value) => emit('handle-select', value)
     });
 
-    const tooltipContent = computed(() =>
-        t(props.isLocalFavorite ? 'view.favorite.copy_tooltip' : 'view.favorite.move_tooltip')
-    );
-
     const smallThumbnail = computed(() => {
         const url = props.favorite.ref.thumbnailImageUrl?.replace('256', '128');
         return url || props.favorite.ref.thumbnailImageUrl;
     });
 
-    function handleDropdownItemClick(groupAPI) {
-        if (props.isLocalFavorite) {
-            addFavoriteWorld(props.favorite.ref, groupAPI, true);
-        } else {
-            moveFavorite(props.favorite.ref, groupAPI, 'world');
-        }
-    }
-
     function handleDeleteFavorite() {
         if (props.isLocalFavorite) {
             emit('remove-local-world-favorite', props.favorite.id, props.group);
@@ -164,34 +137,9 @@
         }
     }
 
-    function moveFavorite(refObj, group, type) {
-        favoriteRequest.deleteFavorite({ objectId: refObj.id }).then(() => {
-            favoriteRequest.addFavorite({
-                type,
-                favoriteId: refObj.id,
-                tags: group.name
-            });
-        });
-    }
-
     function deleteFavorite(objectId) {
         favoriteRequest.deleteFavorite({ objectId });
     }
-
-    function addFavoriteWorld(refObj, group, message) {
-        return favoriteRequest
-            .addFavorite({
-                type: 'world',
-                favoriteId: refObj.id,
-                tags: group.name
-            })
-            .then((args) => {
-                if (message) {
-                    ElMessage({ message: 'World added to favorites', type: 'success' });
-                }
-                return args;
-            });
-    }
 </script>
 
 <style scoped>

src/views/Favorites/components/FavoritesWorldLocalItem.vue

@@ -13,26 +13,11 @@
                     <span v-else class="extra">{{ props.favorite.authorName }}</span>
                 </div>
                 <div class="editing">
-                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
+                    <FavoritesMoveDropdown
-                        <div>
+                        :favoriteGroup="favoriteWorldGroups"
-                            <el-button type="default" :icon="Back" size="small" circle></el-button>
+                        :currentFavorite="props.favorite"
-                        </div>
+                        isLocalFavorite
-                        <template #dropdown>
+                        type="world" />
-                            <span style="font-weight: bold; display: block; text-align: center">
-                                {{ t(tooltipContent) }}
-                            </span>
-                            <el-dropdown-menu>
-                                <template v-for="groupAPI in favoriteWorldGroups" :key="groupAPI.name">
-                                    <el-dropdown-item
-                                        style="display: block; margin: 10px 0"
-                                        :disabled="groupAPI.count >= groupAPI.capacity"
-                                        @click="handleDropdownItemClick(groupAPI)">
-                                        {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
-                                    </el-dropdown-item>
-                                </template>
-                            </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
                 </div>
                 <div class="default">
                     <el-tooltip placement="left">
@@ -86,14 +71,14 @@
 </template>
 
 <script setup>
-    import { Back, Close, Message, Star } from '@element-plus/icons-vue';
+    import { Close, Message, Star } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import { useFavoriteStore, useInviteStore, useUiStore } from '../../../stores';
-    import { favoriteRequest } from '../../../api';
+
+    import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
 
     const props = defineProps({
         group: [Object, String],
@@ -108,35 +93,14 @@
     const { t } = useI18n();
     const { canOpenInstanceInGame } = useInviteStore();
 
-    const tooltipContent = computed(() => t('view.favorite.copy_tooltip'));
-
     const smallThumbnail = computed(() => {
         const url = props.favorite.thumbnailImageUrl?.replace('256', '128');
         return url || props.favorite.thumbnailImageUrl;
     });
 
-    function handleDropdownItemClick(groupAPI) {
-        addFavoriteWorld(props.favorite, groupAPI, true);
-    }
-
     function handleDeleteFavorite() {
         emit('remove-local-world-favorite', props.favorite.id, props.group);
     }
-
-    function addFavoriteWorld(refObj, group, message) {
-        return favoriteRequest
-            .addFavorite({
-                type: 'world',
-                favoriteId: refObj.id,
-                tags: group.name
-            })
-            .then((args) => {
-                if (message) {
-                    ElMessage({ message: 'World added to favorites', type: 'success' });
-                }
-                return args;
-            });
-    }
 </script>
 
 <style scoped>