✨ sdInfo models pagination

src/buttons/pagination/sdInfoPagination.js

@@ -0,0 +1,106 @@
+const { EmbedBuilder, ButtonBuilder, ActionRowBuilder, StringSelectMenuOptionBuilder, StringSelectMenuBuilder } = require("discord.js");
+const sendRequest = require("../../utils/SD/sendRequest");
+
+module.exports = {
+    id: 'sdInfoPagination',
+    ownerOnly: false,
+
+    callback: async (client, interaction) => {
+        const direction = interaction.customId.split('-')[1];
+
+        const originalMessage = interaction.message;
+        const originalEmbed = new EmbedBuilder(originalMessage.embeds[0].data);
+        const originalComponents = originalMessage.components;
+
+        const [prevButton, nextButton] = originalComponents[1].components.map((originalButton) => new ButtonBuilder(originalButton.data));
+
+        const [modelType, page, totalPages, modelAmount] = originalEmbed.data.footer.text.split('.');
+
+
+        let newPage;
+
+        if (direction == "next") {
+            newPage = Number(page) + 1;
+        } else {
+            newPage = Number(page) - 1;
+        }
+
+        if (newPage == 1) {
+            prevButton.setDisabled(true);
+        } else if (newPage == totalPages) {
+            nextButton.setDisabled(true);
+        } else {
+            prevButton.setDisabled(false);
+            nextButton.setDisabled(false);
+        }
+
+        originalEmbed
+            .setTitle(`List of ${modelType} | Page ${newPage} of ${totalPages}`)
+            .setFooter({text: `${modelType}.${newPage}.${totalPages}.${modelAmount}`})
+
+        const newButtonRow = new ActionRowBuilder()
+            .addComponents(prevButton, nextButton)
+
+
+        const responseData = await sendRequest(`sdapi/v1/${modelType}`, {}, "get");
+
+        const newSelectComponent = new StringSelectMenuBuilder()
+            .setCustomId(`sdInfoDetailDropdown-${modelType}`)
+            .setPlaceholder("Select an item to see details.")
+
+        const startIndex = -25 + (newPage * 25);
+        const endIndex = -1 + (newPage * 25);
+
+        switch (modelType) {
+            case "loras":
+                const lorasList = responseData.slice(startIndex, endIndex);
+
+                for (const item of lorasList) {
+                    newSelectComponent.addOptions(
+                        new StringSelectMenuOptionBuilder()
+                            .setLabel(item.name)
+                            .setDescription(`${item.name}, ${item.alias}`)
+                            .setValue(`${item.name}||${item.alias}`)
+                    )
+                };
+                break;
+
+            case "hypernetworks":
+                const hypernetsList = responseData.slice(startIndex, endIndex);
+
+                for (const item of hypernetsList) {
+                    const hypernetName = item.name;
+
+                    select.addOptions(
+                        new StringSelectMenuOptionBuilder()
+                            .setLabel(hypernetName)
+                            .setDescription(`<hypernet:${hypernetName}:1>`)
+                            .setValue(hypernetName)
+                    )
+                };
+                break;
+
+            case "embeddings":
+                const embeddingNames = Object.keys(responseData.loaded);
+
+                const embeddingsList = embeddingNames.slice(startIndex, endIndex);
+
+                for (const name of embeddingsList) {
+                    select.addOptions(
+                        new StringSelectMenuOptionBuilder()
+                            .setLabel(name)
+                            .setDescription(name)
+                            .setValue(name)
+                    )
+                };
+                break;
+        }
+
+        const newSelectComponentRow = new ActionRowBuilder()
+            .addComponents(newSelectComponent)
+
+        originalMessage.edit({content: "", embeds: [originalEmbed], components: [newSelectComponentRow, newButtonRow]});
+
+        interaction.deferUpdate();
+    },
+};

src/commands/sdInfo/sdInfo.js

