Documentation

Appearance

BDD-23 — Recherche et filtrage des dossiers ​

📄 Ticket fonctionnel

Recherche et filtrage des dossiers

L'administrateur peut rechercher un dossier par nom, nom du client ou e-mail, et filtrer par type de compte (Entreprise / Personnel / Non renseigné) pour retrouver rapidement les fichiers dont il a besoin.

1. User Story ​

En tant qu'administrateur, Je veux rechercher un dossier ou un client, Afin de retrouver rapidement les fichiers dont j'ai besoin.

2. Critères d'acceptance ​

  1. Un champ de recherche filtre en temps réel par nom de dossier, nom du client ou e-mail.
  2. Un sélecteur permet de filtrer : Tous / Entreprise / Personnel / Non renseigné, sans étirer la barre si d'autres types sont ajoutés.
  3. Le compteur de dossiers reflète le nombre de résultats filtrés.
  4. Un message distinct s'affiche quand aucun dossier ne correspond (différent de l'état vide sans dossiers).
  5. Le filtre Entreprise s'applique quand client.account_type === 'enterprise'.
  6. Le filtre Personnel s'applique quand client.account_type === 'personal'.
  7. Le filtre Non renseigné s'applique quand client.account_type est absent ou null.
  8. Le filtrage est purement frontend (aucun appel API supplémentaire par frappe).
  9. L'administrateur peut basculer entre un affichage liste et un affichage grille.
  10. Le choix Liste / Grille est mémorisé localement.
  11. L'administrateur peut trier par dernier dépôt, date de création, nom du dossier ou nom du client.
  12. Le filtre de type affiche les compteurs par catégorie.

3. Périmètre fonctionnel ​

Backend ​

FichierChangement
back/src/api/folders/folder.service.tsfindAll() : client select enrichi avec account_type
back/src/api/folders/folder.service.spec.tsTest findAll mis à jour (query attendue)

Frontend ​

FichierRôle
front/src/utils/folder.jsUtils getFolderAccountType(folder) / getFolderAccountBadge(folder)
front/src/components/admin/FolderListItem.vueBadge Entreprise / Personnel / (NR), rendu liste ou grille
front/src/pages/admin/folders/AdminFoldersPage.vuesearchQuery, typeFilter, sortBy, viewMode, compteurs, tri, barre de recherche + select + bascule d'affichage
front/src/__tests__/components/admin/FolderListItem.spec.jsTests badge
front/src/__tests__/pages/admin/folders/AdminFoldersPage.spec.jsTests filtrage

4. Implémentation ​

Logique de filtrage (AdminFoldersPage.vue) ​

js
const filteredFolders = computed(() => {
  return folders.value.filter((folder) => {
    if (typeFilter.value !== 'all' && getFolderAccountType(folder) !== typeFilter.value) {
      return false
    }

    const q = searchQuery.value.trim().toLowerCase()
    if (!q) return true

    const name = folder.name?.toLowerCase() ?? ''
    const clientName = [client?.firstname, client?.lastname].filter(Boolean).join(' ').toLowerCase()
    const email = client?.email?.toLowerCase() ?? ''

    return name.includes(q) || clientName.includes(q) || email.includes(q)
  })
})

Classification partagée (front/src/utils/folder.js) ​

js
export const getFolderAccountType = (folder) => {
  const accountType = folder.client?.account_type
  if (accountType === 'enterprise' || accountType === 'personal') return accountType
  return 'unknown'
}

Utilisé dans FolderListItem.vue (badge) et AdminFoldersPage.vue (filtre).

Affichages ​

  • viewMode = 'list' : lignes compactes, avec colonnes Fichiers / Dernier dépôt / Créé le.
  • viewMode = 'grid' : cartes dossier, plus lisibles quand l'admin parcourt visuellement les clients.
  • La préférence viewMode est stockée dans localStorage sous adminFoldersViewMode.

Tri et compteurs ​

  • Les compteurs du filtre sont calculés depuis la liste complète des dossiers chargés.
  • Le tri est appliqué après filtrage et recherche.
  • Tri disponible : dernier dépôt, création récente, nom du dossier, nom du client.

5. Points de vérification ​

  • Le champ de recherche filtre simultanément sur nom de dossier, nom et e-mail du client.
  • Le toggle Entreprise n'affiche que les dossiers dont client.account_type === 'enterprise'.
  • Le toggle Personnel n'affiche que les dossiers dont client.account_type === 'personal'.
  • Le toggle Non renseigné affiche les dossiers dont client.account_type est absent ou null.
  • Le sélecteur de type reste compact même si de nouveaux types sont ajoutés.
  • La bascule Liste / Grille change la disposition sans perdre les actions Renommer / Supprimer.
  • Le mode Liste / Grille est conservé après refresh.
  • Le tri par nom client et par dates reste cohérent avec le compteur de résultats.
  • Le compteur X dossier(s) reflète les résultats filtrés.
  • Le message "Aucun dossier ne correspond à votre recherche." s'affiche quand le filtre est actif mais sans résultat.
  • Le message "Aucun dossier. Créez-en un pour commencer." s'affiche uniquement quand il n'y a aucun dossier du tout.
  • Le badge coloré (bleu = Entreprise, orange = Personnel, gris = (NR)) est visible sur chaque ligne de dossier.

6. Tests associés ​

Backend ​

  • back/src/api/folders/folder.service.spec.ts — findAll (query avec account_type)

Frontend (unitaires) ​

  • front/src/__tests__/components/admin/FolderListItem.spec.js — badge Entreprise, Personnel, (NR)
  • front/src/__tests__/pages/admin/folders/AdminFoldersPage.spec.js — filtre par nom, par client, par e-mail, aucun résultat, types Entreprise / Personnel / Non renseigné, affichage grille, persistance du mode, compteurs, tri client, combinaison type + texte