Avatar dialog view/set styles

src/views/dialogs/avatarDialog/AvatarDialog.vue

@@ -125,6 +125,26 @@
                                 <span v-text="avatarDialog.cacheSize"></span>
                                 &nbsp;{{ t('dialog.avatar.tags.cache') }}
                             </el-tag>
+                            <el-tag
+                                v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary"
+                                type="info"
+                                effect="plain"
+                                size="mini"
+                                style="margin-right: 5px; margin-top: 5px"
+                                >Styles
+                                <span
+                                    v-if="avatarDialog.ref.styles.primary"
+                                    class="x-grey"
+                                    style="margin-left: 5px; border-left: inherit; padding-left: 5px"
+                                    >{{ avatarDialog.ref.styles.primary }}</span
+                                >
+                                <span
+                                    v-if="avatarDialog.ref.styles.secondary"
+                                    class="x-grey"
+                                    style="margin-left: 5px; border-left: inherit; padding-left: 5px"
+                                    >{{ avatarDialog.ref.styles.secondary }}</span
+                                >
+                            </el-tag>
                             <el-tag
                                 v-if="avatarDialog.isQuestFallback"
                                 type="info"
@@ -297,6 +317,9 @@
                                     <el-dropdown-item icon="el-icon-edit" command="Change Content Tags">{{
                                         t('dialog.avatar.actions.change_content_tags')
                                     }}</el-dropdown-item>
+                                    <el-dropdown-item icon="el-icon-edit" command="Change Styles">{{
+                                        t('dialog.avatar.actions.change_styles')
+                                    }}</el-dropdown-item>
                                     <el-dropdown-item icon="el-icon-picture-outline" command="Change Image">{{
                                         t('dialog.avatar.actions.change_image')
                                     }}</el-dropdown-item>
@@ -482,6 +505,7 @@
             </el-tabs>
         </div>
         <SetAvatarTagsDialog :set-avatar-tags-dialog="setAvatarTagsDialog" />
+        <SetAvatarStylesDialog :set-avatar-styles-dialog="setAvatarStylesDialog" />
     </el-dialog>
 </template>
 
@@ -494,6 +518,7 @@
     import $utils from '../../../classes/utils';
 
     import SetAvatarTagsDialog from './SetAvatarTagsDialog.vue';
+    import SetAvatarStylesDialog from './SetAvatarStylesDialog.vue';
 
     const API = inject('API');
     const beforeDialogClose = inject('beforeDialogClose');
@@ -550,6 +575,17 @@
         contentAdult: false,
         contentSex: false
     });
+    const setAvatarStylesDialog = reactive({
+        visible: false,
+        loading: false,
+        avatarId: '',
+        initialPrimaryStyle: '',
+        initialSecondaryStyle: '',
+        primaryStyle: '',
+        secondaryStyle: '',
+        availableAvatarStyles: [],
+        availableAvatarStylesMap: new Map()
+    });
 
     const avatarDialogPlatform = computed(() => {
         const { ref } = props.avatarDialog;
@@ -653,6 +689,9 @@
             case 'Change Content Tags':
                 showSetAvatarTagsDialog(D.id);
                 break;
+            case 'Change Styles':
+                showSetAvatarStylesDialog(D.id);
+                break;
             case 'Download Unity Package':
                 openExternalLink(utils.replaceVrcPackageUrl(props.avatarDialog.ref.unityPackageUrl));
                 break;
@@ -894,7 +933,7 @@
                 memo: memo.value
             });
         } else {
-            database.deleteAvatarMemo(props.avatarDialog.avatarId);
+            database.deleteAvatarMemo(props.avatarDialog.id);
         }
     }
 
@@ -1049,6 +1088,20 @@
         });
     }
 
+    function showSetAvatarStylesDialog() {
+        const D = setAvatarStylesDialog;
+        D.visible = true;
+        D.loading = true;
+        D.avatarId = props.avatarDialog.id;
+        D.primaryStyle = props.avatarDialog.ref.styles?.primary || '';
+        D.secondaryStyle = props.avatarDialog.ref.styles?.secondary || '';
+        D.initialPrimaryStyle = D.primaryStyle;
+        D.initialSecondaryStyle = D.secondaryStyle;
+        nextTick(() => {
+            D.loading = false;
+        });
+    }
+
     function downloadAndSaveJson(fileName, data) {
         utils.downloadAndSaveJson(fileName, data);
     }

src/views/dialogs/avatarDialog/SetAvatarStylesDialog.vue

