Composant AdminTable et APIs Associées

Le AdminTable est un composant Vue polyvalent conçu pour afficher et gérer des données tabulaires dans une interface d’administration. Il offre des fonctionnalités telles que la pagination, le tri, le filtrage, le contrôle de la visibilité des colonnes et la sélection de lignes.

Composant AdminTable

app/components/AdminTable/index.vue

Le composant principal orchestre l’affichage et l’interaction du tableau.

Fonctionnalités clés :

• Récupération des données : Accepte une prop fetchData, une fonction responsable de récupérer les données selon la pagination, le tri et les paramètres de filtrage.
• Définition des colonnes : Utilise une prop columns pour définir la structure du tableau, y compris les en-têtes et les accesseurs de données.
• Filtrage : Prend en charge divers types de filtres (input, checkbox, tabs, daterange) définis via la prop filters. Les changements de filtre déclenchent une nouvelle récupération des données.
• Pagination : Intègre un composant, avec le numéro de page et le nombre d’éléments par page synchronisés avec les paramètres de requête de l’URL.
• Tri : Les options de tri sont également synchronisées avec les paramètres de requête de l’URL.
• Visibilité des colonnes : Utilise le composable et le composant pour permettre aux utilisateurs d’afficher/masquer des colonnes.
• Sélection de lignes : Si canSelect est à true, active la fonctionnalité de sélection de lignes, gérée par le composable.
• Gestion d’état : L’état du composant (page, limite, options de tri) est réactif et synchronisé avec les paramètres de requête de l’URL pour une meilleure expérience utilisateur et partageabilité.
• Gestion des erreurs : Inclut une gestion basique des erreurs lors de la récupération des données, affichant des notifications toast en cas d’échec.
• Rafraîchissement : Fournit une méthode handleRefresh pour relancer manuellement la récupération des données du tableau.

APIs Backend

Deux principaux endpoints API supportent le composant AdminTable :

1. API de Liste (/api/admin/list/[tableName].get.ts)

   • Ce endpoint GET dynamique récupère une liste paginée et filtrée d’enregistrements pour un tableName spécifié.
   • Paramètre de chemin : tableName (string) - Le nom de la table de base de données à interroger.
   • Paramètres de requête :
     • page (number, optionnel, défaut : 1) : Le numéro de page pour la pagination.
     • limit (number, optionnel, défaut : 20, max : 100) : Le nombre d’éléments par page.
     • filter (string, optionnel) : Une chaîne JSON représentant un tableau de conditions de filtre (ex : [{ "col": "name", "op": "like", "v": "test" }]).
     • sort (string, optionnel) : Une chaîne JSON représentant un tableau de conditions de tri (ex : [[ "createdAt", "desc" ]]).
   • Fonctionnalité :
     • Valide le tableName.
     • Analyse et applique les paramètres de requête filter et sort.
     • Applique la pagination via page et limit.
     • Retourne un objet contenant data (tableau d’enregistrements), total (nombre total d’enregistrements), page et limit.
     • Utilise Drizzle ORM pour les interactions avec la base de données.

2. API de Comptage (/api/admin/count/[tableName]/[columnName].get.ts)

   • Ce endpoint GET dynamique récupère le nombre de valeurs distinctes pour un columnName donné dans un tableName donné, avec filtrage optionnel.
   • Paramètres de chemin :
     • tableName (string) : Le nom de la table de base de données.
     • columnName (string) : Le nom de la colonne dont on compte les valeurs distinctes.
   • Paramètres de requête :
     • filter (string, optionnel) : Une chaîne JSON représentant un tableau de conditions de filtre, similaire à l’API de Liste.
   • Fonctionnalité :
     • Valide tableName et columnName.
     • Analyse et applique le paramètre de requête filter.
     • Retourne un tableau d’objets, chacun contenant une valeur distincte de la colonne et son count.
     • Utile pour générer des statistiques ou alimenter des options de filtre (ex : cases à cocher avec compte).

Cette combinaison d’un composant frontend flexible et d’APIs backend robustes fournit un système puissant de gestion de données pour le panneau d’administration.