Activité à réaliser : gestion de tickets, part-1

Créer un projet ‘ticket’ et initialiser vuejs/tailwindcss dans un répertoire ‘frontend’.

Dans une branche ‘part-1’, réaliser un formulaire de saisie de ticket d’intervention :

• catégorie : choix parmi ‘Mobilier’, ‘Informatique’, ‘Autre’
• description : saisie d’un texte libre
• urgence : choix parmi ‘faible’, ‘normale’, ‘forte’

Lors de l’appui sur ‘Valider’, afficher sur la console les données saisies.

Activité à réaliser : gestion de tickets, part-2

Dans une branche ‘part-2’, ajouter une logique de validation au formulaire :

• l’email doit être correctement formé
• une catégorie doit avoir été choisie
• la description doit être non vide
• un niveau de priorité doit avoir été choisi

Le bouton ‘Valider’ doit être ‘disabled’ tant que le formulaire est invalide.

Activité à réaliser : gestion de tickets, part-3

Dans une branche ‘part-3’, ajouter une sauvegarde des données saisies dans une base de données :

• dans une répertoire ‘backend’, créer un projet npm Express/Prisma
• le schéma de la base de données est :

generator client {
   provider = "prisma-client-js"
}

model Ticket {
   id                 Int               @default(autoincrement()) @id
   created_at         DateTime          @default(now()) @db.Timestamptz(6)
   handled_at         DateTime?
   done_at            DateTime?
   email              String
   category           Category
   description        String
   priority           PriorityLevel
   status             Status            @default(submitted)
   answer             String?
}

enum Category {
   furniture
   computer
   other
}

enum PriorityLevel {
   low
   normal
   high
}

enum Status {
   submitted
   ongoing
   done
}

datasource db {
   provider = "postgresql"
   url      = "postgresql://user:password@localhost:5432/tickets"
}

• créer la route GET /api/ticket qui renvoie la liste de tous les tickets
• créer la route POST /api/ticket qui créé un nouveau ticket

Activité à réaliser : gestion de tickets, part-4

Dans une branche ‘part-4’, ajouter un routeur pour gérer plusieurs pages :

• installer et configurer vue-router
• mettre la saisie d’un ticket sur la route /
• ajouter une page /recap/:id qui affiche le récapitulatif de la demande :id, et aller vers cette page à chaque création de ticket
• ajouter une page /tickets qui affiche la liste de tous les tickets et leur statut

Activité à réaliser : gestion de tickets, part-5

Dans une branche ‘part-5’, structurer l’application en composants :

• TicketCard, propriété ‘ticketId’, qui affiche dans un petit cadre rectangulaire les informations essentielles d’un ticket d’identifiant ‘ticketId’, sauf le texte de description
• TicketDetail, propriété ‘ticketId’ qui affiche toutes les informations du ticket

Modifier la route /tickets pour qu’elle affiche la liste des tickets sous forme d’une colonne de TicketCard à gauche, et que le clic sur un des TicketCard ‘ticketId’ affiche le détail TicketDetail dans l’espace restant à droite, associé à la route /tickets/:ticketId

Lorsqu’un ticket de la liste de gauche est cliqué, sa couleur de fond doit changer pour indiquer qu’il est sélectionné. Réciproquement, lorsque l’url /ticket/:ticketId est entrée, le ticket associé de la liste doit apparaître sélectionné.

Activité à réaliser : gestion de tickets, part-6

Dans une branche ‘part-6’, normaliser les données et les mettre dans un état central.

Créer un module use/useTickets.js qui contient toute la logique métier de gestion des tickets, et qui stocke les informations recueillies dans un cache partagé :

• créer un cache ‘id2ticket’ qui associe à chaque id le ticket associé
• exporter une fonction ‘asyncTicket(ticketId)’ qui renvoie une promesse de ticket. Si ticketId est dans le cache il est renvoyé ; sinon il est demandé au backend et la promesse est ensuite résolue
• ajouter dans ce module les accès HTTP au backend, en stockant immédiatement les données reçues dans le cache d’état

Activité à réaliser : gestion de tickets, part-7

Dans une branche ‘part-7’, persister l’état dans sessionStorage

En utilisant https://vueuse.org/core/useSessionStorage/, persister le cache id2ticket dans la clé ‘id2ticket’ de sessionStorage. Vérifier que le contenu du cache résiste au rechargement de la page

Activité à réaliser : gestion de tickets, part-8

Dans une branche ‘part-8’, mettre en place un filtrage sur la liste des tickets

• filtrage par catégories
• filtrage par priorité

Activité à réaliser : gestion de tickets, part-9

Dans une branche ‘part-9’, mettre en place une authentification et autorisation minimales.

• mettre en place une route frontend publique /signin qui demande la saisie d’un email et d’un mot de passe et qui appelle le backend avec POST /api/auth { email, password }. Pour simplifier le backend contiendra une liste d’utilisateurs en dur :

[
   { email: 'admin@mail.fr', admin: true, password: '2xaf67yret32' },
   { email: 'jc@mail.fr', admin: false, password: 'hjaf67yret32' },
   ...
]

Le backend renverra un ordre de stockage d’un cookie JWT nommé access_token dont le payload contient les autorisations, 'read-list'='all', 'read-ticket'='all', 'write-ticket'='all' pour un administrateur, 'read-list'='(email)', 'read-ticket'='(email)', 'write-ticket'='none' pour les autres

• sécuriser les routes backend pour qu’elles prennent en compte les autorisation contenues dans le payload du cookie JWT transmis avec chaque requête, en filtrant les listes renvoyées, ou en renvoyant le status 403 selon les cas
• sécuriser les routes frontend pour afficher des messages d’interdiction, en fonction de la page demandée et du cookie d’authentification présent

• front-end