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

<script setup>
import i18n from "@/i18n.js"
import {getSelf} from '../../rest/Users.js'
import {getAllCurriculums, getcurriculum} from "@/rest/curriculum.js";
import {getRegisters} from "@/rest/ServiceInscription.js";
import {getExternalCurriculumByInscrReq} from "@/rest/externalCurriculum.js";
import {ref} from "vue";
import ExternalCurriculumList from "@/Apps/Inscription/ExternalCurriculumList.vue";
import {editEquivalenceState, imposeCurriculum} from "@/rest/requests.js";

const curriculums = await getAllCurriculums()
const props = defineProps(['target']);
const request = await getRegisters(props.target);
const cursus = await getcurriculum(request.curriculum);
const user = await getSelf();
const list = ref(false);
const externalCurriculum = await getExternalCurriculumByInscrReq(request.id)
const impose = ref(false)
const imposeCurr = ref(0)
const imposed = ref(false)

//Get the parent page windowState to display the correct button
const windowState = defineModel("windowState")
function getPP(){
  if(request.profilePictureUrl === null){
    return "/Clyde.png"
  }
  return request.profilePictureUrl;
}

async function editEquivalence(id, newstate){
  await editEquivalenceState(id, newstate)
}

async function refreshCursus(){
  cursus.value = await getcurriculum(request.curriculum)
}
</script>

<template>
  <div class="body" v-if="list == false" style="margin-top: 10%;">
    <div class="container">
      <div class="profilPic">
        <img class="subContainter" :src=getPP()>
      </div>
      <div class = "globalInfos">
        <div class="infosContainer">
          <div>
            {{ i18n("firstname/name") }} : {{request.firstName}} {{request.lastName}}
          </div>
          <div>
            {{ i18n("login.guest.email") }}: {{request.email}}
          </div>
          <div>
            {{ i18n("login.guest.address") }} : {{request.address}}
          </div>
          <div>
            {{ i18n("login.guest.country") }} : {{request.country}}
          </div>
          <div>
            {{ i18n("login.guest.birthday") }} : {{request.birthDate.slice(0,10)}}
          </div>
          <div>
            {{ i18n("WantedCursus") }} : BAB {{cursus.year}} {{cursus.option}}
          </div>
          <div style="margin-top: 3%">
            <button><a :href="request.identityCard">{{ i18n("dlidentitycard") }}</a></button>
            <button style="margin-left: 3%" v-if="request.admissionDocUrl != null"><a :href="request.admissionDocUrl">{{ i18n("dladmissiondoc") }}</a></button>
          </div>
          <div>
            <button style="background-color:rgb(105,05,105);margin-top: 3%" @click="list=!list" v-if="(user.role === 'Teacher' || user.role === 'Admin')">{{ i18n("seeextcur") }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-if="list == false" style="margin-left: 30%; margin-top: 5%">
    <button @click="windowState = 0">{{ i18n("courses.back") }}</button>
  </div>
  <div v-if="list==true">
    <ExternalCurriculumList :ext-curr-list="externalCurriculum" :mode="0"></ExternalCurriculumList>
    <div style="margin-left: 15%;margin-top: 5%;">
      <button style="margin-left: 2%" v-if="request.equivalenceState === 'Pending' && !impose" @click="list = false;editEquivalence(request.id, 'Accepted'); request.equivalenceState='Accepted'">{{i18n("acceptequiv")}}</button>
      <button style="margin-left: 2%;margin-right: 3%" v-if="request.equivalenceState === 'Pending' && !impose" @click="list = false;editEquivalence(request.id, 'Refused'); request.equivalenceState='Refused'">{{i18n("refuseequiv")}}</button>
      <div v-if="!imposed && request.equivalenceState !== 'Accepted'" style="margin-top: 3%;margin-left: 1%">
        {{i18n("imposecurriculum")}}
        <input type="checkbox" v-model="impose" v-if="!imposed">
        <select v-if="impose" v-model="imposeCurr">
          <option v-for="item in curriculums" :value="item.curriculumId">Bac {{item.year}} {{item.option}}</option>
        </select>
      </div>
      <button v-if="impose && !imposed" style="margin-left: 2%" @click="imposeCurriculum(request.id, imposeCurr);request.equivalenceState='Accepted';imposed=true;">{{ i18n("impose") }}</button>
      <div v-if="imposed">
        {{ i18n("gotimposed") }}
      </div>
      <button style="margin-left: 2%" @click="list=false;refreshCursus()">{{ i18n("courses.back") }}</button>
    </div>
  </div>
</template>


<style scoped>
.container{
  min-width:675px;
  display:grid;
  grid-template-columns:10vw 50vw;
  grid-template-rows:200px auto;
  column-gap:2.7%;
  row-gap:45px;
  grid-template-areas:
  "profilPic globalInfos"
  "minfos minfos";
}

.profilPic{
  grid-area:profilPic;
  width:100%;
}

.globalInfos {
  grid-area:globalInfos;
  align-self :center;

}

.body {
  min-width:960px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:5%;
}

.subContainter{
  width:100%;
  background-color:rgb(50,50,50);
  border-radius:20px;
  border:4px solid black;
}

.infosContainer {
  padding-bottom:50px;
  border:2px solid black;
  font-size:25px;
  color:white;
  padding:20px;
  background-color:rgb(50,50,50);
  border-radius:20px;
}

button{
  border:none;
  background-color:rgb(239, 60, 168);
  border-radius:10px;
  height:35px;
  margin-top:10px;
}
</style>