proposition of some fixes

backend/build.gradle.kts

@@ -16,8 +16,6 @@ repositories {
 }
 
 dependencies {
-	compileOnly("org.projectlombok:lombok")
-	annotationProcessor("org.projectlombok:lombok")
 	implementation("org.springframework.boot:spring-boot-starter-jdbc")
 	implementation("org.springframework.boot:spring-boot-starter-data-jpa")
 	implementation("org.springframework.boot:spring-boot-starter-mail")
@@ -27,7 +25,7 @@ dependencies {
 	implementation("com.kohlschutter.junixsocket:junixsocket-core:2.9.0")
 	// implementation("org.springframework.session:spring-session-jdbc")
 	developmentOnly("org.springframework.boot:spring-boot-devtools")
-	developmentOnly("org.springframework.boot:spring-boot-docker-compose")
+	// developmentOnly("org.springframework.boot:spring-boot-docker-compose")
 	runtimeOnly("org.postgresql:postgresql")
 	testImplementation("org.springframework.boot:spring-boot-starter-test")
 	testImplementation("org.springframework.boot:spring-boot-testcontainers")

backend/src/main/java/ovh/herisson/Clyde/DTO/Msg/DiscussionDTO.java

@@ -1,26 +0,0 @@
-package ovh.herisson.Clyde.DTO.Msg;
-
-import java.util.ArrayList;
-import java.util.List;
-import java.util.stream.Collectors;
-
-import lombok.AllArgsConstructor;
-import lombok.Data;
-import ovh.herisson.Clyde.Tables.User;
-import ovh.herisson.Clyde.Tables.Msg.Discussion;
-import ovh.herisson.Clyde.DTO.Msg.MessagesDTO;
-
-@Data
-@AllArgsConstructor
-public class DiscussionDTO {
-	private long id;
-	private String name;
-	private List<User> members;
-	private List<MessagesDTO> msgs;
-
-	public static DiscussionDTO construct(Discussion d, User u){
-		List<MessagesDTO> msgsdto = new ArrayList<>();
-		d.getMsgs().forEach(x -> msgsdto.add(MessagesDTO.construct(x, u)));
-		return new DiscussionDTO(d.getId(), d.getName(), d.getMembers(), msgsdto);
-	} 
-}

backend/src/main/java/ovh/herisson/Clyde/DTO/Msg/MessagesDTO.java

@@ -1,23 +0,0 @@
-package ovh.herisson.Clyde.DTO.Msg;
-
-import lombok.AllArgsConstructor;
-import lombok.Data;
-import ovh.herisson.Clyde.Tables.User;
-import ovh.herisson.Clyde.Tables.Msg.Message;
-
-@Data
-@AllArgsConstructor
-public class MessagesDTO {
-	private long id;
-	private String content; 
-	private User author;
-	private boolean sender;
-	//TODO: Attachment
-
-	public static MessagesDTO construct(Message m, User user){
-		boolean sender = false;
-		if(m.getAuthor().equals(user))
-			sender = true;
-		return new MessagesDTO(m.getId(), m.getContent(), m.getAuthor(), sender);
-	}
-}

backend/src/main/java/ovh/herisson/Clyde/EndPoints/Msg/MessagesController.java

@@ -1,100 +0,0 @@
-package ovh.herisson.Clyde.EndPoints.Msg;
-
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.http.HttpStatus;
-import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.CrossOrigin;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PatchMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestHeader;
-import org.springframework.web.bind.annotation.RestController;
-
-import lombok.AllArgsConstructor;
-import ovh.herisson.Clyde.DTO.Msg.DiscussionDTO;
-import ovh.herisson.Clyde.Repositories.UserRepository;
-import ovh.herisson.Clyde.Repositories.Msg.DiscussionRepository;
-import ovh.herisson.Clyde.Responses.UnauthorizedResponse;
-import ovh.herisson.Clyde.Services.AuthenticatorService;
-import ovh.herisson.Clyde.Services.UserService;
-import ovh.herisson.Clyde.Services.Msg.DiscussionService;
-import ovh.herisson.Clyde.Tables.User;
-import ovh.herisson.Clyde.Tables.Msg.Discussion;
-import ovh.herisson.Clyde.Tables.Msg.Message;
-
-@RestController
-@CrossOrigin(originPatterns = "*", allowCredentials = "true")
-@AllArgsConstructor
-public class MessagesController {
-
-	private AuthenticatorService authServ;
-	private DiscussionService discServ;
-	private DiscussionRepository discRepo;
-	private UserService userServ;
-
-	@GetMapping("/discussions")
-	public ResponseEntity<Iterable<Discussion>> getDiscussions(@RequestHeader("Authorization") String token ){
-		User user = authServ.getUserFromToken(token);
-		if(user == null){
-			return new UnauthorizedResponse<>(null);
-		}
-
-		Iterable<Discussion> mock = discServ.getOwned(authServ.getUserFromToken(token));
-
-		return new ResponseEntity<>(mock, HttpStatus.OK); 
-	} 
-
-	@GetMapping("/discussion/{id}")
-	public ResponseEntity<DiscussionDTO> getDiscussion(@RequestHeader("Authorization") String token, @PathVariable long id){
-		return new ResponseEntity<>(DiscussionDTO.construct(discRepo.findById(id).orElse(null), authServ.getUserFromToken(token)), HttpStatus.OK);
-	} 
-
-	@PatchMapping("/discussion/{id}")
-	public ResponseEntity<Discussion> AlterDiscussion(@RequestHeader("Authorization") String token, @PathVariable long id, @RequestBody Discussion data){
-		User user = authServ.getUserFromToken(token);
-		if(user == null){
-			return new UnauthorizedResponse<>(null);
-		}
-
-		Discussion disc = discRepo.findById(id).orElse(null);
-		disc.setName(data.getName());
-		discRepo.save(disc);
-		return new ResponseEntity<>(disc, HttpStatus.OK);
-	}
-
-	@PatchMapping("/discussion/{id}/add")
-	public ResponseEntity<Discussion> AlterDiscussion(@RequestHeader("Authorization") String token, @PathVariable long id, @RequestBody User data){
-		User user = authServ.getUserFromToken(token);
-		if(user == null){
-			return new UnauthorizedResponse<>(null);
-		}
-
-		Discussion disc = discRepo.findById(id).orElse(null);
-		User invited = userServ.getUserById(data.getRegNo());
-		disc.addMember(invited);
-		discRepo.save(disc);
-		return new ResponseEntity<>(disc, HttpStatus.OK);
-	}
-
-	@PostMapping("/discussion/{id}")
-	public ResponseEntity<Discussion> sendMessage(@RequestHeader("Authorization") String token, @PathVariable long id, @RequestBody Message msg){
-		User user = authServ.getUserFromToken(token);
-		if(user == null){
-			return new UnauthorizedResponse<>(null);
-		}
-
-		Discussion disc = discRepo.findById(id).orElse(null);
-		msg.setAuthor(user);
-		if(disc != null)
-			discServ.CreateMessage(disc, msg);
-		return new ResponseEntity<>(disc, HttpStatus.OK);
-	}
-
-
-	@PostMapping("/discussion")
-	public ResponseEntity<Discussion> createDiscussion(@RequestHeader("Authorization") String token, @RequestBody Discussion data){
-		return new ResponseEntity<>(discServ.create(data.getName(), authServ.getUserFromToken(token)), HttpStatus.OK);
-	}
-}

backend/src/main/java/ovh/herisson/Clyde/Repositories/Msg/DiscussionRepository.java

@@ -1,14 +0,0 @@
-package ovh.herisson.Clyde.Repositories.Msg;
-
-import java.util.List;
-
-import org.springframework.data.jpa.repository.Query;
-import org.springframework.data.repository.CrudRepository;
-
-import ovh.herisson.Clyde.Tables.Msg.Discussion;
-
-public interface DiscussionRepository extends CrudRepository<Discussion, Long>{
-
-	@Query("SELECT d FROM Discussion d INNER JOIN FETCH d.members dm WHERE dm.id = ?1")
-	List<Discussion> findByMembership(long userid);
-}

backend/src/main/java/ovh/herisson/Clyde/Repositories/Msg/MessageRepository.java

@@ -1,8 +0,0 @@
-package ovh.herisson.Clyde.Repositories.Msg;
-
-import org.springframework.data.repository.CrudRepository;
-
-import ovh.herisson.Clyde.Tables.Msg.Message;
-
-public interface MessageRepository extends CrudRepository<Message, Long> {
-}

backend/src/main/java/ovh/herisson/Clyde/Services/Msg/DiscussionService.java

@@ -1,31 +0,0 @@
-package ovh.herisson.Clyde.Services.Msg;
-
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.stereotype.Service;
-
-import com.fasterxml.jackson.databind.util.JSONPObject;
-
-import ovh.herisson.Clyde.Repositories.Msg.DiscussionRepository;
-import ovh.herisson.Clyde.Tables.User;
-import ovh.herisson.Clyde.Tables.Msg.Discussion;
-import ovh.herisson.Clyde.Tables.Msg.Message;
-
-@Service
-public class DiscussionService {
-
-	@Autowired
-	private DiscussionRepository discRepo;
-
-	public Discussion create(String name, User author){
-		return discRepo.save(new Discussion(name, author));
-	}
-
-	public Iterable<Discussion> getOwned(User author){
-		return discRepo.findByMembership(author.getRegNo());
-	}
-
-	public Discussion CreateMessage(Discussion disc, Message msg){
-		disc.addMessage(msg);
-		return discRepo.save(disc);
-	}
-}

backend/src/main/java/ovh/herisson/Clyde/Tables/Msg/Discussion.java

@@ -1,58 +0,0 @@
-package ovh.herisson.Clyde.Tables.Msg;
-
-import java.util.List;
-
-import jakarta.persistence.CascadeType;
-import jakarta.persistence.Entity;
-import jakarta.persistence.GeneratedValue;
-import jakarta.persistence.GenerationType;
-import jakarta.persistence.Id;
-import jakarta.persistence.JoinColumn;
-import jakarta.persistence.JoinTable;
-import jakarta.persistence.ManyToMany;
-import jakarta.persistence.OneToMany;
-import lombok.Getter;
-import lombok.NoArgsConstructor;
-import lombok.Setter;
-import ovh.herisson.Clyde.Tables.User;
-
-@Entity
-@Getter
-@Setter
-@NoArgsConstructor
-public class Discussion{
-
-	@Id
-    @GeneratedValue(strategy = GenerationType.AUTO)
-	private long id;
-	private String name;
-
-    @ManyToMany
-	@JoinTable(
-		name = "discussion_members",
-		joinColumns = @JoinColumn(name = "discussion_id"),
-		inverseJoinColumns = @JoinColumn(name = "user_id")
-	)
-	private List<User> members;
-
-	@OneToMany(mappedBy="discussion", orphanRemoval = true, cascade = CascadeType.ALL)
-	private List<Message> msgs;
-
-	public Discussion(String name){
-		this.name = name;
-	}
-
-	public Discussion(String name, User user){
-		this.name = name;
-		this.members = List.of(user);
-	}
-
-	public void addMessage(Message msg){
-		msg.setDiscussion(this);
-		msgs.add(msg);
-	}
-
-    public void addMember(User user) {
-		members.add(user);
-    }
-}

backend/src/main/java/ovh/herisson/Clyde/Tables/Msg/Message.java

@@ -1,46 +0,0 @@
-package ovh.herisson.Clyde.Tables.Msg;
-
-import com.fasterxml.jackson.annotation.JsonIgnore;
-
-import jakarta.persistence.CascadeType;
-import jakarta.persistence.Entity;
-import jakarta.persistence.GeneratedValue;
-import jakarta.persistence.GenerationType;
-import jakarta.persistence.Id;
-import jakarta.persistence.ManyToOne;
-import jakarta.persistence.OneToMany;
-import jakarta.persistence.OneToOne;
-import lombok.AllArgsConstructor;
-import lombok.Getter;
-import lombok.NoArgsConstructor;
-import lombok.Setter;
-import ovh.herisson.Clyde.Tables.User;
-
-@Getter
-@Setter
-@NoArgsConstructor
-@AllArgsConstructor
-@Entity
-public class Message {
-	
-	@Id
-	@GeneratedValue(strategy = GenerationType.AUTO)
-	private long id;
-	private String content; 
-
-	@ManyToOne
-	private User author;
-
-	public User getAuthor() {
-        return author;
-    }
-
-    @OneToOne
-	private Message response;
-
-	@ManyToOne(optional = false)
-	@JsonIgnore
-	private Discussion discussion;
-
-	//TODO: Attachment
-}

backend/src/main/java/ovh/herisson/Clyde/Tables/User.java

@@ -1,11 +1,7 @@
 package ovh.herisson.Clyde.Tables;
 
 import jakarta.persistence.*;
-import ovh.herisson.Clyde.Tables.Msg.Discussion;
-import ovh.herisson.Clyde.Tables.Msg.Message;
-
 import java.util.Date;
-import java.util.List;
 
 
 @Entity
@@ -24,15 +20,6 @@ public class User {
     private String profilePictureUrl;
     private ovh.herisson.Clyde.Tables.Role role;
     private String password;
-
-	////// Extension Messagerie /////
-	@OneToMany(mappedBy = "author", cascade = CascadeType.ALL)
-	private List<Message> msgs;
-	/////////////////////////////////
-
-	@ManyToMany( mappedBy = "members" )
-	private List<Discussion> discussions;
-
     public User(String lastName, String firstName, String email, String address,
                 String country, Date birthDate, String profilePictureUrl, Role role, String password)
     {

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "clyde",
       "version": "0.0.0",
       "dependencies": {
+        "@canvasjs/vue-charts": "^1.0.4",
         "vite-plugin-top-level-await": "^1.4.1",
         "vue": "^3.4.15",
         "vue3-toastify": "^0.2.1"
@@ -29,6 +30,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@canvasjs/charts": {
+      "version": "3.7.45",
+      "resolved": "https://registry.npmjs.org/@canvasjs/charts/-/charts-3.7.45.tgz",
+      "integrity": "sha512-FPMX8wn+PEHzAa/GLBsL5lWB81AzKZLw51t7SiSUjMbtUN5/OIrmDcwUTw+53/Bbdd9gm2LLmxAdZsQ75JI31g=="
+    },
+    "node_modules/@canvasjs/vue-charts": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@canvasjs/vue-charts/-/vue-charts-1.0.4.tgz",
+      "integrity": "sha512-PzOA8xeb/f68a39uoFZNn843dGPU36bsqmbO5DWjP7k6FwkK5AeGkYa/H3RHC02Xc6mG68vg9aFNj2Fyqhu4UQ==",
+      "dependencies": {
+        "@canvasjs/charts": "^3.7.5",
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",

frontend/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@canvasjs/vue-charts": "^1.0.4",
     "vite-plugin-top-level-await": "^1.4.1",
     "vue": "^3.4.15",
     "vue3-toastify": "^0.2.1"

frontend/src/Apps/Msg.vue

@@ -1,189 +0,0 @@
-<!----------------------------------------------------
-	File:  Msg.vue
-	Author: Anthony Debucquoy
-	Scope: Extension messagerie
-	Description: Main msg page
------------------------------------------------------>
-
-<script setup>
-	import { ref, reactive } from 'vue'
-	import { discussionsList, currentDiscussion, fetchDiscussion, createDiscussion, sendMessage, updateDiscussionName, invite} from '@/rest/msg.js'
-
-	const msgContent = ref("");
-	const addMember = ref(false);
-
-</script>
-
-<template>
-	<div id="msg">
-		<div id="discList">
-			<div @click="fetchDiscussion(discussion.id)" class="discItem" v-for="discussion in discussionsList" :key="discussion.id">{{ discussion.name }}</div>
-			<button id="createDiscussion" @click="createDiscussion('New Discussion')">+</button>
-		</div>
-		<div id="discussion" v-if="currentDiscussion.length != 0">
-			<h1 id=msgName ><input class="InputTitle" type="text" @change="updateDiscussionName(currentDiscussion.id, currentDiscussion.name)" v-model="currentDiscussion.name"></h1>
-			<div id=msgs>
-				<div class="msg" v-for="msg in currentDiscussion.msgs" :sender="msg.sender" :key="msg.id">
-					{{ msg.content }}
-				</div>
-			</div>
-			<div id=messageBox>
-				<input type="text" v-model="msgContent">
-				<input type="submit" @click="sendMessage(currentDiscussion.id, msgContent, null)" value="send">
-			</div>
-		</div>
-		<div id="members" v-if="currentDiscussion.length != 0">
-			<div class="memberItem" v-for="member in currentDiscussion.members" :key="member.id">{{ member.firstName }} {{ member.lastName.toUpperCase() }}</div>
-			<input type=text id="addMembers" @focus="addMember = true" @blur="addMember = false;$event.target.value = ''" @change="invite(currentDiscussion.id, $event.target.value)" :placeholder="addMember ? 'Regno' : '+'"/>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-
-div#msg{
-	position: relative;
-	width: 100%;
-	height: 100%;
-
-	display: grid;
-	grid-template-columns: 20% auto 10%;
-}
-
-div#discList{
-	margin: 30px 0 30px 30px;
-	background-color: rgba(255, 255, 255, 0.05);
-	border-radius: 10px;
-	overflow: hidden;
-	padding: 10px;
-	display: flex;
-	flex-direction: column;
-}
-
-div#members{
-	margin: 30px 0;
-	border-radius: 10px 0 0 10px;
-	background-color: red;
-	background-color: rgba(255, 255, 255, 0.05);
-	overflow: hidden;
-	display: flex;
-	padding: 10px 0 0 10px;
-	flex-direction: column;
-}
-
-.InputTitle{
-	all: inherit;
-	margin: auto;
-}
-
-.discItem{
-	color: darkorange;
-	display: flex;
-	font-family: sans-serif;
-	font-weight: bold;
-	height: 4vh;
-	margin: 5px;
-	border-radius: 0 30px 30px 0;
-	align-items: center;
-	justify-content: center;
-	border: 1px solid darkorange;
-}
-
-.memberItem{
-	color: darkorange;
-	display: flex;
-	font-family: sans-serif;
-	font-weight: bold;
-	height: 4vh;
-	margin: 5px;
-	border-radius: 30px 0 0 30px;
-	align-items: center;
-	justify-content: center;
-	border: 1px solid darkorange;
-}
-
-#createDiscussion{
-	height: 4vh;
-	margin: 5px;
-	color: white;
-	background-color: green;
-	border-radius: 0 30px 30px 0;
-	border: none;
-	font-weight: 900;
-	font-size: 2em;
-}
-#addMembers{
-	height: 4vh;
-	margin: 5px;
-	text-align: center;
-	color: white;
-	background-color: green;
-	border-radius: 30px 0 0 30px;
-	border: none;
-	font-weight: 900;
-	font-size: 2em;
-}
-
-div#discussion{
-	display: flex;
-	flex-direction: column;
-	margin: 30px;
-	background-color: rgba(255, 255, 255, 0.05);
-	border-radius: 10px;
-}
-
-#msgName{
-	text-align: center;
-	display: block;
-	background-color: #2a1981;
-	border-radius: 5px;
-	color: white;
-	width: 75%;
-	margin: 30px auto;
-}
-
-.discItem:hover{
-	background-color: gray;
-}
-
-#msgs{
-	display: flex;
-	flex-grow: 1;
-	flex-direction: column;
-}
-
-.msg {
-	background-color: aliceblue;
-	font-family: sans-serif;
-	margin: 10px;
-	padding: 5px;
-	border-radius: 3px;
-	max-width: 50%;
-	align-self: start;
-}
-
-.msg[sender=true]{
-	background-color: darkorange;
-	align-self: end;
-}
-
-#messageBox{
-	display: flex;
-	margin: 10px;
-	border-radius: 5px;
-}
-
-#messageBox input[type="text"]{
-	align-self: end;
-	flex-grow: 1;
-}
-
-#messageBox input[type="submit"]{
-	position: absolute;
-	right: 50px;
-	margin: 2px;
-	border: none;
-	padding: 0 10px;
-}
-
-</style>

frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

@@ -0,0 +1,236 @@
+<!----------------------------------------------------
+	File:  ResearcherProfile.vue
+	Author: Maxime Bartha
+	Scope: Extension Publicatons scientifiquess
+	Description: Researcher Profile Page containing his articles and his statistics
+----------------------------------------------------->
+
+<script setup>
+import { ref, reactive } from "vue";
+const input = ref("");
+const statsOf = ref("");
+const statsBy = ref("");
+let chart;
+
+const jsonMockViewsByYears= [
+  {label: "2004", y:4},
+  {label: "2005", y:99},
+  {label: "2007", y:555},
+  {label: "2009", y:22},
+  {label: "2011", y:1666},
+]
+
+function inputKeyUp() {
+  let filter, ul, li, a, txtValue;
+  filter = input.value.toUpperCase();
+  if (document.getElementById("myUL") != null) {
+    ul = document.getElementById("myUL");
+    li = ul.getElementsByTagName("li");
+
+    // Loop through all list items, and hide those who don't match the search query
+    for (let i = 0; i < li.length; i++) {
+      a = li[i].getElementsByTagName("a")[0];
+      txtValue = a.textContent || a.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        li[i].style.display = "";
+      } else {
+        li[i].style.display = "none";
+      }
+    }
+  }
+}
+
+const options = reactive({
+    backgroundColor:null,
+    theme: "light2",
+    animationEnabled: true,
+    title: {
+      fontColor: "white",
+      text : "please select options",
+    },
+    data: [
+      {
+        type: "pie",
+        indexLabel: "{label} (#percent%)",
+        yValueFormatString: "#,##0",
+        indexLabelFontColor: "white",
+        toolTipContent:
+          "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
+      }]
+	});
+
+function update(){
+      options.title = {
+        fontColor: "white",
+        text: statsOf.value + " By "+ statsBy.value,
+      }
+      if (statsOf.value === "views" && statsBy.value === "years") {
+        options.data[0].dataPoints = jsonMockViewsByYears;
+      }
+
+      options.title.text = statsOf.value + " By "+ statsBy.value;
+      chart.render()
+    }
+</script>
+
+<template>
+  <div id="main">
+    <div id="profilePicture">
+      <img src="/Clyde.png" />
+    </div>
+    <div id="researcherInfos">
+      <div class="surrounded">John Doe</div>
+      <div class="surrounded">Orcid : 12144-2144-12336-B</div>
+      <div class="surrounded">Email : John.Doe@umons.ac.be</div>
+
+      <div class="surrounded">
+        site :
+        <a href="http://localhost:5173" style="color: #007aff">here</a>
+      </div>
+      <div class="surrounded">Domain : physics, IT</div>
+      <div id="coAuthorList" class="surrounded">Co-authors list : D</div>
+    </div>
+    <div id="stats">
+      <div class="surrounded">
+        Stat type :
+        <select @change="update()" id="stats-select" v-model="statsOf">
+          <option value="views">Views</option>
+          <option value="co-authors">Co-authors</option>
+          <option value="articles">Articles</option>
+          <option value="language">Languages</option>
+        </select>
+      </div>
+      <div class="surrounded">
+        Class by:
+        <select @change="update()" id="classed-select" v-model="statsBy">
+          <option selected="selected" value="years">Years</option>
+          <option value="months">Months</option>
+          <option value="topics">Topics</option>
+        </select>
+      </div>
+      <div id="statsPie">
+		  <CanvasJSChart :options="options" id=chart @chart-ref="c => chart = c "/>
+      </div>
+    </div>
+    <div id="articles">
+      <input
+        type="text"
+        id="search-input"
+        @keyup="inputKeyUp()"
+        placeholder="search articles"
+        v-model="input"
+      />
+      <ul id="myUL">
+        <li><a href="#">Adele</a></li>
+        <li><a href="#">Agnes</a></li>
+
+        <li><a href="#">Billy</a></li>
+        <li><a href="#">Bob</a></li>
+
+        <li><a href="#">Calvin</a></li>
+        <li><a href="#">Christina</a></li>
+        <li><a href="#">Cindy</a></li>
+      </ul>
+    </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;
+  align-self: center;
+  text-align: center;
+}
+
+#statsPie {
+
+}
+
+#articles {
+  background-color: orange;
+}
+
+#search-input {
+  width: 60%;
+  font-size: 16px;
+  padding: 12px 20px 12px 40px;
+  border: 1px solid #ddd;
+  margin-bottom: 12px;
+}
+
+#myUL {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+#myUL li a {
+  border: 1px solid #ddd;
+  /* Add a border to all links */
+  margin-top: -1px;
+  /* Prevent double borders */
+  background-color: #f6f6f6;
+  /* Grey background color */
+  padding: 12px;
+  /* Add some padding */
+  text-decoration: none;
+  /* Remove default text underline */
+  font-size: 18px;
+  /* Increase the font-size */
+  color: black;
+  /* Add a black text color */
+  display: block;
+  /* Make it into a block element to fill the whole list */
+}
+
+#myUL li a:hover:not(.header) {
+  background-color: #eee;
+}
+
+#Chart{
+    width: "100%";
+    height: "100%";
+}
+</style>

