inventory and prop support

src/components/dialogs/UserDialog/GalleryDialog.vue

@@ -444,6 +444,48 @@
                     </div>
                 </div>
             </el-tab-pane>
+
+            <el-tab-pane v-loading="galleryDialogInventoryLoading" lazy>
+                <span slot="label">
+                    {{ t('dialog.gallery_icons.inventory') }}
+                    <span style="color: #909399; font-size: 12px; margin-left: 5px"> {{ inventoryTable.length }} </span>
+                </span>
+                <br />
+                <br />
+                <div
+                    class="x-friend-item"
+                    v-for="item in inventoryTable"
+                    :key="item.id"
+                    style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
+                    <div class="vrcplus-icon" style="overflow: hidden; cursor: default">
+                        <img class="avatar" v-lazy="item.imageUrl" />
+                    </div>
+                    <div style="margin-top: 5px; width: 208px">
+                        <span class="x-ellipsis" v-text="item.name" style="display: block"></span>
+                        <span
+                            v-if="item.description"
+                            class="x-ellipsis"
+                            v-text="item.description"
+                            style="display: block"></span>
+                        <span v-else style="display: block">&nbsp;</span>
+                        <span
+                            class="x-ellipsis"
+                            style="color: #909399; font-family: monospace; font-size: 11px; display: block">
+                            {{ item.created_at | formatDate('long') }}
+                        </span>
+                        <span v-text="item.itemType" style="display: block"></span>
+                    </div>
+                    <el-button
+                        v-if="item.itemType === 'bundle'"
+                        type="default"
+                        @click="consumeInventoryBundle(item.id)"
+                        size="mini"
+                        icon="el-icon-plus"
+                        circle>
+                        {{ t('dialog.gallery_icons.consume_bundle') }}
+                    </el-button>
+                </div>
+            </el-tab-pane>
         </el-tabs>
     </safe-dialog>
 </template>
@@ -451,7 +493,7 @@
 <script setup>
     import { getCurrentInstance, inject, ref } from 'vue';
     import { useI18n } from 'vue-i18n-bridge';
-    import { userRequest, vrcPlusIconRequest, vrcPlusImageRequest, miscRequest } from '../../../api';
+    import { userRequest, vrcPlusIconRequest, vrcPlusImageRequest, miscRequest, inventoryRequest } from '../../../api';
     import { extractFileId } from '../../../composables/shared/utils';
     import { emojiAnimationStyleList, emojiAnimationStyleUrl } from '../../../composables/user/constants/emoji';
     import { getPrintFileName } from '../../../composables/user/utils';
@@ -490,6 +532,10 @@
             type: Boolean,
             required: true
         },
+        galleryDialogInventoryLoading: {
+            type: Boolean,
+            required: true
+        },
         galleryTable: {
             type: Array,
             required: true
@@ -518,6 +564,10 @@
         printTable: {
             type: Array,
             required: true
+        },
+        inventoryTable: {
+            type: Array,
+            required: true
         }
     });
 
@@ -1025,4 +1075,27 @@
             }
         });
     }
+
+    async function consumeInventoryBundle(inventoryId) {
+        try {
+            const args = await inventoryRequest.consumeInventoryBundle({
+                inventoryId
+            });
+            API.currentUserInventory.delete(inventoryId);
+            const array = props.inventoryTable;
+            const { length } = array;
+            for (let i = 0; i < length; ++i) {
+                if (inventoryId === array[i].id) {
+                    array.splice(i, 1);
+                    break;
+                }
+            }
+            this.getInventory();
+        } catch (error) {
+            console.error('Error consuming inventory bundle:', error);
+        }
+        // errors: []
+        // inventoryItems : []
+        // inventoryItemsCreated: 0
+    }
 </script>

src/components/dialogs/UserDialog/UserDialog.vue

@@ -1798,6 +1798,7 @@
             :gallery-dialog-emojis-loading="galleryDialogEmojisLoading"
             :gallery-dialog-stickers-loading="galleryDialogStickersLoading"
             :gallery-dialog-prints-loading="galleryDialogPrintsLoading"
+            :gallery-dialog-inventory-loading="galleryDialogInventoryLoading"
             :gallery-table="galleryTable"
             :VRCPlusIconsTable="VRCPlusIconsTable"
             :emoji-table="emojiTable"
@@ -1805,6 +1806,7 @@
             :print-upload-note="printUploadNote"
             :print-crop-border="printCropBorder"
             :print-table="printTable"
+            :inventory-table="inventoryTable"
             @refreshGalleryTable="refreshGalleryTable"
             @refreshVRCPlusIconsTable="refreshVRCPlusIconsTable"
             @refreshStickerTable="refreshStickerTable"
@@ -2002,6 +2004,10 @@
             type: Boolean,
             required: true
         },
+        galleryDialogInventoryLoading: {
+            type: Boolean,
+            required: true
+        },
         galleryTable: {
             type: Array,
             required: true
@@ -2030,6 +2036,10 @@
         printTable: {
             type: Array,
             required: true
+        },
+        inventoryTable: {
+            type: Array,
+            required: true
         }
     });