<script setup> 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"> Create Course </button> <button class="delete" @click="deleteMod=true" > Delete Course </button> </div> <div v-if="createMod"> <form class="listElement"> <div style="margin-bottom:20px;"> Name: <input v-model="toAdd.name"> </div> <div style="margin-bottom:20px;"> 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;"> Credits: <input v-model="toAdd.credits"> </div> <div style="margin-bottom:20px;"> Faculty: <input v-model="toAdd.faculty"> </div> <button class="create" @click="createMod=!createMod; addToCourse();"> Confirm </button> <button style="float:right;" @click="createMod=!createMod"> Back</button> </form> </div> <div v-if="deleteMod"> <form class="listElement"> <div style="margin-bottom:20px;"> Course to delete: <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;"> Password: <input > </div> <div style="margin-bottom:20px;"> Confirm Password: <input> </div> <button class="delete" @click="deleteMod=!deleteMod;removeCourse();"> Delete </button> <button style="float:right;" @click="deleteMod=!deleteMod"> 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"> Modify</button> <button v-else @click="editElementID= ''"> 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">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>