Clyde/frontend/src/Apps/LessonRequests.vue

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