Clyde/frontend/src/Apps/Profil.vue

<script setup>
  import {reactive, ref } from 'vue'
  import {getSelf,alterSelf,disconnect,deleteUser} from '../rest/Users.js'
  import {getSelfCurriculum, getAllCurriculums, getSomeonesCurriculumList, getcurriculum} from '../rest/curriculum.js'
  import {getCourses} from "../rest/courses.js"
  import i18n from "@/i18n.js"
  import {uploadFile, uploadProfilePicture} from '@/rest/uploads.js'
  import CourseList from "@/Apps/Inscription/CourseList.vue";
  import {editMinerval, getCurrentMinerval} from "@/rest/minerval.js";
  import {postPayment} from "@/rest/payment.js";
  import {addUninscReq, createScholarshipRequest, postChangeCurrReq} from "@/rest/requests.js";
  import ExternalCurriculumList from "@/Apps/Inscription/ExternalCurriculumList.vue";
  import {getExternalCurriculumByUser} from "@/rest/externalCurriculum.js";

  const user = ref(await getSelf());
  const UserCurriculum = ref(""); 
  const curricula = ref (await getAllCurriculums());
  const minerv = ref({});
  const extcurrlist = ref(await getExternalCurriculumByUser(user.value.regNo))

  if(user.value.role === "Student"){
    minerv.value = ref(await getCurrentMinerval(user.value.regNo));
    UserCurriculum.value = await getSomeonesCurriculumList(user.value.regNo);
  }

  if(user.role === "Teacher"){
    UserCurriculum.value = await getCourses("Teacher");
  }

  const sure = ref(0);

  //0 base, 1 modif, 2 curriculum, 3 register, 4 courselist, 5 minerval, 6 payment, 7 scholarship, 8 scholarshipinfos, 9 unregister, 10 sure, 11 aboutunregister, 12 manage external curriculums
  const windowState = ref(0);

  const isChecked = ref(false);
  const reRegState = ref(0);

  const pattern = {
    profilPictureUrl:null,
    email:null,
    address:null,
    password:null,
  };
  
  const patternInfos ={
    email: null,
    password: null,
    passwordConfirm:null,
    id:null,
  }

  //Used to modelize a payment
  const paymentData={
    studentRegNo: user.value.regNo,
    date:null,
    card:null,
    client:null,
    expDate:null,
    amount: null
  }

  //Used to modelize a scholarship request
  const scholarshipData=reactive({
    userId: user.value.regNo,
    state:null,
    date:null,
    amount:0,
    taxDocUrl : "",
    residencyDocUrl : ""
  })

  const changecurrdata = reactive({
    userId : user.value.regNo,
    actualcursus:null,
    newcursus:1
  })

  //Used to post a uninscription request
  const uninscriptionData = reactive({
    reason : null,
    userId : user.value.regNo,
    curriculumId:null
  })
  const paymentAmount = ref(0);
  let toModify= Object.assign({}, pattern);
  let personnalInfos =  Object.assign({}, patternInfos);

  //Used to store the year of the new cursus selected in change cursus feature
  const selectedYear = ref(0);
  function resetInputs(inputs,list){
    inputs=Object.assign({},list); 
  }
  
  async function ChangeInfos(){
    for (let element in toModify){
         if (element ==="email" && (toModify[element] !== null)){
          await  alterSelf(user.value.regNo,{email : toModify[element]});
        }      

        if (element ==="profilPictureUrl" && (toModify[element] !== null)){
          await  alterSelf(user.value.regNo,{ profilPictureUrl : toModify[element]});
        }
        else if(element === "address" && (toModify[element] !== null)){
          await  alterSelf(user.value.regNo,{address : toModify[element]});
        }
        else if(element === "password" && (toModify[element] !== null)){
          await  alterSelf(user.value.regNo,{password : toModify[element]});
        }
    }
      toModify= Object.assign({},pattern);
        user.value = await getSelf()

   } 
  
  function setModify(item){
     toModify.address = item.address;
     toModify.profilPictureUrl = item.profilPictureUrl;
     toModify.email= item.email;
     toModify.password= item.password;
  }

  
  async function unRegister(){
   deleteUser(user.value.regNo);
   disconnect()
   setTimeout(() => {
      window.location.href="#/home";
      }, "500");
    
  }

  function getPP(){
    if(user.value.profilePictureUrl === null){
      return "/Clyde.png"
    }
    return user.profilePictureUrl
  }

  function getYear(){
    let date = new Date();
    if (date.getMonth() <= 6){
      return date.getFullYear()-1
    }
    return date.getFullYear()
  }

  async function refreshExtCurrList(){
    extcurrlist.value = await getExternalCurriculumByUser(user.value.regNo)
  }
  //This function travels through the student cursus array and extract the current cursus of the student
  function getActualCurriculumList(){
    let actualCurriculumList = [];
    for (let i = 0; i < UserCurriculum.value.curriculumList.length; i++){
      if (UserCurriculum.value.curriculumList[i].actual === true){
        actualCurriculumList.push(UserCurriculum.value.curriculumList[i]);
      }
    }
    return actualCurriculumList
  }

  async function postScholarshipRequest(file1, type1, file2, type2){
    const a = await uploadFile(file1, type1)
    scholarshipData.taxDocUrl =  a.url;

    const b = await uploadFile(file2, type2)
    scholarshipData.residencyDocUrl = b.url;

    scholarshipData.date = Date.now();

    await createScholarshipRequest(scholarshipData)
  }

  //1 = previous 0 = next
  function getCurriculumsNextYear(){
    const currlist = getActualCurriculumList()
    let list = []

    for (let i = 0; i < currlist.length; i++){
      for (let j = 0; j < curricula.value.length; j++){
        if (curricula.value[j].option === currlist[i].option && curricula.value[j].year === currlist[i].year + 1){
          list.push(curricula.value[j])
        }
      }
    }
    return list
  }

  async function getActualCurr(curr){
    const cursus = await getcurriculum(curr);
    for (let i = 0; i < curricula.value.length; i++){
      if (curricula.value[i].option === cursus.option && curricula.value[i].year === cursus.year - 1){
        changecurrdata.actualcursus = curricula.value[i].curriculumId;
      }
    }
  }

