fix: api integration

front/MyINPulse-front/src/components/AddProjectForm.vue

@@ -12,24 +12,13 @@
             />
         </div>
 
-        <div class="form-group">
-            <label for="creationDate">Date de création</label>
-            <input
-                id="creationDate"
-                v-model="project.creationDate"
-                type="text"
-                placeholder="JJ-MM-AAAA"
-                required
-            />
-        </div>
-
         <div class="form-group">
             <label for="logo">Logo</label>
             <input
                 id="logo"
                 v-model="project.logo"
                 type="text"
-                placeholder="(à discuter)"
+                placeholder="(Description)"
             />
         </div>
 
@@ -39,16 +28,17 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { postApi } from "@/services/api.ts";
+import Project from "@/ApiClasses/Project";
+import { addProjectManually } from "@/services/Apis/Admin";
 
-const project = ref({
-    projectName: "",
-    creationDate: "",
-    logo: "to be discussed not yet fixed",
-});
+const project = ref(new Project({}));
 
 function submitProject() {
-    postApi("/admin/projects/add", project.value);
+    addProjectManually(
+        project.value.toCreatePayload(),
+        (res) => console.log("Success:", res.data),
+        (err) => console.error("Error:", err)
+    );
 }
 </script>
 

front/MyINPulse-front/src/components/PendingProjectComponent.vue

@@ -15,26 +15,29 @@
 
 <script setup lang="ts">
 import { defineProps } from "vue";
-import { postApi } from "@/services/api";
 import { addNewMessage, color } from "@/services/popupDisplayer";
+import { decidePendingProject } from "@/services/Apis/Admin";
+import ProjectDecision from "@/ApiClasses/ProjectDecision";
 
 const props = defineProps<{
+    projectId?: number;
     projectName: string;
     creationDate: string;
+    adminId?: number;
 }>();
 
