feat: adding first fake api (use this cmd in fake_data reportory: json-server --watch db.json --port 5000) + fetching witch axios for now (npm install axios)

front/MyINPulse-front/fake_data/db.json

@@ -0,0 +1,8 @@
+{
+    "entrepreneurs": [
+      { "id": 1, "name": "Alice", "email": "alice@example.com" },
+      { "id": 2, "name": "Bob", "email": "bob@example.com" },
+      { "id": 3, "name": "Charlie", "email": "charlie@example.com" }
+    ]
+  }
+  

front/MyINPulse-front/src/App.vue

@@ -6,12 +6,9 @@ import ErrorWrapper from "@/views/errorWrapper.vue";
 <template>
 
 <Header />
-  <!--<nav>
     <RouterLink to="/">Home</RouterLink> |
     <RouterLink to="/canvas">Canvas</RouterLink>
-  </nav>-->
-
-  <RouterView />
+    <RouterView />
 </template>
 
 

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

@@ -2,35 +2,123 @@
   <header>
     <img src="../icons/logo inpulse.png" alt="INPulse Logo">
     <div class="header-buttons">
-      <div class="contact-menu">
+      <div class="menu">
         <button class="contact-button" @click="toggleDropdown">Contact</button>
-        <div class="contact-dropdown" v-show="isDropdownOpen">
-          <button>Contact All</button>
-          <button>Contact Person 1</button>
-          <button>Contact Person 2</button>
-          <button>Contact Person 3</button>
+        <div class="contact-dropdown" v-bind:class="{ 'dropdown-visible': isDropdownOpen }">
+          <button @click="contactAll">Contact All</button>
+          <button v-for="(email, index) in entrepreneurEmails" :key="index">
+            {{ email }}
+          </button>
         </div>
-        <div class="return"><a href="/">return to list project</a></div>
+        <button class="return-button"><a href="/">Return to list project</a></button>
       </div>
     </div>
   </header>
 </template>
 
+
 <script>
+import axios from "axios";
+
 export default {
   data() {
     return {
-      isDropdownOpen: false
+      isDropdownOpen: false,
+      entrepreneurEmails: [],
     };
   },
   methods: {
     toggleDropdown() {
       this.isDropdownOpen = !this.isDropdownOpen;
-    }
-  }
+      console.log("Dropdown toggled:", this.isDropdownOpen); //for debug purposes
+    },
+    async fetchEntrepreneurs() {
+      try {
+        const response = await axios.get("http://localhost:5000/entrepreneurs");
+        this.entrepreneurEmails = 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();
+  },
 };
 </script>
 
 <style scoped>
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 10px;
+}
+
+.header-buttons {
+  display: flex;
+  align-items: flex-start;
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.contact-button, .return-button {
+  background-color: #000;
+  color: white;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: center;
+}
+
+.return-button a {
+  color: white;
+  text-decoration: none;
+}
+
+.contact-dropdown {
+  display: none;
+  position: absolute;
+  background-color: white;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  margin-top: 5px;
+  z-index: 1000;
+}
+
+.contact-dropdown button {
+  display: block;
+  width: 100%;
+  padding: 5px;
+  text-align: left;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.contact-dropdown button:hover {
+  background-color: #f0f0f0;
+}
+
+.dropdown-visible {
+  display: block;
+}
+
+header img {
+  width: 100px;
+  height: auto;
+}
+
+
 @import "@/components/canvas/style-project.css";
 </style>

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

@@ -3,7 +3,7 @@ import {store} from "../main.ts";
 import {callApi} from "@/services/api.ts";
 import ErrorModal from "@/components/errorModal.vue";
 import {errorList} from "@/services/popupDisplayer.ts";
-import TempModal from "@/components/temp-modal.vue";
+//import TempModal from "@/components/temp-modal.vue";
 import ErrorWrapper from "@/App.vue";
 function addResToTable(id: any){
   return (req: any) => {