From 4ee3d9bc4421373987e30f892fd3aee8e029dd5a Mon Sep 17 00:00:00 2001
From: ALAMI Adnane <Adnane.Alami@bordeaux-inp.fr>
Date: Wed, 19 Feb 2025 12:15:39 +0100
Subject: [PATCH] fix: data from api is now correctly displayed

---
 front/MyINPulse-front/fake_data/db.json       |  2 +-
 .../src/components/canvas/CanvasItem.vue      | 79 ++++++++++---------
 .../src/components/canvas/HeaderCanvas.vue    |  4 +-
 .../src/components/canvas/LeanCanvas.vue      |  2 +-
 4 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/front/MyINPulse-front/fake_data/db.json b/front/MyINPulse-front/fake_data/db.json
index 51a02c3..8a5776e 100644
--- a/front/MyINPulse-front/fake_data/db.json
+++ b/front/MyINPulse-front/fake_data/db.json
@@ -5,6 +5,6 @@
       { "id": 3, "name": "Charlie", "email": "charlie@example.com" }
   ],
   "data": [
-      { "data": "this is a fake data to test api" }
+      { "canva_data": "this is a fake data to test api" }
   ]
 }
diff --git a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
index 29228ce..c77f524 100644
--- a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
+++ b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
@@ -16,7 +16,7 @@ import axios from "axios";
 export default {
   props: {
     title: String,
-    description: String
+    description: String,
   },
 
   setup(props) {
@@ -26,7 +26,8 @@ export default {
     const fetchData = async () => {
       try {
         const response = await axios.get("http://localhost:5000/data"); // to edit later!
-        currentDescription.value = response.data.map(e => e.data);
+        currentDescription.value = response.data[0].canva_data;
+
       } catch (error) {
         console.error("Erreur lors de la récupération des données :", error);
       }
@@ -36,7 +37,7 @@ export default {
       if (!expanded.value) {
         await fetchData();
       } else {
-        currentDescription.value = "3 problèmes essentiels à résoudre pour le client";
+        currentDescription.value = props.description;
       }
       expanded.value = !expanded.value;
     };
@@ -54,44 +55,44 @@ export default {
 <style scoped>
 @import "@/components/canvas/style-project.css";
 
-  .cell {
-  	display: flex;
-  	flex-direction: column;
-  	align-items: center;
-  	justify-content: center;
-  	text-align: center;
-  	transition: all 0.3s ease;
-  	cursor: pointer;
-    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
-  }
+.cell {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	transition: all 0.3s ease;
+	cursor: pointer;
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
+}
 
-  .cell:not(.expanded):hover {
-    transform: scale(1.05);
-    box-shadow: 0 8px 9px rgba(0, 0, 0, 0.2);
-  }
+.cell:not(.expanded):hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 9px rgba(0, 0, 0, 0.2);
+}
 
-  .cell h3 {
-      font-size: 20px;
-      font-weight: 500;
-      /*margin-bottom: 10px;*/
-  }
+.cell h3 {
+    font-size: 20px;
+    font-weight: 500;
+    /*margin-bottom: 10px;*/
+}
 
-  .cell p {
-      font-size: 14px;
-      color: #666;
-  }
+.cell p {
+    font-size: 14px;
+    color: #666;
+}
 
-  .expanded {
-    position: fixed;
-  	top: 0;
-  	left: 0;
-  	width: 100%;
-  	height: 100%;
-  	background: white;
-  	z-index: 10;
-  	display: flex;
-  	align-items: center;
-  	justify-content: center;
-  	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  }
+.expanded {
+  position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: white;
+	z-index: 10;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
 </style>
diff --git a/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
index 6c8f6b0..1fbe025 100644
--- a/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
+++ b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
@@ -47,6 +47,7 @@ onMounted(fetchEntrepreneurs);
 
 
 <style scoped>
+@import "@/components/canvas/style-project.css";
 
 header {
   display: flex;
@@ -114,7 +115,4 @@ header img {
   width: 100px;
   height: auto;
 }
-
-
-@import "@/components/canvas/style-project.css";
 </style>
diff --git a/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
index ebfb9bf..175082b 100644
--- a/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
+++ b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
@@ -37,6 +37,7 @@ export default {
 </script>
 
 <style scoped>
+@import "@/components/canvas/style-project.css";
 
 .canvas {
   display: grid;
@@ -61,5 +62,4 @@ export default {
 .Indicateurs { grid-column: 3 / 5; grid-row: 3 / 5; }
 .Couts { grid-column: 1 / 6; grid-row: 5 / 7; }
 .Revenus { grid-column: 6 / 11; grid-row: 5 / 7; }
-
 </style>