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

191 lines
5.0 KiB
Vue
Raw Normal View History

<script setup>
2024-03-23 18:04:36 +01:00
import i18n from "@/i18n.js"
2024-04-20 12:42:41 +02:00
import {getSelf, getUser} from '../../rest/Users.js'
import {getSomeonesCurriculumList} from "@/rest/curriculum.js";
import {ref} from "vue";
import ExternalCurriculumList from "@/Apps/Inscription/ExternalCurriculumList.vue";
import {getExternalCurriculumByUser} from "@/rest/externalCurriculum.js";
2024-03-23 18:04:36 +01:00
const props = defineProps(['target'])
const user = await getUser(props.target)
const UserCurriculum = await getSomeonesCurriculumList(props.target)
const externalcurrlist = await getExternalCurriculumByUser(user.regNo)
const extercurrlist = ref(false)
2024-03-23 18:04:36 +01:00
2024-04-20 12:42:41 +02:00
const watchingUser = await getSelf()
2024-03-23 18:04:36 +01:00
function getPP(){
if(user.profilePictureUrl === null){
2024-03-23 18:04:36 +01:00
return "/Clyde.png"
}
return user.profilePictureUrl
}
</script>
<template>
<div class="body" v-if="extercurrlist==false">
2024-03-23 18:04:36 +01:00
<div class="container">
<div class="profilPic">
<img class="subContainter" :src=getPP()>
</div>
<div class = "globalInfos">
<div class="infosContainer">
<div>
{{ i18n("firstname/name") }} : {{user.firstName}} {{user.lastName}}
2024-03-23 18:04:36 +01:00
</div>
<div>
{{ i18n("login.guest.email") }}: {{user.email}}
2024-03-23 18:04:36 +01:00
</div>
<div>
{{ i18n("login.guest.address") }} : {{user.address}}
</div>
<div>
{{ i18n("login.guest.country") }} : {{user.country}}
</div>
<div>
{{ i18n("login.guest.birthday") }} : {{user.birthDate}}
</div>
2024-04-20 12:42:41 +02:00
<div>
2024-04-21 18:24:58 +02:00
<button v-if="watchingUser.role === 'Admin' || watchingUser.role === 'InscriptionService' || watchingUser.role === 'Secretary' || watchingUser.regNo === user.regNo"><a :href="user.identityCard">{{i18n("dlidentitycard")}}</a></button>
2024-04-20 12:42:41 +02:00
</div>
<div>
<button @click="extercurrlist=!extercurrlist">{{i18n("seeextcur")}}</button>
</div>
</div>
</div>
<div class="moreInfos" style="margin-top: 15%">
<div class = "oldcursus">
<div class="listTitle">
{{ i18n("oldcursus") }}
</div>
<div class="listElement">
<div class=" containerElement" v-for="item in UserCurriculum.curriculumList">
<div class="year" v-if="item.actual === false">Bac {{item.year}}</div>
<div class="option" v-if="item.actual === false">{{item.option}}</div>
<div class="dateyear" v-if="item.actual === false">{{ i18n("year") }} {{item.dateyear}}-{{item.dateyear+1}}</div>
</div>
</div>
</div>
<div class="newcursus">
<div class="listTitle">
{{ i18n("newcursus") }}
</div>
<div class="listElement">
<div class=" containerElement" v-for="item in UserCurriculum.curriculumList" >
<div class="year" v-if="item.actual === true">Bac {{item.year}}</div>
<div class="option" v-if="item.actual === true">{{item.option}}</div>
<div class="dateyear" v-if="item.actual === true">{{ i18n("year") }} {{item.dateyear}}-{{item.dateyear+1}}</div>
</div>
</div>
2024-03-23 18:04:36 +01:00
</div>
</div>
</div>
</div>
<div v-if="extercurrlist==true">
<ExternalCurriculumList :ext-curr-list="externalcurrlist" :mode="1"></ExternalCurriculumList>
</div>
</template>
2024-03-23 18:04:36 +01:00
<style scoped>
2024-03-23 18:04:36 +01:00
.container{
2024-04-01 11:43:42 +02:00
min-width:675px;
2024-03-23 18:04:36 +01:00
display:grid;
2024-04-01 11:43:42 +02:00
grid-template-columns:10vw 50vw;
2024-03-23 18:04:36 +01:00
grid-template-rows:200px auto;
2024-04-01 11:43:42 +02:00
column-gap:2.7%;
2024-03-23 18:04:36 +01:00
row-gap:45px;
grid-template-areas:
"profilPic globalInfos";
2024-03-23 18:04:36 +01:00
}
.profilPic{
grid-area:profilPic;
}
.globalInfos {
grid-area:globalInfos;
align-self :center;
}
.body {
2024-04-01 11:43:42 +02:00
min-width:960px;
2024-03-23 18:04:36 +01:00
width:100%;
2024-04-01 11:43:42 +02:00
display:flex;
align-items:center;
justify-content:center;
margin-top:5%;
2024-03-23 18:04:36 +01:00
}
.subContainter{
width:100%;
background-color:rgb(50,50,50);
border-radius:20px;
border:4px solid black;
}
2024-03-23 18:04:36 +01:00
.infosContainer {
padding-bottom:50px;
border:2px solid black;
font-size:25px;
color:white;
padding:20px;
background-color:rgb(50,50,50);
border-radius:20px;
}
.moreInfos {
display:inline-grid;
column-gap:50px;
grid-template-areas:
"oldcursus newcursus";
grid-template-columns:600px 600px;
2024-04-01 11:43:42 +02:00
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;
}
.listElement{
border:2px solid black;
font-size:25px;
color:white;
padding:20px;
background-color:rgb(50,50,50);
border-radius:20px;
margin-bottom:10px;
}
.containerElement{
justify-content:center;
display:grid;
grid-template-columns:100px 100px 300px;
grid-template-areas:
"year option dateyear";
column-gap:40px;
padding-left: 25px;
}
button{
border:none;
background-color:rgb(239, 60, 168);
border-radius:10px;
height:35px;
margin-top:10px;
}
</style>