proposition of some fixes

frontend/src/Apps/ResearcherProfile.vue

@@ -1,156 +0,0 @@
-<script setup>
-  import CanvasJSChart from "@canvasjs/vue-charts";
-
-  const chartData ={
-      options: {
-    theme: "light2",
-        animationEnabled: true,
-        title:{
-      text: "Visitors By Channel"
-    },
-    data: [{
-      type: "pie",
-      indexLabel: "{label} (#percent%)",
-      yValueFormatString: "#,##0",
-      toolTipContent: "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
-      dataPoints: [
-        { label: "Organic Traffic", y: 130631 },
-        { label: "Direct", y: 28874 },
-        { label: "Referral", y: 15467 },
-        { label: "Social", y: 10543 },
-        { label: "Email", y: 5613 },
-        { label: "Others", y: 8492 }
-      ]
-    }]
-  },
-  styleOptions: {
-    width: "100%",
-        height: "360px"
-  }
-  }
-
-
-</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 name="stats" id="stats-select">
-      <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 name="classedBy" id="classed-select">
-      <option value="years">Years</option>
-      <option value="months">Months</option>
-      <option value="topics">Topics</option>
-    </select>
-    </div>
-    <div id="statsPie">
-      <CanvasJSChart :data="chartData"/>
-
-
-
-    </div>
-
-  </div>
-  <div id="articles">
-
-  </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;
-
-}
-
-#stats {
-
-}
-
-
-#articles {
-  background-color: orange;
-}
-
-</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/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 ResearcherProfile from "@/Apps/ResearcherProfile.vue";
+import ResearcherProfile from "@/Apps/ScientificPublications/ResearcherProfile.vue";
 
 const apps = {
 		'/login': LoginPage,