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

136 lines
3.9 KiB
Vue

<script setup>
import {
addUninscReq, editChangeCurrReq, editChangeCurrReqTeacherState,
editScholarshipReq,
editUnregReq, getChangeCurrReqById,
getScholarshipReqById,
getUnregisterbyId
} from "@/rest/requests.js";
import i18n from "@/i18n.js";
import {getSelf, getUser} from "@/rest/Users.js";
import {reactive, ref} from "vue";
import AboutStudent from "@/Apps/Inscription/AboutStudent.vue";
const props = defineProps(["reqId"])
const req = ref(await getChangeCurrReqById(props.reqId))
const user = await getSelf()
//0 liste, 1 profil
const localwindowstate = ref(0);
const tag = req.value.user.regNo
const windowState = defineModel("windowState")
async function uploadandrefreshChangeRequest(state){
await editChangeCurrReq(req.value.id, state);
}
async function editChangeCurrReqTeacherApproval(state){
await editChangeCurrReqTeacherState(req.value.id, state)
}
</script>
<template>
<div class="body" v-if="localwindowstate === 0">
<div class="container">
<div class="globalInfos">
<div class="infosContainer">
<div>
{{i18n("firstname/name")}} : {{req.user.firstName}} {{req.user.lastName}}
</div>
<div>
{{i18n("regNo")}} : {{req.user.regNo}}
</div>
<div v-if="req.actualCurriculum !== null">
{{i18n("From")}} : Bac {{req.actualCurriculum.year}} {{req.actualCurriculum.option}}
{{i18n("To")}} : Bac {{req.destinationCurriculum.year}} {{req.destinationCurriculum.option}}
</div>
<div v-else>
{{i18n("WantedCursus")}} : Bac {{req.destinationCurriculum.year}} {{req.destinationCurriculum.option}}
</div>
<div>
<button @click="localwindowstate++"> {{ i18n("seeprofile") }} </button>
</div>
<div>
<button v-if="req.state === 'Pending'" @click="req.state='Accepted';uploadandrefreshChangeRequest('Accepted')">{{ i18n("request.accept") }}</button>
<button v-if="req.state === 'Pending'" @click="req.state='Refused';uploadandrefreshChangeRequest('Refused')" style="margin-left: 2%;">{{i18n("request.refuse")}}</button>
</div>
<div v-if="user.role === 'Teacher' || user.role === 'Admin'">
<button v-if="req.teacherApprovalState === 'Pending'" @click="req.teacherApprovalState='Accepted';editChangeCurrReqTeacherApproval('Accepted')">{{i18n("acceptequiv")}}</button>
<button v-if="req.teacherApprovalState === 'Pending'" @click="req.teacherApprovalState='Refused';editChangeCurrReqTeacherApproval('Refused')">{{i18n("refuseequiv")}}</button>
</div>
</div>
</div>
</div>
</div>
<div v-if="localwindowstate === 0" style="margin-left: 23%">
<button @click="windowState = 0" style="margin-left: 10%">{{ i18n("courses.back") }}</button>
</div>
<div v-if="localwindowstate === 1">
<AboutStudent :target="tag"></AboutStudent>
<button @click="localwindowstate--;" style="margin-left: 10%">{{ i18n("courses.back") }}</button>
</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;
}
button{
border:none;
background-color:rgb(239, 60, 168);
border-radius:10px;
height:35px;
margin-top:10px;
}
</style>