jeje59223 / breakfast-front-v1

breakfast-front-v1

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Start storybook

npm run storybook

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e

Lint with ESLint

npm run lint

breakfast-front-v1's Issues

Add loader on breakfast page management

Use disconnect route to disconnect and reset the sessionStorage

Make the connection persistent

Make the connection persistent with sessionStorage

Il faut stocker le retour de Logan des que tu est connecter en en local storage.
A chaque appel d’api tu enverra dans le header l’information.
Si la réponse de l’ami est 403 tu repasse en login ^^ (clear de ton storage)

Add loader on datatable when refresh a page

Quand je refresh la page le datatable indique "Aucune données disponibles" alors que le composant est entrain de se charger, il faut ajouter un loader au chargement du composant

Create confirmation Modal component

Review the Podium page

Fix the sort by date

Fix the sort by total breakfast

Corriger le tri sur la colonne du total et ajouter sur toutes les colonnes des icones pour savoir si on tri par 'asc' ou 'desc' :

• tri 'ASC' => icon="mdi-arrow-down"
• tri 'DESC' => icon="mdi-arrow-up"

Add component Alert and loader after update user

Au clique sur le bouton "Sauvergarder" de la page UpdateUser afin un loader pendant le PATCH et une fois fini afficher le composant Alert

Create Alert component

Create Alert component with vuetify => https://vuetifyjs.com/en/components/alerts/#type

Create a Loader component

Disable the delete button for all other users

Ici je suis connecté en tant qu'Harry Potter je ne devrais pas pouvoir voir les bouton de suppression de date sauf pour l'utilisateur connecté

Harmonize all pages (margins, etc.)

Make the connection persistent

Make the connection persistent with sessionStorage

Fix the Dialog component storybook

Add tnr-ids on all components

Clean all repository

Nettoyer tous les composants (console log, etc...)

Add translations to all components

Fix the Connexion component storybook

Improve base64 for user image

La conversion d'images en Base64 n'est généralement pas optimisée pour le stockage ou le transfert des données, car le format Base64 augmente la taille du fichier d'environ 33 %. Toutefois, il existe quelques moyens d'améliorer la manipulation ou la taille des données Base64 :

1. Réduction de la taille de l'image avant conversion :
   Redimensionner l'image : Avant de convertir l'image en Base64, tu peux réduire sa résolution si une haute résolution n'est pas nécessaire.
   Compression de l'image : Utilise un format de compression comme JPEG avec un taux de compression plus élevé avant la conversion en Base64. Cela peut réduire significativement la taille du fichier.
2. Utilisation de WebP au lieu de JPEG/PNG :
   Conversion en WebP : Le format WebP est plus efficace en termes de compression que JPEG ou PNG. En convertissant d'abord l'image en WebP, puis en Base64, tu obtiendras une chaîne Base64 plus courte et plus légère.
3. Optimisation du transfert :
   Utilisation de gzip ou brotli pour la compression : Lorsque tu transfères des données Base64 sur le web, utilise la compression HTTP (gzip ou brotli) pour réduire la taille des données transférées. La compression de texte fonctionne bien avec Base64.
4. Limiter l'utilisation du Base64 :
   Utiliser des blobs ou des URL d'objet : Plutôt que de convertir systématiquement les images en Base64, tu peux utiliser des Blob URLs ou File URLs qui sont plus efficaces pour le rendu des images dans le navigateur.
5. Optimisation spécifique du Base64 :
   Suppression des espaces inutiles : Si la chaîne Base64 est incluse dans un fichier texte (comme du HTML ou JSON), assure-toi qu'il n'y a pas d'espaces ou de sauts de ligne superflus.
   Exemple d'optimisation :
   Si tu utilises une image de 300x300 pixels en JPEG, essaie de :

La compresser en WebP avec une qualité de 70-80 %.
La redimensionner si nécessaire.
Ensuite, convertis l'image en Base64.
Cela devrait réduire considérablement la taille de la chaîne Base64 par rapport à une image originale non compressée.

Conclusion
Bien que le Base64 soit pratique pour l'intégration directe des images dans le code source (comme les e-mails ou les documents HTML), il n'est pas toujours idéal pour le stockage ou les performances. En combinant les méthodes ci-dessus, tu peux minimiser l'impact du Base64 sur les performances de ton application.

Add component Alert and loader after create new user

Sur la page de création d'un user quand on client sur "Valider" on affiche un loader pendant le POST et dès que c'est fini afficher le composant Alert