Ajoute le détail des étudiants (big update)

frontend/src/Apps/AboutStudent.vue

@@ -1,16 +1,29 @@
 <script setup>
   import i18n from "@/i18n.js"
-  import {getSelf, getUser} from '../rest/Users.js'
-  import {ref} from "vue";
+  import {getUser} from '../rest/Users.js'
+  import {getSomeonesCurriculumList} from "@/rest/curriculum.js";
 
-  const user = await getSelf();
+  const props = defineProps(['target']);
+  let user = await getUser(props.target);
+  let UserCurriculum = await getSomeonesCurriculumList(props.target);
 
   function getPP(){
-    if(user.value.profilePictureUrl === null){
+    if(user.profilePictureUrl === null){
       return "/Clyde.png"
     }
     return user.profilePictureUrl
   }
+
+  //Cette function renvoie l'année académique concernée si on est dans l'année 2023-2024 elle renvoie 2023
+  //car dans la db l'année scolaire 2023-2024 est representée juste par 2023 (le même système s'applique pour chaque années on prend la borne inférieure
+  function getYear(){
+    let date = new Date();
+    if (date.getMonth() <= 6){
+      return date.getFullYear()-1
+    }
+    return date.getFullYear()
+  }
+
 </script>
 
 <template>
@@ -22,11 +35,46 @@
       <div class = "globalInfos">
         <div class="infosContainer">
           <div>
-            {{user.firstName}} {{user.lastName}}
+            FirstName/Name : {{user.firstName}} {{user.lastName}}
           </div>
           <div>
             E-mail: {{user.email}}
           </div>
+          <div>
+            Adresse : {{user.address}}
+          </div>
+          <div>
+            Pays : {{user.country}}
+          </div>
+          <div>
+            Date de naissance : {{user.birthDate}}
+          </div>
+        </div>
+      </div>
+      <div 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="newcursus"  >
+          <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>
@@ -35,9 +83,8 @@
 </template>
 
 
-<style>
+<style scoped>
 .container{
-
   display:grid;
   grid-template-columns:200px 900px;
   grid-template-rows:200px auto;
@@ -79,4 +126,49 @@
   background-color:rgb(50,50,50);
   border-radius:20px;
 }
+
+.moreInfos {
+  display:grid;
+  grid-template-rows:200px auto;
+  column-gap:50px;
+  row-gap:45px;
+  grid-template-areas:
+  "minfos minfos";
+  grid-template-columns:600px 600px;
+}
+
+.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;
+}
 </style>

frontend/src/Apps/Profil.vue

@@ -210,7 +210,6 @@
 <style scoped>
 
 .container{
-  
   display:grid;
   grid-template-columns:200px 900px;
   grid-template-rows:200px auto;

frontend/src/Apps/StudentsList.vue

@@ -1,19 +1,29 @@
 <script setup>
   import i18n from "@/i18n.js"
-  import { reactive  } from 'vue'
+  import {provide, reactive, ref} from 'vue'
   import { getStudents } from '../rest/Users.js'
-
+  import AboutStudent from "@/Apps/AboutStudent.vue";
   const users = await getStudents();
-</script> 
+
+  let targetRegNo = "";
+  let list = ref(true);
+</script>
+
 <template>
-  <div v-for="item in users">
+  <div v-if="list === false">
+    <AboutStudent :target=targetRegNo />
+    <button style="background-color:rgb(105,05,105);" @click="list = true;">Back</button>
+  </div>
+  <div v-for="item in users" v-if="list === true">
     <div class="bodu">
       <div class="container">
         <div class="status"><a style="margin-left:30px">{{item.status}}</a></div>
         <div class="option"><a>{{item.role}}</a></div>
         <div class="surname"><a>{{item.lastName}}</a></div>
         <div class="firstname"><a>{{item.firstName}}</a></div>
-        <div class="infos"><button style="background-color:rgb(105,05,105);" >{{i18n("request.moreInfos")}}   </button></div>
+        <div class="infos">
+          <button style="background-color:rgb(105,05,105);" @click="list = false; targetRegNo = item.regNo;">{{i18n("request.moreInfos")}} </button>
+        </div>
     </div>
     </div>
   </div>
@@ -29,7 +39,6 @@
     grid-template-areas:
     "status option surname firstname infos"; 
     column-gap:10px;
-    
   }
   
   .infos {

frontend/src/rest/apps.js

@@ -18,7 +18,6 @@ const apps = {
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
-		'/about-students': AboutStudent
 }
 
 const appsList = {
@@ -30,7 +29,6 @@ const appsList = {
 		'ManageCourses': { path: '#/manage-courses', icon: 'fa-book', text: i18n("app.manage.courses") },
 		'StudentsList':{ path: '#/students-list',icon: 'fa-users',text: i18n("app.studentList")},
 		'UsersList':{ path: '#/users-list',icon: 'fa-users',text: i18n("app.users")},
-		'AboutStudent':{ path: '#/about-users', icon: 'fa-users', text:i18n("app.aboutStudent")}
 }
 
 const currentPath = ref(window.location.hash)

frontend/src/rest/curriculum.js

@@ -48,3 +48,7 @@ export async function altercurriculum(id, courses){
 export async function getSelfCurriculum(){
   return restGet("/curriculum");
 }
+
+export async function getSomeonesCurriculumList(user){
+	return restGet("/onescurriculum/"+user)
+}