Clyde/frontend/src/Apps/AboutUser.vue

<script setup>
import i18n from "../i18n.js";
import {ref} from "vue";
import {fetchAllResearchers} from "@/rest/ScientificPublications/ManageResearch.js";
import {deleteResearcher, postResearcher} from "@/rest/ScientificPublications/ResearcherProfile.js";
import {patchUser} from "@/rest/Users.js";
const props = defineProps(['user'])
const modifying =ref(false)
const toModify = Object.assign({},{})
const toCreate = Object.assign({},{})
const allResearcher = ref( await fetchAllResearchers())
const researcher = ref()
const user = ref(props.user)
const isResearcher = ref(false)
const creating = ref(false)

for (let i = 0; i < allResearcher.value.length; i++) {
  if (user.value.regNo === allResearcher.value[i].user.regNo){
    researcher.value = allResearcher.value[i]
    isResearcher.value = true
  }
}

function getPP(){
  if(user.value.profilePictureUrl === null){
    return "/Clyde.png"
  }
  return user.value.profilePictureUrl
}

async function createResearcher(){
  toCreate.user = user.value
  await postResearcher(toCreate)
  creating.value = false
  for (let i = 0; i < allResearcher.value.length; i++) {
    if (user.value.regNo === allResearcher.value[i].user.regNo){
      researcher.value = allResearcher.value[i]
      isResearcher.value = true
    }
  }
  toCreate.value = Object.assign({},{})
}

async function deleteResearcherById(){
  isResearcher.value = false
  await deleteResearcher(researcher.value.id)
  allResearcher.value = await fetchAllResearchers()
}

async function modify(){
  if (modifying.value){
    user.value = await patchUser(user.value.regNo, toModify)
  }
  modifying.value =!modifying.value
}

</script>

<template>
  <div class="body">
    <div class="container">
      <div class="profilPic">
        <img class="subContainer" :src=getPP()>
      </div>
      <div class = "globalInfos">
        <div class="infosContainer">
          <div>
            {{i18n("RegNo")}} : {{user.regNo}}
          </div>
          <div>
            {{i18n("name")}} : {{user.firstName}} {{user.lastName}}
          </div>
          <div>
            Role :
            <span v-if="!modifying"> {{i18n(user.role)}}</span>
            <select v-else v-model="toModify.role">
              <option value="Student">{{i18n("Student")}}</option>
              <option value="Teacher">{{i18n("Teacher")}}</option>
              <option value="Secretary">{{i18n("Secretary")}}</option>
              <option value="InscriptionService">{{i18n("InscriptionService")}}</option>
            </select>
          </div>
          <div>
            E-mail: {{user.email}}
          </div>
          <div>
            {{i18n("Address")}} :
            <span v-if="!modifying"> {{user.address}}</span>
            <input v-else type="text" v-model="toModify.address">
          </div>
          <div>
            {{i18n("Country")}} : {{user.country}}
          </div>
          <div>
            {{i18n("BirthDate")}} : {{user.birthDate.split("T")[0]}}
          </div>
        </div>
      </div>
      <div></div>
      <button id="ModifyButton" @click="modify"> {{i18n("Modify.Data")}}</button>
      <div></div>
      <div>
        <button v-if="isResearcher" id="deleteButton" @click="deleteResearcherById"> {{i18n("Researcher.Delete")}}</button>
        <button v-else id="createButton" @click="creating = !creating"> {{i18n("Researcher.Add")}}</button>
      </div>
      <div v-if="creating">
        <button  id="createButton" @click="createResearcher"> {{i18n("Confirm")}}</button>
        <button  id="deleteButton" @click="creating = !creating"> {{i18n("Cancel")}}</button>
      </div>
      <div v-if="creating" style="color: white">
        <ul>
          <li>
            Orcid :
            <input type="text" v-model="toCreate.orcid"></li>
          <li>
            Site :
            <input type="text" v-model="toCreate.site"></li>
          <li>
            {{i18n("Domain")}} :
            <input type="text" v-model="toCreate.domain"></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
#ModifyButton{
  align-self: center;
  text-align: center;
  border: 2px solid black;
  color: white;
  font-size: xx-large;
  background-color:rgba(191, 64, 191,0.5);
  border-radius: 20px;
}
#ModifyButton:hover{
  background:rgba(191,64,191)
}

.container{
  margin-top: 25px;
  min-width:675px;
  display:grid;
  grid-template-columns:10vw 50vw;
  grid-template-rows:200px auto;
  column-gap:2.7%;
  row-gap:45px;
  grid-template-areas:
  "profilPic globalInfos"
  "minfos minfos";
}

.profilPic{
  grid-area:profilPic;
}

.globalInfos {
  grid-area:globalInfos;
  align-self :center;

}

.body {
  min-width:960px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:5%;
}

.subContainer{
  width:100%;
  background-color:rgb(50,50,50);
  border-radius:20px;
  border:4px solid black;
}

.infosContainer {
  border:2px solid black;
  font-size:23px;
  color:white;
  background-color:rgb(50,50,50);
  border-radius:10px;
}

#deleteButton{
  align-self: center;
  text-align: center;
  border: 2px solid black;
  color: white;
  font-size: x-large;
  background-color: red;
  border-radius: 20px;
}
#deleteButton:hover{
  background: #ff2d55;
}
#createButton{
  align-self: center;
  text-align: center;
  border: 2px solid black;
  color: white;
  font-size: x-large;
  background-color: #07bc0c;
  border-radius: 20px
}
#createButton:hover{
  background: #4cd964;
}


</style>