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

<script setup>
  import i18n from "@/i18n.js"
  import {ref, vModelSelect} from 'vue'
  import {validateRegister, getAllRegisters } from '@/rest/ServiceInscription.js'
  import AboutRequest from "@/Apps/Inscription/AboutRequest.vue";
  import {
    getAllChangeCurrReq,
    getAllExemptionsRequest,
    getAllScholarShipsRequest,
    getAllUnregisters
  } from "@/rest/requests.js";
  import AboutScholarship from "@/Apps/Inscription/AboutScholarship.vue";
  import AboutUnregister from "@/Apps/Inscription/AboutUnregister.vue";
  import AboutChangeCurriculum from "@/Apps/Inscription/AboutChangeCurriculum.vue";
  import AboutExemption from "@/Apps/Inscription/AboutExemption.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, 4 manage unregister, 5 = manage curriculum change, 6 = manage exemptions
  const windowsState = ref(0);

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

    requests.value = await getAllRegisters();
  }

  async function loadRequests(){
    switch (requestType.value){
      case "inscription":
        requests.value = await getAllRegisters();
        break;
      case "scholarship":
        requests.value = await getAllScholarShipsRequest();
        break;
      case "exemption":
        requests.value = await getAllExemptionsRequest();
        break;
      case "unregister":
        requests.value = await getAllUnregisters();
        break;
      case "curriculum change":
        requests.value = await getAllChangeCurrReq();
    }
  }
</script>



<template>
  <div v-if="windowsState === 1">
    <AboutRequest :target="targetId" v-model:window-state="windowsState"></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>
        <option>unregister</option>
        <option>curriculum change</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 @click="windowsState=6;targetId=item.id">More infos</button></div>
        </div>
        <div class="container" v-if="requestType === 'unregister'" style="grid-template-columns:17% 15% 12% 15%;grid-template-areas:'date reqState regno studentfirstname studentlastname infos';">
          <div class="date" v-if="item.date != undefined">{{item.date.slice(0,10)}}</div>
          <div class="studentfirstname">{{item.firstName}}</div>
          <div class="studentlastname">{{item.lastName}}</div>
          <div class="regno">id : {{item.regNo}}</div>
          <div class="reqState">{{item.state}}</div>
          <div class="infos"><button @click="windowsState=4;targetId=item.id">More infos</button></div>
        </div>
        <div class="container" v-if="requestType === 'curriculum change'" style="grid-template-columns:17% 20% 15% 5%;grid-template-areas:'date reqState teacherApproval regno studentfirstname studentlastname infos';">
          <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">IS approval : {{item.state}}</div>
          <div class="teacherApproval">Teacher approval : {{item.teacherApprovalState}}</div>
          <div class="infos"><button @click="windowsState=5;targetId=item.id">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>
  <div v-if="windowsState === 4">
    <AboutUnregister :req-id="targetId"></AboutUnregister>
    <button @click="windowsState=0">Back</button>
  </div>
  <div v-if="windowsState === 5">
    <AboutChangeCurriculum :req-id="targetId" v-model:window-state="windowsState"></AboutChangeCurriculum>
  </div>
  <div v-if="windowsState === 6">
    <AboutExemption :req-id="targetId" v-model:window-state="windowsState"></AboutExemption>
  </div>
</template>

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

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

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

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