Listing users and students

frontend/public/i18n/EN.txt

@@ -43,6 +43,7 @@ profile.unRegister=Unregister
 profile.course.list=Courses list
 profile.address=Address
 profile.picture=Profile picture
+profile.change.curriculum=Change curriculum
 name=Name
 teacher=Teacher
 student=Student

frontend/public/i18n/FR.txt

@@ -43,6 +43,7 @@ profile.unRegister=Désinscription
 profile.course.list=Liste des cours
 profile.address=Adresse
 profile.picture=Photo de profil
+profile.change.curriculum=Changer cursus
 name=Nom
 teacher=Enseignant
 student=Etudiant

frontend/src/App.vue

@@ -45,7 +45,7 @@
       <ul class="horizontal">
         <li title=home>
             <a class="icon" href="#home">
-                <img class="clyde" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
+                <img class="clyde" src="/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
             </a></li>
         <li title=home>
             <a class="icon" href="#home">
@@ -109,7 +109,7 @@
         <li><a href="#/manage-courses">
             <div class="fa-solid fa-book" style="align-self:center;font-size: 40px;overflow:none;"></div>
             <div class="text">{{i18n("app.manage.courses")}}</div></a></li>
-        <li><a href="#/students-list">
+        <li><a href="#/students">
             <div class="fa-solid fa-users-between-lines" style="font-size: 40px"></div>
             <div class="text">{{i18n("app.studentList")}}</div></a></li>
         <li><a href="#/users">

frontend/src/Apps/Profil.vue

