front/MyINPulse-front/fake_data/db.json

@@ -3,6 +3,8 @@
       { "id": 1, "name": "Alice", "email": "alice@example.com" },
       { "id": 2, "name": "Bob", "email": "bob@example.com" },
       { "id": 3, "name": "Charlie", "email": "charlie@example.com" }
+  ],
+  "data": [
+      { "data": "this is a fake data to test api" }
   ]
-  }
-  
+}

front/MyINPulse-front/fake_data/open.sh

@@ -0,0 +1,2 @@
+#!/usr/bin/bash
+json-server --watch db.json --port 5000

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

@@ -7,12 +7,13 @@
       <h3>{{ title }}</h3>
       <p>{{ currentDescription }}</p>
     </div>
-  </template>
+</template>
   
-  <script>
-  import { ref } from "vue";
+<script>
+import { ref, onMounted } from "vue";
+import axios from "axios";
 
-  export default {
+export default {
   props: {
     title: String,
     description: String
@@ -22,11 +23,21 @@
     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";
+    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;
     };
 
@@ -36,11 +47,12 @@
       toggleExpand
     };
   }
-  };
-  </script>
+};
+</script>
 
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
+  
+<style scoped>
+@import "@/components/canvas/style-project.css";
 
   .cell {
   	display: flex;
@@ -82,6 +94,4 @@
   	justify-content: center;
   	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   }
-
-  </style>
-  
+</style>

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

@@ -17,39 +17,35 @@
 </template>
 
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import axios from "axios";
 
-export default {
-  data() {
-    return {
-      isDropdownOpen: false,
-      entrepreneurEmails: [],
-    };
-  },
-  methods: {
-    toggleDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen;
-      console.log("Dropdown toggled:", this.isDropdownOpen); //for debug purposes
-    },
-    async fetchEntrepreneurs() {
+const isDropdownOpen = ref(false);
+const entrepreneurEmails = ref([]);
+
+const toggleDropdown = () => {
+  isDropdownOpen.value = !isDropdownOpen.value;
+  console.log("Dropdown toggled:", isDropdownOpen.value); // for debug purposes
+};
+
+const fetchEntrepreneurs = async () => {
   try {
     const response = await axios.get("http://localhost:5000/entrepreneurs");
-        this.entrepreneurEmails = response.data.map(e => e.email);
+    entrepreneurEmails.value = response.data.map(e => e.email);
   } catch (error) {
     console.error("Erreur lors de la récupération des entrepreneurs:", error);
   }
-    },
-    contactAll() {
-      alert("Contacter tous les entrepreneurs : " + this.entrepreneurEmails.join(", "));
-    },
-  },
-  mounted() {
-    this.fetchEntrepreneurs();
-  },
 };
+
+const contactAll = () => {
+  alert("Contacter tous les entrepreneurs : " + entrepreneurEmails.value.join(", "));
+};
+
+onMounted(fetchEntrepreneurs);
 </script>
 
+
 <style scoped>
 
 header {

front/MyINPulse-front/src/views/AdminMain.vue

@@ -1,10 +1,3 @@
-<script setup lang="ts">
-import Header from '../components/Header.vue';
-import Agenda from "../components/Agenda.vue"
-import ProjectComp from '../components/Project-comp.vue';
-</script>
-
-
 <template>
     <Header />
     <error-wrapper></error-wrapper>
@@ -25,6 +18,9 @@ import ProjectComp from '../components/Project-comp.vue';
 </template>
 
 <script setup lang="ts">
+import Header from '../components/Header.vue';
+import Agenda from "../components/Agenda.vue"
+import ProjectComp from '../components/Project-comp.vue';
 
 import { ref } from "vue";