piair/MyINPulse
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

front_foundation #9

Closed
mohamed_maoulainine wants to merge 181 commits from front_foundation into main
pull from: front_foundation
merge into: piair:main
Conversation 6 Commits 181 Files Changed 93 +79 -80
2 changed files with 79 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6226c9f632 - Show all commits

110
front/MyINPulse-front/src/components/ProjectComponent.vue
View File

@ -1,40 +1,39 @@
<template> <template>
<div class="project"> <div class="project">
<div class="project-header"> <div class="project-header">
<h2 @click="goToLink">{{ projectName }}</h2> <h2 @click="goToLink">{{ projectName }}</h2>
<div class="header-actions"> <div class="header-actions">
<div class="dropdown-wrapper"> <div class="dropdown-wrapper">
<!-- Empêche la propagation du clic vers le parent --> <!-- Empêche la propagation du clic vers le parent -->
<button class="contact-button" @click.stop="toggleDropdown"> <button class="contact-button" @click.stop="toggleDropdown">
Contact Contact
</button> </button>
<div class="dropdown-menu" v-if="isDropdownOpen"> <div v-if="isDropdownOpen" class="dropdown-menu">
<button @click.stop="contactAll">Contacter tous</button> <button @click.stop="contactAll">Contacter tous</button>
<button <button
v-for="(email, index) in entrepreneurEmails" v-for="(email, index) in entrepreneurEmails"
:key="index" :key="index"
@click.stop="contactSingle(email)" @click.stop="contactSingle(email)"
> >
{{ email }} {{ email }}
</button> </button>
</div> </div>
</div>
</div>
</div> </div>
</div>
</div>
<!-- Toute cette partie est cliquable --> <!-- Toute cette partie est cliquable -->
<div class="project-body" @click="goToLink"> <div class="project-body" @click="goToLink">
<ul> <ul>
<li v-for="(name, index) in listName" :key="index"> <li v-for="(name, index) in listName" :key="index">
{{ name }} {{ name }}
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, ref, onMounted, onBeforeUnmount } from "vue"; import { defineProps, ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
@ -87,7 +86,7 @@ const fetchEntrepreneurs = async (
) => { ) => {
try { try {
const responseData: Entrepreneur[] = useMock const responseData: Entrepreneur[] = useMock
? await mockFetchEntrepreneurs(projectId) ? await mockFetchEntrepreneurs(/*projectId*/)
: ( : (
await axios.get( await axios.get(
adnane marked this conversation as resolved Outdated
piair commented 2025-04-23 10:10:29 +02:00
Outdated
Review
Copy Link

We should not use axios.get EVER, it does not send the authentication token.

We should not use axios.get EVER, it does not send the authentication token.
`http://localhost:5000/shared/projects/entrepreneurs/${projectId}` `http://localhost:5000/shared/projects/entrepreneurs/${projectId}`
@ -98,7 +97,10 @@ const fetchEntrepreneurs = async (
(item: Entrepreneur) => item.primaryMail (item: Entrepreneur) => item.primaryMail
); );
} catch (error) { } catch (error) {
console.error("Erreur lors de la récupération des entrepreneurs :", error); console.error(
"Erreur lors de la récupération des entrepreneurs :",
error
);
} }
}; };
@ -114,7 +116,7 @@ type Entrepreneur = {
sneeStatus: boolean; sneeStatus: boolean;
}; };
adnane marked this conversation as resolved Outdated
piair commented 2025-04-23 10:11:36 +02:00
Outdated
Review
Copy Link

I don't love the fact that the mock tests are in the code here, it should be better to have a server. It's not a big probleme though

I don't love the fact that the mock tests are in the code here, it should be better to have a server. It's not a big probleme though
const mockFetchEntrepreneurs = async (projectId: number) => { const mockFetchEntrepreneurs = async (/*projectId: number*/) => {
return new Promise<Entrepreneur[]>((resolve) => { return new Promise<Entrepreneur[]>((resolve) => {
setTimeout(() => { setTimeout(() => {
resolve([ resolve([
@ -244,35 +246,35 @@ button:hover {
} }
.dropdown-wrapper { .dropdown-wrapper {
position: relative; position: relative;
} }
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 100%; /* juste en dessous du bouton */ top: 100%; /* juste en dessous du bouton */
right: 0; right: 0;
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 0.5rem; padding: 0.5rem;
z-index: 1000; z-index: 1000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 0.25rem; border-radius: 0.25rem;
min-width: 150px; min-width: 150px;
} }
.dropdown-menu button { .dropdown-menu button {
text-align: left; text-align: left;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.dropdown-menu button:hover { .dropdown-menu button:hover {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
</style> </style>

49
front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
View File

@ -1,32 +1,31 @@
<template> <template>
adnane marked this conversation as resolved
piair commented 2025-04-23 10:19:37 +02:00
Review
Copy Link

Doesn't this header overlap with the main app canvas ?

Doesn't this header overlap with the main app canvas ?
<header class="header"> <header class="header">
<img src="../icons/logo inpulse.png" alt="INPulse Logo" class="logo" /> <img src="../icons/logo inpulse.png" alt="INPulse Logo" class="logo" />
<div class="header-actions"> <div class="header-actions">
<div class="dropdown-wrapper" ref="dropdownRef"> <div ref="dropdownRef" class="dropdown-wrapper">
<button class="contact-button" @click.stop="toggleDropdown"> <button class="contact-button" @click.stop="toggleDropdown">
Contact Contact
</button> </button>
<div <div
class="contact-dropdown" class="contact-dropdown"
:class="{ 'dropdown-visible': isDropdownOpen }" :class="{ 'dropdown-visible': isDropdownOpen }"
> >
<button @click="contactAll">Contacter tous</button> <button @click="contactAll">Contacter tous</button>
<button <button
v-for="(email, index) in entrepreneurEmails" v-for="(email, index) in entrepreneurEmails"
:key="index" :key="index"
@click="contactSingle(email)" @click="contactSingle(email)"
> >
{{ email }} {{ email }}
</button> </button>
</div>
</div>
<RouterLink to="/" class="return-button">Retour</RouterLink>
</div> </div>
</div> </header>
<RouterLink to="/" class="return-button">Retour</RouterLink>
</div>
</header>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount } from "vue";
import axios from "axios"; import axios from "axios";
adnane marked this conversation as resolved Outdated
piair commented 2025-04-23 10:19:52 +02:00
Outdated
Review
Copy Link

I won't talk again about axios

I won't talk again about axios
@ -171,11 +170,9 @@ onMounted(() => {
document.addEventListener("click", handleClickOutside); document.addEventListener("click", handleClickOutside);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
document.removeEventListener("click", handleClickOutside); document.removeEventListener("click", handleClickOutside);
}); });
</script> </script>
<style scoped> <style scoped>