fix: with prettier
This commit is contained in:
Mohamed Maoulainine Maoulainine
@ -1,39 +1,38 @@
|
||||
<template>
|
||||
<Header />
|
||||
<error-wrapper></error-wrapper>
|
||||
<div id="container">
|
||||
<div id="main">
|
||||
<h3> Projet en cours </h3>
|
||||
<ProjectComp
|
||||
v-for="(project, index) in projects"
|
||||
:key="index"
|
||||
:project-name="project.name"
|
||||
:list-name="project.members"
|
||||
:project-link="project.link"
|
||||
:project-id="0"
|
||||
/>
|
||||
<div id="container">
|
||||
<div id="main">
|
||||
<h3>Projet en cours</h3>
|
||||
<ProjectComp
|
||||
v-for="(project, index) in projects"
|
||||
:key="index"
|
||||
:project-name="project.name"
|
||||
:list-name="project.members"
|
||||
:project-link="project.link"
|
||||
:project-id="0"
|
||||
/>
|
||||
|
||||
<div id ="main">
|
||||
<h3> Projet en attente </h3>
|
||||
|
||||
<PendingProjectComponent
|
||||
v-for="( project, index) in pendingProjects"
|
||||
:key="index"
|
||||
:project-name="project.name"
|
||||
:creation-date="project.creationDate"
|
||||
/>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h3>Projet en attente</h3>
|
||||
|
||||
<AddProjectForm/>
|
||||
</div>
|
||||
|
||||
<Agenda :project-r-d-v="rendezVous" />
|
||||
<PendingProjectComponent
|
||||
v-for="(project, index) in pendingProjects"
|
||||
:key="index"
|
||||
:project-name="project.name"
|
||||
:creation-date="project.creationDate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AddProjectForm />
|
||||
</div>
|
||||
|
||||
<Agenda :project-r-d-v="rendezVous" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref/*, onMounted*/ } from "vue";
|
||||
import { ref /*, onMounted*/ } from "vue";
|
||||
//import { callApi } from "@/services/api";
|
||||
|
||||
import Header from "../components/HeaderComponent.vue";
|
||||
@ -89,79 +88,73 @@ import AddProjectForm from "@/components/AddProjectForm.vue";
|
||||
onMounted(fetchProjects);
|
||||
*/
|
||||
|
||||
|
||||
const projects = ref([
|
||||
{
|
||||
name: "Projet Alpha",
|
||||
link: "/canvas", // to test
|
||||
members: ["Alice", "Bob", "Charlie"],
|
||||
},
|
||||
{
|
||||
name: "Projet Beta",
|
||||
link: "./canvas", // to test
|
||||
members: ["David", "Eve", "Frank"],
|
||||
},
|
||||
{
|
||||
name: "Projet Alpha",
|
||||
link: "/canvas", // to test
|
||||
members: ["Alice", "Bob", "Charlie"],
|
||||
},
|
||||
{
|
||||
name: "Projet Beta",
|
||||
link: "./canvas", // to test
|
||||
members: ["David", "Eve", "Frank"],
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
const pendingProjects = ref ([
|
||||
{ name: "l'eau", creationDate: "26-02-2024" },
|
||||
{ name: "l'air", creationDate: "09-03-2023" },
|
||||
])
|
||||
const pendingProjects = ref([
|
||||
{ name: "l'eau", creationDate: "26-02-2024" },
|
||||
{ name: "l'air", creationDate: "09-03-2023" },
|
||||
]);
|
||||
|
||||
const rendezVous = ref([
|
||||
{ projectName: "Projet Alpha", date: "2025-03-10", lieu: "P106" },
|
||||
{ projectName: "Projet Beta", date: "2025-04-15", lieu: "Td10" },
|
||||
{ projectName: "Projet Alpha", date: "2025-03-10", lieu: "P106" },
|
||||
{ projectName: "Projet Beta", date: "2025-04-15", lieu: "Td10" },
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#container {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
background-color: #f4f6f9;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
background-color: #f4f6f9;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#main {
|
||||
background-color: #fff;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
background-color: #fff;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
margin-bottom: 1.2rem;
|
||||
border-bottom: 2px solid #ddd;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
margin-bottom: 1.2rem;
|
||||
border-bottom: 2px solid #ddd;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s ease;
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Add spacing between project sections */
|
||||
#main > * + * {
|
||||
margin-top: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,32 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<header>
|
||||
<HeaderCanvas :project-id="1" />
|
||||
</header>
|
||||
<header>
|
||||
<HeaderCanvas :project-id="1" />
|
||||
</header>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="page-title">PAGE CANVAS</h1>
|
||||
<h1 class="page-title">PAGE CANVAS</h1>
|
||||
|
||||
<p class="canvas-help-text">
|
||||
Cliquez sur un champ du tableau pour afficher son contenu en détail ci-dessous.
|
||||
</p>
|
||||
<LeanCanvas :is-admin=isAdmin />
|
||||
|
||||
<div class="info-box">
|
||||
<p>
|
||||
Responsable : <strong>{{ admin.userName }} {{ admin.userSurname }}</strong><br />
|
||||
Contact : <a href="mailto:{{ admin.primaryMail }}">{{ admin.primaryMail }}</a> |
|
||||
<a href="tel:{{ admin.phoneNumber }}">{{ admin.phoneNumber }}</a>
|
||||
<p class="canvas-help-text">
|
||||
Cliquez sur un champ du tableau pour afficher son contenu en détail
|
||||
ci-dessous.
|
||||
</p>
|
||||
</div>
|
||||
<LeanCanvas :is-admin="isAdmin" />
|
||||
|
||||
<div class="info-box">
|
||||
<p>
|
||||
Responsable :
|
||||
<strong>{{ admin.userName }} {{ admin.userSurname }}</strong
|
||||
><br />
|
||||
Contact :
|
||||
<a href="mailto:{{ admin.primaryMail }}">{{
|
||||
admin.primaryMail
|
||||
}}</a>
|
||||
|
|
||||
<a href="tel:{{ admin.phoneNumber }}">{{
|
||||
admin.phoneNumber
|
||||
}}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
<script setup lang="ts">
|
||||
import HeaderCanvas from "../components/canvas/HeaderCanvas.vue";
|
||||
import LeanCanvas from '../components/canvas/LeanCanvas.vue';
|
||||
import { ref, onMounted /*, defineProps*/} from "vue";
|
||||
import LeanCanvas from "../components/canvas/LeanCanvas.vue";
|
||||
import { ref, onMounted /*, defineProps*/ } from "vue";
|
||||
import { axiosInstance } from "@/services/api.ts";
|
||||
|
||||
const IS_MOCK_MODE = true;
|
||||
@ -41,86 +49,93 @@ const props = defineProps<{
|
||||
is_admin = token.includes("MyINPulse-admin")
|
||||
*/
|
||||
|
||||
const isAdmin = 0
|
||||
const isAdmin = 0;
|
||||
|
||||
// Variables pour les informations de l'administrateur
|
||||
const admin = ref({
|
||||
idUser: 0,
|
||||
userSurname: "",
|
||||
userName: "",
|
||||
primaryMail: "",
|
||||
secondaryMail: "",
|
||||
phoneNumber: ""
|
||||
idUser: 0,
|
||||
userSurname: "",
|
||||
userName: "",
|
||||
primaryMail: "",
|
||||
secondaryMail: "",
|
||||
phoneNumber: "",
|
||||
});
|
||||
|
||||
const mockAdminData = {
|
||||
idUser: 1,
|
||||
userSurname: "ALAMI",
|
||||
userName: "Adnane",
|
||||
primaryMail: "mock.admin@example.com",
|
||||
secondaryMail: "admin.backup@example.com",
|
||||
phoneNumber: "0600000000"
|
||||
idUser: 1,
|
||||
userSurname: "ALAMI",
|
||||
userName: "Adnane",
|
||||
primaryMail: "mock.admin@example.com",
|
||||
secondaryMail: "admin.backup@example.com",
|
||||
phoneNumber: "0600000000",
|
||||
};
|
||||
|
||||
// Fonction pour récupérer les données de l'administrateur
|
||||
const fetchAdminData = async (projectId: number, useMock = IS_MOCK_MODE) => {
|
||||
try {
|
||||
if (useMock) {
|
||||
console.log("Utilisation des données mockées pour l'administrateur");
|
||||
admin.value = mockAdminData;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (useMock) {
|
||||
console.log(
|
||||
"Utilisation des données mockées pour l'administrateur"
|
||||
);
|
||||
admin.value = mockAdminData;
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await axiosInstance.get(`/shared/projects/admin/${projectId}`);
|
||||
admin.value = response.data;
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la récupération des données de l'administrateur :", error);
|
||||
}
|
||||
const response = await axiosInstance.get(
|
||||
`/shared/projects/admin/${projectId}`
|
||||
);
|
||||
admin.value = response.data;
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Erreur lors de la récupération des données de l'administrateur :",
|
||||
error
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Appeler la fonction fetch au montage du composant
|
||||
onMounted(() => {
|
||||
const projectId = 1;
|
||||
fetchAdminData(projectId);
|
||||
const projectId = 1;
|
||||
fetchAdminData(projectId);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.page-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.canvas-help-text {
|
||||
text-align: center;
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background-color: #f9f9f9;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
font-family: Arial, sans-serif;
|
||||
width: 30%;
|
||||
max-width: 600px;
|
||||
margin: 20px auto;
|
||||
background-color: #f9f9f9;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
font-family: Arial, sans-serif;
|
||||
width: 30%;
|
||||
max-width: 600px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-box a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.info-box a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,167 +1,162 @@
|
||||
<template>
|
||||
<form class="add-project-form" @submit.prevent="submitForm">
|
||||
<h2>Ajouter un projet</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Nom du projet</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3>Entrepreneur</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="founderName">Nom</label>
|
||||
<input
|
||||
id="founderName"
|
||||
v-model="form.founder.userName"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderSurname">Prénom</label>
|
||||
<input
|
||||
id="founderSurname"
|
||||
v-model="form.founder.userSurname"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderPrimaryMail">Email Principal</label>
|
||||
<input
|
||||
id="founderPrimaryMail"
|
||||
v-model="form.founder.primaryMail"
|
||||
type="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderSecondaryMail">Email Secondaire</label>
|
||||
<input
|
||||
id="founderSecondaryMail"
|
||||
v-model="form.founder.secondaryMail"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderPhoneNumber">Numéro de téléphone</label>
|
||||
<input
|
||||
id="founderPhoneNumber"
|
||||
v-model="form.founder.phoneNumber"
|
||||
type="tel"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderSchool">École</label>
|
||||
<input
|
||||
id="founderSchool"
|
||||
v-model="form.founder.school"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderCourse">Département</label>
|
||||
<input
|
||||
id="founderCourse"
|
||||
v-model="form.founder.course"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderSneeStatus">Statut étudiant entrepreneur</label>
|
||||
<input
|
||||
id="founderSneeStatus"
|
||||
v-model="form.founder.sneeStatus"
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit">Soumettre</button>
|
||||
<h2>Ajouter un projet</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Nom du projet</label>
|
||||
<input id="name" v-model="form.name" type="text" required />
|
||||
</div>
|
||||
|
||||
<h3>Entrepreneur</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="founderName">Nom</label>
|
||||
<input
|
||||
id="founderName"
|
||||
v-model="form.founder.userName"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderSurname">Prénom</label>
|
||||
<input
|
||||
id="founderSurname"
|
||||
v-model="form.founder.userSurname"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderPrimaryMail">Email Principal</label>
|
||||
<input
|
||||
id="founderPrimaryMail"
|
||||
v-model="form.founder.primaryMail"
|
||||
type="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderSecondaryMail">Email Secondaire</label>
|
||||
<input
|
||||
id="founderSecondaryMail"
|
||||
v-model="form.founder.secondaryMail"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderPhoneNumber">Numéro de téléphone</label>
|
||||
<input
|
||||
id="founderPhoneNumber"
|
||||
v-model="form.founder.phoneNumber"
|
||||
type="tel"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderSchool">École</label>
|
||||
<input
|
||||
id="founderSchool"
|
||||
v-model="form.founder.school"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderCourse">Département</label>
|
||||
<input
|
||||
id="founderCourse"
|
||||
v-model="form.founder.course"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="founderSneeStatus">Statut étudiant entrepreneur</label>
|
||||
<input
|
||||
id="founderSneeStatus"
|
||||
v-model="form.founder.sneeStatus"
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit">Soumettre</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { postApi } from "@/services/api";
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { postApi } from "@/services/api";
|
||||
|
||||
const form = ref({
|
||||
name: "",
|
||||
founder: {
|
||||
userSurname: '',
|
||||
userName: '',
|
||||
primaryMail: '',
|
||||
secondaryMail: '',
|
||||
phoneNumber: '',
|
||||
school: '',
|
||||
course: '',
|
||||
sneeStatus: false
|
||||
}
|
||||
});
|
||||
|
||||
function submitForm() {
|
||||
userSurname: "",
|
||||
userName: "",
|
||||
primaryMail: "",
|
||||
secondaryMail: "",
|
||||
phoneNumber: "",
|
||||
school: "",
|
||||
course: "",
|
||||
sneeStatus: false,
|
||||
},
|
||||
});
|
||||
|
||||
function submitForm() {
|
||||
postApi("/entrepreneur/projects/request", form.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
||||
|
||||
.add-project-form {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
|
||||
|
||||
.add-project-form {
|
||||
font-family: "Inter", sans-serif;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Le reste reste inchangé */
|
||||
h2 {
|
||||
}
|
||||
|
||||
/* Le reste reste inchangé */
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h3 {
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
font-size: 20px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
label {
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: auto;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
@ -171,20 +166,20 @@
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
button:active {
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="tel"]:focus {
|
||||
border-color: #4CAF50;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="tel"]:focus {
|
||||
border-color: #4caf50;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,13 +15,11 @@ import ErrorModal from "@/components/errorModal.vue";
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.error-wrapper{
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
/*background-color: blue;*/
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
|
||||
.error-wrapper {
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
/*background-color: blue;*/
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user