Feat/add tracking table

client/src/App.vue

@@ -53,14 +53,17 @@ const authenticatedQuickLinks: QuickLink[] = [
     label: "Rechercher une application",
     to: { name: routeNames.SEARCHAPP },
   },
+  {
+    label: "Mes signalements",
+    to: { name: routeNames.ISSUELIST },
+  },
   {
     label: "Déconnexion",
     to: authentication.createLogoutUrl(),
     icon: "ri-logout-box-r-line",
     iconAttrs: { title: "Déconnexion" },
   },
 ];
-
 const searchQuery = ref("");
 
 const { setScheme, theme } = useScheme();

client/src/api/reportIssue.ts

@@ -1,5 +1,6 @@
 import type { ReportIssue } from "../models/ReportIssue";
 import requests from "./xhr-client";
+import axios from "axios";
 
 const reportIssue = {
   async createReportIssue(data: Promise<ReportIssue[]>) {
@@ -10,6 +11,36 @@ const reportIssue = {
       throw error;
     }
   },
+  async getReportIssue() {
+    try {
+      const response = await requests.get<ReportIssue[]>("/anomaly-notifications");
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  },/*
+  async getAllIssueByNotifierId(notifierId?: string): Promise<ReportIssue[]> {
+    try {
+      return await axios.get(`/anomaly-notification/${notifierId}`);
+    } catch (error) {
+      throw error;
+    }
+  },*/
+  async getReportIssueByNotifierId(): Promise<ReportIssue[]> {
+    try {
+      return await requests.get<ReportIssue[]>("/anomaly-notifications/user-notifications");
+    } catch (error) {
+      throw error;
+    }
+  },
+  async deleteReportIssue(id: string) {
+    try {
+      const response = await requests.del(`/anomaly-notifications/${id}`);
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  },
 };
 
 export default reportIssue;

client/src/components.d.ts

@@ -2,59 +2,40 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ActionsIssue: typeof import('./components/ActionsIssue.vue')['default']
+    ActionsReportIssue: typeof import('./components/ActionsReportIssue.vue')['default']
     ApplicationList: typeof import('./components/ApplicationList.vue')['default']
     ApplicationOverview: typeof import('./components/ApplicationOverview.vue')['default']
-    ApplicationsTiles: typeof import('./components/ApplicationsTiles.vue')['default']
     AppToaster: typeof import('./components/AppToaster.vue')['default']
-    Description: typeof import('./components/Description.vue')['default']
     DsfrAlert: typeof import('@gouvminint/vue-dsfr')['DsfrAlert']
     DsfrBreadcrumb: typeof import('@gouvminint/vue-dsfr')['DsfrBreadcrumb']
     DsfrButton: typeof import('@gouvminint/vue-dsfr')['DsfrButton']
     DsfrCard: typeof import('@gouvminint/vue-dsfr')['DsfrCard']
-    DsfrCheckbox: typeof import('@gouvminint/vue-dsfr')['DsfrCheckbox']
-    DsfrConsent: typeof import('@gouvminint/vue-dsfr')['DsfrConsent']
-    DsfrFieldset: typeof import('@gouvminint/vue-dsfr')['DsfrFieldset']
+    DsfrDataTable: typeof import('@gouvminint/vue-dsfr')['DsfrDataTable']
     DsfrFooter: typeof import('@gouvminint/vue-dsfr')['DsfrFooter']
     DsfrHeader: typeof import('@gouvminint/vue-dsfr')['DsfrHeader']
-    DsfrHighlight: typeof import('@gouvminint/vue-dsfr')['DsfrHighlight']
     DsfrInput: typeof import('@gouvminint/vue-dsfr')['DsfrInput']
-    DsfrInputGroup: typeof import('@gouvminint/vue-dsfr')['DsfrInputGroup']
-    DsfrLegend: typeof import('@gouvminint/vue-dsfr')['DsfrLegend']
     DsfrModal: typeof import('@gouvminint/vue-dsfr')['DsfrModal']
-    DsfrNewsLetter: typeof import('@gouvminint/vue-dsfr')['DsfrNewsLetter']
     DsfrPagination: typeof import('@gouvminint/vue-dsfr')['DsfrPagination']
-    DsfrPicture: typeof import('@gouvminint/vue-dsfr')['DsfrPicture']
-    DsfrQuote: typeof import('@gouvminint/vue-dsfr')['DsfrQuote']
-    DsfrSearch: typeof import('@gouvminint/vue-dsfr')['DsfrSearch']
     DsfrSearchBar: typeof import('@gouvminint/vue-dsfr')['DsfrSearchBar']
-    DsfrSelect: typeof import('@gouvminint/vue-dsfr')['DsfrSelect']
-    DsfrSerlect: typeof import('@gouvminint/vue-dsfr')['DsfrSerlect']
     DsfrTabContent: typeof import('@gouvminint/vue-dsfr')['DsfrTabContent']
     DsfrTabItem: typeof import('@gouvminint/vue-dsfr')['DsfrTabItem']
     DsfrTable: typeof import('@gouvminint/vue-dsfr')['DsfrTable']
     DsfrTabs: typeof import('@gouvminint/vue-dsfr')['DsfrTabs']
-    DsfrTags: typeof import('@gouvminint/vue-dsfr')['DsfrTags']
-    DsfrTile: typeof import('@gouvminint/vue-dsfr')['DsfrTile']
-    DsfrTiles: typeof import('@gouvminint/vue-dsfr')['DsfrTiles']
-    DsfrTooltip: typeof import('@gouvminint/vue-dsfr')['DsfrTooltip']
-    ExportApplication: typeof import('./components/ExportApplication.vue')['default']
+    DsfrTag: typeof import('@gouvminint/vue-dsfr')['DsfrTag']
     ExportApplications: typeof import('./components/ExportApplications.vue')['default']
-    ExportButton: typeof import('./components/ExportButton.vue')['default']
-    'InformationsGénéral': typeof import('./components/InformationsGénérales.vue')['default']
     InformationsGenerales: typeof import('./components/InformationsGenerales.vue')['default']
-    LastModifiedApplications: typeof import('./components/LastModifiedApplications.vue')['default']
     Objectifs: typeof import('./components/Objectifs.vue')['default']
     ReloadPrompt: typeof import('./components/ReloadPrompt.vue')['default']
     ReportIssue: typeof import('./components/ReportIssue.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchApplications: typeof import('./components/SearchApplications.vue')['default']
     Tags: typeof import('./components/Tags.vue')['default']
-    VIcon: typeof import('@gouvminint/vue-dsfr')['VIcon']
   }
 }

client/src/composables/use-date.ts

@@ -0,0 +1,10 @@
+export const formatDate = (isoDate: string): string => {
+    const date = new Date(isoDate);
+    return new Intl.DateTimeFormat("fr-FR", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    }).format(date);
+};

