Request and changes

This commit is contained in:
2024-04-19 21:29:45 +02:00
parent a2be04bfb3
commit bd1c236635
22 changed files with 967 additions and 68 deletions

View File

@ -29,6 +29,8 @@ app.language=Language
app.manage.profile=Manage profile
app.studentList=Students List
app.users=Users
app.manageOwnLessons=Manage Owned Courses Schedule
app.lessonRequests=Schedule Requests
request.moreInfos=More Infos
request.accept=Accept
request.refuse=Refuse

View File

@ -29,6 +29,8 @@ app.language=Langue
app.manage.profile=Gérer le profil
app.studentList=Liste des étudiants
app.users=Utilisateurs
app.manageOwnLessons=Gérer ses horaires de cours
app.lessonRequests=Requêtes d'horaire
request.moreInfos=Plus d'Infos
request.accept=Accepter
request.refuse=Refuser

View 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>

View File

@ -173,17 +173,6 @@
margin-top:3.5%;
}
.infosContainer {
min-width:350px;
padding-bottom:50px;
border:2px solid black;
font-size:25px;
color:white;
padding:20px;
background-color:rgb(50,50,50);
border-radius:20px;
}
.containerElement{
justify-content:center;
display:grid;

View File

@ -0,0 +1,270 @@
<script setup>
import { ref } from 'vue'
import i18n from '@/i18n.js'
import {formatDate,getHoursMinutes} from '../scheduleFunctions.js'
import {getOwnedLessons} from "@/rest/lessonSchedule.js";
import {getSelf} from "@/rest/Users.js";
import {createRequest} from "@/rest/LessonRequests.js"
import {getcurriculum} from "@/rest/curriculum.js";
import {getAllSchedule} from "@/rest/scheduleRest.js";
const curriculum = ref();
const allSchedules = ref(await getAllSchedule());
const schedule = ref(await getOwnedLessons());
const createMod = ref(false);
const user = await getSelf();
const editElementID = ref();
const requestType = ref(0);
const currentDate = new Date();
const types = ["TP","TD","Course","Exam"];
const colors = {"TP":"rgb(36,175,255)","TD":"rgb(255,36,175)","Exam":"rgb(175,255,36)","Course":"rgb(255,36,175)"}
const courses = ref();
function inFuture(lesson){
let toCompare = new Date(lesson.lessonStart);
let current = new Date();
return (current < toCompare)
}
async function setCourses(){
courses.value = (await getcurriculum(curriculum.value.curriculumId)).courses
}
function invertedFormatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [year, month, day].join('-');
}
function createLessonEvent(date,hour){
const str = date.concat(' ',hour);
return new Date(str);
}
const maxDate = ref(invertedFormatDate(new Date([currentDate.getMonth()<7 ? currentDate.getFullYear() : (currentDate.getFullYear())+1],7,31)));
const minDate = ref(invertedFormatDate((new Date()).setDate(currentDate.getDate()+1)))
const pattern = {
"lessonId":null,
"course": null,
"day":null,
"lessonStart": null,
"lessonEnd": null,
"lessonType": null,
}
const patternRequest ={
"user": user,
"state": "Pending",
"requestType": null,
"lessonId":null,
"lessonType":null,
"lessonStart":null,
"lessonEnd":null,
"color":null,
"course":null,}
const toModify = ref(Object.assign({}, pattern));
const requestBuffer = ref(Object.assign({},patternRequest));
function setModify(lesson){
toModify.value.lessonId = editElementID.value;
toModify.value.day = invertedFormatDate(new Date(lesson.lessonStart));
toModify.value.lessonStart = getHoursMinutes(lesson.lessonStart);
toModify.value.lessonEnd = getHoursMinutes(lesson.lessonEnd);
toModify.value.lessonType = lesson.lessonType
}
async function createLessonRequest(){
if(requestType.value === 0 || requestType.value === 1){
//modify
requestBuffer.value.color = colors[toModify.value.lessonType] ;
requestBuffer.value.requestType = requestType.value;
let start = createLessonEvent(toModify.value.day,toModify.value.lessonStart)
let end = createLessonEvent(toModify.value.day,toModify.value.lessonEnd)
for (let element in toModify.value){
if(element !== "day" && element !== "lessonStart" && element !== "lessonEnd"){
requestBuffer.value[element] = toModify.value[element];
}
if(element === "lessonStart"){
requestBuffer.value.lessonStart = start;
}
if(element === "lessonEnd"){
requestBuffer.value.lessonEnd = end;
}
}
}
else if(requestType.value === 2) {
//delete
requestBuffer.value.lessonId = editElementID;
requestBuffer.value.requestType = requestType.value;
}
await createRequest(requestBuffer.value);
editElementID.value = '';
}
async function askChanges(i){
requestType.value= i;
await createLessonRequest()
}
</script>
<template>
<div class="body">
<button @click="createMod = !createMod">Ask Create Request</button>
<div v-if="createMod">
<form class="listElement" style="width:40%; margin:0 auto 0 auto;">
<div style="margin-bottom:20px;">
Schedule :
<select @change="setCourses()"v-model="curriculum">
<option v-for="item in allSchedules" :value='item.curriculum'>{{item.curriculum.option}}</option>
</select>
</div>
<div style="margin-bottom:20px;">
Lesson :
<select v-if="curriculum != null" v-model="toModify.course">
<option v-for="item in courses" :value='item'>{{item.title}}</option>
</select>
</div>
<div style="margin-bottom:20px;">
Day:
<input type="date" :min="minDate" :max="maxDate" v-model="toModify.day">
</div>
<div style="margin-bottom:20px;">
Start:
<input v-model="toModify.lessonStart" type="time" min="08:00" max="18:00" required />
</div>
<div style="margin-bottom:20px;">
End:
<input v-model="toModify.lessonEnd" type="time" min="10:00" max="20:00" required />
</div>
<div style="margin-bottom:20px;">
Type:
<select v-model="toModify.lessonType">
<option v-for="item in types" :value='item'>{{item}}</option>
</select>
</div>
<button class="create" @click="createMod=!createMod; askChanges(1);"> {{i18n("courses.confirm")}} </button>
<button style="float:right;" @click="createMod=!createMod">{{i18n("courses.back")}}</button>
</form>
</div>
<div v-if="!createMod"v-for="element in schedule" style="width:50%;margin-left:auto; margin-right:auto;" >
<div v-if="editElementID !== element.lessonID" style ="padding:15px 15px 15px 15px;">
<button v-if="inFuture(element)" @click="editElementID = element.lessonID;setModify(element);">
Ask Changes
</button>
</div>
<div v-else>
<button @click="askChanges(0);"> {{i18n("courses.confirm")}} </button>
<button @click="editElementID= '';"> {{i18n("courses.back")}} </button>
</div>
<div class="listElement">
<div v-if="editElementID !== element.lessonID">
<div>
{{element.course.title}}
</div>
<div>{{formatDate(element.lessonStart)}}</div>
<div>{{getHoursMinutes(element.lessonStart)}}-{{getHoursMinutes(element.lessonEnd)}}
</div>
<div>{{element.local}}</div>
<div>{{element.lessonType}}</div>
</div>
<div v-else>
<div>{{element.course.title}}</div>
<div style="margin-bottom:20px;">
Day:
<input type="date" :min="minDate" :max="maxDate" v-model="toModify.day">
</div>
<div style="margin-bottom:20px;">
Start:
<input v-model="toModify.lessonStart" type="time" min="8:00" max="20:00"/>
</div>
<div style="margin-bottom:20px;">
End:
<input v-model="toModify.lessonEnd" type="time" min="10:00" max="20:00" required />
</div>
<div style="margin-bottom:20px;">
Type:
<select v-model="toModify.lessonType">
<option v-for="item in types" :value='item'>{{item}}</option>
</select>
</div>
<div style="margin-bottom:20px;">
Local:
{{element.local}}
<div style="float:right;">
<button @click="askChanges(2)" class="delete"> ask Deletion </button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.body {
width:100%;
margin-top:3.5%;
}
.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;
}
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;
}
.delete{
grid-area:delete;
background-color:rgb(200,0,0);
}
button:hover{
opacity:0.8;
}
</style>

