Clyde/frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue

<script setup>
import { ref} from "vue";
import {fetchResearches, } from "@/rest/ScientificPublications/ResearcherProfile.js";
import {getSelf, patchProfile} from "@/rest/ScientificPublications/ManageResearcherProfile.js";
import ResearchPostComponent from "@/Apps/ScientificPublications/ResearchPostComponent.vue";
import ListResearches from "@/Apps/ScientificPublications/ListResearches.vue";
const input = ref("");
const isPostResearchOpened = ref(false);
const changing = ref(false);

let toModify= Object.assign({}, {});

const researcher = ref(await getSelf());
const researchList = ref(await fetchResearches(researcher.value.id));
function openPostResearch(){
  isPostResearchOpened.value = true
}
function cancelChanges(){
  changing.value = false
  toModify= Object.assign({}, {});
}
async function confirmChanges(){
  await patchProfile(researcher.value.id, toModify)
  changing.value = false
  toModify= Object.assign({}, {});
  researcher.value = await getSelf();
}

async function modifiedResearch(){
  researchList.value = await fetchResearches(researcher.value.id)
}


</script>

<template> <div class="body"><div id="main">
    <ResearchPostComponent :researcher="researcher" :isOpen="isPostResearchOpened" @modal-close="isPostResearchOpened = false" @posted="modifiedResearch"></ResearchPostComponent>
    <div id="profilePicture">
      <img src="/Clyde.png" />
    </div>
    <div id="researcherInfos">
      <div class="surrounded" v-if="!changing">{{researcher.user.lastName}} {{researcher.user.firstName}}</div>
      <div class="surrounded" v-else> To Be changed in manage (simple) Profile</div>

      <div class="surrounded" v-if="!changing">Orcid : {{researcher.orcidId}}</div>
      <div class="surrounded" v-else>Orcid : <input v-model="toModify.orcidId"> </input></div>

      <div class="surrounded" v-if="!changing">Email : {{researcher.user.email}}</div>
      <div class="surrounded" v-else> To Be changed in manage (simple) Profile</div>

      <div class="surrounded" v-if="!changing">
        site : <a :href=researcher.site style="color: #007aff"> {{researcher.site}}</a>
      </div>
      <div class="surrounded" v-else>Site : <input v-model="toModify.site"></input></div>

      <div class="surrounded" v-if="!changing">Domain : {{researcher.domain}}</div>
      <div class="surrounded" v-else>Domain : <input v-model="toModify.domain"> </input></div>

      <div style="text-align: center; align-self: center" v-if="!changing"> <button class="modifyButton" @click="changing = !changing">Modify Data</button></div>
      <div v-else style="text-align: center; align-self: center">
        <button id="confirmButton" @click="confirmChanges">Confirm Changes</button>
         <button id="cancelButton" @click="cancelChanges">Cancel Changes</button>
      </div>
    </div>
    <div class="postArticle" style="text-align: center">
     <button class="modifyButton" @click="openPostResearch">Post a Research</button>


    </div>
    <div> <ListResearches :research-list="researchList" :manage="true" @modified="modifiedResearch"></ListResearches> </div>
  </div>
</div>
</template>

<style scoped>

#main {
  display: grid;
  grid-template-columns: 22% auto;
  grid-template-rows: 26% auto;
  height: 100%;
  width: 100%;
}

#profilePicture {
  display: flex;
  justify-content: center;
}

#profilePicture img {
  align-self: center;
  justify-self: center;
  width: 60%;
}

#researcherInfos {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 5px;
  grid-template-rows: auto auto;
}

.surrounded {
  border: 2px solid black;
  color: white;
  font-size: x-large;
  align-self: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  margin-bottom: 10px;
}

.surrounded select {
  margin-top: 2px;
  margin-bottom: 2px;
  border: 1px solid black;
  color: white;
  background-color: rgb(255, 255, 255, 0.1);
  font-size: large;
}

.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;
  margin-bottom: 20px;
}

.modifyButton:hover{
  background:rgba(191,64,191)
}

#cancelButton{
  align-self: center;
  text-align: center;
  border: 2px solid black;
  color: white;
  font-size: x-large;
  background-color: red;
  border-radius: 20px;
}
#cancelButton:hover{
  background: #ff2d55;
}

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

a{
  color:#007aff;
  text-decoration: underline;
  cursor: pointer;
}
</style>