1
0
forked from PGL/Clyde

Listing users and students

This commit is contained in:
2024-03-15 20:23:33 +01:00
parent 385640c10e
commit b047c4de35
8 changed files with 38 additions and 107 deletions

View File

@ -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{