Listing users and students

2024-03-15 20:23:33 +01:00
parent 385640c10e
commit b047c4de35
8 changed files with 38 additions and 107 deletions
--- a/frontend/src/assets/Clyde.png
+++ b/frontend/src/assets/Clyde.png
--- a/frontend/public/i18n/EN.txt
+++ b/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
--- a/frontend/public/i18n/FR.txt
+++ b/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
--- a/frontend/src/App.vue
+++ b/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">
--- a/frontend/src/Apps/Profil.vue
+++ b/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";
--- a/frontend/src/Apps/Request.vue
+++ b/frontend/src/Apps/Request.vue
@ -21,7 +21,7 @@
    <div class="type"><a>{{type}}</a></div>
    <div class="surname"><a>{{lastName}}</a></div>
    <div class="firstname"><a>{{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);" >{{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>
--- a/frontend/src/Apps/StudentsList.vue
+++ b/frontend/src/Apps/StudentsList.vue
@ -3,8 +3,8 @@
  import { reactive  } from 'vue'

 const users =[{
-  state: "Inscrit",
-  profilPicture:"../assets/clyde.png",
+  status: "Inscrit",
+  profilPicture:"/Clyde.png",
  lastName:"Ghost",
  firstName:"Clyde",
  role:"student",
@ -31,8 +31,8 @@ const users =[{
  degree:"BAC1",
  password:"CeciEstUnMotDePasse123",},
  {
-  state: "En attente",
-  profilPicture:"../assets/clyde.png",
+  status: "En attente",
+  profilPicture:"/Clyde.png",
  lastName:"Ghost",
  firstName:"Clyde",
  role:"student",
@ -67,14 +67,12 @@ 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="type"><a>{{item.role}}</a></div>
+        <div class="status"><a style="margin-left:30px">{{item.status}}</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>
  </div>
 </template>
@ -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{
-    grid-area:accept;
+  .option{
+    grid-area:option;
    align-self:center;
  }

@ -117,8 +115,8 @@ console.log(users[0])
    align-self:center;
  }

-  .type{
-    grid-area:type;
+  .status{
+    grid-area:status;
    align-self:center;
  }

--- a/frontend/src/Apps/UsersList.vue
+++ b/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 =[{
-  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])
-
+  const users = getAllUsers();
 </script> 
 <template>
  <div v-for="item in users">
    <div class="bodu">
      <div class="container">
-        <div class="id"><a>{{item.faculty}}</a></div>
-        <div class="type"><a>{{item.role}}</a></div>
+        <div class="role"><a style="margin-left:30px">{{i18n(item.role).toUpperCase()}}</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{
-    grid-area:accept;
-    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;
+  .role {
+    grid-area:role;
    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{