@@ -0,0 +1,130 @@
+<template>
+    <el-dialog
+        ref="setAvatarStylesDialog"
+        class="x-dialog"
+        :before-close="beforeDialogClose"
+        :visible.sync="setAvatarStylesDialog.visible"
+        :title="t('dialog.set_avatar_styles.header')"
+        width="400px"
+        append-to-body
+        @mousedown.native="dialogMouseDown"
+        @mouseup.native="dialogMouseUp">
+        <template v-if="setAvatarStylesDialog.visible">
+            <div>
+                <span>{{ t('dialog.set_avatar_styles.primary_style') }}</span>
+                <el-select
+                    v-model="setAvatarStylesDialog.primaryStyle"
+                    :placeholder="t('dialog.set_avatar_styles.select_style')"
+                    size="small"
+                    clearable
+                    style="display: inline-block">
+                    <el-option
+                        v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
+                        :key="index"
+                        :label="style"
+                        :value="style"></el-option>
+                </el-select>
+            </div>
+            <br />
+            <div>
+                <span>{{ t('dialog.set_avatar_styles.secondary_style') }}</span>
+                <el-select
+                    v-model="setAvatarStylesDialog.secondaryStyle"
+                    :placeholder="t('dialog.set_avatar_styles.select_style')"
+                    size="small"
+                    clearable
+                    style="display: inline-block">
+                    <el-option
+                        v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
+                        :key="index"
+                        :label="style"
+                        :value="style"></el-option>
+                </el-select>
+            </div>
+        </template>
+        <template #footer>
+            <el-button size="small" @click="setAvatarStylesDialog.visible = false">{{
+                t('dialog.set_avatar_styles.cancel')
+            }}</el-button>
+            <el-button type="primary" size="small" @click="saveSetAvatarStylesDialog">{{
+                t('dialog.set_avatar_styles.save')
+            }}</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup>
+    import { inject, watch, getCurrentInstance } from 'vue';
+
+    import { useI18n } from 'vue-i18n-bridge';
+    import { avatarRequest } from '../../../classes/request';
+
+    const beforeDialogClose = inject('beforeDialogClose');
+    const dialogMouseDown = inject('dialogMouseDown');
+    const dialogMouseUp = inject('dialogMouseUp');
+
+    const { t } = useI18n();
+    const instance = getCurrentInstance();
+    const $message = instance.proxy.$message;
+
+    const props = defineProps({
+        setAvatarStylesDialog: {
+            type: Object,
+            required: true
+        }
+    });
+
+    watch(
+        () => props.setAvatarStylesDialog.visible,
+        (newVal) => {
+            if (newVal) {
+                getAvatarStyles();
+            }
+        }
+    );
+
+    async function getAvatarStyles() {
+        const ref = await avatarRequest.getAvailableAvatarStyles();
+        const styles = [];
+        const stylesMap = new Map();
+        for (const style of ref.json) {
+            styles.push(style.styleName);
+            stylesMap.set(style.styleName, style.id);
+        }
+        props.setAvatarStylesDialog.availableAvatarStyles = styles;
+        props.setAvatarStylesDialog.availableAvatarStylesMap = stylesMap;
+    }
+
+    function saveSetAvatarStylesDialog() {
+        if (
+            props.setAvatarStylesDialog.initialPrimaryStyle === props.setAvatarStylesDialog.primaryStyle &&
+            props.setAvatarStylesDialog.initialSecondaryStyle === props.setAvatarStylesDialog.secondaryStyle
+        ) {
+            props.setAvatarStylesDialog.visible = false;
+            return;
+        }
+
+        const primaryStyleId =
+            props.setAvatarStylesDialog.availableAvatarStylesMap.get(props.setAvatarStylesDialog.primaryStyle) || '';
+        const secondaryStyleId =
+            props.setAvatarStylesDialog.availableAvatarStylesMap.get(props.setAvatarStylesDialog.secondaryStyle) || '';
+
+        const params = {
+            id: props.setAvatarStylesDialog.avatarId,
+            primaryStyle: primaryStyleId,
+            secondaryStyle: secondaryStyleId
+        };
+        avatarRequest
+            .saveAvatar(params)
+            .then(() => {
+                $message.success(t('dialog.set_avatar_styles.save_success'));
+                props.setAvatarStylesDialog.visible = false;
+            })
+            .catch((error) => {
+                $message.error(t('dialog.set_avatar_styles.save_failed'));
+                console.error('Error saving avatar styles:', error);
+            });
+    }
+</script>
+
+<style scoped></style>

src/views/dialogs/avatarDialog/SetAvatarTagsDialog.vue

@@ -177,15 +177,15 @@
                 D.selectedCount++;
             }
             ref.$tagString = '';
-            const conentTags = [];
+            const contentTags = [];
             ref.tags.forEach((tag) => {
                 if (tag.startsWith('content_')) {
-                    conentTags.push(tag.substring(8));
+                    contentTags.push(tag.substring(8));
                 }
             });
-            for (let i = 0; i < conentTags.length; ++i) {
-                const tag = conentTags[i];
-                if (i < conentTags.length - 1) {
+            for (let i = 0; i < contentTags.length; ++i) {
+                const tag = contentTags[i];
+                if (i < contentTags.length - 1) {
                     ref.$tagString += `${tag}, `;
                 } else {
                     ref.$tagString += tag;