feat: 1265 page historique renouvellement agrement

Author: admin

.talismanrc

@@ -247,6 +247,8 @@ fileignoreconfig:
   checksum: e22412a54064dea24f7e200e9887726a4ef110f13570feea628c70c4fe2886a9
 - filename: packages/frontend-usagers/src/components/agrement/etapes-avancement.vue
   checksum: 88b30646940faf9e0726799588b6445f5292d9afd912df7bbc91ae61627b93b6
+- filename: packages/frontend-usagers/src/components/agrement/historique.vue
+  checksum: 054caab3085a920f1a5017decf60ebd686cc2c1695eba776c40f5bdb3521dffc
 - filename: packages/frontend-usagers/src/components/agrement/projets/listeSejours.vue
   checksum: 8fedbc8821c31208f6a874718cd0f8805cd7990365928ce883ce1dcbd843decd
 - filename: packages/frontend-usagers/src/components/agrement/projets/sejoursPrevus.vue
@@ -273,11 +275,6 @@ fileignoreconfig:
   checksum: 846543dfd36589a6fe10859c28fe0ca4e3a4f084f58ea56b42fce695d30b31c8
 - filename: packages/frontend-usagers/src/components/utils/TableFull.vue
   checksum: 05743cc5c3dfd946e8ee41cb11571b1e505bbdb5260e9c59a53e4ca16cb11f08
-- filename: packages/frontend-usagers/src/pages/connexion/enregistrement.vue
-  checksum: dd393d7c31566dfa3864bb9a63fe98f9bf040cc8321e8cad0f74e8634e8365f8
-- filename: packages/frontend-usagers/src/pages/connexion/index.vue
-  checksum: fcacdc94675ff0c9eedddafc751e3dc1149edbc8d853494e3c42d935677eceff
-  checksum: 6a0259a5bfca987ea2d83fb1fa90116d8dda92335214993671111d7a04425429
 - filename: packages/frontend-usagers/src/pages/agrement/[[agrementId]].vue
   checksum: 9f1b4a0e00392a84b23746ab66cad677bddc49b1f9999454b123cb7111c204c3
 - filename: packages/frontend-usagers/src/pages/connexion/enregistrement.vue

packages/backend/src/usagers/agrements/agrements.controller.ts

@@ -42,6 +42,20 @@ export const AgrementController = {
       next(error);
     }
   },
