fix + feat: api test + error fix

front/MyINPulse-front/src/components/canvas/CanvasItem.vue

@@ -7,51 +7,63 @@
       <h3>{{ title }}</h3>
       <p>{{ currentDescription }}</p>
     </div>
-  </template>
+</template>
   
-  <script>
-  import { ref } from "vue";
-  
-  export default {
-    props: {
-      title: String,
-      description: String
-    },
+<script>
+import { ref, onMounted } from "vue";
+import axios from "axios";
 
-    setup(props) {
-      const expanded = ref(false);
-      const currentDescription = ref(props.description);
-  
-      const toggleExpand = () => {
-        currentDescription.value = expanded.value
-          ? "3 problèmes essentiels à résoudre pour le client"
-          : "FAKE DATA";
+export default {
+  props: {
+    title: String,
+    description: String
+  },
+
+  setup(props) {
+    const expanded = ref(false);
+    const currentDescription = ref(props.description);
+
+    const fetchData = async () => {
+      try {
+        const response = await axios.get("http://localhost:5000/data"); // to edit later!
+        currentDescription.value = response.data.map(e => e.data);
+      } catch (error) {
+        console.error("Erreur lors de la récupération des données :", error);
+      }
+    };
+
+    const toggleExpand = async () => {
+      if (!expanded.value) {
+        await fetchData();
+      } else {
+        currentDescription.value = "3 problèmes essentiels à résoudre pour le client";
+      }
+      expanded.value = !expanded.value;
+    };
+
+    return {
+      expanded,
+      currentDescription,
+      toggleExpand
+    };
+  }
+};
+</script>
 
-          expanded.value = !expanded.value;
-      };
-  
-      return {
-        expanded,
-        currentDescription,
-        toggleExpand
-      };
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
   
+<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;
+  	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);
@@ -69,7 +81,7 @@
       color: #666;
   }
 
-	.expanded {
+  .expanded {
     position: fixed;
   	top: 0;
   	left: 0;
@@ -81,7 +93,5 @@
   	align-items: center;
   	justify-content: center;
   	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-	}
-
-  </style>
-  
+  }
+</style>