client/src/router/index.ts

@@ -12,6 +12,11 @@ const routes = [
     name: "accueil",
     component: () => import("@/views/AppHome.vue"),
   },
+  {
+    name: routeNames.ISSUELIST,
+    path: "/issue-list",
+    component: () => import("@/views/IssuePage.vue"),
+  },
   {
     name: routeNames.CREATEAPP,
     path: "/create-application",

client/src/router/route-names.ts

@@ -5,4 +5,5 @@ export const routeNames = {
   CREATEAPP: "create",
   PROFILEAPP: "application",
   SEARCHAPP: "recherche-application",
+  ISSUELIST: "issue-list",
 } as const;

client/src/views/IssuePage.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import Issues from "@/api/reportIssue";
+import type { Application } from "@/models/Application";
+import { onMounted, ref } from "vue";
+import { routeNames } from "@/router/route-names";
+import { formatDate } from "@/composables/use-date";
+
+const props = defineProps<{ application: Application }>();
+
+const title = "Liste de mes signalements";
+const headers = ["Application", "Description", "Date"];
+
+const rows = ref<(string | { component: string; [k: string]: unknown })[][]>([]);
+const selection = ref<string[]>([]);
+const currentPage = ref<number>(0);
+
+const loadReports = async () => {
+  try {
+    const reportList = await Issues.getReportIssueByNotifierId();
+
+    rows.value = reportList.map((report: any) => [
+      {
+        label: report.application?.label,
+        to: { name: routeNames.PROFILEAPP, params: { id: report.application?.id } },
+      },
+      report.description,
+      formatDate(report.createdAt)
+    ]);
+
+  } catch (error) {
+    console.error("Une erreur est survenue lors du chargement des anomalies :", error);
+  }
+};
+
+onMounted(() => {
+  loadReports();
+});
+
+</script>
+
+<template>
+  <div class="fr-container fr-my-2v w-[800px]">
+    <DsfrDataTable
+      v-model:selection="selection"
+      v-model:current-page="currentPage"
+      :headers-row="headers"
+      :rows="rows"
+      selectable-rows
+      row-key="id"
+      :title="title"
+      pagination
+      :rows-per-page="10"
+      :pagination-options="[10, 20, 30]"
+      bottom-action-bar-class="bottom-action-bar-class"
+      pagination-wrapper-class="pagination-wrapper-class"
+      sorted="id"
+      :sortable-rows="['id']"
+    >
+      <template #cell="{ colKey, cell }">
+        <template v-if="colKey === 'Application'">
+          <router-link 
+            :to= "cell.to">
+            {{ cell.label }}
+          </router-link>
+        </template>
+        <template v-else>
+          {{ cell }}
+        </template>
+      </template>
+    </DsfrDataTable>
+  <!--  IDs sélectionnées : {{ selection }} -->
+  </div>
+</template>
+
+
+<style scoped>
+
+</style>

docker-compose.yml

@@ -61,17 +61,17 @@ services:
     depends_on:
       - postgres
 
-  client:
-    image: node:22
-    working_dir: /app
-    volumes:
-      - ./client:/app
-      - /app/node_modules
-    ports:
-      - "5173:5173"
-    command: sh -c "npm install -g pnpm && pnpm install && pnpm dev"
-    depends_on:
-      - backend
+  # client:
+  #   image: node:22
+  #   working_dir: /app
+  #   volumes:
+  #     - ./client:/app
+  #     - /app/node_modules
+  #   ports:
+  #     - "5173:5173"
+  #   command: sh -c "npm install -g pnpm && pnpm install && pnpm dev"
+  #   depends_on:
+  #     - backend
 
   krakend:
     image: devopsfaith/krakend

package.json

@@ -5,5 +5,8 @@
   },
   "devDependencies": {
     "prettier": "3.3.3"
+  },
+  "dependencies": {
+    "jose": "^5.9.6"
   }
 }