Clyde/frontend/src/Apps/ManageCourses.vue

<script setup>
  import i18n from "@/i18n.js"
  import {ref} from 'vue'
  import { getCourses,deleteCourse,alterCourse,createCourse } from "@/rest/courses.js"
  import { getTeachers } from "@/rest/Users.js"

  const curriculum = await getCourses()

  const profList = getTeachers()

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

  const editElementID = ref("")

  function editItem(id){
    editElementID = id;
  }

  //Juste pour montrer le Create Mode
  const pattern = {
  "name": null,
  "credits": null,
  "faculty": null,
  "teacher": null,
  "Assistants": []}


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

  function addToCourse(){
    if (curriculum.length>0){
      let isnull= false;
      for(const [key, value] of Object.entries(toAdd)){
        if(value === null){
          isnull=true;
        }
      }
        if (!isnull){
        createCourse(toAdd.name,toAdd.credits,toAdd.faculty,toAdd.teacher,toAdd.Assistants);
        }
        toAdd= Object.assign({},pattern);
      }  
}
  //Juste pour montrer le Delete Mode
  let toRemove;

  function removeCourse(course) {
     deleteCourse(course.id)
        }

</script>
<template>
  <div class="body">
    <div v-if="!deleteMod && !createMod" class="listTitle buttonGrid">
      <button class="create" @click="createMod = true">
        {{i18n("courses.createCourse")}}
      </button>
      <button class="delete" @click="deleteMod=true" >
        {{i18n("courses.deleteCourse")}}
      </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 curriculum">{{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(toRemove);"> {{i18n("courses.deleteCourse")}} </button>
        <button style="float:right;" @click="deleteMod=!deleteMod"> {{i18n("courses.back")}}</button>
      </form>
    </div>

    <div v-if="!createMod && !deleteMod" v-for="item in curriculum" :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>