fix: with prettier
This commit is contained in:
Mohamed Maoulainine Maoulainine
@ -1,37 +1,41 @@
|
||||
<template>
|
||||
<div class="project" @click="goToLink" >
|
||||
<div class="project" @click="goToLink">
|
||||
<div class="project-header">
|
||||
<h2 >{{ projectName }}</h2>
|
||||
<div class="header-actions">
|
||||
<h2>{{ projectName }}</h2>
|
||||
<div class="header-actions">
|
||||
<div class="dropdown-wrapper">
|
||||
<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"
|
||||
@click="contactSingle(email)"
|
||||
>
|
||||
{{ email }}
|
||||
<button class="contact-button" @click="toggleDropdown">
|
||||
Contact
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="contact-dropdown"
|
||||
:class="{ 'dropdown-visible': isDropdownOpen }"
|
||||
>
|
||||
<button @click="contactAll">Contacter tous</button>
|
||||
<button
|
||||
v-for="(email, index) in entrepreneurEmails"
|
||||
:key="index"
|
||||
@click="contactSingle(email)"
|
||||
>
|
||||
{{ email }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-body">
|
||||
<div class="project-body">
|
||||
<ul>
|
||||
<li v-for="(name, index) in listName" :key="index">{{ name }}</li>
|
||||
<li v-for="(name, index) in listName" :key="index">
|
||||
{{ name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from "vue";
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter } from "vue-router";
|
||||
import { ref, onMounted } from "vue";
|
||||
import axios from "axios";
|
||||
const IS_MOCK_MODE = true;
|
||||
@ -46,188 +50,200 @@ const props = defineProps<{
|
||||
const router = useRouter();
|
||||
|
||||
const goToLink = () => {
|
||||
if (props.projectLink) {
|
||||
router.push(props.projectLink);
|
||||
}
|
||||
|
||||
if (props.projectLink) {
|
||||
router.push(props.projectLink);
|
||||
}
|
||||
};
|
||||
|
||||
type Entrepreneur = {
|
||||
idUser: number;
|
||||
userSurname: string;
|
||||
userName: string;
|
||||
primaryMail: string;
|
||||
secondaryMail: string;
|
||||
phoneNumber: string;
|
||||
school: string;
|
||||
course: string;
|
||||
sneeStatus: boolean;
|
||||
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<string[]>([]);
|
||||
|
||||
const toggleDropdown = () => {
|
||||
isDropdownOpen.value = !isDropdownOpen.value;
|
||||
console.log("Dropdown toggled:", isDropdownOpen.value);
|
||||
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;
|
||||
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é.");
|
||||
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
|
||||
);
|
||||
}
|
||||
} 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) => {
|
||||
console.log(`Mock fetch pour projectId: ${projectId}`);
|
||||
const mockFetchEntrepreneurs = async (projectId: number) => {
|
||||
console.log(`Mock fetch pour projectId: ${projectId}`);
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve([
|
||||
{
|
||||
idUser: 1,
|
||||
userSurname: "Doe",
|
||||
userName: "John",
|
||||
primaryMail: "john.doe@example.com",
|
||||
secondaryMail: "johndoe@backup.com",
|
||||
phoneNumber: "612345678",
|
||||
school: "ENSEIRB",
|
||||
course: "Info",
|
||||
sneeStatus: false
|
||||
},
|
||||
{
|
||||
idUser: 2,
|
||||
userSurname: "Smith",
|
||||
userName: "Jane",
|
||||
primaryMail: "jane.smith@example.com",
|
||||
secondaryMail: "janesmith@backup.com",
|
||||
phoneNumber: "698765432",
|
||||
school: "ENSEIRB",
|
||||
course: "Info",
|
||||
sneeStatus: true
|
||||
}
|
||||
]);
|
||||
}, 500);
|
||||
});
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve([
|
||||
{
|
||||
idUser: 1,
|
||||
userSurname: "Doe",
|
||||
userName: "John",
|
||||
primaryMail: "john.doe@example.com",
|
||||
secondaryMail: "johndoe@backup.com",
|
||||
phoneNumber: "612345678",
|
||||
school: "ENSEIRB",
|
||||
course: "Info",
|
||||
sneeStatus: false,
|
||||
},
|
||||
{
|
||||
idUser: 2,
|
||||
userSurname: "Smith",
|
||||
userName: "Jane",
|
||||
primaryMail: "jane.smith@example.com",
|
||||
secondaryMail: "janesmith@backup.com",
|
||||
phoneNumber: "698765432",
|
||||
school: "ENSEIRB",
|
||||
course: "Info",
|
||||
sneeStatus: true,
|
||||
},
|
||||
]);
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
const contactAll = () => {
|
||||
const allEmails = entrepreneurEmails.value.join(", ");
|
||||
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 allEmails = entrepreneurEmails.value.join(", ");
|
||||
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(() => {
|
||||
alert(`Adresse copiée : ${email}`);
|
||||
window.open("https://partage.bordeaux-inp.fr/", "_blank");
|
||||
})
|
||||
.catch(err => {
|
||||
console.error("Erreur lors de la copie :", err);
|
||||
});
|
||||
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>
|
||||
.project {
|
||||
background: linear-gradient(to right, #f8f9fb, #ffffff);
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(to right, #f8f9fb, #ffffff);
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project:hover {
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.project-header h2 {
|
||||
font-size: 1.25rem;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.project-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-btn {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
}
|
||||
|
||||
.contact-btn:hover {
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-2px);
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.project-body {
|
||||
margin-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.project-body ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.25rem;
|
||||
margin: 0;
|
||||
list-style-type: disc;
|
||||
padding-left: 1.25rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.project-body ul li {
|
||||
font-size: 0.95rem;
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
font-size: 0.95rem;
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
button {
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
button:hover {
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user