Clyde/frontend/src/Apps/Inscription/ManageRequests.vue

204 lines
6.6 KiB
Vue
Raw Normal View History

2024-03-08 11:54:10 +01:00
<script setup>
2024-03-17 23:19:36 +01:00
import i18n from "@/i18n.js"
2024-03-18 17:28:14 +01:00
import {ref} from 'vue'
2024-03-17 23:19:36 +01:00
import {validateRegister, getAllRegisters } from '@/rest/ServiceInscription.js'
import AboutRequest from "@/Apps/Inscription/AboutRequest.vue";
import {getAllExemptionsRequest, getAllScholarShipsRequest} from "@/rest/requests.js";
import AboutScholarship from "@/Apps/Inscription/AboutScholarship.vue";
2024-03-18 17:28:14 +01:00
const requests = ref(await getAllRegisters());
let targetId = "";
const requestType = ref("inscription");
const filterType = ref("None");
//0 = liste, 1 = détails, 2 = sure?, 3 = manage scholarship
let windowsState = ref(0);
2024-03-18 17:28:14 +01:00
async function upPage(id,review){
await validateRegister(id,review);
2024-03-18 17:28:14 +01:00
requests.value = await getAllRegisters();
}
async function loadRequests(){
if (requestType.value === "inscription"){
requests.value = await getAllRegisters();
}
if (requestType.value === "scholarship"){
requests.value = await getAllScholarShipsRequest();
}
if(requestType.value === "exemption"){
requests.value = await getAllExemptionsRequest();
}
}
2024-03-08 11:54:10 +01:00
</script>
2024-03-17 23:19:36 +01:00
<template>
<div v-if="windowsState === 1">
<AboutRequest :target="targetId"></AboutRequest>
2024-03-17 23:19:36 +01:00
</div>
<div v-if="windowsState === 0">
<div style="margin-top: 2%;margin-left: 2%">
<span>Request type : </span>
<select v-model="requestType" @change="loadRequests()">
<option>inscription</option>
<option>scholarship</option>
<option>exemption</option>
</select>
<span style="margin-left: 5%">
Filter :
<select v-model="filterType">
<option>None</option>
<option>Pending</option>
<option>Accepted</option>
<option>Refused</option>
</select>
</span>
</div>
<div style='display:flex; justify-content:center; min-width:1140px;' v-for="item of requests">
<div class="bodu" style="width: 95%" v-if="filterType == 'None' || filterType == item.state">
<div class="container" style="grid-template-columns:11% 15% 20% 10% 10% 9% 9%;grid-template-areas:'date state equivalencestate surname firstname accept refuse infos';" v-if="requestType === 'inscription'">
<!--
The condition below avoids an error occuring because loadRequests() finishes after the vue refresh
then submissionDate is undefined an it triggers an error in the console despite the fact that it is working
properly at the end.
-->
<div class="date" v-if="item.submissionDate !== undefined">{{item.submissionDate.slice(0, 10)}}</div>
<div class="state" style="font-size: 80%">Approval : {{item.state}}</div>
<div class="equivalencestate" style="font-size: 80%">Teacher approval : {{item.equivalenceState}}</div>
<div class="surname">{{item.lastName}}</div>
<div class="firstname">{{item.firstName}}</div>
<div class="accept" v-if="item.state === 'Pending'"><button @click="windowsState=2;targetId=item.id;" style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
<div class="refuse" v-if="item.state === 'Pending'"><button @click="upPage(item.id,'Refused')" style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div>
<div class="infos"><button style="background-color:rgb(105,05,105);" @click="targetId=item.id;windowsState=1;">{{i18n("request.moreInfos")}}</button></div>
</div>
<div class="container" style="grid-template-columns:25% 15% 15% 25% 14.2%;grid-template-areas:'date reqState studentfirstname studentlastname infos';" v-if="requestType === 'scholarship'">
<div class="date" v-if="item.date !== undefined"> {{item.date.slice(0,10)}}</div>
<div class="studentfirstname">{{item.user.firstName}}</div>
<div class="studentlastname">{{item.user.lastName}}</div>
<div class="reqState">{{item.state}}</div>
<div class="infos" @click="windowsState = 3; targetId=item.id;"><button>More infos</button></div>
</div>
<div class="container" style="grid-template-columns:17% 15% 12% 15% 25%;grid-template-areas:'date reqState studentfirstname studentlastname course infos';"v-if="requestType === 'exemption'">
<div class="date" v-if="item.date != undefined">{{item.date.slice(0,10)}}</div>
<div class="studentfirstname">{{item.user.firstName}}</div>
<div class="studentlastname">{{item.user.lastName}}</div>
<div class="course">{{item.course.title}}</div>
<div class="reqState">{{item.state}}</div>
<div class="infos"><button>More infos</button></div>
</div>
</div>
</div>
2024-03-17 23:19:36 +01:00
</div>
2024-04-01 11:43:42 +02:00
<div style='display:flex; justify-content:center; min-width:1140px;margin-top: 10%' v-if="windowsState === 2">
<p>Etes vous sur de vouloir accepter cette demande ?</p>
<button style="background-color:rgb(105,05,105);" @click="upPage(targetId,'Accepted');windowsState=0;">Valider</button>
<button style="background-color:rgb(105,05,105);" @click="windowsState=0;">Retour</button>
2024-03-17 23:19:36 +01:00
</div>
<div v-if="windowsState == 3">
<AboutScholarship :req-id="targetId"></AboutScholarship>
<div>
<button style="margin-left: 30%" @click="loadRequests();windowsState=0">Back</button>
</div>
</div>
</template>
2024-03-17 23:19:36 +01:00
<style scoped>
.container{
color:white;
height:100px;
font-size:20px;
display:grid;
column-gap:10px;
}
.equivalencestate{
grid-area: equivalencestate;
align-self: center;
}
.studentfirstname{
grid-area: studentfirstname;
align-self: center;
}
.studentlastname{
grid-area: studentlastname;
align-self: center;
}
.course{
grid-area: course;
align-self: center;
}
.reqState{
grid-area: reqState;
align-self: center;
}
2024-03-17 23:19:36 +01:00
.infos {
grid-area:infos;
align-self:center;
}
.accept{
grid-area:accept;
align-self:center;
}
.refuse{
grid-area:refuse;
align-self:center;
}
.date{
grid-area:date;
margin-left:40px;
align-self:center;
}
.state{
grid-area:state;
2024-03-17 23:19:36 +01:00
margin-left:40px;
align-self:center;
}
.surname{
grid-area:surname;
align-self:center;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.firstname{
grid-area:firstname;
align-self:center;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
button{
font-size:15px;
height:50px;
width:100px;
border:none;
border-radius:20px;
}
.bodu {
2024-04-01 11:43:42 +02:00
margin-top:2%;
width:66%;
2024-03-17 23:19:36 +01:00
border:2px solid black;
border-radius:9px;
background-color:rgb(50,50,50);
}
</style>