@@ -1,4 +1,4 @@
-const { ApplicationCommandOptionType, EmbedBuilder, StringSelectMenuBuilder, StringSelectMenuOptionBuilder, ActionRowBuilder } = require("discord.js");
+const { ApplicationCommandOptionType, EmbedBuilder, StringSelectMenuBuilder, StringSelectMenuOptionBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require("discord.js");
 const sendRequest = require("../../utils/SD/sendRequest");
 
 module.exports = {
@@ -32,22 +32,83 @@ module.exports = {
             .setCustomId(`sdInfoDetailDropdown-${subcommandName}`)
             .setPlaceholder("Select an item to see details.")
 
+        const embed = new EmbedBuilder()
+            .setColor("Orange")
+            .setTitle(`List of ${subcommandName}`)
+
+
         const responseData = await sendRequest(`sdapi/v1/${subcommandName}`, {}, "get");
+        let addPaginationButtons = false;
+
+        let totalPages;
+        let pageData;
+        let modelsCount;
 
         switch (subcommandName) {
             case "loras":
-                for (const item of responseData) {
+                const loraCount = responseData.length;
+                modelsCount = loraCount;
+
+                if (loraCount < 25) {
+                    for (const item of responseData) {
+                        select.addOptions(
+                            new StringSelectMenuOptionBuilder()
+                                .setLabel(item.name)
+                                .setDescription(`${item.name}, ${item.alias}`)
+                                .setValue(`${item.name}||${item.alias}`)
+                        )
+                    };
+                    break;
+                }
+
+                totalPages = Math.ceil(loraCount/25);
+
+                embed
+                    .setFooter({ text: `loras.1.${totalPages}.${loraCount}` })
+                    .setTitle(`List of ${subcommandName} | Page 1 of ${totalPages}`)
+
+                pageData = responseData.slice(0, 24);
+
+                for (const item of pageData) {
                     select.addOptions(
                         new StringSelectMenuOptionBuilder()
                             .setLabel(item.name)
                             .setDescription(`${item.name}, ${item.alias}`)
                             .setValue(`${item.name}||${item.alias}`)
                     )
                 };
+
+                addPaginationButtons = true;
                 break;
 
             case "hypernetworks":
-                for (const item of responseData) {
+                const hypernetsCount = responseData.length;
+                modelsCount = hypernetsCount;
+
+                if (hypernetsCount < 25) {
+                    for (const item of responseData) {
+                        const hypernetName = item.name;
+
+                        select.addOptions(
+                            new StringSelectMenuOptionBuilder()
+                                .setLabel(hypernetName)
+                                .setDescription(`<hypernet:${hypernetName}:1>`)
+                                .setValue(hypernetName)
+                        )
+                    };
+                    break;
+
+                }
+
+                totalPages = Math.ceil(hypernetsCount/25);
+
+                embed
+                    .setFooter({ text: `hypernetworks.1.${totalPages}.${hypernetsCount}` })
+                    .setTitle(`List of ${subcommandName} | Page 1 of ${totalPages}`)
+
+                pageData = responseData.slice(0, 24);
+
+                for (const item of pageData) {
                     const hypernetName = item.name;
 
                     select.addOptions(
@@ -57,11 +118,38 @@ module.exports = {
                             .setValue(hypernetName)
                     )
                 };
+
+                addPaginationButtons = true;
                 break;
+
 
             case "embeddings":
                 const embeddingNames = Object.keys(responseData.loaded);
 
+                const embeddingsCount = embeddingNames.length;
+                modelsCount = embeddingsCount;
+
+                if (embeddingsCount < 25) {
+                    for (const name of embeddingNames) {
+                        select.addOptions(
+                            new StringSelectMenuOptionBuilder()
+                                .setLabel(name)
+                                .setDescription(name)
+                                .setValue(name)
+                        )
+                    };
+                    break;
+
+                }
+
+                totalPages = Math.ceil(embeddingsCount/25);
+
+                embed
+                    .setFooter({ text: `hypernetworks.1.${totalPages}.${embeddingsCount}` })
+                    .setTitle(`List of ${subcommandName} | Page 1 of ${totalPages}`)
+
+                pageData = embeddingNames.slice(0, 24);
+
                 for (const name of embeddingNames) {
                     select.addOptions(
                         new StringSelectMenuOptionBuilder()
@@ -70,17 +158,37 @@ module.exports = {
                             .setValue(name)
                     )
                 };
-
+
+                addPaginationButtons = true;
+                break;
         }
 
-        const row = new ActionRowBuilder()
+        const selectionRow = new ActionRowBuilder()
                 .addComponents(select);
 
-        const embed = new EmbedBuilder()
-                .setColor("Orange")
-                .setTitle(`List of ${subcommandName}`)
-                .setDescription(`Total ${subcommandName}: ${select.options.length}`)
+        const componentsList = [];
+        componentsList.push(selectionRow)
+
+        if (addPaginationButtons) {
+            const prevButton = new ButtonBuilder()
+                .setCustomId('sdInfoPagination-prev')
+                .setLabel('Prev. Page')
+                .setStyle(ButtonStyle.Secondary)
+                .setDisabled(true)
+
+            const nextButton = new ButtonBuilder()
+                .setCustomId('sdInfoPagination-next')
+                .setLabel('Next Page')
+                .setStyle(ButtonStyle.Secondary)
+
+            const buttonRow = new ActionRowBuilder()
+                .addComponents(prevButton, nextButton);
+
+            componentsList.push(buttonRow);
+        }
+
+        embed.setDescription(`Total ${subcommandName}: ${modelsCount}`);
 
-        interaction.reply({content: "", embeds: [embed], components: [row], ephemeral: true});
+        interaction.reply({content: "", embeds: [embed], components: componentsList, ephemeral: false});
     },
 };