Réécriture du frontend

[florimondmanca]

• Closes Simplification de l'architecture #405
• Closes [Tech] Refonte du front-end de Permacoop #271
• Closes ETQDev je souhaite avoir une commande pour analyser le poids du bundle généré. #174

Que se passe-t-il ici ?

• Le front SvelteKit est remplacé par un front servi par le serveur NestJS via des templates Nunjucks
• TL;DR:
  • Côté Nest, les Action deviennent des Controller avec des @Render()
  • Les templates sont faits avec Nunjucks (proche de Jinja2)
    • Hélas l'intégration NestJS - Nunjucks (et le templating en général) est très légère.
    • Inspiration prise de feature(common) add @WithAlias route decorator nestjs/nest#5117 pour l'implémentation de {{ path('name', params) }} (NestJS ne fournit pas de tel utilitaire, contrairement à Symfony)
  • Le CSS est "fait main" avec juste ce qu'il nous faut, en s'inspirant des design patterns de Every Layout (pas de Tailwind)
  • Les interactions JS sont implémentées avec des WebComponents (affichage calendrier, menu mobile, dropdown, theme toggler, etc) (93% de support navigateur)
  • Le bundling est fait avec esbuild, un bundler simplissime et très rapide
  • Traductions avec Fluent : système maintenu par Mozilla et indépendant de tout framework (contrairement à svelte-i18n). C'est comme XLIFF ou gettext, mais plus agréable à utiliser
  • FullCalendar est remplacé par la version lightweight EventCalendar (3 à 4x moins lourd)
    • Le JS/CSS FairCalendar est à part et chargé uniquement sur la page FairCalendar.
  • La page de login est refondue : suppression de l'image, ajout d'un système de redirection depuis et vers la page initialement demandée (?next=...)
  • Navigation MPA (multi page app) standard, pour l'instant.

Autres notes

• Retire File/ (plus utilisé depuis le retrait des devis, factures, etc)
• Le front de "Epargne salariale" n'a pas été réimplementé, car il semble que cette partie n'était pas utilisée (on pourra ensuite supprimer les actions associées)

Taille du build

$ make assets

  dist/public/faircalendar.js   87.3kb
  dist/public/main.css          14.1kb
  dist/public/faircalendar.css   7.0kb
  dist/public/main.js            3.6kb

⚡ Done in 59ms

Sans le composant EventCalendar, le build JS pèse moins de 5ko (!). J'ai splitté le JS de sorte à ne charger EventCalendar que sur la page FairCalendar. On ne charge alors que 43 ko de données sur la majorité des pages. ❤️ 🍀

TODO

• Affichage des erreurs formulaires
  • Il faudrait modifier le code des controllers pour que le formulaire soit lié aux données d'une command, comme en Syfmony à la Fairness, plutôt que passer directement les entités comme Customer ou Project. Ça permettrait de refaire le rendu dans le post() avec les données du formulaire qui ont déclenché l'erreur. Actuellement les données sont celles dans la DB, ou elles sont vides si c'est un formulaire de création.
• Faire un ADR
• Poster ici un comparatif avant/après (peut servir à rédiger un blog post)
• Déployer sur Scalingo https://permacoop.osc-fr1.scalingo.io
• Ajouter select mois / année à Eléments de paie ?
•  Problèmes de crash avec Postgres : résolu : le problème venait du connection pooling

