132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
<script setup>
|
|
|
|
import {addUninscReq, editScholarshipReq, getScholarshipReqById} 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 getScholarshipReqById(props.reqId))
|
|
|
|
const user = req.value.user;
|
|
|
|
const scholarshipData = reactive({
|
|
amount : 0,
|
|
id : req.value.id,
|
|
state : ""
|
|
})
|
|
|
|
function getPP(){
|
|
if(user.profilePictureUrl === null){
|
|
return "/Clyde.png"
|
|
}
|
|
return user.profilePictureUrl
|
|
}
|
|
|
|
async function uploadandrefreshScholarshipRequest(){
|
|
await editScholarshipReq(scholarshipData);
|
|
req.value = await getScholarshipReqById(props.reqId);
|
|
}
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="body">
|
|
<div class="container">
|
|
<div class="profilPic">
|
|
<img class="subContainter" :src=getPP()>
|
|
</div>
|
|
<div class="globalInfos">
|
|
<div class="infosContainer">
|
|
<div>
|
|
Firstname/Name : {{user.firstName}} {{user.lastName}}
|
|
</div>
|
|
<div>
|
|
E-mail: {{user.email}}
|
|
</div>
|
|
<div>
|
|
Adresse : {{user.address}}
|
|
</div>
|
|
<div>
|
|
Country : {{user.country}}
|
|
</div>
|
|
<div>
|
|
Birthdate : {{user.birthDate.slice(0,10)}}
|
|
</div>
|
|
<div>
|
|
<button @click="">Download tax justif document</button>
|
|
<button style="margin-left: 2%">Download residency justif document</button>
|
|
</div>
|
|
<div v-if="req.state == 'Pending'" style="margin-top: 2%; margin-bottom: 2%;">
|
|
Please enter the amount to provide :
|
|
<input type="number" v-model="scholarshipData.amount">
|
|
</div>
|
|
<div>
|
|
<button v-if="req.state === 'Pending'" @click="scholarshipData.state='Accepted';uploadandrefreshScholarshipRequest()">Accept</button>
|
|
<button v-if="req.state === 'Pending'" @click="scholarshipData.state='Refused';uploadandrefreshScholarshipRequest()" 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:10%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
button{
|
|
border:none;
|
|
background-color:rgb(239, 60, 168);
|
|
border-radius:10px;
|
|
height:35px;
|
|
margin-top:10px;
|
|
}
|
|
</style> |