From a0c38a8d590d15464aa801814254a63cda05b755 Mon Sep 17 00:00:00 2001
From: Wawilski <Karpinskiwal@gmail.com>
Date: Fri, 15 Mar 2024 15:12:01 +0100
Subject: [PATCH] adding list of user PROTO

---
 frontend/public/i18n/EN.txt        |   2 +
 frontend/public/i18n/FR.txt        |   2 +
 frontend/src/App.vue               |  15 ++-
 frontend/src/Apps/Login.vue        |   2 +-
 frontend/src/Apps/Profil.vue       |  13 ++-
 frontend/src/Apps/StudentsList.vue | 160 +++++++++++++++++++++++++++++
 frontend/src/Apps/UsersList.vue    | 157 ++++++++++++++++++++++++++++
 7 files changed, 343 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/Apps/StudentsList.vue
 create mode 100644 frontend/src/Apps/UsersList.vue

diff --git a/frontend/public/i18n/EN.txt b/frontend/public/i18n/EN.txt
index 90a001d..a8ed237 100644
--- a/frontend/public/i18n/EN.txt
+++ b/frontend/public/i18n/EN.txt
@@ -26,6 +26,8 @@ app.inscription.requests=Inscription Requests
 app.manage.courses=Manage Courses
 app.language=Language
 app.manage.profile=Manage profile
+app.studentList=Students List
+app.users=Users
 request.moreInfos=More Infos
 request.accept=Accept
 request.refuse=Refuse
diff --git a/frontend/public/i18n/FR.txt b/frontend/public/i18n/FR.txt
index c2f7689..d0ee8cf 100644
--- a/frontend/public/i18n/FR.txt
+++ b/frontend/public/i18n/FR.txt
@@ -26,6 +26,8 @@ app.inscription.requests=Demandes d'Inscription
 app.manage.courses=Gérer les cours
 app.language=Langue
 app.manage.profile=Gérer le profil
+app.studentList=Liste des étudiants
+app.users=Utilisateurs
 request.moreInfos=Plus d'Infos
 request.accept=Accepter
 request.refuse=Refuser
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7b944de..7729b5b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,12 +9,16 @@
   import Inscription from "./Apps/Inscription.vue"
   import Profil from "./Apps/Profil.vue"
   import Courses from "./Apps/ManageCourses.vue" 
+  import Students from "./Apps/StudentsList.vue"
+  import Users from "./Apps/UsersList.vue"
 
   const apps = {
-  	'/login': LoginPage,
+ 	'/login': LoginPage,
 	'/inscription': Inscription,
   '/profil': Profil,
   '/manage-courses' : Courses,
+  '/students' : Students,
+  '/users' : Users,
   }
   const currentPath = ref(window.location.hash)
 
@@ -105,8 +109,13 @@
         <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>
-    </ul>
-
+        <li><a href="#/students-list">
+            <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">
+            <div class="fa-solid fa-users" style="font-size: 40px"></div>
+            <div class="text">{{i18n("app.users")}}</div></a></li>
+      </ul>
     </div>
     <div class="page">
       <div style=" margin:50px;">
diff --git a/frontend/src/Apps/Login.vue b/frontend/src/Apps/Login.vue
index b7b3242..fbc0dfe 100644
--- a/frontend/src/Apps/Login.vue
+++ b/frontend/src/Apps/Login.vue
@@ -104,7 +104,7 @@
                 <input type="text" v-model="country">
               </div>
               <form novalidate enctype="multipart/form-data" class="inputBox">
-              	<p>ProfilePicture</p> 
+              	<p>{{i18n("profile.picture").toUpperCase()}}</p> 
 				<input type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*">
               </form>
               <div class="inputBox">
diff --git a/frontend/src/Apps/Profil.vue b/frontend/src/Apps/Profil.vue
index 8068690..9c1c962 100644
--- a/frontend/src/Apps/Profil.vue
+++ b/frontend/src/Apps/Profil.vue
@@ -1,12 +1,13 @@
 <script setup>
