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

<script setup>
  import i18n from "@/i18n.js";
  import {reactive, ref} from "vue";
  import {getSelf} from "@/rest/Users.js";
  import {createExternalCurriculum, getExternalCurriculumByUser} from "@/rest/externalCurriculum.js";

  //mode 0 = externalcurr related to inscrreq, 1 = externalcurr related to user
  const props = defineProps(["extCurrList", "mode"])

  const extCurrList = ref(props.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 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>
.container{
  color:white;
  height:100px;
  font-size:30px;
  display:grid;
  grid-template-columns:15% 10% 20% 15% 13.1%;
  grid-template-areas:
    "status school formation completion download";
  column-gap:10px;
}

.status {
  grid-area:status;
  align-self:center;
  font-size: 70%;
}

.school{
  grid-area:school;
  align-self:center;
  font-size: 70%;
}

.formation{
  grid-area:formation;
  align-self:center;
  font-size: 70%;
}

.completion{
  grid-area:completion;
  align-self:center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  font-size: 70%;
}


.download{
  grid-area: download;
  align-self:center;
}


.bodu {
  margin-top:2%;
  width:66%;
  border:2px solid black;
  border-radius:9px;
  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>