added reesearcher manager for secretary

frontend/src/Apps/AboutUser.vue

@@ -0,0 +1,207 @@
+<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";
+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 = props.user
+const isResearcher = ref(false)
+const creating = ref(false)
+
+for (let i = 0; i < allResearcher.value.length; i++) {
+  if (user.regNo === allResearcher.value[i].user.regNo){
+    researcher.value = allResearcher.value[i]
+    isResearcher.value = true
+  }
+}
+
+function getPP(){
+  if(user.profilePictureUrl === null){
+    return "/Clyde.png"
+  }
+  return user.profilePictureUrl
+}
+
+async function createResearcher(){
+  toCreate.user = user
+  await postResearcher(toCreate)
+  creating.value = false
+  for (let i = 0; i < allResearcher.value.length; i++) {
+    if (user.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()
+}
+
+</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="modifying= !modifying"> {{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{
+  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>

frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue

@@ -58,7 +58,7 @@ function getPP(){
       <div class="surrounded" v-else> {{i18n("To.Change.In.Options")}}</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-else>Orcid : <input v-model="toModify.orcidId"> </div>
 
       <div class="surrounded" v-if="!changing">Email : {{researcher.user.email}}</div>
       <div class="surrounded" v-else> {{i18n("To.Change.In.Options")}}</div>
@@ -66,10 +66,10 @@ function getPP(){
       <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-else>Site : <input v-model="toModify.site"></div>
 
       <div class="surrounded" v-if="!changing">{{i18n("Domain")}} : {{researcher.domain}}</div>
-      <div class="surrounded" v-else>Domain : <input v-model="toModify.domain"> </input></div>
+      <div class="surrounded" v-else>Domain : <input v-model="toModify.domain"></div>
 
       <div style="text-align: center; align-self: center" v-if="!changing"> <button class="modifyButton" @click="changing = !changing">{{i18n("Modify.Data")}}</button></div>
       <div v-else style="text-align: center; align-self: center">

frontend/src/Apps/UsersList.vue

@@ -1,20 +1,30 @@
 
 <script setup>
   import i18n from "@/i18n.js"
-  import { reactive  } from 'vue'
   import { getAllUsers } from '../rest/Users.js'
+  import {ref} from "vue";
+  import AboutUser from "@/Apps/AboutUser.vue";
+  const list = ref(true)
+  const targetRegNo =ref()
+
 
   const users = await getAllUsers();
   
 </script> 
 <template style="margin-top:5%;">
-  <div style="display:flex; justify-content:center; min-width:1140px;" v-for="item in users">
-    <div class="bodu">
+  <div v-if="list === false">
+    <AboutUser :user=target />
+    <button style="background-color:rgb(105,05,105);width:5%; margin-left: 10%;" @click="list = true;">Back</button>
+  </div>
+  <div style="display:flex; justify-content:center; min-width:1140px;" v-for="item in users" v-if="list">
+    <div class="body">
       <div class="container">
         <div class="role"><a style="margin-left:30px">{{i18n(item.role)}}</a></div>
         <div class="surname"><a>{{item.lastName}}</a></div>
         <div class="firstname"><a>{{item.firstName}}</a></div>
-        <div class="infos"><button style="background-color:rgb(105,05,105);" >{{i18n("request.moreInfos")}}   </button></div>
+        <div class="infos">
+          <button style="background-color:rgb(105,05,105);" @click="list = false; target = item;">{{i18n("request.moreInfos")}} </button>
+        </div>
       </div>
     </div>
   </div>
@@ -70,7 +80,7 @@
 
   }
 
-  .bodu {
+  .body {
     margin-top:2%;
     width:66%;
     border:2px solid black;

frontend/src/rest/ScientificPublications/ResearcherProfile.js

@@ -14,4 +14,12 @@ export async function fetchStats(id){
 
 export async function fetchResearch(id){
     return restGet("/research/" +id)
+}
+
+export async function deleteResearcher(id){
+    return restDelete("/researcher/" + id)
+}
+
+export async function postResearcher(data){
+    return restPost("/researcher", data)
 }