Clyde/frontend/src/Apps/ManageCourses.vue

<script setup>
  import i18n from "@/i18n.js"
  import {reactive , ref} from 'vue'
  import { getCourses,deleteCourse,alterCourse,createCourse } from "@/rest/courses.js"
  import {getUser, getSelf, getTeachers } from "@/rest/Users.js"
  
  
  const self = await getSelf();

  const curriculum = ref(await getCourses(self.role));
  const profList = await getTeachers();


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

  const editElementID = ref("")

  function editItem(id){
    editElementID.value = id;
  }

  //Juste pour montrer le Create Mode
    
  const pattern = {
    "title":null,
    "credits":null,
    "owner":null,
  }

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

  async function addToCourse(){
    let isnull= false;
     
    for(const [key, value] of Object.entries(toAdd)){
      if(value === null){
        isnull=true;
      }
      
    }
    if (!isnull){
       await createCourse(toAdd.title,toAdd.credits,toAdd.owner);
       toAdd= Object.assign({},pattern);

       curriculum.value = await getCourses(self.role);


    }}
  
  function setModify(item){
     for(const el in profList){

           if(profList[el].regNo === item.owner.regNo){
        toModify.owner= profList[el];
      }
     }
     toModify.credits= item.credits;
     toModify.title= item.title;
  }


  async function patchCourse(course){
    for (let element in toModify){
        if (element =="owner" && (toModify[element].regNo != course.owner.regNo)){
          await alterCourse(course.courseId,{owner:toModify[element].regNo});
        }
        else if(element == "title" && (toModify[element] != course.title)){
         await alterCourse(course.courseId,{title:toModify[element]});
        }
        else if(element == "credits" && (parseInt(toModify[element]) != course.credits)){
         await alterCourse(course.courseId,{credits:parseInt(toModify[element])});
        }
    }
      toModify= Object.assign({},pattern);

      curriculum.value = await getCourses(self.role);

    
  }
  //Juste pour montrer le Delete Mode
  let toRemove = null;
  
  async function removeCourse(course) {
      
     await deleteCourse(course.courseId)
    curriculum.value = await getCourses(self.role);
    toRemove = null;
}

</script>
<template>
  <div class="body">
    <div v-if="!deleteMod && !createMod && (self.role !== 'Teacher')" class="listTitle buttonGrid">
      <button class="create" @click="editElementID= '';createMod = true;">
        {{i18n("courses.createCourse")}}
      </button>
      <button class="delete" @click="deleteMod=true" >
        {{i18n("courses.deleteCourse")}}
      </button>
    </div>
    <div v-if="createMod">
      <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;">
        
        <div style="margin-bottom:20px;">
         {{i18n("name")}} : 
        <input v-model="toAdd.title">
        </div>
        <div style="margin-bottom:20px;">
          {{i18n("Teacher")}} : 
         <select style="max-width:200px;" class="teacher" v-model="toAdd.owner">
           <option v-for="item in profList" :value="item">{{item.lastName}}</option>
        </select>
        </div>
        <div style="margin-bottom:20px;">
          {{i18n("Credits")}} : 
        <input v-model="toAdd.credits">
        </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" style="width:40%;margin-right:auto;margin-left:auto;">
        <div style="margin-bottom:20px;">
          {{i18n("courses.toDelete")}} :
         <select style="max-width:200px;" class="teacher" v-model="toRemove">
          <option v-for="item in curriculum" :value='item'>{{item.title}}</option>
          
        </select>
        </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.title" style="width:50%;margin-left:auto; margin-right:auto;">
      <div  v-if="editElementID !== item.title" style ="padding:15px 15px 15px 15px;">
        <button   @click="editElementID = item.title; setModify(item); ">
        {{i18n("courses.modify")}}
        </button>
      </div>
      <div v-else>
        <button @click="editElementID= '';patchCourse(item)"> {{i18n("courses.confirm")}} </button>
        <button @click="editElementID= '';"> {{i18n("courses.back")}} </button>
      </div>
      <div  class="listElement" >

      <div class="containerElement" v-if="editElementID !== item.title" >

        <div class="name"> {{item.title}} </div>
        <div class="teacher">{{item.owner.lastName}}</div> 
        <div class="credits">{{i18n("Credits")}}:{{item.credits}}</div>  
      </div>
      <div class="containerElement"v-else>
        <input style="max-width:200px;" class="name" v-model="toModify.title">
        <select v-if="self.role != 'Secretary'" style="max-width:200px;" class="teacher" v-model="toModify.owner">
          <option v-for="(item,index) in profList" :value='item'>{{item.lastName}}</option>
        </select>
        <div v-else class="teacher">{{item.owner.lastName}}</div> 
        <input v-if="self.role !='Secretary'"style="max-width:100px;"class="credits" v-model="toModify.credits">  
        <div v-else class="credits">{{i18n("Credits")}}:{{item.credits}}</div>  
      </div>
    </div>
    </div>
  </div>
</template>

<style scoped>
.body {
    width:100%;
    margin-top:3.5%;
  }

 .containerElement{ 
    justify-content:center;
    display:grid;
    grid-template-columns:38.8% 38.8% 22.4%;
    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{
 min-width:625px;
  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{
    min-width:380px;
    display: flex;
    justify-content: center;
    align-items: center;
    width:25%;
    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>