MyINPulse/front/MyINPulse-front/src/views/AdminMain.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"
                :project-id="0"
            />

            <!-- <AllEntrep /> -->

            <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>

            <AddProjectForm />
        </div>

        <Agenda :project-r-d-v="rendezVous" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

import Header from "../components/HeaderComponent.vue";
//import Agenda from "../components/AdminAppointments.vue";
import Agenda from "../components/AgendaComponent.vue";
import ProjectComp from "../components/ProjectComponent.vue";
import PendingProjectComponent from "@/components/PendingProjectComponent.vue";
import AddProjectForm from "@/components/AddProjectForm.vue";
import { getAdminProjects } from "@/services/Apis/Admin";
import { getProjectEntrepreneurs } from "@/services/Apis/Shared";
import { type AxiosError, type AxiosResponse } from "axios";
import Project from "@/ApiClasses/Project";
import UserEntrepreneur from "@/ApiClasses/UserEntrepreneur";
//import AllEntrep from "../components/AllEntrep.vue";
const projects = ref<
    {
        name: string;
        link: string;
        members: string[];
    }[]
>([]);

const fallbackProjects = [
    {
        name: "Projet Alpha",
        link: "/canvas",
        members: ["Alice", "Bob", "Charlie"],
    },
    {
        name: "Projet Beta",
        link: "./canvas",
        members: ["David", "Eve", "Frank"],
    },
];

const fetchProjects = () => {
    getAdminProjects(
        (response: AxiosResponse) => {
            const projectList = response.data.map(
                (p: Project) => new Project(p)
            );

            const projectPromises = projectList.map(
                (project: { idProject: number; projectName: string }) =>
                    new Promise<void>((resolve) => {
                        getProjectEntrepreneurs(
                            project.idProject!,
                            (memberResponse: AxiosResponse) => {
                                const members = memberResponse.data.map(
                                    (m: UserEntrepreneur) =>
                                        new UserEntrepreneur(m).userName ||
                                        "Unknown"
                                );

                                projects.value.push({
                                    name:
                                        project.projectName ||
                                        "Unnamed Project",
                                    link: `/project/${project.idProject}`,
                                    members,
                                });

                                resolve();
                            },
                            () => {
                                projects.value.push({
                                    name:
                                        project.projectName ||
                                        "Unnamed Project",
                                    link: `/project/${project.idProject}`,
                                    members: [],
                                });
                                resolve();
                            }
                        );
                    })
            );

            Promise.all(projectPromises).catch(() => {
                // fallback in case member fetches fail
                projects.value = fallbackProjects;
            });
        },
        (error: AxiosError) => {
            console.error("Error fetching admin projects:", error);
            projects.value = fallbackProjects;
        }
    );
};

onMounted(fetchProjects);

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 {
    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);
}

h3 {
    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;
}

button:hover {
    background-color: #0056b3;
}

/* Add spacing between project sections */
#main > * + * {
    margin-top: 2rem;
}
</style>