493 lines
16 KiB
Vue
493 lines
16 KiB
Vue
<script setup>
|
|
import {reactive, ref } from 'vue'
|
|
import {getSelf,alterSelf,disconnect,deleteUser} from '../rest/Users.js'
|
|
import {getSelfCurriculum, getAllCurriculums, getSomeonesCurriculumList} from '../rest/curriculum.js'
|
|
import {getCourses} from "../rest/courses.js"
|
|
import i18n from "@/i18n.js"
|
|
import {uploadFile, uploadProfilePicture} from '@/rest/uploads.js'
|
|
import CourseList from "@/Apps/Inscription/CourseList.vue";
|
|
import {editMinerval, getCurrentMinerval} from "@/rest/minerval.js";
|
|
import {postPayment} from "@/rest/payment.js";
|
|
import {addUninscReq, createScholarshipRequest} from "@/rest/requests.js";
|
|
|
|
const user = ref(await getSelf());
|
|
const UserCurriculum = ref("");
|
|
const curricula = ref (await getAllCurriculums());
|
|
const minerv = ref({});
|
|
if(user.value.role === "Student"){
|
|
minerv.value = ref(await getCurrentMinerval(user.value.regNo));
|
|
UserCurriculum.value = await getSomeonesCurriculumList(user.value.regNo);
|
|
}
|
|
|
|
if(user.role === "Teacher"){
|
|
UserCurriculum.value = await getCourses("Teacher");
|
|
}
|
|
const modif = ref(false);
|
|
const curric = ref(false);
|
|
const reg = ref(false);
|
|
const courseslist = ref(false);
|
|
const minerval = ref(false);
|
|
const paymentPage = ref(false);
|
|
const scholarship = ref(false);
|
|
const scholarshipinfos = ref(false);
|
|
const uninscr = ref(false);
|
|
const sure = ref(0);
|
|
|
|
const pattern = {
|
|
profilPictureUrl:null,
|
|
email:null,
|
|
address:null,
|
|
password:null,
|
|
};
|
|
|
|
const patternInfos ={
|
|
email: null,
|
|
password: null,
|
|
passwordConfirm:null,
|
|
id:null,
|
|
}
|
|
|
|
//Used to modelize a payment
|
|
const paymentData={
|
|
studentRegNo: user.value.regNo,
|
|
date:null,
|
|
card:null,
|
|
client:null,
|
|
expDate:null,
|
|
amount: null
|
|
}
|
|
|
|
//Used to modelize a scholarship request
|
|
const scholarshipData=reactive({
|
|
userId: user.value.regNo,
|
|
state:null,
|
|
date:null,
|
|
amount:0,
|
|
taxDocUrl : "",
|
|
residencyDocUrl : ""
|
|
})
|
|
|
|
//Used to post a uninscription request
|
|
const uninscriptionData = reactive({
|
|
reason : null,
|
|
userId : user.value.regNo
|
|
})
|
|
const paymentAmount = ref(0);
|
|
let toModify= Object.assign({}, pattern);
|
|
let personnalInfos = Object.assign({}, patternInfos);
|
|
|
|
function resetInputs(inputs,list){
|
|
inputs=Object.assign({},list);
|
|
}
|
|
|
|
async function ChangeInfos(){
|
|
for (let element in toModify){
|
|
if (element =="email" && (toModify[element] !== null)){
|
|
await alterSelf(user.value.regNo,{email : toModify[element]});
|
|
}
|
|
|
|
if (element =="profilPictureUrl" && (toModify[element] !== null)){
|
|
await alterSelf(user.value.regNo,{ profilPictureUrl : toModify[element]});
|
|
}
|
|
else if(element == "address" && (toModify[element] !== null)){
|
|
await alterSelf(user.value.regNo,{address : toModify[element]});
|
|
}
|
|
else if(element == "password" && (toModify[element] !== null)){
|
|
await alterSelf(user.value.regNo,{password : toModify[element]});
|
|
}
|
|
}
|
|
toModify= Object.assign({},pattern);
|
|
user.value = await getSelf()
|
|
|
|
}
|
|
|
|
function setModify(item){
|
|
toModify.address = item.address;
|
|
toModify.profilPictureUrl = item.profilPictureUrl;
|
|
toModify.email= item.email;
|
|
toModify.password= item.password;
|
|
}
|
|
|
|
|
|
async function unRegister(){
|
|
deleteUser(user.value.regNo);
|
|
disconnect()
|
|
setTimeout(() => {
|
|
window.location.href="#/home";
|
|
}, "500");
|
|
|
|
}
|
|
|
|
function getPP(){
|
|
if(user.value.profilePictureUrl === null){
|
|
return "/Clyde.png"
|
|
}
|
|
return user.profilePictureUrl
|
|
}
|
|
|
|
function getYear(){
|
|
let date = new Date();
|
|
if (date.getMonth() <= 6){
|
|
return date.getFullYear()-1
|
|
}
|
|
return date.getFullYear()
|
|
}
|
|
|
|
//This function travels through the student cursus array and extract the current cursus of the student
|
|
function getActualCurriculumList(){
|
|
let actualCurriculumList = [];
|
|
for (let i = 0; i < UserCurriculum.value.curriculumList.length; i++){
|
|
if (UserCurriculum.value.curriculumList[i].dateyear === getYear()){
|
|
actualCurriculumList.push(UserCurriculum.value.curriculumList[i]);
|
|
}
|
|
}
|
|
return actualCurriculumList
|
|
}
|
|
|
|
async function postScholarshipRequest(file1, type1, file2, type2){
|
|
const a = await uploadFile(file1, type1)
|
|
scholarshipData.taxDocUrl = a.url;
|
|
|
|
const b = await uploadFile(file2, type2)
|
|
scholarshipData.residencyDocUrl = b.url;
|
|
|
|
scholarshipData.date = Date.now();
|
|
|
|
await createScholarshipRequest(scholarshipData)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="body">
|
|
<div class="container" v-if="courseslist == false">
|
|
<div class="profilPic">
|
|
<img class="subContainter" :src=getPP()>
|
|
</div>
|
|
<div class="globalInfos">
|
|
<div v-if="modif==false && curric==false && reg==false && minerval==false && paymentPage == false && scholarship==false && uninscr == false" class="infosContainer">
|
|
<div>
|
|
{{user.firstName}} {{user.lastName}}
|
|
</div>
|
|
<div>
|
|
E-mail: {{user.email}}
|
|
</div>
|
|
<div v-if="user.role==='Student'">
|
|
{{user.option}} {{i18n(user.role)}}
|
|
</div>
|
|
<div v-else>
|
|
Role: {{i18n((user.role))}}
|
|
</div>
|
|
<div>
|
|
<button @click="modif=!modif; setModify(user)"> {{i18n("profile.modify.data")}} </button>
|
|
</div>
|
|
<div v-if="(user.role==='Student')">
|
|
<button @click="reg=!reg">{{i18n("profile.reRegister")}}</button>
|
|
<button @click="uninscr = !uninscr" style="float:right;background-color:rgb(150,0,0);">{{i18n("profile.unRegister")}}</button>
|
|
</div>
|
|
<div v-if="(user.role==='Student')">
|
|
<button @click="curric=!curric">{{i18n("profile.change.curriculum")}}</button>
|
|
</div>
|
|
<div v-if="(user.role==='Student')">
|
|
<button @click="courseslist=!courseslist">Manage Courses</button>
|
|
<button @click="minerval = !minerval" style="margin-left: 2%">Manage minerval</button>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="uninscr" class="infosContainer">
|
|
<div v-if="sure != 2">Please enter the reason you leave the university</div>
|
|
<textarea v-if="sure != 2" v-model="uninscriptionData.reason"></textarea>
|
|
<div v-if="sure != 2">
|
|
<button @click="sure++">Submit</button>
|
|
</div>
|
|
<div v-if="sure==1">
|
|
Are you sure that you want to unregister ?
|
|
<button @click="addUninscReq(uninscriptionData.userId, uninscriptionData.reason);sure++">Yes</button>
|
|
<button @click="sure=0">No</button>
|
|
</div>
|
|
<p v-if="sure==2">You request has been send !</p>
|
|
</div>
|
|
<div v-else-if="minerval" class="infosContainer">
|
|
<div v-if="minerv.value.toPay != 0">
|
|
Payment : {{minerv.value.toPay}}€ left to pay
|
|
<div v-if="minerv.value.paidAmount <= 50">
|
|
<button @click="minerval = !minerval; paymentPage = !paymentPage; paymentAmount = 50">Pay deposit (50€)</button>
|
|
</div>
|
|
<div>
|
|
<button @click="minerval = !minerval; paymentPage = !paymentPage; paymentAmount = minerv.value.toPay">Pay all the rest ({{minerv.value.toPay}}€)</button>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
Payment : School fees have already been paid this year
|
|
</div>
|
|
<div>
|
|
<button @click="scholarship=!scholarship; minerval=!minerval">Ask for a scholarship</button>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="scholarship && !scholarshipinfos" class="infosContainer">
|
|
<p>Please upload the required documents</p>
|
|
<div>
|
|
Tax justification document :
|
|
<input type="file" @change="scholarshipData.taxDocUrl = $event.target.files">
|
|
</div>
|
|
<div>
|
|
Residency justification document :
|
|
<input type="file" style="margin-top:2%" @change="scholarshipData.residencyDocUrl = $event.target.files">
|
|
</div>
|
|
<button style="margin-top: 5%" @click="scholarshipinfos = !scholarshipinfos;postScholarshipRequest(scholarshipData.taxDocUrl, 'JustificationDocument',scholarshipData.residencyDocUrl, 'JustificationDocument');">Submit scholarship request</button>
|
|
</div>
|
|
<div v-else-if="scholarship && scholarshipinfos" class="infosContainer">
|
|
<div>
|
|
Your request has been sent to the inscription service you will get notified when
|
|
the request is reviewed.
|
|
</div>
|
|
<button @click="scholarshipinfos=!scholarshipinfos; scholarship=!scholarship">
|
|
Go back to profile
|
|
</button>
|
|
</div>
|
|
<div v-else-if="paymentPage" class="infosContainer">
|
|
Proceed to payment of {{paymentAmount}}€
|
|
<div style="margin-top: 1%">
|
|
Client:
|
|
<input type="text" v-model="paymentData.client">
|
|
</div>
|
|
<div style="margin-top: 1%">
|
|
Card:
|
|
<input type="text" v-model="paymentData.card">
|
|
</div>
|
|
<div style="margin-top: 1%">
|
|
ExpDate:
|
|
<input type="date" v-model="paymentData.expDate">
|
|
</div>
|
|
<div style="margin-top: 1%">
|
|
<button @click="paymentPage=!paymentPage;minerval=!minerval;paymentData.amount=paymentAmount;paymentData.date=new Date();postPayment(paymentData);minerv.value.toPay -= paymentAmount; minerv.value.paidAmount += paymentAmount; editMinerval(minerv.value)">Process Payment</button>
|
|
</div>
|
|
<div>
|
|
<button @click="minerval = !minerval; paymentPage = !paymentPage;">Back</button>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="modif" class="infosContainer">
|
|
<div>
|
|
{{i18n("profile.picture")}}:
|
|
<input type="file" @change="user.profilPicture = uploadProfilePicture($event.target.files);" accept="image/*">
|
|
</div>
|
|
<div>
|
|
E-mail:
|
|
<input type="mail" v-model="toModify.email" />
|
|
</div>
|
|
<div>
|
|
{{i18n("profile.address")}}:
|
|
<input type="text" v-model="toModify.id">
|
|
</div>
|
|
<div>
|
|
{{i18n("login.password")}}:
|
|
<input type="password" v-model="toModify.password">
|
|
</div>
|
|
<div>
|
|
{{i18n("login.cPassword")}}:
|
|
<input type="password" v-model="toModify.passwordConfirm">
|
|
</div>
|
|
<div>
|
|
<button @click=" modif=!modif; ChangeInfos();">{{i18n("courses.confirm")}}</button>
|
|
<button @click="modif=!modif; resetInputs(toModify,pattern);" style="float:right;">{{i18n("courses.back")}}</button>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="curric" class="infosContainer">
|
|
<div style="height:40px;">
|
|
{{i18n("Curriculum")}}:
|
|
<select v-model="curriculum" >
|
|
<option v-for="item in curricula" style="font-size:20px;" :value="item">{{item.option}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<button @click=" curric=!curric;">{{i18n("courses.confirm")}}</button>
|
|
<button @click="curric=!curric; resetInputs(personnalInfos,patternInfos);" style="float:right;">{{i18n("courses.back")}}</button>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="reg" class="infosContainer">
|
|
<div>
|
|
E-mail:
|
|
<input type="mail" v-model="toModify.email" />
|
|
</div>
|
|
<div>
|
|
ID :
|
|
<input type="text" v-model="toModify.id">
|
|
</div>
|
|
<div>
|
|
{{i18n("login.password")}}:
|
|
<input type="password" v-model="toModify.password">
|
|
</div>
|
|
<div>
|
|
{{i18n("login.cPassword")}}:
|
|
<input type="password" id="confirm">
|
|
</div>
|
|
|
|
<div>
|
|
<button @click=" reg=!reg;">{{i18n("courses.confirm")}}</button>
|
|
<button @click=" reg=!reg; resetInputs(personnalInfos,patternInfos);" style="float:right;">{{i18n("courses.back")}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="user.role == 'Student' && modif==false && curric==false && reg==false && minerval==false && scholarship == false && uninscr == false" class="moreInfos">
|
|
<div class = "oldcursus">
|
|
<div class="listTitle">
|
|
Anciens Cursus
|
|
</div>
|
|
<div class="listElement">
|
|
<div class=" containerElement" v-for="item in UserCurriculum.curriculumList">
|
|
<div class="year" v-if="parseInt(item.dateyear) !== getYear()">Bac {{item.year}}</div>
|
|
<div class="option" v-if="parseInt(item.dateyear) !== getYear()">{{item.option}}</div>
|
|
<div class="dateyear" v-if="parseInt(item.dateyear) !== getYear()">Année {{item.dateyear}}-{{item.dateyear+1}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="actualcursus">
|
|
<div class="listTitle">
|
|
Cursus Actuel
|
|
</div>
|
|
<div class="listElement">
|
|
<div class=" containerElement" v-for="item in UserCurriculum.curriculumList" >
|
|
<div class="year" v-if="parseInt(item.dateyear) === getYear()">Bac {{item.year}}</div>
|
|
<div class="option" v-if="parseInt(item.dateyear) === getYear()">{{item.option}}</div>
|
|
<div class="dateyear" v-if="parseInt(item.dateyear) === getYear()">Année {{item.dateyear}}-{{item.dateyear+1}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="courseslist === true" style="width: 80%">
|
|
<CourseList :cursuslist="getActualCurriculumList()"/>
|
|
<button style="width: 10%; margin-top: 5%" @click="courseslist = false">Return to profile</button>
|
|
</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;
|
|
|
|
}
|
|
|
|
.subContainter{
|
|
width:100%;
|
|
background-color:rgb(50,50,50);
|
|
border-radius:20px;
|
|
border:4px solid black;
|
|
}
|
|
|
|
.moreInfos {
|
|
margin-top: 50%;
|
|
display:grid;
|
|
grid-template-rows:200px auto;
|
|
column-gap:50px;
|
|
row-gap:45px;
|
|
grid-template-areas:
|
|
"minfos minfos";
|
|
grid-template-columns:600px 600px;
|
|
align-items:center;
|
|
justify-content:center;
|
|
margin-left: 320%;
|
|
}
|
|
|
|
.listTitle{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width:250px;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
border:2px solid black;
|
|
font-size:25px;
|
|
color:white;
|
|
padding:20px;
|
|
background-color:rgb(50,50,50);
|
|
border-radius:20px;margin-bottom:10px;
|
|
}
|
|
.body {
|
|
min-width:960px;
|
|
width:100%;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
margin-top:7%;
|
|
}
|
|
.containerElement{
|
|
justify-content:center;
|
|
display:grid;
|
|
grid-template-columns:100px 100px 300px;
|
|
grid-template-areas:
|
|
"year option dateyear";
|
|
column-gap:40px;
|
|
padding-left: 25px;
|
|
|
|
}
|
|
|
|
.name {
|
|
grid-area:name;
|
|
align-self:center;
|
|
}
|
|
|
|
.teacher{
|
|
grid-area:teacher;
|
|
align-self:center;
|
|
}
|
|
|
|
.credits{
|
|
grid-area:credits;
|
|
align-self:center;
|
|
}
|
|
|
|
|
|
.listElement{
|
|
border:2px solid black;
|
|
font-size:25px;
|
|
color:white;
|
|
padding:20px;
|
|
background-color:rgb(50,50,50);
|
|
border-radius:20px;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
button:hover{
|
|
opacity:0.8;
|
|
}
|
|
</style>
|