DAME - PWA

Extension WordPress et Application Web Progressive (PWA) Ionic/Vue pour l'association DAME.

Prérequis & Qualité

• WordPress : 7.1 ou supérieur
• PHP : 8.4 avec typage strict (declare(strict_types=1); sur 100% des fichiers)
• Analyse Statique : PHPStan Niveau 7 (0 erreur) et WPCS/PHPCS conforme (0 erreur)
• Tests PHP : PHPUnit 11 (composer test)
• Frontend : Node.js 24 LTS, TypeScript strict, Vitest (tests unitaires 100% passants)
• Intégration Continue (CI) : GitHub Actions automatisée sur main et develop (.github/workflows/qa.yml) avec jobs parallèles PHP 8.4 et Node 24.

Architecture

• includes/ : Classes PHP du plugin WordPress (DAME_PWA).
• pwa/ : Application Ionic 9 + Vue 3 + Pinia + TanStack Query.
  • src/views/ : Vues organisées par domaines métier :
    • src/views/learning/ : ApprentissageHubPage.vue, ApprentissageCoursListPage.vue, CoursPage.vue, ContenuPage.vue, PlayPage.vue, AnalysisPage.vue et types/ (16 wrappers de leçons/exercices).
    • src/views/public/ : PublicHomePage.vue, LeClubPage.vue, NewsPage.vue, NewsDetailPage.vue, AgendaDetailPage.vue, TournamentPage.vue, BenevolatPage.vue, BenevolatVotePage.vue, PreInscriptionPage.vue.
    • src/views/admin/ : HomePage.vue (Dashboard), MembersPage.vue, MemberDetailPage.vue, ContactsPage.vue, ContactDetailPage.vue, EventsPage.vue, AdminAgendaDetailPage.vue, HelloAssoPage.vue, HelloAssoDetailPage.vue, MessagesPage.vue, MessageDetailPage.vue, BenevolatDetailPage.vue.
    • src/views/auth/ : LoginPage.vue, RegisterPage.vue, SelectPersonPage.vue, ProfilePage.vue.
    • src/views/layout/ : TabsPage.vue, AdminLayout.vue, GenericPage.vue.
  • src/components/ : Composants modulaires organisés par piliers :
    • src/components/learning/ : LeconReader.vue, VideoReader.vue, ContentHeader.vue, ExerciseHeader.vue, LearningFeedbackCallout.vue, SeriesCardFooter.vue, sous-dossier play/ et sous-dossier viewers/ (les 17 viewers d'exercices interactifs).
    • src/components/public/ : Composants de la vitrine club (agenda/, preinscription/).
    • src/components/auth/ : Personnalisation et profil (profile/ChessThemeCustomizer.vue).
    • src/components/shared/ : Briques UI génériques pures (Chessboard/, DataTable/, SplitMasterDetail.vue, SignaturePad.vue, MediaViewer/EgMediaViewer.vue, WpContent/WpContentRenderer.vue).
  • src/composables/ : Logique réutilisable découplée (learning/, public/, core/).
  • src/utils/ : Utilitaires système (safeFetch.ts, wpApi.ts, helloAsso.ts, seasonUtils.ts), parseurs (parsers/ dont wpContentParser.ts) et moteurs d'échecs (chess/). seasonUtils.ts centralise la détection des saisons sportives, le formatage des plages horaires et le parsing robuste des datetimes MySQL.
  • src/stores/auth/ : Sous-modules spécialisés pour l'authentification (types.ts, jwtService.ts, appConfig.ts, identitiesService.ts) pilotés par la façade useAuthStore (auth.ts), intégrant les fonctionnalités de résilience PWA du SDK simple-jwt-login (LocalStorageTokenStorage, useWpJson: true, callback onSessionExpired sur rejet serveur 400/401/403, maintien de session hors-ligne via sdk.isAuthenticated(), et déconnexion résiliente via sdk.logout()).
  • src/stores/ : Stores Pinia harmonisés avec TanStack Query (news.ts, tournament.ts, members.ts, contacts.ts, dashboard.ts, benevolat.ts, apprentissage.ts, unread.ts, ticketing.ts) pour la gestion unifiée du cache serveur, de la billetterie & pointage HelloAsso, du suivi des nouveautés et de l'état client.
  • src/utils/safeFetch.ts & src/utils/wpApi.ts : Couche réseau unifiée avec timeouts de protection, délégation native à sdk.fetchWithAuth() pour l'injection automatique du header Authorization: Bearer <jwt> et le rafraîchissement transparent sur 401/400, et pagination multi-pages WP REST automatique (fetchWpCollection).
  • src/queryClient.ts : Configuration de TanStack Query avec persistance et invalidation automatique des caches de requêtes lors des montées de version PWA.
  • src/theme/ : Architecture SCSS centralisée KISS organisée en 3 piliers métier (theme/public/, theme/learning/, theme/admin/) + fondations communes (theme/core/, variables.css). Règle d'or CSS stricte : zéro balise `