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

<script setup>

import {reactive, ref} from "vue";
import i18n from "@/i18n.js";
import {getcurriculum} from "@/rest/curriculum.js";
import {uploadFile} from "@/rest/uploads.js";
import {createExemptionsRequest, getExempByUser} from "@/rest/requests.js";
import {getSelf} from "@/rest/Users.js";

const props = defineProps(["cursuslist"])
const selectedCurriculum = ref(props.cursuslist[0])
const user = await getSelf()

const windowState = defineModel("windowState")
const exempList = await getExempByUser(user.regNo)
const submitted = ref(false)
const courseslist = ref(await getcurriculum(selectedCurriculum.value.curriculumId))
const list = ref(true)

const ppData = ref({})
async function updateCourseList(){
  courseslist.value = await getcurriculum(selectedCurriculum.value.curriculumId)
}

async function postExemptionRequest(file, type){
  const a = await uploadFile(file, type);
  exemptReq.justifDocument = a.url
  await createExemptionsRequest(exemptReq)
}
const exemptReq = reactive({
  userRegNo : user.regNo,
  courseId : null,
  justifDocument : "",
})

function isExempted(course){
  for (let i = 0; i < exempList.length; i++){
    if (exempList[i].course.courseID === course.courseId && exempList[i].state === "Accepted"){
      return true
    }
    return false
  }
}
</script>

<template style="margin-top:5%;">
  <div v-if="list == true">
    <span>{{i18n("selectedcursus")}} :   </span>
    <select v-model="selectedCurriculum" @change="updateCourseList">
      <option v-for="item in props.cursuslist" :value="item">Bac {{item.year}} {{item.option}}</option>
    </select>
    <div style="display:flex; justify-content:center;" v-for="item in courseslist.courses">
      <div class="bodu">
        <div class="container">
          <div class="title">{{item.title}}</div>
          <div class="firstname">{{item.owner.firstName}}</div>
          <div class="lastname">{{item.owner.lastName}}</div>
          <div class="credits">credits : {{item.credits}}</div>
          <div class="askexemption" v-if="!isExempted(item)"><button style="background-color:rgb(105,0,0);" @click="list= !list;exemptReq.courseId=item.courseID;">{{i18n("askexemp")}}</button></div>
          <div v-else class="askexemption" style="font-size: 50%">{{ i18n("exemp") }}</div>
        </div>
      </div>
    </div>
    <div>
      <button @click="windowState = 0">{{ i18n("courses.back")}}</button>
    </div>
  </div>
  <div v-if="list === false"  class="infosContainer">
      <p v-if="!submitted">{{ i18n("uploadjustifdoc") }} </p>
    <div>
    <label class="browser" v-if="!submitted">
      <input  type="file" @change="ppData.value = $event.target.files" ref="filepath">
    </label>
    </div>
    <button style="margin-top: 3%" v-if="!submitted" @click="postExemptionRequest(ppData.value, 'JustificationDocument');submitted=!submitted">
      {{ i18n("subexemreq") }}
    </button>
    <div v-if="submitted">
      {{i18n("reqsent")}}
    </div>
  </div>
  <div v-if="list === false">
    <button @click="list=!list;submitted=false">{{ i18n("courses.back") }}</button>
  </div>
</template>

<style scoped>
.container{
  color:white;
  height:100px;
  font-size:30px;
  display:grid;
  grid-template-columns:30% 20% 15% 15% 15%;
  grid-template-areas:"title firstname lastname credits askexemption";
  column-gap:10px;
}

.title {
  grid-area:title;
  align-self:center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  font-size: 50%;
  margin-left:30px;
}

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

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


.firstname{
  grid-area:firstname;
  align-self:center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  font-size: 50%;
  padding-left: 30%;
}


.bodu {
  margin-top:2%;
  width:100%;
  border:2px solid black;
  border-radius:9px;
  background-color:rgb(50,50,50);
}

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

}

.infosContainer {
  padding-bottom:50px;
  border:2px solid black;
  font-size:25px;
  color:white;
  padding:20px;
  background-color:rgb(50,50,50);
  border-radius:20px;
}
</style>