139 lines
3.4 KiB
Vue

<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"
/>
<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>
<Agenda :project-r-d-v="rendezVous" />
</div>
<AddProjectForm/>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { callApi } from "@/services/api";
import Header from "../components/HeaderComponent.vue";
import Agenda from "../components/Agenda.vue";
import ProjectComp from "../components/ProjectComponent.vue";
import PendingProjectComponent from "@/components/PendingProjectComponent.vue";
import AddProjectForm from "@/components/AddProjectForm.vue";
const PORT = "8081";
const URI = `http://localhost:${PORT}`;
//const projects = ref<{ name: string; link: string; members: string[] }[]>([]);
/* const fetchProjects = () => {
callApi(
`${URI}/admin/projects`,
async (response) => {
console.log(response);
const projectList = response.data;
const projectPromises = projectList.map((project: any) => {
return new Promise(async (resolve) => {
callApi(
`${URI}/shared/projects/entrepreneurs/${project.idProject}`,
(memberResponse) => {
const members = memberResponse.data.map((m: any) => m.userName);
resolve({
name: project.projectName,
link: `/project/${project.idProject}`,
members,
});
},
() => {
// Error fetching members, still resolve with empty members
resolve({
name: project.projectName,
link: `/project/${project.idProject}`,
members: [],
});
}
);
});
});
projects.value = await Promise.all(projectPromises);
},
(error) => {
console.error("Error fetching projects:", error);
}
);
};
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"],
},
]);
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" },
]);
</script>
<style scoped>
#container {
margin: 0;
display: grid;
grid-template-columns: 3fr 1fr; /* Main body takes 3/4, agenda 1/4 */
height: 100vh; /* Full viewport height */
}
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
</style>