Clyde/frontend/src/Apps/Inscription/ManageRequests.vue

<script setup>
  import i18n from "@/i18n.js"
  import {ref} from 'vue'
  import {validateRegister, getAllRegisters } from '@/rest/ServiceInscription.js'
  import AboutRequest from "@/Apps/Inscription/AboutRequest.vue";
  import {getAllExemptionsRequest, getAllScholarShipsRequest} from "@/rest/requests.js";
  import AboutScholarship from "@/Apps/Inscription/AboutScholarship.vue";

  const requests = ref(await getAllRegisters());
  let targetId = "";

  const requestType = ref("inscription");
  const filterType = ref("None");

  //0 = liste, 1 = détails, 2 = sure?, 3 = manage scholarship
  let windowsState = ref(0);

  async function upPage(id,review){
    await validateRegister(id,review);

    requests.value = await getAllRegisters();
  }

  async function loadRequests(){
    if (requestType.value === "inscription"){
      requests.value = await getAllRegisters();
    }
    if (requestType.value === "scholarship"){
      requests.value = await getAllScholarShipsRequest();
    }
    if(requestType.value === "exemption"){
      requests.value = await getAllExemptionsRequest();
    }
  }
</script>



<template>
  <div v-if="windowsState === 1">
    <AboutRequest :target="targetId"></AboutRequest>
  </div>
  <div v-if="windowsState === 0">
    <div style="margin-top: 2%;margin-left: 2%">
      <span>Request type :   </span>
      <select v-model="requestType" @change="loadRequests()">
        <option>inscription</option>
        <option>scholarship</option>
        <option>exemption</option>
      </select>
      <span style="margin-left: 5%">
        Filter :
        <select v-model="filterType">
          <option>None</option>
          <option>Pending</option>
          <option>Accepted</option>
          <option>Refused</option>
      </select>
      </span>
    </div>
    <div style='display:flex; justify-content:center; min-width:1140px;' v-for="item of requests">
      <div class="bodu" style="width: 95%" v-if="filterType == 'None' || filterType == item.state">
        <div class="container" style="grid-template-columns:11% 15% 20% 10% 10% 9% 9%;grid-template-areas:'date state equivalencestate surname firstname accept refuse infos';" v-if="requestType === 'inscription'">
          <!--
            The condition below avoids an error occuring because loadRequests() finishes after the vue refresh
            then submissionDate is undefined an it triggers an error in the console despite the fact that it is working
            properly at the end.
           -->
          <div class="date" v-if="item.submissionDate !== undefined">{{item.submissionDate.slice(0, 10)}}</div>
          <div class="state" style="font-size: 80%">Approval : {{item.state}}</div>
          <div class="equivalencestate" style="font-size: 80%">Teacher approval : {{item.equivalenceState}}</div>
          <div class="surname">{{item.lastName}}</div>
          <div class="firstname">{{item.firstName}}</div>
          <div class="accept" v-if="item.state === 'Pending'"><button @click="windowsState=2;targetId=item.id;" style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
          <div class="refuse" v-if="item.state === 'Pending'"><button @click="upPage(item.id,'Refused')" style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div>
          <div class="infos"><button style="background-color:rgb(105,05,105);" @click="targetId=item.id;windowsState=1;">{{i18n("request.moreInfos")}}</button></div>
        </div>
        <div class="container" style="grid-template-columns:25% 15% 15% 25% 14.2%;grid-template-areas:'date reqState studentfirstname studentlastname  infos';" v-if="requestType === 'scholarship'">
          <div class="date" v-if="item.date !== undefined"> {{item.date.slice(0,10)}}</div>
          <div class="studentfirstname">{{item.user.firstName}}</div>
          <div class="studentlastname">{{item.user.lastName}}</div>
          <div class="reqState">{{item.state}}</div>
          <div class="infos" @click="windowsState = 3; targetId=item.id;"><button>More infos</button></div>
        </div>
        <div class="container" style="grid-template-columns:17% 15% 12% 15% 25%;grid-template-areas:'date reqState studentfirstname studentlastname course infos';"v-if="requestType === 'exemption'">
          <div class="date" v-if="item.date != undefined">{{item.date.slice(0,10)}}</div>
          <div class="studentfirstname">{{item.user.firstName}}</div>
          <div class="studentlastname">{{item.user.lastName}}</div>
          <div class="course">{{item.course.title}}</div>
          <div class="reqState">{{item.state}}</div>
          <div class="infos"><button>More infos</button></div>
        </div>
      </div>
    </div>
  </div>
  <div style='display:flex; justify-content:center; min-width:1140px;margin-top: 10%' v-if="windowsState === 2">
    <p>Etes vous sur de vouloir accepter cette demande ?</p>
    <button style="background-color:rgb(105,05,105);" @click="upPage(targetId,'Accepted');windowsState=0;">Valider</button>
    <button style="background-color:rgb(105,05,105);" @click="windowsState=0;">Retour</button>
  </div>
  <div v-if="windowsState == 3">
    <AboutScholarship :req-id="targetId"></AboutScholarship>
    <div>
      <button style="margin-left: 30%" @click="loadRequests();windowsState=0">Back</button>
    </div>
  </div>
</template>

<style scoped>
  .container{
    color:white;
    height:100px;
    font-size:20px;
    display:grid;
    column-gap:10px;
  }

  .equivalencestate{
    grid-area: equivalencestate;
    align-self: center;
  }
  .studentfirstname{
    grid-area: studentfirstname;
    align-self: center;
  }

  .studentlastname{
    grid-area: studentlastname;
    align-self: center;
  }

  .course{
    grid-area: course;
    align-self: center;
  }
  .reqState{
    grid-area: reqState;
    align-self: center;
  }
  .infos {
    grid-area:infos;
    align-self:center;
  }

  .accept{
    grid-area:accept;
    align-self:center;
  }

  .refuse{
    grid-area:refuse;
    align-self:center;
  }

  .date{
    grid-area:date;
    margin-left:40px;
    align-self:center;
  }

  .state{
    grid-area:state;
    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;

  }

  .bodu {
    margin-top:2%;
    width:66%;
    border:2px solid black;
    border-radius:9px;
    background-color:rgb(50,50,50);
  }


</style>