Remove course

frontend/src/Apps/ManageCourses.vue

@@ -14,18 +14,30 @@ const cursus=[
   "name": "Operating Systems",
   "credits": 8,
   "faculty": "science",
-  "teacher": 14,
+  "teacher": 62,
   "Assistants": []},
   {
   "id": 52,
   "name": "Fonctionnement des ordinateurs",
   "credits": 11,
   "faculty": "science",
-  "teacher": 42,
+  "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,
@@ -35,73 +47,107 @@ const cursus=[
   "teacher": null,
   "Assistants": []}
 
-const profList=[42,45,62,84,59]
-
-  const createMod = ref(false)
-  const deleteMod = ref(false)
-
-  const editElementID = ref(""); 
-
 
   let toAdd = Object.assign({}, pattern);
 
   function addToCourse (){
-    toAdd.id=(cursus[cursus.length-1].id)-1;
+  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)){
-      console.log(value)
       if(value === null){
         isnull=true;
       }
-      console.log(isnull)
     }
-     console.log(toAdd) 
       if (!isnull){
       cursus.push(toAdd);
       }
-      
       toAdd= Object.assign({},pattern);
     } 
   
-  function editItem(id){
-    editElementID = id;
+
+  //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 class="listTitle buttonGrid">
-      <button class="create" @click="createMod = true" v-if="!deleteMod && !createMod">
+    <div v-if="!deleteMod && !createMod" class="listTitle buttonGrid">
+      <button class="create" @click="createMod = true">
         Create Course
       </button>
-      <button v-if="createMod" class="create" @click="createMod=!createMod; addToCourse();"> Confirm </button>
-      <button class="delete" @click="deleteMod=true" v-if="!deleteMod && !createMod">
+      <button class="delete" @click="deleteMod=true" >
         Delete Course
       </button>
     </div>
     <div v-if="createMod">
       <form class="listElement">
-        <div>
+        <div style="margin-bottom:20px;">
          Name: 
         <input v-model="toAdd.name">
         </div>
-        <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>
-          Credit: 
+        <div style="margin-bottom:20px;">
+          Credits: 
         <input v-model="toAdd.credits">
         </div>
-        <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="!createMod" v-for="item in cursus" :key="item.name">
+    <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>
@@ -175,7 +221,7 @@ const profList=[42,45,62,84,59]
 }
 
   input, select{
-  
+  padding:10px 10px 10px 10px; 
   font-size:25px;
   cursor: pointer;
   border:none;