|  |  |  | @ -2,13 +2,14 @@ | 
		
	
		
			
				|  |  |  |  | import { ref} from "vue"; | 
		
	
		
			
				|  |  |  |  | import FilterComponent from "@/Apps/ScientificPublications/FilterComponent.vue"; | 
		
	
		
			
				|  |  |  |  | import ArticleComponent from "@/Apps/ScientificPublications/ResearchComponent.vue"; | 
		
	
		
			
				|  |  |  |  | import {getFile, fetchResearches, addView} from "@/rest/ScientificPublications/ManageResearch.js"; | 
		
	
		
			
				|  |  |  |  | import {getFile, fetchAllResearches, addView} from "@/rest/ScientificPublications/ManageResearch.js"; | 
		
	
		
			
				|  |  |  |  | const input = ref("") | 
		
	
		
			
				|  |  |  |  | const isFilterOpened = ref(false); | 
		
	
		
			
				|  |  |  |  | const isResearchOpened = ref(false); | 
		
	
		
			
				|  |  |  |  | const articleToDisplay = ref(Object) | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | const researchList = ref(await fetchResearches(1)); | 
		
	
		
			
				|  |  |  |  | const researchList = ref(await fetchAllResearches()); | 
		
	
		
			
				|  |  |  |  | const isResearcher = ref(false) | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | const props = defineProps({ | 
		
	
		
			
				|  |  |  |  |   filters: ref([""]), | 
		
	
	
		
			
				
					
					|  |  |  | @ -52,7 +53,11 @@ function downloadCoAuthors(){ | 
		
	
		
			
				|  |  |  |  | function searchInList(list, searchInput) { | 
		
	
		
			
				|  |  |  |  |   let retList = [] | 
		
	
		
			
				|  |  |  |  |   for (let i = 0; i < list.length; i++) { | 
		
	
		
			
				|  |  |  |  |     if (lDistance(list[i].title, searchInput) < 10 || list[i].title.toUpperCase().indexOf(searchInput.toUpperCase()) > -1){ | 
		
	
		
			
				|  |  |  |  |     let researcher = list[i].researcher.user.firstName + " " +list[i].researcher.user.lastName | 
		
	
		
			
				|  |  |  |  |     if (isResearcher.value && (lDistance(researcher, searchInput) < 5 || researcher.toUpperCase().indexOf(searchInput.toUpperCase()) > -1)){ | 
		
	
		
			
				|  |  |  |  |       retList.push(list[i]) | 
		
	
		
			
				|  |  |  |  |     } | 
		
	
		
			
				|  |  |  |  |     if (!isResearcher.value && (lDistance(list[i].title, searchInput) < 10 || list[i].title.toUpperCase().indexOf(searchInput.toUpperCase()) > -1)){ | 
		
	
		
			
				|  |  |  |  |       retList.push(list[i]) | 
		
	
		
			
				|  |  |  |  |     } | 
		
	
		
			
				|  |  |  |  |   } | 
		
	
	
		
			
				
					
					|  |  |  | @ -87,8 +92,12 @@ function lDistance(s,t){ | 
		
	
		
			
				|  |  |  |  |   <ArticleComponent :article="articleToDisplay" :isOpen="isResearchOpened" :manage="false" @modal-close="closeResearch" @downloadPdf="downloadArticle(articleToDisplay)" @downloadBibTex="downloadBibTex(articleToDisplay)"></ArticleComponent> | 
		
	
		
			
				|  |  |  |  |   <div id="researches"> | 
		
	
		
			
				|  |  |  |  |     <div id="search"> | 
		
	
		
			
				|  |  |  |  |       <input type="text" id="search-input" placeholder="search for researches" v-model="input"/> | 
		
	
		
			
				|  |  |  |  |       <input v-if="!isResearcher" type="text" id="search-input" placeholder="search for researches" v-model="input"/> | 
		
	
		
			
				|  |  |  |  |       <input v-else type="text" id="search-input" placeholder="search for researcher" v-model="input"/> | 
		
	
		
			
				|  |  |  |  |       <button id="filterButton" @click="openFilter">  Filters </button> | 
		
	
		
			
				|  |  |  |  |       <button v-if="!isResearcher" id="unToggledResearchButton" @click="isResearcher = !isResearcher">  Toggle Researcher Search</button> | 
		
	
		
			
				|  |  |  |  |       <button v-if="isResearcher" id="toggledResearchButton" @click="isResearcher = !isResearcher">  UnToggle Researcher Search</button> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |     </div> | 
		
	
		
			
				|  |  |  |  |     <ul id="researchUL"> | 
		
	
		
			
				|  |  |  |  |       <li id="researchLi" v-for="n in searchInList(researchList,input)"> | 
		
	
	
		
			
				
					
					|  |  |  | @ -102,4 +111,95 @@ function lDistance(s,t){ | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | <style scoped> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | #main { | 
		
	
		
			
				|  |  |  |  |   height: 100%; | 
		
	
		
			
				|  |  |  |  |   width: 100%; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | #search{ | 
		
	
		
			
				|  |  |  |  |   width: 100%; | 
		
	
		
			
				|  |  |  |  |   height: 10%; | 
		
	
		
			
				|  |  |  |  |   display: inline-flex; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  | #search-input { | 
		
	
		
			
				|  |  |  |  |   margin-left: 25px; | 
		
	
		
			
				|  |  |  |  |   width: 75%; | 
		
	
		
			
				|  |  |  |  |   font-size: 16px; | 
		
	
		
			
				|  |  |  |  |   padding: 12px 20px 12px 40px; | 
		
	
		
			
				|  |  |  |  |   border: 1px solid #ddd; | 
		
	
		
			
				|  |  |  |  |   height: 20px; | 
		
	
		
			
				|  |  |  |  |   align-self: center; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | #filterButton { | 
		
	
		
			
				|  |  |  |  |   align-self: center; | 
		
	
		
			
				|  |  |  |  |   margin-left: 2px; | 
		
	
		
			
				|  |  |  |  |   font-size: xx-large; | 
		
	
		
			
				|  |  |  |  |   color: white; | 
		
	
		
			
				|  |  |  |  |   background: rgba(191, 64, 191,0.5); | 
		
	
		
			
				|  |  |  |  |   border:2px solid black; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  | #filterButton:hover{ | 
		
	
		
			
				|  |  |  |  |   background: rgba(191, 64, 191); | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | #researchUL { | 
		
	
		
			
				|  |  |  |  |   list-style-type: none; | 
		
	
		
			
				|  |  |  |  |   color: white; | 
		
	
		
			
				|  |  |  |  |   padding: 12px; | 
		
	
		
			
				|  |  |  |  |   margin: 5px; | 
		
	
		
			
				|  |  |  |  |   height: 100%; | 
		
	
		
			
				|  |  |  |  |   overflow: scroll; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  | #researchLi{ | 
		
	
		
			
				|  |  |  |  |   display: grid; | 
		
	
		
			
				|  |  |  |  |   grid-template-columns: auto auto auto; | 
		
	
		
			
				|  |  |  |  |   border: 2px solid black; | 
		
	
		
			
				|  |  |  |  |   color: white; | 
		
	
		
			
				|  |  |  |  |   font-size: x-large; | 
		
	
		
			
				|  |  |  |  |   text-align: center; | 
		
	
		
			
				|  |  |  |  |   text-indent: 7px; | 
		
	
		
			
				|  |  |  |  |   background-color: rgba(255, 255, 255, 0.09); | 
		
	
		
			
				|  |  |  |  |   border-radius: 18px; | 
		
	
		
			
				|  |  |  |  |   margin-bottom: 15px; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  | a{ | 
		
	
		
			
				|  |  |  |  |   color:#007aff; | 
		
	
		
			
				|  |  |  |  |   text-decoration: underline; | 
		
	
		
			
				|  |  |  |  |   cursor: pointer; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | .vl { | 
		
	
		
			
				|  |  |  |  |   border-right: 2px solid black; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | #unToggledResearchButton{ | 
		
	
		
			
				|  |  |  |  |   align-self: center; | 
		
	
		
			
				|  |  |  |  |   margin-left: 2px; | 
		
	
		
			
				|  |  |  |  |   font-size: large; | 
		
	
		
			
				|  |  |  |  |   color: white; | 
		
	
		
			
				|  |  |  |  |   background: #2a1981; | 
		
	
		
			
				|  |  |  |  |   border:2px solid black; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | #unToggledResearchButton:hover{ | 
		
	
		
			
				|  |  |  |  |   background: #5ac8fa; | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | #toggledResearchButton { | 
		
	
		
			
				|  |  |  |  |   align-self: center; | 
		
	
		
			
				|  |  |  |  |   margin-left: 2px; | 
		
	
		
			
				|  |  |  |  |   font-size: large; | 
		
	
		
			
				|  |  |  |  |   color: white; | 
		
	
		
			
				|  |  |  |  |   background: crimson; | 
		
	
		
			
				|  |  |  |  |   border:2px solid black; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  | #toggledResearchButton:hover{ | 
		
	
		
			
				|  |  |  |  |   background: #ff2d55; | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | </style> |