+  async getHistory(
+    req: RouteRequest<AgrementUsagersRoutes["GetHistory"]>,
+    res: RouteResponse<AgrementUsagersRoutes["GetHistory"]>,
+    next: NextFunction,
+  ) {
+    try {
+      const history = await AgrementService.getHistory(
+        Number(req.validatedParams!.agrementId),
+      );
+      res.status(200).json({ history });
+    } catch (error) {
+      next(error);
+    }
+  },
   async post(
     req: RouteRequest<AgrementUsagersRoutes["PostAgrement"]>,
     res: RouteResponse<AgrementUsagersRoutes["PostAgrement"]>,
@@ -51,9 +65,22 @@ export const AgrementController = {
     const agrement = req.validatedBody!;
     try {
       const id = await AgrementService.save(agrement);
+      log.i("Agrement saved", { id });
+
+      // todo: supprimer/adapter cet exemple de tracking
+      // await AgrementService.trackEvent({
+      //   agrementId: id,
+      //   boUserId: null,
+      //   metadata: null,
+      //   source: "Organisateur",
+      //   type: "Mise à jour page",
+      //   typePrecision: "Renuvellement en cours de complétion",
+      //   usagerUserId: 1,
+      // });
+
       res.json({ id });
     } catch (err) {
-      log.w("DONE with error");
+      log.w("DONE with error", err);
       next(err);
     }
   },

packages/backend/src/usagers/agrements/agrements.repository.ts

@@ -1,3 +1,7 @@
+import type {
+  AgrementHistoryItem,
+  AgrementHistoryRow,
+} from "@vao/shared-bridge";
 import { AgrementDto } from "@vao/shared-bridge";
 
 import { saveAdresse } from "../../services/adresse";
@@ -226,7 +230,6 @@ export const AgrementsRepository = {
       return agrementId;
     } catch (err) {
       await client.query("ROLLBACK");
-      console.error("Erreur lors de la création d'un agrément :", err);
       throw err;
     } finally {
       client.release();
@@ -349,6 +352,104 @@ export const AgrementsRepository = {
 
     return agrementDto;
   },
+  async getHistory(agrementId: number): Promise<AgrementHistoryItem[]> {
+    const client = await getPool().connect();
+    try {
+      const query = `
+       SELECT
+          h.id,
+          h.source,
+          h.agrement_id,
+          h.usager_user_id,
+          u.nom AS usager_nom,
+          u.prenom AS usager_prenom,
+          u.mail AS usager_mail,
+          h.bo_user_id,
+          b.nom AS bo_nom,
+          b.prenom AS bo_prenom,
+          b.mail AS bo_mail,
+          h.type,
+          h.type_precision,
+          h.metadata,
+          h.created_at
+        FROM front.agrement_history h
+        LEFT JOIN front.users u ON h.usager_user_id = u.id
+        LEFT JOIN back.users b ON h.bo_user_id = b.id
+        WHERE h.agrement_id = $1
+        ORDER BY h.created_at DESC;
+      `;
+      const result = await client.query(query, [agrementId]);
+      return result.rows.map((row: AgrementHistoryRow) => ({
+        agrement_id: row.agrement_id,
+        bo_user: row.bo_user_id
+          ? {
+              id: row.bo_user_id,
+              mail: row.bo_mail,
+              nom: row.bo_nom,
+              prenom: row.bo_prenom,
+            }
+          : null,
+        created_at: row.created_at,
+        id: row.id,
+        metadata: row.metadata,
+        source: row.source,
+        type: row.type,
+        type_precision: row.type_precision,
+        usager_user: row.usager_user_id
+          ? {
+              id: row.usager_user_id,
+              mail: row.usager_mail,
+              nom: row.usager_nom,
+              prenom: row.usager_prenom,
+            }
+          : null,
+      }));
+    } finally {
+      client.release();
+    }
+  },
+  async insertHistoryEvent({
+    source,
+    agrementId,
+    usagerUserId,
+    boUserId,
+    type,
+    typePrecision,
+    metadata,
+  }: {
+    source: string;
+    agrementId: number;
+    usagerUserId?: number | null;
+    boUserId?: number | null;
+    type?: string | null;
+    typePrecision?: string | null;
+    metadata?: Record<string, unknown> | null;
+  }): Promise<number> {
+    const query = `
+      INSERT INTO front.agrement_history (
+        source,
+        agrement_id,
+        usager_user_id,
+        bo_user_id,
+        type,
+        type_precision,
+        metadata,
+        created_at
+      ) VALUES ($1, $2, $3, $4, $5, $6, $7, NOW())
+      RETURNING id;
+    `;
+    const values = [
+      source,
+      agrementId,
+      usagerUserId ?? null,
+      boUserId ?? null,
+      type ?? null,
+      typePrecision ?? null,
+      metadata ?? null,
+    ];
+    const { rows } = await getPool().query(query, values);
+    return rows[0].id;
+  },
   async update({
     agrement,
     dateFinValidite,
@@ -505,7 +606,6 @@ export const AgrementsRepository = {
       await client.query("COMMIT");
     } catch (err) {
       await client.query("ROLLBACK");
-      console.error("Erreur lors de la mise à jour de l'agrément :", err);
       throw err;
     } finally {
       client.release();

packages/backend/src/usagers/agrements/agrements.route.ts

@@ -24,6 +24,15 @@ router.post(
   AgrementController.post,
 );
 
+// TODO: Ajouter requestValidatorMiddleware(AgrementUsagersRoutesSchema["GetAllActivites"]) pour valider la route des activités
 router.get("/activites", checkJWT, AgrementController.getAllActivites);
 
+router.get(
+  "/history/:agrementId",
+  checkJWT,
+  requestValidatorMiddleware(AgrementUsagersRoutesSchema["GetHistory"]),
+  checkPermissionAgrement,
+  AgrementController.getHistory,
+);
+
 export default router;

packages/backend/src/usagers/agrements/agrements.service.ts

@@ -50,6 +50,10 @@ export const AgrementService = {
       libelle: activite.libelle,
     }));
   },
+  async getHistory(agrementId: number) {
+    const history = await AgrementsRepository.getHistory(agrementId);
+    return history;
+  },
   async save(agrement: AgrementDto): Promise<number> {
     const dateFinValidite = addYears(agrement?.dateObtentionCertificat, 5);
     let agrementId = null;
@@ -69,4 +73,15 @@ export const AgrementService = {
     }
     return agrementId;
   },
+  async trackEvent(event: {
+    source: string;
+    agrementId: number;
+    usagerUserId?: number | null;
+    boUserId?: number | null;
+    type?: string | null;
+    typePrecision?: string | null;
+    metadata?: Record<string, unknown> | null;
+  }) {
+    return AgrementsRepository.insertHistoryEvent(event);
+  },
 };

packages/frontend-usagers/src/components/agrement/etape-avancement.vue

@@ -7,15 +7,15 @@
     ></span>
     <span v-if="state === 'success'" class="fr-sr-only">Étape terminée</span>
     <span
-      v-else-if="state === 'waiting'"
+      v-if="state === 'waiting'"
       class="fr-icon-time-line icone icone--waiting"
       aria-hidden="true"
     ></span>
-    <span v-else-if="state === 'waiting'" class="fr-sr-only">Étape en attente</span>
+    <span v-if="state === 'waiting'" class="fr-sr-only">Étape en attente</span>
     <div class="texte">
       <p class="texte-intitule">{{ libelle }}</p>
       <p class="texte-temporalite">
-        <slot name="temporalite">{{ temporalite }}</slot>
+        <slot name="temporalite"></slot>
       </p>
     </div>
     <p class="entite">{{ entite }}</p>
@@ -33,11 +33,6 @@ defineProps({
     type: String,
     required: true,
   },
-  temporalite: {
-    type: String,
-    required: false,
-    default: "",
-  },
   entite: {
     type: String,
     required: true,

packages/frontend-usagers/src/components/agrement/etape-historique.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="card">
+   <div class="texte">
+      <p class="texte-intitule">{{ type ?? "" }}</p>
+      <p class="texte-temporalite">
+        {{ formatFR(created_at) ?? "" }} - {{ type_precision ?? "" }}
+      </p>
+    </div>
+    <p class="user">
+      {{ usager_user?.mail ?? "" }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import type { AgrementHistoryItem } from "@vao/shared-bridge";
+import { formatFR } from "@vao/shared-bridge";
+
+const props = defineProps<{
+  entry: AgrementHistoryItem
+}>();
+const { type, created_at, type_precision, usager_user } = props.entry;
+</script>
+<style scoped lang="scss">
+.card {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  min-height: 86px; 
+  border-radius: 4px;
+  padding: 1rem;
+  border: 1px solid
+    var(--light-decisions-background-background-alt-grey-active, #cfcfcf);
+  @media (max-width: 597px) {
+    min-height: 110px;
+    height: 110px;
+  }
+}
+.card p {
+  margin: 0;
+}
+.icone--success {
+  color: green;
+}
+.texte {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-left: 10px;
+  flex-grow: 1;
+}
+.texte-intitule {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  color: var(--light-decisions-artwork-artwork-major-blue-france, #000091);
+}
+.texte-temporalite {
+  font-size: 14px;
+}
+.entite {
+  flex-shrink: 0;
+  font-size: 14px;
+}
+</style>