View File

@ -14,7 +14,6 @@ import i18n from '@/i18n.js'
const allSchedules = ref(await getAllSchedule());
const filter = ref("null");
const subFilter = ref("null");
const lesson = ref();
const filters = ["Type","Teacher","Course"];
const types = ["TP","TD","Course","Exam"];
const locals = ["A0B1","A1B1","A2B1","A0B2"]
@ -29,9 +28,6 @@ const currentDate = new Date();
const editElementID = ref()
function editItem(id){
editElementID.value = id;
}
function invertedFormatDate(date) {
var d = new Date(date),
@ -94,8 +90,8 @@ const toModify = ref(Object.assign({}, pattern));
toModify.value.day = invertedFormatDate(new Date(lesson.lessonStart));
toModify.value.lessonStart = getHoursMinutes(lesson.lessonStart);
toModify.value.lessonEnd = getHoursMinutes(lesson.lessonEnd);
toModify.value.local = lesson.local
toModify.value.lessonType = lesson.lessonType
toModify.value.local = lesson.local;
toModify.value.lessonType = lesson.lessonType;
}
function inFuture(lesson){
@ -171,15 +167,7 @@ async function setCourses(){
subFilter.value = "null"
}
function findCreatedLesson(){
for(let element in lessonFinder.value){
if((lessonFinder.value[element].course.courseId ==lessonBuffer.value.course.courseId) && (lessonFinder.value[element].local == lessonBuffer.value.local) ){
return lessonFinder.value[element];
}
}
return null;
}
async function newLesson(){
let isnull = false;
if (lessonBuffer.value.lessonType != null){
@ -205,12 +193,8 @@ async function setCourses(){
await createLesson(lessonCreatorBuffer.value);
lessonFinder.value = await getLessons();
lesson.value = findCreatedLesson();
trueSchedule.value = await getCurriculumSchedule(curriculum.value.curriculumId)
await addLessonToSchedule(trueSchedule.value.scheduleId,lesson.value.lessonID)
}
}
}
lessonBuffer.value = Object.assign({}, pattern);
lessonFinder.value = null;
@ -410,18 +394,6 @@ async function patchLesson(lesson){
margin-top:3.5%;
}
.infosContainer {
min-width:350px;
width:70%;
padding-bottom:50px;
border:2px solid black;
font-size:25px;
color:white;
padding:20px;
background-color:rgb(50,50,50);
border-radius:20px;
}
.listElement{
min-width:625px;
border:2px solid black;
@ -434,15 +406,6 @@ async function patchLesson(lesson){
}
.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;

View File

@ -0,0 +1,23 @@
import { restGet, restPost, restDelete, restPatch } from './restConsumer.js'
export async function getLessonRequest(id){
return restGet('/requests/lessonRequest/' + id);
}
export async function getAllRequests(){
return restGet("/requests/lessonRequests");
}
export async function getOwnedRequests(){
return restGet("/requests/lessonRequests/owned");
}
export async function createRequest(request){
return restPost("/requests/lessonRequest", request);
}
export async function changeRequestState(id, infos){
return restPatch("/requests/lessonRequest/" + id, infos);
}
export async function deleteRequest(id){
return restDelete("/requests/lessonRequest/"+id);
}

View File

@ -11,6 +11,8 @@ import Users from "@/Apps/UsersList.vue"
import Students from "@/Apps/StudentsList.vue"
import Schedule from "@/Apps/Schedule.vue"
import ManageSchedule from "@/Apps/ManageSchedule.vue"
import ManageOwnedLessons from "@/Apps/ManageOwnLessons.vue";
import LessonRequests from "@/Apps/LessonRequests.vue";
const apps = {
'/schedule': Schedule,
@ -21,6 +23,8 @@ const apps = {
'/manage-courses' : Courses,
'/users-list' : Users,
'/students-list' : Students,
'/manage-owned-lessons': ManageOwnedLessons,
'/manage-schedule-requests' : LessonRequests,
}
const appsList = {
@ -33,6 +37,8 @@ const appsList = {
'ManageCourses': { path: '#/manage-courses', icon: 'fa-book', text: i18n("app.manage.courses") },
'StudentsList':{ path: '#/students-list',icon: 'fa-users',text: i18n("app.studentList")},
'UsersList':{ path: '#/users-list',icon: 'fa-users',text: i18n("app.users")},
'ManageOwnedLessons':{path: '#/manage-owned-lessons',icon:'fa-calendar-days',text: i18n("app.manageOwnLessons")},
'LessonRequests':{path: '#/manage-schedule-requests', icon:'fa-book', text: i18n("app.lessonRequests")},
}