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";
  import {uploadFile} from "@/rest/uploads.js";

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

  //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 list = ref(true)
  const editmode = ref(false)
  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
  }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(){
    if (props.mode === 1){
      const temp = await uploadFile(externalCurr.justifdocUrl, "JustificationDocument")
      await createExternalCurriculum(externalCurr.inscriptionRequestId, externalCurr.school, externalCurr.formation, externalCurr.completion, externalCurr.startYear, externalCurr.endYear, temp.url, externalCurr.userRegNo);
      //We refresh the list
      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;
    }
  }
</script>

<template style="margin-top:5%;">
  <div v-if="list">
    <div v-if="props.mode === 2||User.regNo === externalCurr.userRegNo" style="margin-left: 2%;margin-top: 2%">
      <button @click="list = !list" style="margin-left:15%;">{{ i18n("addextcurr") }}</button>
    </div>
    <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>
          <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>{{ i18n("dldoc") }}</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">{{i18n("edit")}}</button></div>
          <div class="delete" v-if="props.mode === 2"><button @click="deleteExtCursus(item)">{{ i18n("delete") }}</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>{{ i18n("school") }}</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>{{i18n("checkifnotcompleted")}}</p>
        <input v-model="notcompletedCheck" type="checkbox" id="checkboxformation">
        <div v-if="notcompletedCheck">
          <p>{{i18n("wichyearstop")}}</p>
          <input type="text" v-model="externalCurr.completion">
        </div>
      </div>
      <div class="inputBox">
        <p>{{ i18n("startyear") }}</p>
        <input type="number" v-model="externalCurr.startYear">
      </div>
      <div class="inputBox">
        <p>{{ i18n("endyear") }}</p>
        <input type="number" v-model="externalCurr.endYear">
      </div>
      <div class="inputBox">
        <p>{{i18n("giveextcurdoc")}}</p>
        <input type="file" @change="externalCurr.justifdocUrl = $event.target.files">
      </div>
      <div class="inputBox" style="margin-top: 3%; margin-bottom: 3%">
        <input v-if="!editmode" type="submit" value="upload" @click="postExternalCurr()">
        <input v-else type="submit" value="edit" @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>
</template>

<style scoped>
.container{
  color:white;
  height:100px;
  font-size:30px;
  display:grid;
  grid-template-columns:5% 10% 20% 15% 20% 10%;
  grid-template-areas:
    "status school formation completion download edit delete";
  column-gap:10px;
}

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

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

.delete{
  grid-area: delete;
  align-self: center;
}
.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);
}

button{
  border:none;
  background-color:rgb(239, 60, 168);
  border-radius:10px;
  height:35px;
  margin-top:10px;
}
</style>