2023-11-08 13:37:10.198212080 +0100 CET [web-1] const message = name === 'notice' ? new messages_1.NoticeMessage(length, messageValue) : new messages_1.DatabaseError(messageValue, length, name);
2023-11-08 13:37:10.198200788 +0100 CET [web-1] /app/node_modules/pg-protocol/dist/parser.js:287
2023-11-08 13:37:10.198476032 +0100 CET [web-1] internalPosition: undefined,
2023-11-08 13:37:10.198215798 +0100 CET [web-1] at Parser.parse (/app/node_modules/pg-protocol/dist/parser.js:39:38)
2023-11-08 13:37:10.198229682 +0100 CET [web-1] at Socket.Readable.push (node:internal/streams/readable:228:10)
2023-11-08 13:37:10.198476897 +0100 CET [web-1] internalQuery: undefined,
2023-11-08 13:37:10.198233061 +0100 CET [web-1] at TCP.onStreamRead (node:internal/stream_base_commons:190:23) {
2023-11-08 13:37:10.198477420 +0100 CET [web-1] where: undefined,
2023-11-08 13:37:10.198213745 +0100 CET [web-1] error: remaining connection slots are reserved for non-replication superuser connections
2023-11-08 13:37:10.198309865 +0100 CET [web-1] length: 140,
2023-11-08 13:37:10.198214480 +0100 CET [web-1] at Parser.parseErrorMessage (/app/node_modules/pg-protocol/dist/parser.js:287:98)
2023-11-08 13:37:10.198213099 +0100 CET [web-1] ^
2023-11-08 13:37:10.198215130 +0100 CET [web-1] at Parser.handlePacket (/app/node_modules/pg-protocol/dist/parser.js:126:29)
2023-11-08 13:37:10.198312724 +0100 CET [web-1] severity: 'FATAL',
2023-11-08 13:37:10.198216458 +0100 CET [web-1] at Socket.<anonymous> (/app/node_modules/pg-protocol/dist/index.js:11:42)
2023-11-08 13:37:10.198323399 +0100 CET [web-1] detail: undefined,
2023-11-08 13:37:10.198322463 +0100 CET [web-1] code: '53300',
2023-11-08 13:37:10.198478023 +0100 CET [web-1] schema: undefined,
2023-11-08 13:37:10.198478506 +0100 CET [web-1] table: undefined,
2023-11-08 13:37:10.198361647 +0100 CET [web-1] hint: undefined,
2023-11-08 13:37:10.198222160 +0100 CET [web-1] at Socket.emit (node:events:513:28)
2023-11-08 13:37:10.198475071 +0100 CET [web-1] position: undefined,
2023-11-08 13:37:10.198228495 +0100 CET [web-1] at addChunk (node:internal/streams/readable:315:12)
2023-11-08 13:37:10.198504651 +0100 CET [web-1] column: undefined,
2023-11-08 13:37:10.198505536 +0100 CET [web-1] dataType: undefined,
2023-11-08 13:37:10.213077662 +0100 CET [web-1] npm notice
2023-11-08 13:37:10.213434333 +0100 CET [web-1] npm notice Run `npm install -g [email protected]` to update!
2023-11-08 13:37:10.198534446 +0100 CET [web-1] }
2023-11-08 13:37:10.198229233 +0100 CET [web-1] at readableAddChunk (node:internal/streams/readable:289:9)
2023-11-08 13:37:10.213437195 +0100 CET [web-1] npm notice
2023-11-08 13:37:10.198506140 +0100 CET [web-1] constraint: undefined,
2023-11-08 13:37:10.213091476 +0100 CET [web-1] npm notice New major version of npm available! 8.19.4 -> 10.2.3
2023-11-08 13:37:10.222872124 +0100 CET [web-1] make: *** [Makefile:59: start-dist] Error 1
2023-11-08 13:37:10.198506706 +0100 CET [web-1] file: 'postinit.c',
2023-11-08 13:37:10.213092826 +0100 CET [web-1] npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.2.3>
2023-11-08 13:37:10.198527708 +0100 CET [web-1] routine: 'InitPostgres'
2023-11-08 13:37:10.198526876 +0100 CET [web-1] line: '823',
2023-11-08 13:37:11.199457845 +0100 CET [manager] container [web-1] (654b80df99c3cd2dbf44306e) has crashed, restart container in 5m0s.
2023-11-08 13:37:11.199457845 +0100 CET [manager] - documentation: https://doc.scalingo.com/platform/app/crash