better UI/UX for inventory view

commands/inventory.js

@@ -1,4 +1,4 @@
-const { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require('discord.js');
+const { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle, SelectMenuBuilder } = require('discord.js');
 const { Inventory, addInventory } = require('../structures/inventory');
 
 const action = ['ditch', 'drop', 'forget', 'throw out', 'leave', 'set down', 'let go of'];
@@ -211,22 +211,97 @@ module.exports = {
       }
 
       if (args[0].name == 'view') {
-        // Display Inventory
+        let items = new SelectMenuBuilder()
+          .setCustomId(`inventorySelect-${interaction.member.user.id}`)
+          .setPlaceholder('Select Item to view')
+          .addOptions(
+            {
+              label: 'View All',
+              description: 'View a list of all your inventory items',
+              value: 'all',
+            }
+          )
 
-        let inventoryEmbed = new EmbedBuilder()
-          .setColor(client.config.Colors.Default)
-          .setTitle('Your Inventory')
-        
-        let description = `To see detials on an Item use \`/inventory item [item number]\`\n\n\`\`\``
         for (let i = 0; i < inventory.guilds[GuildDB.serverID].items.length; i++) {
-          if (inventory.guilds[GuildDB.serverID].items[i].type == 'firearm') description += `${i+1}. ${inventory.guilds[GuildDB.serverID].items[i].weaponType} - ${inventory.guilds[GuildDB.serverID].items[i].description}\n`;
+          if (inventory.guilds[GuildDB.serverID].items[i].type == 'firearm') {
-          else description += `${i+1}. ${inventory.guilds[GuildDB.serverID].items[i].name} - ${inventory.guilds[GuildDB.serverID].items[i].description}\n`
+            items.addOptions({
+              label: inventory.guilds[GuildDB.serverID].items[i].weaponType,
+              description: 'View this items description',
+              value: `${i}`
+            })
+          } else {
+            items.addOptions({
+              label: inventory.guilds[GuildDB.serverID].items[i].name,
+              description: 'View this items description',
+              value: `${i}`
+            })
+          }
         }
-        description += "```"
+        
+        const opt = new ActionRowBuilder().addComponents(items);
 
-        inventoryEmbed.setDescription(description);
+        interaction.send({ components: [opt], flags: (1 << 6) })
 
-        return interaction.send({ embeds: [inventoryEmbed], flags: (1 << 6) });
+        client.once("interactionCreate", async MenuInteraction => {
+          if(!MenuInteraction.isSelectMenu()) return;
+          if (!MenuInteraction.customId.endsWith(MenuInteraction.member.user.id)) {
+            return MenuInteraction.reply({
+              content: "This button is not for you",
+              flags: (1 << 6)
+            })
+          }
+          
+          if (MenuInteraction.values[0] == 'all') {
+            let inventoryEmbed = new EmbedBuilder()
+              .setColor(client.config.Colors.Default)
+              .setTitle('Your Inventory')
+          
+            let description = `To see detials on an Item use \`/inventory view\` and select the item to view\n\n\`\`\``
+            for (let i = 0; i < inventory.guilds[GuildDB.serverID].items.length; i++) {
+              if (inventory.guilds[GuildDB.serverID].items[i].type == 'firearm') description += `${i+1}. ${inventory.guilds[GuildDB.serverID].items[i].weaponType} - ${inventory.guilds[GuildDB.serverID].items[i].description}\n`;
+              else description += `${i+1}. ${inventory.guilds[GuildDB.serverID].items[i].name} - ${inventory.guilds[GuildDB.serverID].items[i].description}\n`
+            }
+            description += "```"
+    
+            inventoryEmbed.setDescription(description);
+    
+            return MenuInteraction.update({ embeds: [inventoryEmbed], components: [], flags: (1 << 6) });
+          } else {
+            let item = inventory.guilds[GuildDB.serverID].items[MenuInteraction.values[0]];
+            let itemEmbed = new EmbedBuilder().setColor(client.config.Colors.Default);
+            if (item.type == 'wallet') {
+              // Display wallet
+            
+              let ID = `${client.exists(item.ID.firstname) ? item.ID.firstname : '...'} ${client.exists(item.ID.lastname) ? item.ID.lastname : '...'} | ${client.exists(item.ID.dob) ? item.ID.dob : 'N/A'} | ${client.exists(item.ID.addr) ? item.ID.addr : 'N/A'}`
+
+              itemEmbed.setTitle(`Your Wallet`);
+              itemEmbed.addFields(
+                { name: '**Cash**', value: `$${item.cash.toFixed(2)}`, inline: true },
+                { name: '**ID**', value: ID, inline: true });
+
+            } else if (item.type == 'firearm') {
+              // Display firearm
+              
+              itemEmbed.setTitle('Firearm');
+              itemEmbed.addFields(
+                { name: 'Serial #', value: item.serial, inline: true },
+                { name: 'Type', value: item.weaponType, inline: true },
+                { name: 'Description', value: item.description, inline: true },
+                { name: 'Owner', value: item.ownerName, inline: true }
+              );
+
+            } else {
+              // Display generic item here
+
+              itemEmbed.setTitle(`Item information`);
+              itemEmbed.addFields({ name: item.name, value: item.description, inline: false });
+            }
+
+            return MenuInteraction.update({ embeds: [itemEmbed], components: [], flags: (1 << 6) });
+
+          }
+        });
+        return;
       
       } else if (args[0].name == 'wallet') {
         // Display wallet
@@ -243,49 +318,6 @@ module.exports = {
 
         return interaction.send({ embeds: [walletEmbed] });
 
-      } else if (args[0].name == 'item') {
-        // Display Item Data
-        
-        if (args[0].options[0].value < 1 || args[0].options[0].value > inventory.guilds[GuildDB.serverID].items.length) {
-          let embed = new EmbedBuilder()
-            .setTitle("Please provide a valid item number")
-            .setColor(client.config.Colors.Red)
-
-          return interaction.send({ embeds: [embed] });
-        }
-
-        let item = inventory.guilds[GuildDB.serverID].items[args[0].options[0].value-1];
-        let itemEmbed = new EmbedBuilder().setColor(client.config.Colors.Default);
-        if (item.type == 'wallet') {
-          // Display wallet
-        
-          let ID = `${client.exists(item.ID.firstname) ? item.ID.firstname : '...'} ${client.exists(item.ID.lastname) ? item.ID.lastname : '...'} | ${client.exists(item.ID.dob) ? item.ID.dob : 'N/A'} | ${client.exists(item.ID.addr) ? item.ID.addr : 'N/A'}`
-
-          itemEmbed.setTitle(`Your Wallet`);
-          itemEmbed.addFields(
-            { name: '**Cash**', value: `$${item.cash.toFixed(2)}`, inline: true },
-            { name: '**ID**', value: ID, inline: true });
-
-        } else if (item.type == 'firearm') {
-          // Display firearm
-          
-          itemEmbed.setTitle('Firearm');
-          itemEmbed.addFields(
-            { name: 'Serial #', value: item.serial, inline: true },
-            { name: 'Type', value: item.weaponType, inline: true },
-            { name: 'Description', value: item.description, inline: true },
-            { name: 'Owner', value: item.ownerName, inline: true }
-          );
-
-        } else {
-          // Display generic item here
-
-          itemEmbed.setTitle(`Item information`);
-          itemEmbed.addFields({ name: item.name, value: item.description, inline: false });
-        }
-
-        return interaction.send({ embeds: [itemEmbed] });
-
       } else if (args[0].name == 'add') {
         if (args[0].options[0].name == 'firearm') {
           // Add firearm to inventory