added article Popup

frontend/src/Apps/ScientificPublications/ArticleComponent.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { defineProps, defineEmits, ref } from "vue";
+import {onClickOutside} from '@vueuse/core'
+let checked = ref([])
+
+const props = defineProps({
+  isOpen: Boolean,
+});
+const example = ["Title","Author",["Co-author1", "co-Authors2"],
+  " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum ex tempor leo pulvinar, vitae imperdiet leo pellentesque. Aenean aliquam, ante at tempus sagittis, lorem leo feugiat felis, eget vestibulum tortor est nec libero. Cras sit amet venenatis velit, at rhoncus est. Cras id sem placerat, cursus sem et, aliquam felis. Nullam mi nunc, laoreet eget rutrum ac, blandit nec lorem. Duis fermentum aliquet tortor ac tristique. Aenean ac sagittis nulla, at auctor dolor. Vivamus et neque sodales, vestibulum dolor et, posuere urna. Pellentesque ut elit metus. Cras velit lectus, luctus auctor interdum eu, aliquam nec est. Donec elementum nisl sit amet nibh aliquam ultricies. Nullam felis orci, suscipit eu tincidunt pretium, euismod vel sem. Duis eget vehicula neque, nec gravida leo. Cras pellentesque arcu quis justo lobortis, ut semper massa rhoncus. Quisque sagittis dignissim congue. Nullam tortor ligula, mattis vel cursus id, pretium non lacus.",
+  "language",
+    "access",
+]
+const emit = defineEmits(["modal-close"]);
+
+const target = ref(null)
+onClickOutside(target, ()=>emit('modal-close'))
+
+</script>
+
+<template>
+  <div v-if="isOpen" class="modal-mask">
+    <div class="modal-wrapper">
+      <div class="modal-container" ref="target">
+       <ul v-for="n in example"><li>{{n}}</li></ul>
+        <div id="downloads">
+          <button @click.stop="emit('modal-close')">Download BibTex</button>
+          <button @click.stop="emit('modal-close')">Download Article</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-container {
+  width: 70%;
+  margin: 150px auto;
+  padding: 20px 30px;
+  background: rgba(157, 99, 205);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+}
+
+
+#downloads {
+  text-align: end;
+}
+#downloads button {
+  align-self: center;
+  margin-left: 2px;
+  font-size: large;
+  color: white;
+  background: rgba(191, 64, 191,0.5);
+  border:2px solid black;
+  border-radius: 5px;
+}
+
+</style>

frontend/src/Apps/ScientificPublications/FilterComponent.vue

@@ -7,10 +7,6 @@ const props = defineProps({
   isOpen: Boolean,
 });
 const example = ["A","B", "Lorem Ipsum AAAAAAAAAAAAAAAAAAA",
-"H",
-  "H",
-  "H",
-  "H",
   "H",
   "H",
   "H",
@@ -29,37 +25,19 @@ onClickOutside(target, ()=>emit('modal-close'))
     <div class="modal-wrapper">
       <div class="modal-container" ref="target">
         <div id="filterGrid">
-          <div>
+          <div> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
-            <ul>
-              <li v-for="n in example">{{n}}</li>
-            </ul>
-          </div>
           <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
-          <div class="vl">
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
-            <ul>
+          <div> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
-              <li v-for="n in example">{{n}}</li>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
-            </ul>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
-          </div>
+      </div>
-          <div>
+        <div id="submit">
-            <ul>
+          <button @click.stop="emit('modal-close')">Submit</button>
-              <li v-for="n in example">{{n}}</li>
-            </ul>
-          </div>
-          <div class="vl">
-            <ul>
-              <li v-for="n in example">{{n}}</li>
-            </ul>
-          </div>
-          <div class="vl"></div>
         </div>
-        <div>
-          <div id="submit">
-            <button @click.stop="emit('modal-close')">Submit</button>
-          </div>
       </div>
-      </div>
-    </div>
   </div>
+ </div>
 </template>
 
 <style scoped>
@@ -93,12 +71,13 @@ onClickOutside(target, ()=>emit('modal-close'))
   padding: 15px;
   height: 100px;
   overflow: scroll;
+  scrollbar-color: #8a2be2 rgb(255,255,255,0.04);
   background-color: rgba(255, 255, 255, 0.09);
   border-radius: 6px;
 }
 
 .vl {
-  border-left: 6px solid darkmagenta;
+  border-left: 6px solid #8a2be2;
 }
 #submit {
   text-align: end;

frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

@@ -8,10 +8,12 @@
 <script setup>
 import { ref, reactive } from "vue";
 import FilterComponent from "@/Apps/ScientificPublications/FilterComponent.vue";
+import ArticleComponent from "@/Apps/ScientificPublications/ArticleComponent.vue";
 const input = ref("");
 const statsOf = ref("");
 const statsBy = ref("");
 const isFilterOpened = ref(false);
