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

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