feat: using bootstrap..

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

@@ -7,9 +7,14 @@
         <button class="contact-button" @click="toggleDropdown">Contact</button>
         <div class="contact-dropdown" :class="{ 'dropdown-visible': isDropdownOpen }">
           <button @click="contactAll">Contacter tous</button>
-          <button v-for="(email, index) in entrepreneurEmails" :key="index">
+          <button
+            v-for="(email, index) in entrepreneurEmails"
+            :key="index"
+            @click="copyToClipboard(email)"
+          >
             {{ email }}
           </button>
+
         </div>
       </div>
 
@@ -23,35 +28,40 @@
 import { ref, onMounted } from "vue";
 import axios from "axios";
 
-const IS_MOCK_MODE = true; 
+const IS_MOCK_MODE = true;
 
 const props = defineProps<{
   projectId: number;
 }>();
 
 type Entrepreneur = {
-  id: number;
-  name: string;
+  idUser: number;
+  userSurname: string;
+  userName: string;
   primaryMail: string;
+  secondaryMail: string;
+  phoneNumber: string;
+  school: string;
+  course: string;
+  sneeStatus: boolean;
 };
 
 const isDropdownOpen = ref(false);
-const entrepreneurEmails = ref([]);
+const entrepreneurEmails = ref<string[]>([]);
 
 const toggleDropdown = () => {
   isDropdownOpen.value = !isDropdownOpen.value;
   console.log("Dropdown toggled:", isDropdownOpen.value);
 };
 
-
-const fetchEntrepreneurs = async (projectId :number, useMock = IS_MOCK_MODE) => {
+const fetchEntrepreneurs = async (projectId: number, useMock = IS_MOCK_MODE) => {
   try {
-    const responseData = useMock
+    const responseData: Entrepreneur[] = useMock
       ? await mockFetchEntrepreneurs(projectId)
       : (await axios.get(`http://localhost:5000/shared/projects/entrepreneurs/${projectId}`)).data;
 
     if (responseData.length > 0) {
-      entrepreneurEmails.value = responseData.map((item) => item.primaryMail);
+      entrepreneurEmails.value = responseData.map((item: Entrepreneur) => item.primaryMail);
     } else {
       console.warn("Aucun entrepreneur trouvé.");
     }
@@ -98,6 +108,14 @@ const contactAll = () => {
   alert("Contacter tous les entrepreneurs : " + entrepreneurEmails.value.join(", "));
 };
 
+const copyToClipboard = (email: string) => {
+  navigator.clipboard.writeText(email).then(() => {
+    alert(`Adresse copiée : ${email}`);
+  }).catch(err => {
+    console.error("Erreur lors de la copie :", err);
+  });
+};
+
 onMounted(() => fetchEntrepreneurs(props.projectId, IS_MOCK_MODE));
 </script>