</script>

<template>
  <div class="body" v-if="windowState !== 12">
  <div class="container" v-if="windowState!==4">
    <div class="profilPic" v-if="windowState===0">
      <img class="subContainter" :src=getPP()>
    </div>
      <div class="globalInfos">
        <div v-if="windowState === 0" class="infosContainer">
          <div>
            {{user.firstName}} {{user.lastName}}   
          </div>
          <div>
            E-mail: {{user.email}}      
          </div>
          <div v-if="user.role==='Student'">
            {{user.option}} {{i18n(user.role)}} 
          </div>
          <div v-else>
            Role:  {{i18n((user.role))}} 
          </div>
          <div>
            <button @click="windowState=1; setModify(user)"> {{i18n("profile.modify.data")}} </button>
          </div>
          <div v-if="(user.role==='Student')">
            <button @click="windowState=3">{{i18n("profile.reRegister")}}</button>
            <button @click="windowState=9" style="float:right;background-color:rgb(150,0,0);">{{i18n("profile.unRegister")}}</button>
          </div>
          <div v-if="(user.role==='Student')">
            <button @click="windowState=2">{{i18n("profile.change.curriculum")}}</button>
            <button @click="windowState=12;refreshExtCurrList() ">Manage external curriculums</button>
          </div>
          <div v-if="(user.role==='Student')">
            <button @click="windowState=4">Manage Courses</button>
            <button @click="windowState=5" style="margin-left: 2%">Manage minerval</button>
          </div>
        </div>
        <div v-else-if="windowState === 9" class="infosContainer">
            <div v-if="sure !== 2">Please enter the reason you leave</div>
            <textarea v-if="sure !== 2" v-model="uninscriptionData.reason"></textarea>
            <div v-if="sure !== 2">
            I only want to unregister from a specific cursus
            <input type="checkbox" v-model="isChecked">
            </div>
            <div v-if="sure !== 2 && isChecked">
              Please select that cursus
              <select v-model="uninscriptionData.curriculumId">
                <option v-for="item in getActualCurriculumList()" :value="item.curriculumId">Bac {{item.year}} {{item.option}}</option>
              </select>
            </div>
            <div v-if="sure !== 2">
              <button @click="sure++">Submit</button>
            </div>
            <div v-if="sure==1">
              Are you sure that you want to unregister ?
              <button @click="addUninscReq(uninscriptionData.userId, uninscriptionData.reason, uninscriptionData.curriculumId);sure++">Yes</button>
              <button @click="sure=0">No</button>
            </div>
            <p v-if="sure==2">You request has been send !</p>
        </div>
        <div v-else-if="windowState === 5" class="infosContainer">
          <div v-if="minerv.value.toPay !== 0">
            Payment : {{minerv.value.toPay}}€ left to pay
            <div v-if="minerv.value.paidAmount <= 50">
              <button @click="windowState=6; paymentAmount = 50">Pay deposit (50€)</button>
            </div>
            <div>
              <button @click="windowState=6; paymentAmount = minerv.value.toPay">Pay all the rest ({{minerv.value.toPay}}€)</button>
            </div>
          </div>
          <div v-else>
            Payment : School fees have already been paid this year
          </div>
          <div>
            <button @click="windowState=7">Ask for a scholarship</button>
          </div>
        </div>
        <div v-else-if="windowState === 7" class="infosContainer">
          <p>Please upload the required documents</p>
          <div>
            Tax justification document :
            <input type="file" @change="scholarshipData.taxDocUrl = $event.target.files">
          </div>
          <div>
            Residency justification document :
            <input type="file" style="margin-top:2%" @change="scholarshipData.residencyDocUrl = $event.target.files">
          </div>
          <button style="margin-top: 5%" @click="windowState=8;postScholarshipRequest(scholarshipData.taxDocUrl, 'JustificationDocument',scholarshipData.residencyDocUrl, 'JustificationDocument');">Submit scholarship request</button>
        </div>
        <div v-else-if="windowState === 8" class="infosContainer">
          <div>
            Your request has been sent to the inscription service you will get notified when
            the request is reviewed.
          </div>
          <button @click="windowState = 0">
            Go back to profile
          </button>
        </div>
        <div v-else-if="windowState === 6" class="infosContainer">
          Proceed to payment of {{paymentAmount}}€
          <div style="margin-top: 1%">
            Client:
            <input type="text" v-model="paymentData.client">
          </div>
          <div style="margin-top: 1%">
            Card:
            <input type="text" v-model="paymentData.card">
          </div>
          <div style="margin-top: 1%">
            ExpDate:
            <input type="date" v-model="paymentData.expDate">
          </div>
          <div style="margin-top: 1%">
            <button @click="windowState=5;paymentData.amount=paymentAmount;paymentData.date=new Date();postPayment(paymentData);minerv.value.toPay -= paymentAmount; minerv.value.paidAmount += paymentAmount; editMinerval(minerv.value)">Process Payment</button>
          </div>
          <div>
            <button @click="windowState = 5">Back</button>
          </div>
        </div>
        <div v-else-if="windowState === 1" class="infosContainer">
          <div>
            {{i18n("profile.picture")}}:
            <input type="file" @change="user.profilPicture = uploadProfilePicture($event.target.files);" accept="image/*">
          </div>
          <div>
            E-mail:  
            <input type="email" v-model="toModify.email" />
          </div>
          <div>
            {{i18n("profile.address")}}:
            <input type="text" v-model="toModify.id">
          </div>
          <div>
            {{i18n("login.password")}}:
            <input type="password" v-model="toModify.password">
          </div>
          <div>
            {{i18n("login.cPassword")}}:
            <input type="password" v-model="toModify.passwordConfirm">
          </div>
          <div>
            <button @click="windowState = 0; ChangeInfos();">{{i18n("courses.confirm")}}</button>
            <button @click="windowState = 0; resetInputs(toModify,pattern);" style="float:right;">{{i18n("courses.back")}}</button>
          </div>
        </div>
        <div v-else-if="windowState === 2" class="infosContainer">
          <div>
            I would like to :
            <select v-model="reRegState">
              <option :value="1">Reregister in the next year of one of my cursus</option>
              <option :value="2">Register for a supplementary cursus</option>
              <option :value="3">Change from a cursus to another</option>
            </select>
          </div>
          <div style="height:40px;" v-if="reRegState === 3">
            {{i18n("Curriculum")}}:
            <select v-model="changecurrdata.actualcursus" style="margin-right: 3%">
              <option v-for="item in getActualCurriculumList()" style="font-size:20px;" :value="item.curriculumId">Bac {{item.year}} {{item.option}}</option>
            </select>
            New Curriculum :
            <select v-model="changecurrdata.newcursus">
              <option v-for="item in curricula"  :value="item.curriculumId">Bac {{item.year}} {{item.option}}</option>
            </select>
          </div>
          <div style="height:40px;" v-if="reRegState === 2">
            New Curriculum :
            <select v-model="changecurrdata.newcursus">
              <option v-for="item in curricula"  :value="item.curriculumId">Bac {{item.year}} {{item.option}}</option>
            </select>
          </div>
          <div style="height:40px;" v-if="reRegState === 1">
            New Curriculum :
            <select v-model="changecurrdata.newcursus" @change="getActualCurr(changecurrdata.newcursus);">
              <option v-for="item in getCurriculumsNextYear()" :value="item.curriculumId">Bac {{item.year}} {{item.option}}</option>
            </select>
          </div>
          <div v-if="curricula[changecurrdata.newcursus-1].year > 1 && reRegState !== 1">
            The cursus you selected has some prerequisites
          </div>
          <div>
            <button @click=" windowState = 0;postChangeCurrReq(changecurrdata);changecurrdata.actualcursus=null;changecurrdata.newcursus=1">{{i18n("courses.confirm")}}</button>
            <button @click="windowState = 0; resetInputs(personnalInfos,patternInfos);" style="float:right;">{{i18n("courses.back")}}</button>
          </div>
        </div>
        <div v-else-if="windowState === 3" class="infosContainer">
          <div>
            E-mail:  
            <input type="email" v-model="toModify.email" />
          </div>
          <div>
            ID :
            <input type="text" v-model="toModify.id">
          </div>
          <div>
            {{i18n("login.password")}}:
            <input type="password" v-model="toModify.password">
          </div>
          <div>
            {{i18n("login.cPassword")}}:
            <input type="password" id="confirm">
          </div>

          <div>
            <button @click=" windowState=0;">{{i18n("courses.confirm")}}</button>
            <button @click=" windowState=0; resetInputs(personnalInfos,patternInfos);" style="float:right;">{{i18n("courses.back")}}</button>
          </div>
        </div>
      </div>
      <div v-if="windowState === 0" class="moreInfos">
        <div class = "oldcursus">
            <div class="listTitle">
              Anciens Cursus
            </div>
            <div  class="listElement">
              <div class=" containerElement" v-for="item in UserCurriculum.curriculumList">
                <div class="year" v-if="item.actual === false">Bac {{item.year}}</div>
                <div class="option" v-if="item.actual === false">{{item.option}}</div>
                <div class="dateyear" v-if="item.actual === false">Année {{item.dateyear}}-{{item.dateyear+1}}</div>
              </div>
            </div>
          </div>
          <div class="actualcursus">
            <div class="listTitle">
              Cursus Actuel
            </div>
            <div  class="listElement">
              <div class=" containerElement" v-for="item in UserCurriculum.curriculumList" >
                <div class="year" v-if="item.actual === true">Bac {{item.year}}</div>
                <div class="option" v-if="item.actual === true">{{item.option}}</div>
                <div class="dateyear" v-if="item.actual === true">Année {{item.dateyear}}-{{item.dateyear+1}}</div>
              </div>
            </div>
          </div>
      </div>
  </div>
    <div v-if="windowState===4" style="width: 80%">
      <CourseList :cursuslist="getActualCurriculumList()"/>
      <button style="width: 10%; margin-top: 5%" @click="windowState = 0">Return to profile</button>
    </div>
</div>
  <div v-if="windowState === 12">
    <ExternalCurriculumList :ext-curr-list="extcurrlist" :mode="1"></ExternalCurriculumList>
    <button @click="windowState = 0;refreshExtCurrList()">Back to profile</button>
  </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{
  width:100%;
  grid-area:profilPic;
}

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

}

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

.moreInfos {
  margin-top: 50%;
  display:grid;
  grid-template-rows:200px auto;
  column-gap:50px;
  row-gap:45px;
  grid-template-areas:
  "minfos minfos";
  grid-template-columns:600px 600px;
  align-items:center;
  justify-content:center;
  margin-left: 320%;
}

.listTitle{
  display: flex;
  justify-content: center;
  align-items: center;
  width:250px;
  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;
}
.body {
    min-width:960px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:7%;
  }
 .containerElement{
   justify-content:center;
   display:grid;
   grid-template-columns:100px 100px 300px;
   grid-template-areas:
    "year option dateyear";
   column-gap:40px;
   padding-left: 25px;
    
  }


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

.infosContainer {
min-width:350px;
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;

}

button:hover{
  opacity:0.8;
}
</style>