Clyde/frontend/src/Apps/ManageCourses.vue

<script setup>
  import i18n from "@/i18n.js"
  import {ref} from 'vue'
const cursus=[
  {
  "id": 12,
  "name": "Math pour l'info",
  "credits": 11,
  "faculty": "science",
  "teacher": 42,
  "Assistants": []},
  {
  "id": 42,
  "name": "Operating Systems",
  "credits": 8,
  "faculty": "science",
  "teacher": 62,
  "Assistants": []},
  {
  "id": 52,
  "name": "Fonctionnement des ordinateurs",
  "credits": 11,
  "faculty": "science",
  "teacher": 59,
  "Assistants": []},

  ]

  const profList=[42,45,62,84,59]

  const createMod = ref(false)
  const deleteMod = ref(false)

  const editElementID = ref(""); 

  function editItem(id){
    editElementID = id;
  }

  //Juste pour montrer le Create Mode
  const pattern = {

  "id": 0,
  "name": null,
  "credits": null,
  "faculty": null,
  "teacher": null,
  "Assistants": []}


  let toAdd = Object.assign({}, pattern);

  function addToCourse (){
  if (cursus.length>0){
    toAdd.id=(cursus[cursus.length-1].id)-1;}
    else{
    toAdd.id=0;
    }
    let isnull= false;
    for(const [key, value] of Object.entries(toAdd)){
      if(value === null){
        isnull=true;
      }
    }
      if (!isnull){
      cursus.push(toAdd);
      }
      toAdd= Object.assign({},pattern);
    } 
  

  //Juste pour montrer le Delete Mode
  let toRemove;

  function removeCourse() {
  console.log("ok");
  console.log(toRemove);
  let rem=-1;
  for(const [key, value] of Object.entries(cursus)){
    console.log(key);
    console.log(value)
    if(value.name === toRemove){
         rem = key;
        break;
      }
    }
    console.log(rem)
  if (rem > -1){
    cursus.splice(rem, 1);}
  console.log(cursus);
  }

</script>
<template>
  <div class="body">
    <div v-if="!deleteMod && !createMod" class="listTitle buttonGrid">
      <button class="create" @click="createMod = true">
        {{i18n("courses.create")}}
      </button>
      <button class="delete" @click="deleteMod=true" >
        {{i18n("courses.delete")}}
      </button>
    </div>
    <div v-if="createMod">
      <form class="listElement">
        <div style="margin-bottom:20px;">
         {{i18n("name")}} : 
        <input v-model="toAdd.name">
        </div>
        <div style="margin-bottom:20px;">
          {{i18n("teacher")}} : 
         <select style="max-width:200px;" class="teacher" v-model="toAdd.teacher">
          <option v-for="item in profList">{{item}}</option>
        </select>
        </div>
        <div style="margin-bottom:20px;">
          {{i18n("credits")}} : 
        <input v-model="toAdd.credits">
        </div>
        <div style="margin-bottom:20px;">
          {{i18n("faculty")}} : 
        <input v-model="toAdd.faculty">
        </div>
      <button class="create" @click="createMod=!createMod; addToCourse();"> {{i18n("courses.confirm")}} </button>
      <button style="float:right;" @click="createMod=!createMod">{{i18n("courses.back")}}</button>
      </form>
    </div>
    <div v-if="deleteMod">
      <form class="listElement">
        <div style="margin-bottom:20px;">
          {{i18n("courses.toDelete")}} :
         <select style="max-width:200px;" class="teacher" v-model="toRemove">
          <option v-for="item in cursus">{{item.name}}</option>
          
        </select>
        </div>
        <div style="margin-bottom:20px;">
          {{i18n("login.password")}}: 
        <input >
        </div>
        <div style="margin-bottom:20px;">
          {{i18n("login.cPassword")}} : 
        <input>
        </div>
        <button class="delete" @click="deleteMod=!deleteMod;removeCourse();"> {{i18n("courses.delete")}} </button>
        <button style="float:right;" @click="deleteMod=!deleteMod"> {{i18n("courses.back")}}</button>
      </form>
    </div>

    <div v-if="!createMod && !deleteMod" v-for="item in cursus" :key="item.name">
      <div style ="padding:15px 15px 15px 15px;">
      <button  v-if="editElementID !== item.name"  @click="editElementID = item.name">
        {{i18n("courses.modify")}}
      </button>
      <button v-else @click="editElementID= ''"> {{i18n("courses.confirm")}} </button>
      </div>
      <div  class="listElement" > 
      <div class="containerElement" v-if="editElementID !== item.name" >

        <div class="name"> {{item.name}} </div>
        <div class="teacher">{{item.teacher}}</div> 
        <div class="credits">{{i18n("credits")}}:{{item.credits}}</div>  
      </div>
      <div class="containerElement"v-else>
        <input style="max-width:200px;" class="name" v-model="item.name">
        <select style="max-width:200px;" class="teacher" v-model="item.teacher">
          <option v-for="item in profList">{{item}}</option>
        </select>
        <input style="max-width:100px;"class="credits" v-model="item.credits">  
      </div>
    </div>
    </div>
  </div>
</template>

<style scoped>
.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;
  }

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

.modify{
  font-size:25px;
  padding:10px 10px 10px 10px;
  background-color: rgb(239,60,168);
  cursor: pointer;
  border:none;
  border-radius:15px;
}

  input, select{
  padding:10px 10px 10px 10px; 
  font-size:25px;
  cursor: pointer;
  border:none;
  border-radius:15px;
  }
  button{
    font-size:15px;
     height:50px;
     width:100px;
    border:none;
    border-radius:20px;

  }

  .buttonGrid{
    display:grid;
    grid-template-columns: auto auto;
    column-gap:50px;
    grid-template-areas:
      "create delete";
  }

  .create{
    grid-area:create;
    
    background-color:rgb(0,200,0);

  }

  .delete{
    grid-area:delete;
    background-color:rgb(200,0,0);
  }

  .listTitle{
    display: flex;
    justify-content: center;
    align-items: center;
    width:400px;
    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;

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