frontend/src/main.js

@@ -4,5 +4,8 @@ import 'https://kit.fontawesome.com/fb3bbd0a95.js'
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import CanvasJSChart from '@canvasjs/vue-charts';
 
-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(CanvasJSChart);
+app.mount('#app');

frontend/src/rest/apps.js

@@ -9,7 +9,7 @@ import Profil from "@/Apps/Profil.vue"
 import Courses from "@/Apps/ManageCourses.vue"
 import Users from "@/Apps/UsersList.vue"
 import Students from "@/Apps/StudentsList.vue"
-import Msg from "@/Apps/Msg.vue"
+import ResearcherProfile from "@/Apps/ScientificPublications/ResearcherProfile.vue";
 
 const apps = {
 		'/login': LoginPage,
@@ -18,7 +18,7 @@ const apps = {
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
-		'/msg' : Msg,
+		'/researcher-profile' : ResearcherProfile,
 }
 
 const appsList = {

frontend/src/rest/msg.js

@@ -1,51 +0,0 @@
-/*******************************************************
- * File: msg.js
- * Author: Anthony Debucquoy
- * Scope: Extension messagerie
- * Description: Messages frontend api consumer
- *******************************************************/
-
-import { restGet, restPost, restPatch } from './restConsumer.js'
-import { ref } from 'vue'
-
-/**
- * - id
- * - name
- * - members
- */
-export const discussionsList = ref();
-export const currentDiscussion = ref([]);
-
-
-export async function createDiscussion(name){
-	let disc = await restPost("/discussion", {name: name});
-	discussionsList.value.push(disc);
-}
-
-
-export async function invite(id, regNo){
-	restPatch("/discussion/"+ id+ "/add", {regNo: parseInt(regNo)}).then(() => fetchDiscussion(id))
-}
-
-export async function sendMessage(id, content, responseId){
-	let data = {
-		content: content,
-		response: responseId,
-	}
-	restPost("/discussion/" + id, data);
-}
-
-export async function updateDiscussionName(id, name){
-	restPatch("/discussion/" + id, {name: name}).then(() => fetchDiscussions());
-}
-
-
-async function fetchDiscussions(){
-	discussionsList.value = await restGet("/discussions");
-}
-
-export async function fetchDiscussion(id){
-	currentDiscussion.value = await restGet("/discussion/" + id);
-}
-
-await fetchDiscussions();