piair/MyINPulse
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: api integration

Browse Source
This commit is contained in:
Mohamed Maoulainine Maoulainine
2025-05-02 01:26:08 +02:00
parent 49e52e1826
commit c3ad092512
7 changed files with 374 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
front/MyINPulse-front/src/components/PendingRequestsManager.vue Normal file
View File

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