+const isArticleOpened = ref(false);
 let chart;
 
 const openModal = () => {
@@ -20,22 +22,35 @@ const openModal = () => {
 const closeModal = () => {
   isFilterOpened.value = false;
 };
-const submitHandler = ()=>{
+const submitFilters = ()=>{
   // call only with those filters the get
 }
+const openArticle = (article) => {
+  isArticleOpened.value = true;
+}
+
+const closeArticle = () => {
+  isArticleOpened.value =false;
+}
+
+const downloadBibTex = (article) => {
+//todo
+}
+
+const downloadArticle = (article) => {
+ //todo
+}
+
 
 const articleList = [
-  "First Article",
+  ["The Great Potato War Lorem Ipsum aeaDq Terelumni ","Author",["Co-author1", "co-Authors2"],
-  "The composition of the light",
+  " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum ex tempor leo pulvinar, vitae imperdiet leo pellentesque. Aenean aliquam, ante at tempus sagittis, lorem leo feugiat felis, eget vestibulum tortor est nec libero. Cras sit amet venenatis velit, at rhoncus est. Cras id sem placerat, cursus sem et, aliquam felis. Nullam mi nunc, laoreet eget rutrum ac, blandit nec lorem. Duis fermentum aliquet tortor ac tristique. Aenean ac sagittis nulla, at auctor dolor. Vivamus et neque sodales, vestibulum dolor et, posuere urna. Pellentesque ut elit metus. Cras velit lectus, luctus auctor interdum eu, aliquam nec est. Donec elementum nisl sit amet nibh aliquam ultricies. Nullam felis orci, suscipit eu tincidunt pretium, euismod vel sem. Duis eget vehicula neque, nec gravida leo. Cras pellentesque arcu quis justo lobortis, ut semper massa rhoncus. Quisque sagittis dignissim congue. Nullam tortor ligula, mattis vel cursus id, pretium non lacus.",
-  "The composition of the sand",
+  "language",
-  "Fluctuation in universe beavers",
+    "access",
-  "The Potato War",
+  ]
-  "The Potato War",
-  "The Potato War",
-  "The Potato War",
-  "The Potato War",
 ]
 
+
 const jsonMockViewsByYears= [
   {label: "2004", y:4},
   {label: "2005", y:99},
@@ -45,17 +60,15 @@ const jsonMockViewsByYears= [
 ]
 
 function searchInList(list, searchInput){
+  let retList= []
   if (searchInput === "")
-    return list
+    return [list[0].slice(0,2)]
-  let retList =[]
   for (let i = 0; i < list.length; i++) {
-    console.log(list[i] + " et " + searchInput + " vaut " + lDistance(list[i], searchInput) )
+    console.log(list[i])
-    if (lDistance(list[i], searchInput) < 10){
+    if (lDistance(list[i][0], searchInput) < 10 || list[i][0].toUpperCase().indexOf(searchInput.toUpperCase()) > -1){
-      retList.push(list[i])
+      retList.push(list[i].slice(0,2))
-    }
-    else if(list[i].toUpperCase().indexOf(searchInput.toUpperCase()) > -1){
-      retList.push(list[i])
     }
+    console.log(list[i][0].toUpperCase().indexOf(searchInput.toUpperCase()))
   }
   return retList
 }
@@ -115,9 +128,9 @@ function update(){
 
 <template>
   <div id="main">
-    <FilterComponent :isOpen="isFilterOpened" @modal-close="closeModal" @submit="submitHandler" name="first-modal">
+    <FilterComponent :isOpen="isFilterOpened" @modal-close="closeModal" @submit="submitFilters">
-      <template #header> Coucou </template>
     </FilterComponent>
+    <ArticleComponent :isOpen="isArticleOpened" @modal-close="closeArticle"></ArticleComponent>
     <div id="profilePicture">
       <img src="/Clyde.png" />
     </div>
@@ -161,7 +174,10 @@ function update(){
         <button id="filterButton" @click="openModal">  Filters </button>
       </div>
       <ul id="articlesUL">
-        <li id="articleLi" v-for="n in searchInList(articleList,input)">{{n}}</li>
+        <li id="articleLi" v-for="n in searchInList(articleList,input)">
+          <div class="vl"> {{n[0]}}</div>
+          <div class="vl"> {{n[1]}}</div>
+         <a @click="openArticle"> MoreInfo  </a></li>
       </ul>
     </div>
   </div>
@@ -255,16 +271,25 @@ function update(){
   overflow: scroll;
 }
 #articleLi{
+  display: grid;
+  grid-template-columns: auto auto auto;
   border: 2px solid black;
   color: white;
   font-size: x-large;
-  align-self: center;
+  text-align: center;
-  text-align: left;
   text-indent: 7px;
-
   background-color: rgba(255, 255, 255, 0.09);
-  border-radius: 20px;
+  border-radius: 18px;
   margin-bottom: 15px;
 }
+a{
+  color:#007aff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.vl {
+  border-right: 2px solid black;
+}
 
 </style>