front/MyINPulse-front/src/components/ProjectComponent.vue

@@ -1,20 +1,21 @@
 <template>
-  <div class="project">
+    <div class="project" @click="goToLink">
         <div class="project-header">
-      <h2 @click="goToLink">{{ projectName }}</h2>
+            <h2>{{ projectName }}</h2>
             <div class="header-actions">
                 <div class="dropdown-wrapper">
-          <!-- Empêche la propagation du clic vers le parent -->
+                    <button class="contact-button" @click="toggleDropdown">
-          <button class="contact-button" @click.stop="toggleDropdown">
                         Contact
                     </button>
-
+                    <div
-          <div class="dropdown-menu" v-if="isDropdownOpen">
+                        class="contact-dropdown"
-            <button @click.stop="contactAll">Contacter tous</button>
+                        :class="{ 'dropdown-visible': isDropdownOpen }"
+                    >
+                        <button @click="contactAll">Contacter tous</button>
                         <button
                             v-for="(email, index) in entrepreneurEmails"
                             :key="index"
-              @click.stop="contactSingle(email)"
+                            @click="contactSingle(email)"
                         >
                             {{ email }}
                         </button>
@@ -22,9 +23,7 @@
                 </div>
             </div>
         </div>
-
+        <div class="project-body">
-    <!-- Toute cette partie est cliquable -->
-    <div class="project-body" @click="goToLink">
             <ul>
                 <li v-for="(name, index) in listName" :key="index">
                     {{ name }}
@@ -34,12 +33,11 @@
     </div>
 </template>
 
-
 <script setup lang="ts">
-import { defineProps, ref, onMounted, onBeforeUnmount } from "vue";
+import { defineProps } from "vue";
 import { useRouter } from "vue-router";
+import { ref, onMounted } from "vue";
 import axios from "axios";
