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

<script setup>

import {reactive, ref} from "vue";
import i18n from "@/i18n.js";
import {getCourse} from "@/rest/courses.js";
import {getcurriculum} from "@/rest/curriculum.js";
import {uploadFile, uploadProfilePicture} from "@/rest/uploads.js";
import {createExemptionsRequest} 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 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 : "",
})
</script>

<template style="margin-top:5%;">
  <div v-if="list == true">
    <span>Selected Cursus :   </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"><button style="background-color:rgb(105,0,0);" @click="list= !list;exemptReq.courseId=item.courseId">Ask exemption</button></div>
        </div>
      </div>
    </div>
  </div>
  <div v-else>
      <p>Please upload the justification document for the exemption </p>
    <label class="browser">
      <input  type="file" @change="ppData.value = $event.target.files" accept="image/*" ref="filepath">
    </label>
    <button style="width:15%; margin-top: 5%;" @click="postExemptionRequest(ppData.value, 'JustificationDocument');">
      Submit exemption request
    </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;

}
</style>