-  import {reactive, ref} from 'vue'
+  import {reactive, ref } from 'vue'
   import {getUser} from '../rest/Users.js'
   import i18n from "@/i18n.js"
+  import { uploadProfilePicture } from '@/rest/uploads.js'
  /* 
   const user = getUser(); 
 */
  const user =reactive({
-  profilPicture:"../assets/clyde.png",
+  profilePicture:"../assets/Clyde.png",
   lastName:"Ghost",
   firstName:"Clyde",
   role:"student",
@@ -66,6 +67,9 @@ const modif = ref(false);
 
 const toModify = Object.assign({}, user);
 
+function getPP(){
+  return user.profilePicture
+}
 </script>
 
 
@@ -74,7 +78,8 @@ const toModify = Object.assign({}, user);
   <div class="body">
   <div class="container">
     <div class="profilPic">
-      <img class="subContainter" src="../assets/Clyde.png">
+      <img class="subContainter" :src=getPP()>
+
     </div>
       <div class="globalInfos">
         <div v-if="modif==false" class="infosContainer" >
@@ -102,7 +107,7 @@ const toModify = Object.assign({}, user);
         <div v-else class="infosContainer">
           <div>
             {{i18n("profile.picture")}}:
-            <input type="file">
+            <input type="file" @change="user.profilPicture = uploadProfilePicture($event.target.files);" accept="image/*">
           </div>
           <div>
             E-mail:  
diff --git a/frontend/src/Apps/StudentsList.vue b/frontend/src/Apps/StudentsList.vue
new file mode 100644
index 0000000..539996f
--- /dev/null
+++ b/frontend/src/Apps/StudentsList.vue
@@ -0,0 +1,160 @@
+<script setup>
+  import i18n from "@/i18n.js"
+  import { reactive  } from 'vue'
+
+const users =[{
+  state: "Inscrit",
+  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",},
+  {
+  state: "En attente",
+  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.state}}</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>
+        <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>
+</template>
+
+<style scoped>
+  .container{
+    color:white;
+    height:100px;
+    font-size:20px;
+    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-areas:
+    "id type surname firstname infos accept refuse"; 
+    column-gap:10px;
+    
+  }
+  
+  .infos {
+    grid-area:infos;
+    align-self: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;
+    align-self:center;
+  }
+
+  .surname{
+    grid-area:surname;
+    align-self:center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis;
+  }
+
+  .firstname{
+    grid-area:firstname;
+    align-self:center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis;
+  }
+
+  button{
+    font-size:15px;
+     height:50px;
+     width:100px;
+    border:none;
+    border-radius:20px;
+
+  }
+
+  .bodu {
+    width:100%;
+    margin-bottom:10px;
+    border:2px solid black;
+    border-radius:9px;
+    background-color:rgb(50,50,50);
+  }
+
+
+</style>
+
diff --git a/frontend/src/Apps/UsersList.vue b/frontend/src/Apps/UsersList.vue
new file mode 100644
index 0000000..f8c5920
--- /dev/null
+++ b/frontend/src/Apps/UsersList.vue
@@ -0,0 +1,157 @@
+
+<script setup>
+  import i18n from "@/i18n.js"
+  import { reactive  } from 'vue'
+
+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])
+
+</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="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>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .container{
+    color:white;
+    height:100px;
+    font-size:20px;
+    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-areas:
+    "id type surname firstname infos accept refuse"; 
+    column-gap:10px;
+    
+  }
+  
+  .infos {
+    grid-area:infos;
+    align-self: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;
+    align-self:center;
+  }
+
+  .surname{
+    grid-area:surname;
+    align-self:center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis;
+  }
+
+  .firstname{
+    grid-area:firstname;
+    align-self:center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis;
+  }
+
+  button{
+    font-size:15px;
+     height:50px;
+     width:100px;
+    border:none;
+    border-radius:20px;
+
+  }
+
+  .bodu {
+    width:100%;
+    margin-bottom:10px;
+    border:2px solid black;
+    border-radius:9px;
+    background-color:rgb(50,50,50);
+  }
+
+
+</style>
+