-const URI = "/admin/projects/pending/decision";
+const sendDecision = (isAccepted: boolean) => {
+    const decision = new ProjectDecision({
+        projectId: props.projectId,
+        adminId: props.adminId,
+        isAccepted,
+    });
 
-const sendDecision = (decision: "true" | "false") => {
-    postApi(
-        URI,
-        {
-            projectName: props.projectName,
-            decision,
-        },
+    decidePendingProject(
+        decision,
         () => {
             addNewMessage(
-                `Projet ${props.projectName} ${decision === "true" ? "accepté" : "refusé"}`,
+                `Projet ${props.projectName} ${isAccepted ? "accepté" : "refusé"}`,
                 color.Green
             );
         },
@@ -45,8 +48,8 @@ const sendDecision = (decision: "true" | "false") => {
     );
 };
 
-const acceptProject = () => sendDecision("true");
-const refuseProject = () => sendDecision("false");
+const acceptProject = () => sendDecision(true);
+const refuseProject = () => sendDecision(false);
 </script>
 
 <style scoped>

front/MyINPulse-front/src/components/PendingRequestsManager.vue

@@ -0,0 +1,228 @@
+<!-- <template>
+    <section class="pending-requests">
+      <h2>Comptes en attente</h2>
+      <ul v-if="pendingAccounts.length">
+        <li v-for="account in pendingAccounts" :key="account.userId">
+          {{ account.userName }} ({{ account.email }})
+          <button @click="validateAccount(account.userId)">Valider</button>
+        </li>
+      </ul>
+      <p v-else>Aucun compte en attente</p>
+  
+      <h2>Demandes de participation aux projets</h2>
+      <ul v-if="joinRequests.length">
+        <li v-for="request in joinRequests" :key="request.joinRequestId">
+          {{ request.userName }} veut rejoindre le projet {{ request.projectName }}
+          <button @click="decideJoinRequest(request.joinRequestId, true)">Accepter</button>
+          <button @click="decideJoinRequest(request.joinRequestId, false)">Refuser</button>
+        </li>
+      </ul>
+      <p v-else>Aucune demande de participation</p>
+    </section>
+  </template> -->
+
+<template>
+    <section class="section">
+        <h2>Comptes en attente</h2>
+        <div v-if="pendingAccounts.length">
+            <div
+                v-for="account in pendingAccounts"
+                :key="account.userId"
+                class="request-item"
+            >
+                <div class="request-info">
+                    {{ account.userName }} ({{ account.email }})
+                </div>
+                <div class="request-buttons">
+                    <button
+                        class="accept"
+                        @click="validateAccount(account.userId)"
+                    >
+                        Valider
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div v-else class="empty-message">Aucun compte en attente</div>
+    </section>
+
+    <section class="section">
+        <h2>Demandes de participation aux projets</h2>
+        <div v-if="joinRequests.length">
+            <div
+                v-for="request in joinRequests"
+                :key="request.joinRequestId"
+                class="request-item"
+            >
+                <div class="request-info">
+                    {{ request.userName }} veut rejoindre le projet "{{
+                        request.projectName
+                    }}"
+                </div>
+                <div class="request-buttons">
+                    <button
+                        class="accept"
+                        @click="decideJoinRequest(request.joinRequestId, true)"
+                    >
+                        Accepter
+                    </button>
+                    <button
+                        class="reject"
+                        @click="decideJoinRequest(request.joinRequestId, false)"
+                    >
+                        Refuser
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div v-else class="empty-message">Aucune demande de participation</div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import {
+    getPendingAccounts,
+    validateUserAccount,
+    getPendingProjectJoinRequests,
+    decideProjectJoinRequest,
+} from "@/services/Apis/Admin";
+
+type PendingAccount = {
+    userId: number;
+    userName: string;
+    email: string;
+};
+
+type JoinRequest = {
+    joinRequestId: number;
+    userName: string;
+    projectName: string;
+};
+
+const pendingAccounts = ref<PendingAccount[]>([]);
+const joinRequests = ref<JoinRequest[]>([]);
+
+function fetchAccounts() {
+    getPendingAccounts(
+        (res) => (pendingAccounts.value = res.data),
+        (err) => {
+            console.error("Erreur lors du chargement des comptes", err);
+        }
+    );
+}
+
+function fetchJoinRequests() {
+    getPendingProjectJoinRequests(
+        (res) => (joinRequests.value = res.data),
+        (err) => {
+            console.error("Erreur lors du chargement des demandes", err);
+        }
+    );
+}
+
+function validateAccount(userId: number) {
+    validateUserAccount(userId, () => {
+        pendingAccounts.value = pendingAccounts.value.filter(
+            (a) => a.userId !== userId
+        );
+    });
+}
+
+function decideJoinRequest(joinRequestId: number, isAccepted: boolean) {
+    decideProjectJoinRequest(joinRequestId, { isAccepted }, () => {
+        joinRequests.value = joinRequests.value.filter(
+            (r) => r.joinRequestId !== joinRequestId
+        );
+    });
+}
+
+onMounted(() => {
+    fetchAccounts();
+    fetchJoinRequests();
+});
+</script>
+
+<style>
+.section {
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    margin-bottom: 2rem;
+}
+
+.section h2 {
+    font-size: 1.4rem;
+    color: #2c3e50;
+    border-bottom: 2px solid #ddd;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.request-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    background: linear-gradient(to right, #f8f9fb, #ffffff);
+    padding: 1rem 1.25rem;
+    margin-bottom: 1rem;
+    transition: box-shadow 0.2s ease;
+}
+
+.request-item:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+}
+
+.request-info {
+    flex: 1;
+    font-size: 1rem;
+    color: #333;
+}
+
+.request-buttons {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.request-buttons button {
+    padding: 0.45rem 1rem;
+    font-size: 0.9rem;
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+        background-color 0.2s ease,
+        transform 0.2s ease;
+}
+
+.request-buttons button:hover {
+    transform: translateY(-1px);
+}
+
+button.accept {
+    background-color: #4caf50;
+}
+
+button.accept:hover {
+    background-color: #3e8e41;
+}
+
+button.reject {
+    background-color: #e74c3c;
+}
+
+button.reject:hover {
+    background-color: #c0392b;
+}
+
+.empty-message {
+    font-style: italic;
+    color: #777;
+    padding: 1rem 0;
+}
+</style>