Generalize the ExternalCurriculumList interface so it fits for inscriptionRequest, Studentlist, and inscriptionform

frontend/src/Apps/Inscription/AboutRequest.vue

@@ -62,7 +62,7 @@ async function editEquivalence(id, newstate){
     </div>
   </div>
   <div v-if="list==true">
-    <ExternalCurriculumList :ext-curr-list="externalCurriculum" :inscr-req-id="request.id"></ExternalCurriculumList>
+    <ExternalCurriculumList :ext-curr-list="externalCurriculum" :mode="0"></ExternalCurriculumList>
     <div style="margin-left: 15%;margin-top: 5%;">
       <button style="margin-left: 2%" @click="list = false;editEquivalence(request.id, 'Accepted'); request.equivalenceState='Accepted'">Accept Equivalence</button>
       <button style="margin-left: 2%" @click="list = false;editEquivalence(request.id, 'Refused'); request.equivalenceState='Refused'">Refuse Equivalence</button>

frontend/src/Apps/Inscription/ExternalCurriculumList.vue

@@ -4,15 +4,23 @@
   import {getSelf} from "@/rest/Users.js";
   import {createExternalCurriculum, getExternalCurriculumByUser} from "@/rest/externalCurriculum.js";
 
-  //mode 0 = externalcurr related to inscrreq, 1 = externalcurr related to user
+  //mode 0 = externalcurr related to inscrreq, 1 = externalcurr related to user, 2 inscription procedure
   const props = defineProps(["extCurrList", "mode"])
 
-  const extCurrList = ref(props.extCurrList)
+  //Only usefull to pass the external curr array in the inscription procedure
+  const externalCurrTab = defineModel();
+
+  const extCurrList = ref({})
+  let extNum = 0
+  const User = ref({})
+
+  if (props.mode === 1){
+    User.value = await getSelf()
+  }
 
-  const User = await getSelf()
 
   const list = ref(true)
-
+  const editmode = ref(false)
   const notcompletedCheck = ref(false);
 
   const externalCurr = reactive({
@@ -28,22 +36,49 @@
 
   if (props.mode === 1){
     externalCurr.userRegNo = props.extCurrList[0].user.regNo
+  }else if(props.mode === 2){
+    extCurrList.value = externalCurrTab.value
+  }
+
+  if(props.mode !== 2){
+    extCurrList.value = props.extCurrList
+    console.log("oe")
+  }
+
+  function deleteExtCursus(extcursus){
+    externalCurrTab.value.splice(externalCurrTab.value.indexOf(extcursus),1)
   }
 
   async function postExternalCurr(){
-    await createExternalCurriculum(externalCurr.inscriptionRequestId, externalCurr.school, externalCurr.formation, externalCurr.completion, externalCurr.startYear, externalCurr.endYear, externalCurr.justifdocUrl, externalCurr.userRegNo);
+    if (props.mode === 1){
-    //We refresh the list
+      await createExternalCurriculum(externalCurr.inscriptionRequestId, externalCurr.school, externalCurr.formation, externalCurr.completion, externalCurr.startYear, externalCurr.endYear, externalCurr.justifdocUrl, externalCurr.userRegNo);
-    extCurrList.value = await getExternalCurriculumByUser(externalCurr.userRegNo);
+      //We refresh the list
-    list.value = !list.value;
+      extCurrList.value = await getExternalCurriculumByUser(externalCurr.userRegNo);
+      list.value = !list.value;
+    }else if (props.mode === 2){
+      externalCurrTab.value.push({
+        inscriptionRequestId : externalCurr.inscriptionRequestId,
+          school:externalCurr.school,
+          formation :externalCurr.formation,
+          completion : externalCurr.completion,
+          startYear : externalCurr.startYear,
+          endYear: externalCurr.endYear,
+          justifdocUrl : externalCurr.justifdocUrl,
+          userRegNo : externalCurr.userRegNo
+      });
+      extCurrList.value = externalCurrTab.value
+      list.value = !list.value;
+      console.log(externalCurrTab.value)
+    }
   }
 </script>
 
 <template style="margin-top:5%;">
   <div v-if="list">
-    <div v-if="User.regNo === externalCurr.userRegNo" style="margin-left: 2%;margin-top: 2%">
+    <div v-if="props.mode === 2||User.regNo === externalCurr.userRegNo" style="margin-left: 2%;margin-top: 2%">
       <button @click="list = !list">Add external curriculum</button>
     </div>
-    <div style="display:flex; justify-content:center; " v-for="item in extCurrList">
+    <div style="display:flex; justify-content:center; " v-for="(item, index) in extCurrList">
       <div class="bodu">
         <div class="container">
           <div class="status"><a style="margin-left:30px">{{item.state}}</a></div>
@@ -51,6 +86,8 @@
           <div class="formation"><a>{{item.formation}}</a></div>
           <div class="completion"><a>{{item.completion}}</a></div>
           <div class="download"><button>Download document</button></div>
+          <div class="edit" v-if="props.mode === 2"><button @click="list=!list;externalCurr.justifdocUrl=item.justifDocUrl; externalCurr.endYear = item.endYear; externalCurr.startYear = item.startYear; externalCurr.school = item.school;externalCurr.completion = item.completion;externalCurr.formation=item.formation;editmode=!editmode;extNum=index">Edit</button></div>
+          <div class="delete" v-if="props.mode === 2"><button @click="deleteExtCursus(item)">Delete</button></div>
         </div>
       </div>
     </div>
@@ -82,7 +119,8 @@
         <input type="number" v-model="externalCurr.endYear">
       </div>
       <div class="inputBox" style="margin-top: 3%; margin-bottom: 3%">
-        <input type="submit" value="Upload curriculum" @click="postExternalCurr()">
+        <input v-if="!editmode" type="submit" value="Upload curriculum" @click="postExternalCurr()">
+        <input v-else type="submit" value="Edit curriculum" @click="externalCurrTab[extNum] = {inscriptionRequestId : externalCurr.inscriptionRequestId,school:externalCurr.school,formation :externalCurr.formation,completion : externalCurr.completion,startYear : externalCurr.startYear,endYear: externalCurr.endYear,justifdocUrl : externalCurr.justifdocUrl,userRegNo : externalCurr.userRegNo};editmode=!editmode;list=!list">
       </div>
     </form>
   </div>
@@ -94,9 +132,9 @@
   height:100px;
   font-size:30px;
   display:grid;
-  grid-template-columns:15% 10% 20% 15% 13.1%;
+  grid-template-columns:5% 10% 20% 15% 20% 10%;
   grid-template-areas:
-    "status school formation completion download";
+    "status school formation completion download edit delete";
   column-gap:10px;
 }
 
@@ -106,6 +144,15 @@
   font-size: 70%;
 }
 
+.edit{
+  grid-area: edit;
+  align-self: center;
+}
+
+.delete{
+  grid-area: delete;
+  align-self: center;
+}
 .school{
   grid-area:school;
   align-self:center;

frontend/src/Apps/Login.vue

@@ -7,6 +7,8 @@
   import {toast} from 'vue3-toastify'
   import 'vue3-toastify/dist/index.css';
   import {createExternalCurriculum} from "@/rest/externalCurriculum.js";
+  import ManageCourses from "@/Apps/ManageCourses.vue";
+  import ExternalCurriculumList from "@/Apps/Inscription/ExternalCurriculumList.vue";
 
   const loginPage= ref(true)
   const page = ref(0)
@@ -90,16 +92,11 @@
       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>
 
 
 <template>
-    <div class="setup">
+    <div class="setup" v-if="page !== 4">
       <div v-if="loginPage">
       <div class='loginBox' style="margin-top:30%;">
           <form @submit.prevent="login(outputs.email,outputs.password);goBackHome();"class="form">
@@ -216,57 +213,16 @@
                 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="page++">Gèrer mon parcours extérieur</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 v-if="page===4">
-    <div class="bodu">
+    <ExternalCurriculumList v-model="externalCurrTab" :mode="2"></ExternalCurriculumList>
-      <div class="container">
+    <button style="margin-top: 2%;width: 5%; margin-left: 2%" @click="page--">Back</button>
-        <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>