Fix the implementation of externalCurriculum upload

frontend/src/Apps/Login.vue

@@ -1,16 +1,15 @@
 <script setup>
   import {reactive, ref } from 'vue'
   import i18n from '@/i18n.js'
-  import { login , register , disconnect, isLogged} from '@/rest/Users.js'
-  import { getAllCurriculums } from '@/rest/curriculum.js'
+  import {login, register, disconnect, isLogged} from '@/rest/Users.js'
+  import {createExternalCurriculum, getAllCurriculums, getcurriculum} from '@/rest/curriculum.js'
   import { uploadProfilePicture } from '@/rest/uploads.js'
   import {toast} from 'vue3-toastify'
   import 'vue3-toastify/dist/index.css';
 
-
   const loginPage= ref(true)
   const page = ref(0)
-  
+
   const outputs = reactive({
     surname:null,
     firstname:null,
@@ -22,12 +21,30 @@
     curriculum:null,
   })
 
+  const notcompletedCheck = ref(false);
+
+  const externalCurr = reactive({
+    inscriptionRequestId : null,
+    school:null,
+    formation :null,
+    completion : null,
+    startYear : null,
+    endYear: null,
+    justifdocUrl : null
+  })
+
+  //Stores some externalCurriculums in order to upload them all at the confirmation of the registration request
+  const externalCurrTab = ref([]);
+
   const submitValue= ref(i18n("login.guest.submit"))
   const passwordConfirm=ref("")
  
   const imageSaved = ref(false)
   let ppData = ""
 
+  //Contains the id of the newly created request (useful to link the student's formations informations to the request)
+  let requestId = ""
+
   const curricula= await getAllCurriculums();
   
   function goBackHome(){
@@ -69,6 +86,26 @@
     let id = cursus.substring(0, cursus.indexOf(" ")+1);
     return id;
   }
+
+  async function getCurriculumYear(curriculumId){
+    const curriculum = await getcurriculum(curriculumId);
+    return parseInt(curriculum.year);
+  }
+
+
+
+  //Post the register request and return the id of the newly created request and also post the external curriculum list in the database
+  async function postRegisterReq(){
+    const val = await register(outputs.firstname, outputs.surname, outputs.birthday, outputs.password, outputs.email, outputs.address, outputs.country, parseDecoratedCursus(outputs.curriculum), ppData, null, new Date());
+    for (let item in externalCurrTab.value){
+      await createExternalCurriculum(val.id, externalCurrTab.value[item].school, externalCurrTab.value[item].formation, externalCurrTab.value[item].completion, externalCurrTab.value[item].startYear, externalCurrTab.value[item].endYear, externalCurrTab.value[item].justifdocUrl);
+    }
+  }
+
+
+  function deleteExtCursus(extcursus){
+    externalCurrTab.value.splice(externalCurrTab.value.indexOf(extcursus),1)
+  }
 </script>
 
 
@@ -168,7 +205,7 @@
                 changer de cursus/réinscription sinon continuez ici.
               </p>
               <div style="align-self:center;" class="inputBox">
-                <button style="margin-top:25px;" @click="page++; register(outputs.firstname, outputs.surname, outputs.birthday, outputs.password, outputs.email, outputs.address, outputs.country, parseDecoratedCursus(outputs.curriculum), ppData, null, new Date());">
+                <button style="margin-top:25px;" @click="page++;">
                   {{i18n("login.guest.nextpage")}}
                 </button>
               </div>
@@ -183,11 +220,65 @@
               <form novalidate enctype="multipart/form-data" class="inputBox">
                 Carte d'identité :
               </form>
+              <button @click="page++">{{i18n("login.guest.nextpage")}}</button>
+            </div>
+            <div v-if="page === 3">
+              <p>
+                Vous avez séléctionné un cursus qui possède des prérequis veuillez ajouter vos formations antérieures
+                dans l'enseignement supérieur, votre dossier sera vérifié par un membre du service d'inscription.
+              </p>
+              <button @click="page++">Ajouter une formation</button>
+              <button @click="postRegisterReq();">Envoyer la demande d'inscription</button>
+            </div>
+            <div v-if="page===4">
+              <form @submit.prevent=""class="form">
+                <div class="inputBox">
+                  <p>Ecole</p>
+                  <input type="text" v-model="externalCurr.school">
+                </div>
+                <div class="inputBox">
+                  <p>Formation</p>
+                  <input type="text" v-model="externalCurr.formation">
+                </div>
+                <div class="inputBox">
+                  <p>Cochez la case si vous n'avez terminé cette formation</p>
+                  <input v-model="notcompletedCheck" type="checkbox" id="checkboxformation">
+                  <div v-if="notcompletedCheck">
+                    <p>En quelle année de la formation vous êtes vous arrété (exemple: 3ème) ?</p>
+                    <input type="text" v-model="externalCurr.completion">
+                  </div>
+                </div>
+                <div class="inputBox">
+                  <p>Année de début</p>
+                  <input type="text" v-model="externalCurr.startYear">
+                </div>
+                <div class="inputBox">
+                  <p>Année de fin</p>
+                  <input type="text" v-model="externalCurr.endYear">
+                </div>
+                <div class="inputBox" style="margin-bottom:35px;">
+                  <input type="submit" v-model="submitValue" @click="externalCurrTab.push({inscriptionReqId:null, school:externalCurr.school, formation:externalCurr.formation, completion:externalCurr.completion, startYear:externalCurr.startYear, endYear:externalCurr.endYear, justifdocUrl:externalCurr.justifdocUrl});console.log(externalCurrTab);page--;">
+                </div>
+              </form>
             </div>
           </form>
          </div>
     </div>
   </div>
+  <div style="display:flex; justify-content:center; " v-for="item in externalCurrTab" v-if="page===3">
+    <div class="bodu">
+      <div class="container">
+        <div class="school"><a style="margin-left:30px;">{{item.school}}</a></div>
+        <div class="formation"><a>{{item.formation}}</a></div>
+        <div class="edit">
+          <button style="background-color:rgb(105,05,105);font-size:15px;height:50px;width:75%;border:none;border-radius:20px;" @click="externalCurr.school=item.school; externalCurr.completion=item.completion; externalCurr.formation=item.formation;externalCurr.endYear=item.endYear; externalCurr.startYear=item.startYear; externalCurr.justifdocUrl;page++;">Edit </button>
+        </div>
+        <div class="remove">
+          <button style="background-color:rgb(105,05,105);font-size:15px;height:50px;width:75%;border:none;border-radius:20px;" @click="deleteExtCursus(item)">Remove </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -196,9 +287,8 @@
   margin-left: auto;
   margin-right:auto;
   min-width:400px;
-
   width:25%;
-  height:60%;
+  height:50%;
 }
 
 
@@ -251,6 +341,14 @@
   cursor: pointer;
 }
 
+.bodu {
+  margin-top:2%;
+  width:50%;
+  border:2px solid black;
+  border-radius:9px;
+  background-color:rgb(50,50,50);
+}
+
 .switchpage{
   width:100px;
   border: none;
@@ -290,11 +388,22 @@ input[type=file]{
   background:#FFFFFF;
 }
 
+.container{
+  margin-top: 2%;
+  color:white;
+  height:60px;
+  font-size:30px;
+  display:grid;
+  grid-template-columns:30% 30% 20% 20%;
+  grid-template-areas:
+    "school formation completion edit remove";
+  column-gap:10px;
+}
+
 button:active ,.switchpage:active{
   opacity:0.8;
 
 }
 
 
-
 </style>