-
 const IS_MOCK_MODE = true;
 
 const props = defineProps<{
@@ -51,57 +49,12 @@ const props = defineProps<{
 
 const router = useRouter();
 
-const isDropdownOpen = ref(false);
-const entrepreneurEmails = ref<string[]>([]);
-
-// Pour fermer le dropdown si on clique ailleurs
-const handleClickOutside = (event: MouseEvent) => {
-    const dropdown = document.querySelector(".dropdown-wrapper");
-    if (dropdown && !dropdown.contains(event.target as Node)) {
-        isDropdownOpen.value = false;
-    }
-};
-
-onMounted(() => {
-    fetchEntrepreneurs(props.projectId, IS_MOCK_MODE);
-    document.addEventListener("click", handleClickOutside);
-});
-
-onBeforeUnmount(() => {
-    document.removeEventListener("click", handleClickOutside);
-});
-
-const toggleDropdown = () => {
-    isDropdownOpen.value = !isDropdownOpen.value;
-};
-
 const goToLink = () => {
     if (props.projectLink) {
         router.push(props.projectLink);
     }
 };
 
-const fetchEntrepreneurs = async (
-    projectId: number,
-    useMock = IS_MOCK_MODE
-) => {
-    try {
-        const responseData: Entrepreneur[] = useMock
-            ? await mockFetchEntrepreneurs(projectId)
-            : (
-                  await axios.get(
-                      `http://localhost:5000/shared/projects/entrepreneurs/${projectId}`
-                  )
-              ).data;
-
-        entrepreneurEmails.value = responseData.map(
-            (item: Entrepreneur) => item.primaryMail
-        );
-    } catch (error) {
-        console.error("Erreur lors de la récupération des entrepreneurs :", error);
-    }
-};
-
 type Entrepreneur = {
     idUser: number;
     userSurname: string;
@@ -114,8 +67,47 @@ type Entrepreneur = {
     sneeStatus: boolean;
 };
 
+const isDropdownOpen = ref(false);
+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
+) => {
+    try {
+        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: Entrepreneur) => item.primaryMail
+            );
+        } else {
+            console.warn("Aucun entrepreneur trouvé.");
+        }
+    } catch (error) {
+        console.error(
+            "Erreur lors de la récupération des entrepreneurs :",
+            error
+        );
+    }
+};
+
+// Fonction de simulation de l'API
 const mockFetchEntrepreneurs = async (projectId: number) => {
-    return new Promise<Entrepreneur[]>((resolve) => {
+    console.log(`Mock fetch pour projectId: ${projectId}`);
+
+    return new Promise((resolve) => {
         setTimeout(() => {
             resolve([
                 {
@@ -147,18 +139,30 @@ const mockFetchEntrepreneurs = async (projectId: number) => {
 
 const contactAll = () => {
     const allEmails = entrepreneurEmails.value.join(", ");
-    navigator.clipboard.writeText(allEmails).then(() => {
+    navigator.clipboard
+        .writeText(allEmails)
+        .then(() => {
             alert("Tous les emails copiés dans le presse-papiers !");
             window.open("https://partage.bordeaux-inp.fr/", "_blank");
+        })
+        .catch((err) => {
+            console.error("Erreur lors de la copie :", err);
         });
 };
 
 const contactSingle = (email: string) => {
-    navigator.clipboard.writeText(email).then(() => {
+    navigator.clipboard
+        .writeText(email)
+        .then(() => {
             alert(`Adresse copiée : ${email}`);
             window.open("https://partage.bordeaux-inp.fr/", "_blank");
+        })
+        .catch((err) => {
+            console.error("Erreur lors de la copie :", err);
         });
 };
+
+onMounted(() => fetchEntrepreneurs(props.projectId, IS_MOCK_MODE));
 </script>
 
 <style scoped>
@@ -242,37 +246,4 @@ button {
 button:hover {
     background-color: #0056b3;
 }
-
-.dropdown-wrapper {
-  position: relative;
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%; /* juste en dessous du bouton */
-  right: 0;
-  background-color: white;
-  border: 1px solid #ccc;
-  padding: 0.5rem;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 0.25rem;
-  min-width: 150px;
-}
-
-.dropdown-menu button {
-  text-align: left;
-  padding: 0.3rem 0.5rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.dropdown-menu button:hover {
-  background-color: #f0f0f0;
-}
 </style>

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

@@ -3,8 +3,8 @@
         <img src="../icons/logo inpulse.png" alt="INPulse Logo" class="logo" />
 
         <div class="header-actions">
-      <div class="dropdown-wrapper" ref="dropdownRef">
+            <div class="dropdown-wrapper">
-        <button class="contact-button" @click.stop="toggleDropdown">
+                <button class="contact-button" @click="toggleDropdown">
                     Contact
                 </button>
                 <div
@@ -26,13 +26,11 @@
     </header>
 </template>
 
-
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted } from "vue";
 import axios from "axios";
 
 const IS_MOCK_MODE = true;
-const dropdownRef = ref<HTMLElement | null>(null); // ref pour le dropdown
 
 const props = defineProps<{
     projectId: number;
@@ -155,27 +153,7 @@ const copyToClipboard = (email: string) => {
 };
 */
 
-// Cacher le menu si on clique en dehors
+onMounted(() => fetchEntrepreneurs(props.projectId, IS_MOCK_MODE));
-const handleClickOutside = (event: MouseEvent) => {
-    if (
-        isDropdownOpen.value &&
-        dropdownRef.value &&
-        !dropdownRef.value.contains(event.target as Node)
-    ) {
-        isDropdownOpen.value = false;
-    }
-};
-
-onMounted(() => {
-    fetchEntrepreneurs(props.projectId, IS_MOCK_MODE);
-    document.addEventListener("click", handleClickOutside);
-});
-
-
-onBeforeUnmount(() => {
-    document.removeEventListener("click", handleClickOutside);
-});
-
 </script>
 
 <style scoped>