Rework the profile page

Add the accept/refuse for unreg request

frontend/src/Apps/Inscription/AboutUnregister.vue

@@ -0,0 +1,109 @@
+<script setup>
+
+import {
+  addUninscReq,
+  editScholarshipReq,
+  editUnregReq,
+  getScholarshipReqById,
+  getUnregisterbyId
+} from "@/rest/requests.js";
+import i18n from "@/i18n.js";
+import {getUser} from "@/rest/Users.js";
+import {reactive, ref} from "vue";
+
+const props = defineProps(["reqId"])
+const req = ref(await getUnregisterbyId(props.reqId))
+
+function getPP(){
+  if(user.profilePictureUrl === null){
+    return "/Clyde.png"
+  }
+  return user.profilePictureUrl
+}
+
+async function uploadandrefreshUnregRequest(state){
+  await editUnregReq(req.value.id, state)
+  req.value.state = state
+}
+</script>
+
+
+<template>
+  <div class="body">
+    <div class="container">
+      <div class="globalInfos">
+        <div class="infosContainer">
+          <div>
+            Firstname/Name : {{req.firstName}} {{req.lastName}}
+          </div>
+          <div>
+            E-mail: {{req.email}}
+          </div>
+          <div>
+            regNo : {{req.regNo}}
+          </div>
+          <div>
+            Reason :
+            <input type="text" v-model="req.reason" readonly/>
+          </div>
+          <div>
+            <button v-if="req.state === 'Pending'" @click="req.state='Accepted';uploadandrefreshUnregRequest('Accepted')">Accept</button>
+            <button v-if="req.state === 'Pending'" @click="req.state='Refused';uploadandrefreshUnregRequest('Refused')" style="margin-left: 2%;">Refuse</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container{
+  min-width:675px;
+  display:grid;
+  grid-template-columns:10vw 50vw;
+  grid-template-rows:200px auto;
+  column-gap:2.7%;
+  row-gap:45px;
+  grid-template-areas:
+  "profilPic globalInfos"
+  "minfos minfos";
+}
+
+.profilPic{
+  width:100%;
+  grid-area:profilPic;
+}
+
+.globalInfos {
+  grid-area:globalInfos;
+  align-self :center;
+
+}
+
+.body {
+  min-width:960px;
+  width:100%;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  margin-top:7%;
+}
+
+.subContainter{
+  width:100%;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+  border:4px solid black;
+}
+
+.infosContainer {
+  min-width:350px;
+  padding-bottom:50px;
+  border:2px solid black;
+  font-size:25px;
+  color:white;
+  padding:20px;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+}
+</style>

frontend/src/Apps/Inscription/ManageRequests.vue

@@ -5,6 +5,7 @@
   import AboutRequest from "@/Apps/Inscription/AboutRequest.vue";
   import {getAllExemptionsRequest, getAllScholarShipsRequest, getAllUnregisters} from "@/rest/requests.js";
   import AboutScholarship from "@/Apps/Inscription/AboutScholarship.vue";
+  import AboutUnregister from "@/Apps/Inscription/AboutUnregister.vue";
 
   const requests = ref(await getAllRegisters());
   let targetId = "";
@@ -12,7 +13,7 @@
   const requestType = ref("inscription");
   const filterType = ref("None");
 
-  //0 = liste, 1 = détails, 2 = sure?, 3 = manage scholarship
+  //0 = liste, 1 = détails, 2 = sure?, 3 = manage scholarship, 4 manage unregister
   let windowsState = ref(0);
 
   async function upPage(id,review){
@@ -101,7 +102,7 @@
           <div class="studentlastname">{{item.lastName}}</div>
           <div class="regno">id : {{item.regNo}}</div>
           <div class="reqState">{{item.state}}</div>
-          <div class="infos"><button>More infos</button></div>
+          <div class="infos"><button @click="windowsState=4;targetId=item.id">More infos</button></div>
         </div>
       </div>
     </div>
@@ -111,12 +112,15 @@
     <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>
   </div>
-  <div v-if="windowsState == 3">
+  <div v-if="windowsState === 3">
     <AboutScholarship :req-id="targetId"></AboutScholarship>
     <div>
       <button style="margin-left: 30%" @click="loadRequests();windowsState=0">Back</button>
     </div>
   </div>
+  <div v-if="windowsState === 4">
+    <AboutUnregister :req-id="targetId"></AboutUnregister>
+  </div>
 </template>
 
 <style scoped>

frontend/src/Apps/Inscription/PaymentInfo.vue

@@ -0,0 +1,77 @@
+<script setup>
+import i18n from "@/i18n.js";
+import {ref} from "vue";
+import {getAllPayments} from "@/rest/requests.js";
+
+const paymentsList = await getAllPayments()
+</script>
+
+<template style="margin-top:5%;">
+  <div style="display:flex; justify-content:center; " v-for="item in paymentsList">
+    <div class="bodu">
+      <div class="container">
+        <div class="regNo"><a style="margin-left:30px">RegNo : {{item.studentRegNo}}</a></div>
+        <div class="client"><a>Client : {{item.client}}</a></div>
+        <div class="amount"><a>Amount : {{item.amount}}</a></div>
+        <div class="date" style="margin-left: 10%">{{item.date.slice(0,10)}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container{
+  color:white;
+  height:100px;
+  font-size:30px;
+  display:grid;
+  grid-template-columns:20% 25% 15% 17%;
+  grid-template-areas:
+    "date regNo client amount";
+  column-gap:10px;
+}
+
+.regNo {
+  grid-area:regNo;
+  align-self:center;
+  font-size: 70%;
+}
+
+.client{
+  grid-area:client;
+  align-self:center;
+  font-size: 70%;
+}
+
+.amount{
+  grid-area:amount;
+  align-self:center;
+  font-size: 70%;
+}
+
+.date{
+  grid-area:date;
+  align-self:center;
+  font-size: 70%;
+}
+
+button{
+  font-size:15px;
+  height:50px;
+  width:75%;
+  border:none;
+  border-radius:20px;
+
+}
+
+.bodu {
+  margin-top:2%;
+  width:66%;
+  border:2px solid black;
+  border-radius:9px;
+  background-color:rgb(50,50,50);
+}
+
+
+</style>
+