Skip to main content

Pagination

La pagination est une technique utile employée dans les interfaces utilisateur pour présenter de grandes quantités d'informations de manière structurée et gérable. Lorsque l'on traite des volumes de données importants, tels que des résultats de recherche, des articles ou des listes de produits, tout présenter en une seule fois peut submerger les utilisateurs et conduire à une mauvaise expérience utilisateur. La pagination vous permet de diviser les informations en plus petits blocs organisés, améliorant ainsi l'engagement des utilisateurs et la facilité de navigation. Ce module vous permet de créer une pagination avec quelques lignes de code.

Installation​

$ npm i @necord/pagination necord discord.js

Utilisation​

Une fois le processus d'installation terminé, nous pouvons importer le NecordPaginationModule avec votre NecordModule dans le AppModule racine :

import { NecordModule } from 'necord';
import { Module } from '@nestjs/common';
import { NecordPaginationModule } from '@necord/pagination';
import { AppService } from './app.service';

@Module({
    imports: [
        NecordModule.forRoot({
            token: 'DISCORD_BOT_TOKEN',
            intents: ['Guilds', 'GuildMessages', 'DirectMessages']
        }),
        NecordPaginationModule.forRoot({
            // Change your buttons appearance
            buttons: {},
            // Add buttons for skip to first and last page
            allowSkip: true,
            // Add buttons for search page
            allowTraversal: true,
            // Define the buttons position (start / end)
            buttonsPosition: "end"
        })
    ],
    providers: [AppService]
})
export class AppModule {}

Ensuite, nous pouvons injecter le PaginationService dans notre service et enregistrer un gestionnaire de pagination :

import { OnModuleInit, Injectable } from '@nestjs/common';
import { NecordPaginationService, PageBuilder } from '@necord/pagination';
import { Context, SlashCommand, SlashCommandContext } from 'necord';

@Injectable()
export class AppService implements OnModuleInit {
    public constructor(private readonly paginationService: NecordPaginationService) {
    }

    public onModuleInit(): void {
        return this.paginationService.register(builder =>
            builder
                // Required, need for search your builder
                .setCustomId('test')
                // First way to set pages
                .setPages([
                    new PageBuilder().setContent('Page 1'),
                    new PageBuilder().setContent('Page 2'),
                    new PageBuilder().setContent('Page 3'),
                    new PageBuilder().setContent('Page 4'),
                    new PageBuilder().setContent('Page 5')
                ])
                // Second way, you can manually set pages using `setPages` method
                .setPagesFactory(page => new PageBuilder().setContent(`Page ${page}`))
                // Optional, only if you want to use pages factory
                .setMaxPages(5)
        );
    }

    @SlashCommand({ name: 'pagination', description: 'Test pagination' })
    public async onPagination(@Context() [interaction]: SlashCommandContext) {
        const pagination = this.paginationService.get('test');
        const page = await pagination.build();

        return interaction.reply(page);
    }
}

Félicitations ! Vous avez créé avec succès votre première pagination ! Utilisez simplement la commande pagination et vous verrez votre pagination !

Enregistrer une pagination à l'intérieur d'une commande​

Vous pouvez également enregistrer des paginations de manière dynamique à l'intérieur de vos gestionnaires de commande au lieu du hook onModuleInit.

import { Injectable } from "@nestjs/common";
import { NecordPaginationService, PageBuilder } from "@necord/pagination";
import { Context, SlashCommand, SlashCommandContext } from "necord";

@Injectable()
export class AppService {
    public constructor(private readonly paginationService: NecordPaginationService) {
    }

    @SlashCommand({ name: "dynamic-pagination", description: "Register pagination inside command" })
    public async onDynamicPagination(@Context() [interaction]: SlashCommandContext) {
        const pagination = this.paginationService.create(builder =>
            builder
                .setCustomId(`dynamic-${interaction.user.id}`)
                .setFilter(i => i.user.id === interaction.user.id)
                .setPages([
                    new PageBuilder().setContent("Dynamic Page 1"),
                    new PageBuilder().setContent("Dynamic Page 2")
                ])
        );
        const page = await pagination.build();

        return interaction.reply(page);
    }
}
avertissement

Vous devez vous assurer que setCustomId est unique par utilisateur/session si vous enregistrez de manière dynamique, afin d'éviter les collisions.

Vous pouvez consulter un exemple fonctionnel ici.