Final Schedule - merge

frontend/src/Apps/LessonRequests.vue

@@ -1,14 +1,19 @@
 
+<!----------------------------------------------------
+	File:  LessonRequests.vue
+	Author: William Karpinski
+	Scope: Extension Horaire
+	Description: Lesson Requests Management Page
+----------------------------------------------------->
+
 <script setup>
 import i18n from "@/i18n.js"
 import {ref} from 'vue'
 import {changeRequestState, getAllRequests} from "@/rest/LessonRequests.js";
 import {getLesson} from "@/rest/lessonSchedule.js";
-import {getCourse} from "@/rest/courses.js"
 import {formatDate, getHoursMinutes} from "@/scheduleFunctions.js";
 
 const requests = ref(await getAllRequests());
-
 const AcceptMod = ref(false);
 const moreInfosMod = ref(false);
 const requestTypes = ["Create", "Modify", "Delete"]
@@ -16,11 +21,21 @@ const editElementID = ref('');
 const chosenLocal = ref("");
 const locals = ["A0B1","A1B1","A2B1","A0B2"];
 const moreInfos = ref({});
+
+
+/*
+ * Change a request's state and refreshes the requests '
+ */
+
 async function upPage(id,review){
   await changeRequestState(id, review) ;
   requests.value = await getAllRequests();
 }
 
+/*
+ * Set correctly the variables after clicking on the ACCEPT button
+ */
+
 async function AcceptSetup(id,type){
   if(type !== 2 ){
     editElementID.value = id
@@ -31,10 +46,9 @@ async function AcceptSetup(id,type){
   }
 }
 
-function editItem(item){
-  editElementID.value = item.id;
-}
-
+/*
+ * Set the infos to show when clicking MORE INFOS
+ */
 async function setMoreInfos(item){
     
     moreInfos.value = Object.assign({},{})
@@ -64,17 +78,17 @@ async function setMoreInfos(item){
 <template>
 
     <div  class="body">
-    <div v-for="item of requests" :key="item.id" :style="{width:[moreInfosMod ? 95:70] + '%'}" class="centerer">
+    <div v-for="item of requests" :key="item.id" :style="{width:[moreInfosMod ? 95:70] + '%'}" class="center">
 
-      <button v-if="moreInfosMod && editElementID == item.id" @click="moreInfosMod = false; editElementID = ''; moreInfos='';">back</button>
+      <button v-if="moreInfosMod && editElementID == item.id" @click="moreInfosMod = false; editElementID = ''; moreInfos='';">{{i18n("courses.back")}}</button>
       <div v-if ="item.state === 'Pending'" class="listElement">
       <div class="containerElement" v-if="editElementID !== item.id">
-          <div class="id">{{requestTypes[item.requestType]}}</div>
-          <div class="surname">{{item.state}}</div>
+          <div class="id">{{i18n(requestTypes[item.requestType].toString())}}</div>
+          <div class="surname">{{i18n(item.state.toString())}}</div>
           <div class="firstname">{{item.user.lastName}}</div>
           
           <div class="infos">
-            <button @click=" setMoreInfos(item); console.log(item);" style="background-color:rgb(105,05,105);" >
+            <button @click=" setMoreInfos(item);" style="background-color:rgb(105,05,105);" >
               {{i18n("request.moreInfos")}}
             </button></div>
           <div class="accept"><button @click="AcceptSetup(item.id,item.requestType);" style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
@@ -87,13 +101,13 @@ async function setMoreInfos(item){
             <select v-model="chosenLocal">
               <option v-for="item in locals">{{item}}</option>
             </select>
-            <button @click="AcceptMod = false;upPage(item.id,{local: chosenLocal, state:'Accepted'})">Accept</button>
+            <button @click="AcceptMod = false;upPage(item.id,{local: chosenLocal, state:'Accepted'})">{{i18n("request.accept")}}</button>
           </div>
           <template  v-if="moreInfosMod" v-for="(key,value) in moreInfos">
 
             <div class="container" v-if="key != null" style="align-self:center;">
               <div style="margin:0 auto 0 auto">
-                {{value}}:
+                {{i18n(value.toString())}}:
               {{key}}
               </div>
               </div>
@@ -105,7 +119,9 @@ async function setMoreInfos(item){
 </template>
 
 <style scoped>
-.centerer{
+
+
+.center{
   margin:0 auto 0 auto;
 }
 
@@ -193,33 +209,10 @@ button{
   width:100%;
   margin-top:3.5%;
 }
+button:hover{
+  opacity:0.8;
+}
 
-.buttonGrid{
-  display:grid;
-  grid-template-columns: auto auto;
-  column-gap:50px;
-  grid-template-areas:
-      "create delete";
-}.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>