Request and changes
This commit is contained in:
220
frontend/src/Apps/LessonRequests.vue
Normal file
220
frontend/src/Apps/LessonRequests.vue
Normal file
@ -0,0 +1,220 @@
|
||||
|
||||
<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 {formatDate, getHoursMinutes} from "@/scheduleFunctions.js";
|
||||
|
||||
const requests = ref(await getAllRequests());
|
||||
|
||||
const AcceptMod = ref(false);
|
||||
const moreInfosMod = ref(false);
|
||||
const requestTypes = ["Create", "Modify", "Delete"]
|
||||
const editElementID = ref('');
|
||||
const chosenLocal = ref("");
|
||||
const locals = ["A0B1","A1B1","A2B1","A0B2"];
|
||||
const moreInfos = ref({});
|
||||
async function upPage(id,review){
|
||||
await changeRequestState(id, review) ;
|
||||
requests.value = await getAllRequests();
|
||||
}
|
||||
|
||||
async function AcceptSetup(id,type){
|
||||
if(type !== 2 ){
|
||||
AcceptMod.value = !AcceptMod.value;
|
||||
}
|
||||
else{
|
||||
await upPage(id,{local: null,state:'Accepted'});
|
||||
}
|
||||
}
|
||||
|
||||
function editItem(item){
|
||||
editElementID.value = item.id;
|
||||
}
|
||||
|
||||
async function setMoreInfos(item){
|
||||
moreInfos.value["requestType"] = requestTypes[item.requestType]
|
||||
moreInfos.value["day"] = formatDate(new Date(item.lessonStart))
|
||||
moreInfos.value["start"] = getHoursMinutes(new Date(item.lessonStart));
|
||||
moreInfos.value["end"] = getHoursMinutes(new Date(item.lessonEnd));
|
||||
moreInfos.value["lessonType"] = item.lessonType;
|
||||
[item["course"] == null ? moreInfos.value["course"] = null: moreInfos.value["course"]=item.course.title]
|
||||
if (item.requestType==1 || item.requestType == 2){
|
||||
let temp = await getLesson(item.lessonId);
|
||||
if(item.requestType == 1){
|
||||
moreInfos.value["course"] = temp.course.title;
|
||||
moreInfos.value["old_day"] = formatDate(new Date(temp.lessonStart));
|
||||
moreInfos.value["old_start"] = getHoursMinutes(new Date(temp.lessonStart));
|
||||
moreInfos.value["old_end"] = getHoursMinutes(new Date(temp.lessonEnd));
|
||||
moreInfos.value["old_type"] = temp.lessonType;
|
||||
}}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
<div class="body">
|
||||
<div v-for="item of requests" :key="item.id" :style="{width:[moreInfosMod ? 95:70] + '%'}" class="centerer">
|
||||
|
||||
|
||||
|
||||
<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="firstname">{{item.user.lastName}}</div>
|
||||
|
||||
<div class="infos">
|
||||
<button @click=" editItem(item);moreInfosMod=!moreInfosMod; setMoreInfos(item); console.log(item);" style="background-color:rgb(105,05,105);" >
|
||||
{{i18n("request.moreInfos")}}
|
||||
</button></div>
|
||||
<div class="accept"><button @click="editItem(item); AcceptSetup(item.id,item.requestType);" style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
|
||||
<div class="refuse"><button @click="upPage(item.id,{local: null,state:'Refused'})" style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div>
|
||||
</div>
|
||||
|
||||
<div v-else class="containerElement" style="width:auto; height:auto;">
|
||||
<div v-if="AcceptMod">
|
||||
Local:
|
||||
<select v-model="chosenLocal">
|
||||
<option v-for="item in locals">{{item}}</option>
|
||||
</select>
|
||||
<button @click="AcceptMod = !AcceptMod;upPage(item.id,{local: chosenLocal, state:'Accepted'})"></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}}:
|
||||
{{key}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<button @click = "moreInfosMod = !moreInfosMod; editElementID = ''">back</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.centerer{
|
||||
margin:0 auto 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.containerElement{
|
||||
justify-content:center;
|
||||
display:grid;
|
||||
grid-template-columns:10% 14.2% 19% 14.2% 14.2% 14.2% 14.2%;
|
||||
grid-template-areas:
|
||||
"id type surname firstname infos accept refuse";
|
||||
column-gap:10px; }
|
||||
|
||||
.container{
|
||||
padding-left:50px;
|
||||
font-size:.8em;
|
||||
justify-content:center;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(auto-fill, 120px);
|
||||
grid-row-gap: 1em;
|
||||
|
||||
grid-column-gap: 0.2em;
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
}
|
||||
.infos {
|
||||
grid-area:infos;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
.accept{
|
||||
grid-area:accept;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
.refuse{
|
||||
grid-area:refuse;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
.id{
|
||||
grid-area:id;
|
||||
margin-left:40px;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
|
||||
.surname{
|
||||
grid-area:surname;
|
||||
align-self:center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
.firstname{
|
||||
grid-area:firstname;
|
||||
align-self:center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
button{
|
||||
font-size:15px;
|
||||
height:50px;
|
||||
width:100px;
|
||||
border:none;
|
||||
border-radius:20px;
|
||||
|
||||
}
|
||||
|
||||
.body {
|
||||
width:100%;
|
||||
margin-top:3.5%;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user