Listing users and students
This commit is contained in:
parent
385640c10e
commit
b047c4de35
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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,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="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>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user