Start the rework of externalCurriculum interface

frontend/src/Apps/Inscription/AboutStudent.vue

@@ -88,7 +88,7 @@
     </div>
   </div>
   <div v-if="extercurrlist==true">
-      <ExternalCurriculumList :ext-curr-list="externalcurrlist"></ExternalCurriculumList>
+      <ExternalCurriculumList :ext-curr-list="externalcurrlist" :mode="1"></ExternalCurriculumList>
   </div>
 </template>
 

frontend/src/Apps/Inscription/ExternalCurriculumList.vue

@@ -1,25 +1,91 @@
 <script setup>
   import i18n from "@/i18n.js";
-  import {ref} from "vue";
+  import {reactive, ref} from "vue";
+  import {getSelf} from "@/rest/Users.js";
+  import {createExternalCurriculum, getExternalCurriculumByUser} from "@/rest/externalCurriculum.js";
 
-  const props = defineProps(["extCurrList"])
+  //mode 0 = externalcurr related to inscrreq, 1 = externalcurr related to user
+  const props = defineProps(["extCurrList", "mode"])
 
   const extCurrList = ref(props.extCurrList)
-  console.log(extCurrList)
+
+  const User = await getSelf()
+
+  const list = ref(true)
+
+  const notcompletedCheck = ref(false);
+
+  const externalCurr = reactive({
+    inscriptionRequestId : null,
+    school:null,
+    formation :null,
+    completion : "completed",
+    startYear : 0,
+    endYear: 0,
+    justifdocUrl : null,
+    userRegNo : null
+  })
+
+  if (props.mode === 1){
+    externalCurr.userRegNo = props.extCurrList[0].user.regNo
+  }
+
+  async function postExternalCurr(){
+    await createExternalCurriculum(externalCurr.inscriptionRequestId, externalCurr.school, externalCurr.formation, externalCurr.completion, externalCurr.startYear, externalCurr.endYear, externalCurr.justifdocUrl, externalCurr.userRegNo);
+    //We refresh the list
+    extCurrList.value = await getExternalCurriculumByUser(externalCurr.userRegNo);
+    list.value = !list.value;
+  }
 </script>
 
 <template style="margin-top:5%;">
-  <div style="display:flex; justify-content:center; " v-for="item in extCurrList">
-    <div class="bodu">
-      <div class="container">
-        <div class="status"><a style="margin-left:30px">{{item.state}}</a></div>
-        <div class="school"><a>{{item.school}}</a></div>
-        <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 v-if="list">
+    <div v-if="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 class="bodu">
+        <div class="container">
+          <div class="status"><a style="margin-left:30px">{{item.state}}</a></div>
+          <div class="school"><a>{{item.school}}</a></div>
+          <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>
       </div>
     </div>
   </div>
+  <div v-else class="loginbox" style="margin-left: 35%; margin-top: 3%">
+    <form 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="number" v-model="externalCurr.startYear">
+      </div>
+      <div class="inputBox">
+        <p>Année de fin</p>
+        <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()">
+      </div>
+    </form>
+  </div>
 </template>
 
 <style scoped>
@@ -61,18 +127,12 @@
   font-size: 70%;
 }
 
+
 .download{
   grid-area: download;
   align-self:center;
 }
-button{
-  font-size:15px;
-  height:50px;
-  width:75%;
-  border:none;
-  border-radius:20px;
 
-}
 
 .bodu {
   margin-top:2%;
@@ -82,6 +142,43 @@ button{
   background-color:rgb(50,50,50);
 }
 
+.loginbox {
+  background-color: rgb(24,24,24);
+  width: 400px;
+  display:flex;
+  justify-content: center;
+  border-radius: 5%;
+  box-shadow:0 5px 25px #000000;
+}
 
+.form {
+  position:relative;
+  width:100%;
+  display: flex;
+  flex-direction: column;
+  align-items:center;
+  gap: 3%;
+}
+
+.inputBox input,select {
+  width:100%;
+  border: none;
+  margin-right: 12.5%;
+  padding-left: 2.5%;
+  padding-top:2.5%;
+  padding-bottom:2.5%;
+  outline:none;
+  border-radius: 10px;
+  font-size:1.35em;
+}
+
+.inputBox p{
+  position:relative;
+  z-index: 100;
+  font-family:sans-serif ;
+  color:rgb(239,60,168);
+  transition: 0.5;
+
+}
 </style>