front/MyINPulse-front/fake_data/db.json

@@ -1,8 +1,10 @@
 {
-    "entrepreneurs": [
+  "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" }
-    ]
-  }
-  
+  ],
+  "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,51 +7,63 @@
       <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 {
-    props: {
-      title: String,
-      description: String
-    },
+export default {
+  props: {
+    title: String,
+    description: String
+  },
 
-    setup(props) {
-      const expanded = ref(false);
-      const currentDescription = ref(props.description);
+  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";
+    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);
+      }
+    };
 
-          expanded.value = !expanded.value;
-      };
+    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>
+    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>

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() {
-      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();
-  },
+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");
+    entrepreneurEmails.value = response.data.map(e => e.email);
+  } catch (error) {
+    console.error("Erreur lors de la récupération des entrepreneurs:", error);
+  }
+};
+
+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";