@@ -7,7 +7,7 @@
   const user = getUser(); 
 */
  const user =reactive({
-  profilePicture:"../assets/Clyde.png",
+  profilePicture:"/Clyde.png",
   lastName:"Ghost",
   firstName:"Clyde",
   role:"student",
@@ -103,6 +103,9 @@ function getPP(){
             <button>{{i18n("profile.reRegister")}}</button>
             <button style="float:right;background-color:rgb(150,0,0);">{{i18n("profile.unRegister")}}</button>
           </div>
+          <div>
+            <button>{{i18n("profile.change.curriculum")}}</button>
+          </div>
         </div>
         <div v-else class="infosContainer">
           <div>
@@ -173,7 +176,7 @@ function getPP(){
   grid-template-columns:200px 900px;
   grid-template-rows:200px auto;
   column-gap:30px;
-  row-gap:25px;
+  row-gap:45px;
   grid-template-areas:
   "profilPic globalInfos"
   "minfos minfos";

frontend/src/Apps/StudentsList.vue

@@ -3,8 +3,8 @@
   import { reactive  } from 'vue'
 
 const users =[{
-  state: "Inscrit",
+  status: "Inscrit",
-  profilPicture:"../assets/clyde.png",
+  profilPicture:"/Clyde.png",
   lastName:"Ghost",
   firstName:"Clyde",
   role:"student",
@@ -31,8 +31,8 @@ const users =[{
   degree:"BAC1",
   password:"CeciEstUnMotDePasse123",},
   {
-  state: "En attente",
+  status: "En attente",
-  profilPicture:"../assets/clyde.png",
+  profilPicture:"/Clyde.png",
   lastName:"Ghost",
   firstName:"Clyde",
   role:"student",
@@ -67,13 +67,11 @@ console.log(users[0])
   <div v-for="item in users">
     <div class="bodu">
       <div class="container">
-        <div class="id"><a>{{item.state}}</a></div>
+        <div class="status"><a style="margin-left:30px">{{item.status}}</a></div>
-        <div class="type"><a>{{item.role}}</a></div>
+        <div class="option"><a>{{item.option}}</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="accept"><button style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
-        <div class="refuse"><button style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div>
     </div>
     </div>
   </div>
@@ -83,11 +81,11 @@ console.log(users[0])
   .container{
     color:white;
     height:100px;
-    font-size:20px;
+    font-size:30px;
     display:grid;
-    grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[secondCol-end thirdCol-start]200px[thirdCol-end fourthCol-start]150px[fourthCol-end]150px[fifthCol-end]150px[sixthCol-end]150px[endCol];
+    grid-template-columns:250px 250px 250px 250px 150px;
     grid-template-areas:
-    "id type surname firstname infos accept refuse"; 
+    "status option surname firstname infos"; 
     column-gap:10px;
     
   }
@@ -97,8 +95,8 @@ console.log(users[0])
     align-self:center;
   }
 
-  .accept{
+  .option{
-    grid-area:accept;
+    grid-area:option;
     align-self:center;
   }
 
@@ -117,8 +115,8 @@ console.log(users[0])
     align-self:center;
   }
 
-  .type{
+  .status{
-    grid-area:type;
+    grid-area:status;
     align-self:center;
   }
 

frontend/src/Apps/UsersList.vue

@@ -2,72 +2,15 @@
 <script setup>
   import i18n from "@/i18n.js"
   import { reactive  } from 'vue'
+  import { getAllUsers } from '../rest/Users.js'
 
-const users =[{
+  const users = getAllUsers();
-  profilPicture:"../assets/clyde.png",
-  lastName:"Ghost",
-  firstName:"Clyde",
-  role:"student",
-  address: "Radiator Springs",
-  email:"ClydeGhost@gmail.com",
-  cursus:[
-  {
-  "id": 12,
-  "name": "Math pour l'info",
-  "credits": 11,
-  "faculty": "science",
-  "teacher": 42,
-  "Assistants": []},
-  {
-  "id": 42,
-  "name": "Fonctionnement des ordinateurs",
-  "credits": 11,
-  "faculty": "science",
-  "teacher": 42,
-  "Assistants": []},
-
-  ],
-  option:"IT",
-  degree:"BAC1",
-  password:"CeciEstUnMotDePasse123",},
-  {
-  profilPicture:"../assets/clyde.png",
-  lastName:"Ghost",
-  firstName:"Clyde",
-  role:"student",
-  address: "Radiator Springs",
-  email:"ClydeGhost@gmail.com",
-  cursus:[
-  {
-  "id": 12,
-  "name": "Math pour l'info",
-  "credits": 11,
-  "faculty": "science",
-  "teacher": 42,
-  "Assistants": []},
-  {
-  "id": 42,
-  "name": "Fonctionnement des ordinateurs",
-  "credits": 11,
-  "faculty": "science",
-  "teacher": 42,
-  "Assistants": []},
-
-  ],
-  option:"IT",
-  degree:"BAC1",
-  password:"CeciEstUnMotDePasse123",
-  }]
-
-console.log(users[0])
-
 </script> 
 <template>
   <div v-for="item in users">
     <div class="bodu">
       <div class="container">
-        <div class="id"><a>{{item.faculty}}</a></div>
+        <div class="role"><a style="margin-left:30px">{{i18n(item.role).toUpperCase()}}</a></div>
-        <div class="type"><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>
@@ -78,44 +21,27 @@ console.log(users[0])
 
 <style scoped>
   .container{
+    justify-content:center;
+    align-items:center;
     color:white;
     height:100px;
-    font-size:20px;
+    font-size:30px;
     display:grid;
-    grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[secondCol-end thirdCol-start]200px[thirdCol-end fourthCol-start]150px[fourthCol-end]150px[fifthCol-end]150px[sixthCol-end]150px[endCol];
+    grid-template-columns:250px 250px 250px 150px;
     grid-template-areas:
-    "id type surname firstname infos accept refuse"; 
+    "role surname firstname infos"; 
     column-gap:10px;
     
   }
   
   .infos {
+
     grid-area:infos;
-    align-self:center;
+    align-items:center;
   }
 
-  .accept{
+  .role {
-    grid-area:accept;
+    grid-area:role;
-    align-self:center;
-  }
-
-  .refuse{
-    grid-area:refuse;
-    align-self:center;
-  }
-
-  .titles {
-    grid-area:titles;
-    background-color:rgb(215,215,215);
-  }
-  .id{
-    grid-area:id;
-    margin-left:40px;
-    align-self:center;
-  }
-
-  .type{
-    grid-area:type;
     align-self:center;
   }
 
@@ -125,6 +51,7 @@ console.log(users[0])
     white-space: nowrap;
     overflow: hidden;
     text-overflow:ellipsis;
+
   }
 
   .firstname{
@@ -133,6 +60,7 @@ console.log(users[0])
     white-space: nowrap;
     overflow: hidden;
     text-overflow:ellipsis;
+
   }
 
   button{