Clyde/frontend/src/Apps/LessonRequests.vue

<!----------------------------------------------------
	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 {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({});


/*
 * Change a request's state and refreshes the requests '
 */

async function upPage(id,review){
  await changeRequestState(id, review) ;
  requests.value = await getAllRequests();
  chosenLocal.value = null;
}

/*
 * Set correctly the variables after clicking on the ACCEPT button
 */

async function AcceptSetup(id,type){
  if(type !== 2 ){
    editElementID.value = id
    AcceptMod.value = true;
  }
  else{
    await upPage(id,{local: null,state:'Accepted'});
  }
}

/*
 * Set the infos to show when clicking MORE INFOS
 */
async function setMoreInfos(item){
    
    moreInfos.value = Object.assign({},{})
    moreInfos.value["requestType"] = requestTypes[item.requestType]
    if(item.requestType == 0 || item.requestType == 1){
    moreInfos.value["day"] = item.lessonStart == null ? null : formatDate(new Date(item.lessonStart))
    moreInfos.value["start"] = item.lessonStart == null ? null : getHoursMinutes(new Date(item.lessonStart))
    moreInfos.value["end"] = item.lessonEnd == null ? null :  getHoursMinutes(new Date(item.lessonEnd))
    moreInfos.value["lessonType"] = item.lessonType;
    moreInfos.value["course"] = item["course"] == null ? null:item.course.title}
  if (item.requestType==1 || item.requestType == 2){
      let temp = await getLesson(item.lessonId);
    if(item.requestType == 1 || item.requestType == 2){
    moreInfos.value["course"] = temp.course.title;
    moreInfos.value[item.requestType == 2 ? "day" : "old_day"] =  formatDate(new Date(temp.lessonStart));
    moreInfos.value[item.requestType == 2 ? "start" : "old_start"] = getHoursMinutes(new Date(temp.lessonStart));
    moreInfos.value[item.requestType == 2 ? "end":"old_end"] = getHoursMinutes(new Date(temp.lessonEnd));
    moreInfos.value[item.requestType == 2 ? "lessonType":"old_type"] = temp.lessonType;
  }}
  editElementID.value = item.id ;
  moreInfosMod.value =true;
}
</script>



<template>

    <div  class="body">
    <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='';">{{i18n("courses.back")}}</button>
      <div v-if ="item.state === 'Pending'" class="listElement">
      <div class="containerElement" v-if="editElementID !== item.id">
          <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);" 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>
          <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" style="margin-left:20%;">
            Local:
            <select v-model="chosenLocal">
              <option v-for="item in locals">{{item}}</option>
            </select>
            <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">
                {{i18n(value.toString())}}:
              {{key}}
              </div>
              </div>
          </template>
      </div>
      </div>
      </div>
  </div>
</template>

<style scoped>


.center{
  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%;
}
button:hover{
  opacity:0.8;
}


</style>