Clyde/frontend/src/Apps/Profil.vue

<script setup>
  import {reactive, ref} from 'vue'
  import {getUser} from '../rest/Users.js'
 /* 
  const user = getUser(); 
*/
 const user =reactive({
  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",
  })
  
  /*
  Teacher user
  const user =reactive({
  profilPicture:"../assets/clyde.png",
  lastName:"Ghost",
  firstName:"Clyde",
  role:"teacher",
  address: "Radiator Springs",
  email:"ClydeGhost@gmail.com",
  coursesOwned:[
  {  
  "id": 12,
  "name": "Math pour l'info",
  "faculty": "science",
  "teacher": 42,
  "Assistants": []},
  { 
  "id": 42,
  "name": "Fonctionnement des ordinateurs",
  "credits": 11,
  "faculty": "science",
  "teacher": 42,
  "Assistants": []},

  ],
  faculty:"Science",
  })*/

const modif = ref(false);

const toModify = Object.assign({}, user);

</script>



<template>
  <div class="body">
  <div class="container">
    <div class="profilPic">
      <img class="subContainter" src="../assets/Clyde.png">
    </div>
      <div class="globalInfos">
        <div v-if="modif==false" class="infosContainer" >
          <div>
            {{user.firstName}} {{user.lastName.toUpperCase()}}   
          </div>
          <div>
            E-mail: {{user.email}}      
          </div>
          <div v-if="user.role==='student'">
            {{user.option}} {{user.role.toUpperCase()}} 
          </div>
          <div v-else>
            Faculty: {{user.faculty}} 
            Role: {{user.role}}
          </div>
          <div>
            <button @click="modif=!modif"> Modifier données personnelles </button>
          </div>
          <div v-if="(user.role==='student')">
            <button>Réinscription</button>
            <button style="float:right;background-color:rgb(150,0,0);">Désinscription</button>
          </div>
        </div>
        <div v-else class="infosContainer">
          <div>
            Profil Picture
            <input type="file">
          </div>
          <div>
            E-mail:  
            <input type="mail" v-model="toModify.email" />
          </div>
          <div>
            Address:
            <input type="text" v-model="toModify.address">
          </div>
          <div>
            Password
            <input type="password" v-model="toModify.password">
          </div>
          <div>
            Confirm Password
            <input type="password" id="confirm">
          </div>
          <div>
            <button @click=" modif=!modif">Confirm</button>
          </div>
        </div>
      </div>
      <div v-if="modif==false"class="moreInfos">

        <div v-if="(user.role==='student')">
          <div class="listTitle">
           Liste des cours
          </div>
        <div  class="listElement "
          v-for="item in user.cursus">
          <div class=" containerElement">
            <div class="name"> {{item.name}} </div>
            <div class="teacher">{{item.teacher}}</div> 
            <div class="credits">Credits:{{item.credits}}</div>  
          </div>
          </div>
        </div>
        
        <div>
        </div>
    
      <div v-if="(user.role==='teacher')">
          <div class="listTitle">
           Liste des cours
          </div>
          <div class="listElement " v-for="item in user.coursesOwned">
          {{item.name}}       
          </div>
        </div>
        
        <div>
        </div>
        
      </div>
  </div>
</div>
</template>
<style scoped>

.container{
  
  display:grid;
  grid-template-columns:200px 900px;
  grid-template-rows:200px auto;
  column-gap:30px;
  row-gap:25px;
  grid-template-areas:
  "profilPic globalInfos"
  "minfos minfos";
}

.profilPic{
  grid-area:profilPic;
}

.globalInfos {
  grid-area:globalInfos;
  align-self :center;

}

.subContainter{
  width:100%;
  background-color:rgb(50,50,50);
  border-radius:20px;
  border:4px solid black;
}

.moreInfos {
  grid-area:minfos;
}
.body {
    width:100%;
    margin-bottom:10px;
  }
 .containerElement{ 
   justify-content:center;
    display:grid;
    grid-template-columns:350px 350px 200px;
    grid-template-areas:
    "name teacher credits"; 
    column-gap:10px;
    
  }
  
  .name {
    grid-area:name;
    align-self:center;
  }

  .teacher{
    grid-area:teacher;
    align-self:center;
  }

  .credits{
    grid-area:credits;
    align-self:center;
  }

.listTitle{
    display: flex;
    justify-content: center;
    align-items: center;
    width:200px;
    margin-left:auto;
    margin-right:auto;
    border:2px solid black;
    font-size:25px;
    color:white;
    padding:20px;
    background-color:rgb(50,50,50);
    border-radius:20px;margin-bottom:10px;
}

.listElement{
  border:2px solid black;
  font-size:25px;
  color:white;
  padding:20px;
  background-color:rgb(50,50,50);
  border-radius:20px;
  margin-bottom:10px;
}

.infosContainer {
padding-bottom:50px;
border:2px solid black;
font-size:25px;
color:white;
padding:20px;
background-color:rgb(50,50,50);
border-radius:20px;
}


button{
  border:none;
  background-color:rgb(239, 60, 168);
  border-radius:10px;
  height:35px;
  margin-top:10px;

}

button:hover{
  opacity:0.8;
}
</style>