From 041fe7f95ddfbf1ab8a1edc994d568217bda510c Mon Sep 17 00:00:00 2001
From: Bartha Maxime <231026@umons.ac.be>
Date: Sat, 20 Apr 2024 01:12:37 +0200
Subject: [PATCH] filter and abstraction of researchList

---
 .../FilterComponent.vue                       |  49 +++++---
 .../ScientificPublications/ListResearches.vue |  64 +++++++---
 .../ManageResearcherProfile.vue               |  20 +--
 .../ResearchComponent.vue                     |   1 -
 .../ResearchPostComponent.vue                 |  25 +---
 .../ResearcherProfile.vue                     | 114 +-----------------
 .../ScientificPublications/ManageResearch.js  |   7 --
 7 files changed, 85 insertions(+), 195 deletions(-)

diff --git a/frontend/src/Apps/ScientificPublications/FilterComponent.vue b/frontend/src/Apps/ScientificPublications/FilterComponent.vue
index acda36b..2bba29b 100644
--- a/frontend/src/Apps/ScientificPublications/FilterComponent.vue
+++ b/frontend/src/Apps/ScientificPublications/FilterComponent.vue
@@ -7,7 +7,6 @@
 <script setup>
 import { ref } from "vue";
 import {onClickOutside} from '@vueuse/core'
-let checked = ref([])
 const yearList = ref([])
 const monthList = ref([])
 const accessList = ref([])
@@ -15,27 +14,44 @@ const languageList = ref([])
 const domainList = ref([])
 const paperTypeList = ref([])
 
+const filters = Object.assign({},{
+  year:[],
+  month:[],
+  access:[],
+  language:[],
+  domain:[],
+  paperType:[],
+})
+
 const props = defineProps({
   isOpen: Boolean,
   allArticles: ref([Object])
 });
 
+
+function submit(){
+  emit("modal-close")
+  emit("submit", filters)
+}
+
+
+
 for (let i=0;i< props.allArticles.length;i++) {
   let r = props.allArticles[i];
   let year = r.releaseDate.split("-")[0]
   let month = r.releaseDate.split("-")[1]
 
-  if (!yearList.value.includes(year)) yearList.value.push(year);
+  if (!yearList.value.includes(year) && year !== null) yearList.value.push(year);
 
-  if (!monthList.value.includes(month)) monthList.value.push(month);
+  if (!monthList.value.includes(month) && month !== null) monthList.value.push(month);
 
-  if (!accessList.value.includes(r.access)) accessList.value.push(r.access);
+  if (!accessList.value.includes(r.access) && r.access !== null ) accessList.value.push(r.access);
 
-  if (!languageList.value.includes(r.language)) languageList.value.push(r.language);
+  if (!languageList.value.includes(r.language) && r.language !== null) languageList.value.push(r.language);
 
-  if (!domainList.value.includes(r.domain)) domainList.value.push(r.domain);
+  if (!domainList.value.includes(r.domain) && r.domain !== null) domainList.value.push(r.domain);
 
-  if (!paperTypeList.value.includes(r.paperType)) paperTypeList.value.push(r.paperType);
+  if (!paperTypeList.value.includes(r.paperType) && r.paperType !== null) paperTypeList.value.push(r.paperType);
 }
 function monthToString(month){
 
@@ -68,10 +84,7 @@ function monthToString(month){
       return "unknown"
   }
 }
-
-
-
-const emit = defineEmits(["modal-close"]);
+const emit = defineEmits(["modal-close", "submit"]);
 
 const target = ref(null)
 onClickOutside(target, ()=>emit('modal-close'))
@@ -83,15 +96,15 @@ onClickOutside(target, ()=>emit('modal-close'))
     <div class="modal-wrapper">
       <div class="modal-container" ref="target">
         <div id="filterGrid">
-          <div> Year :<ul class="checkers"> <li v-for="n in yearList"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
-          <div class="vl"> Access :<ul class="checkers"> <li v-for="n in accessList"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
-          <div class="vl"> Language :<ul class="checkers"> <li v-for="n in languageList"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
-          <div> Month :<ul class="checkers"> <li v-for="n in monthList"> <input type="checkbox" :value=n v-model="checked"> {{monthToString(n)}} </li> </ul> </div>
-          <div class="vl"> Domain :<ul class="checkers"> <li v-for="n in domainList"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
-          <div class="vl"> PaperType :<ul class="checkers"> <li v-for="n in paperTypeList"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div> Year :<ul class="checkers"> <li v-for="n in yearList"> <input type="checkbox" :value=n v-model="filters.year"> {{n}} </li> </ul> </div>
+          <div class="vl"> Access :<ul class="checkers"> <li v-for="n in accessList"> <input type="checkbox" :value=n v-model="filters.access"> {{n}} </li> </ul> </div>
+          <div class="vl"> Language :<ul class="checkers"> <li v-for="n in languageList"> <input type="checkbox" :value=n v-model="filters.language"> {{n}} </li> </ul> </div>
+          <div> Month :<ul class="checkers"> <li v-for="n in monthList"> <input type="checkbox" :value=n v-model="filters.month"> {{monthToString(n)}} </li> </ul> </div>
+          <div class="vl"> Domain :<ul class="checkers"> <li v-for="n in domainList"> <input type="checkbox" :value=n v-model="filters.domain"> {{n}} </li> </ul> </div>
+          <div class="vl"> PaperType :<ul class="checkers"> <li v-for="n in paperTypeList"> <input type="checkbox" :value=n v-model="filters.paperType"> {{n}} </li> </ul> </div>
       </div>
         <div id="submit">
-          <button @click.stop="emit('modal-close', 'submit')">Submit</button>
+          <button @click.stop="submit">Submit</button>
         </div>
       </div>
   </div>
diff --git a/frontend/src/Apps/ScientificPublications/ListResearches.vue b/frontend/src/Apps/ScientificPublications/ListResearches.vue
index 5ce4fd5..8a04c15 100644
--- a/frontend/src/Apps/ScientificPublications/ListResearches.vue
+++ b/frontend/src/Apps/ScientificPublications/ListResearches.vue
@@ -1,28 +1,45 @@
 <script setup>
-import { ref} from "vue";
+import {ref, watch} from "vue";
 import FilterComponent from "@/Apps/ScientificPublications/FilterComponent.vue";
 import ArticleComponent from "@/Apps/ScientificPublications/ResearchComponent.vue";
-import { fetchAllResearches, addView} from "@/rest/ScientificPublications/ManageResearch.js";
+import {fetchAllResearches} from "@/rest/ScientificPublications/ManageResearch.js";
 const input = ref("")
 const isFilterOpened = ref(false);
 const isResearchOpened = ref(false);
 const articleToDisplay = ref(Object)
-
-const researchList = ref(await fetchAllResearches());
 const isResearcher = ref(false)
+const filters = ref(null)
+const researchList = ref(await fetchAllResearches())
+
 
 const props = defineProps({
-  filters: ref([""]),
+  researchList:ref(),
+  manage:Boolean
 });
 
+if (typeof props.researchList !== 'undefined'){
+  researchList.value = props.researchList
+}
+watch(
+    () => props.researchList,
+    (newValue) => {
+      researchList.value = newValue
+    }
+);
+
+
 const openFilter = () => {
   isFilterOpened.value = true;
 };
 const closeFilter = () => {
   isFilterOpened.value = false;
 };
-const submitFilters = ()=>{
+const submitFilters = (receivedFilters)=>{
+  filters.value = receivedFilters
+  console.log(filters.value)
 }
+
+
 const openResearch = (article) => {
   isResearchOpened.value = true;
   articleToDisplay.value = article;
@@ -42,7 +59,20 @@ function searchInList(list, searchInput) {
       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])
+
+      if (filters.value === null) {
+        retList.push(list[i])
+        continue;
+      }
+      if ( (filters.value.access.length === 0 || filters.value.access.includes(list[i].access))
+          && ( filters.value.domain.length === 0|| filters.value.domain.includes(list[i].domain))
+          && ( filters.value.paperType.length === 0 || filters.value.paperType.includes(list[i].paperType))
+          && ( filters.value.year.length === 0|| filters.value.year.includes(list[i].releaseDate.split("-")[0]))
+          && ( filters.value.month.length === 0|| filters.value.month.includes(list[i].releaseDate.split("-")[1]))
+          && ( filters.value.language.length === 0|| filters.value.language.includes(list[i].language)))
+      {
+        retList.push(list[i])
+      }
     }
   }
   return retList
@@ -68,17 +98,19 @@ function lDistance(s,t){
   return arr[t.length][s.length];
 }
 
+const emit = defineEmits(["modified"]);
+
 </script>
 
 <template>
-<div id="main">
-  <FilterComponent :isOpen="isFilterOpened" :allArticles="researchList" @modal-close="closeFilter" @submit="submitFilters()"></FilterComponent>
-  <ArticleComponent :article="articleToDisplay" :isOpen="isResearchOpened" :manage="false" @modal-close="closeResearch" ></ArticleComponent>
+<div id="researches">
+  <FilterComponent :isOpen="isFilterOpened" :allArticles="researchList" @modal-close="closeFilter" @submit="submitFilters"></FilterComponent>
+  <ArticleComponent :article="articleToDisplay" :isOpen="isResearchOpened" :manage="props.manage" @modal-close="closeResearch" @modified="emit('modified')"></ArticleComponent>
   <div id="researches">
     <div id="search">
       <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="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>
@@ -87,7 +119,8 @@ function lDistance(s,t){
         <div class="vl"> {{n.title}}</div>
         <div class="vl"> <a :href="'#/researcher-profile?id=' + n.researcher.id"> {{ n.researcher.user.firstName +" "+ n.researcher.user.lastName }}</a>
         </div>
-        <a @click="openResearch(n)"> MoreInfo  </a></li>
+        <a v-if="!manage" @click="openResearch(n)"> MoreInfo  </a>
+        <a v-else @click="openResearch(n)"> Modify Research</a></li>
     </ul>
   </div>
 </div>
@@ -95,11 +128,6 @@ function lDistance(s,t){
 
 <style scoped>
 
-#main {
-  height: 100%;
-  width: 100%;
-}
-
 #search{
   width: 100%;
   height: 10%;
@@ -161,7 +189,7 @@ a{
 #unToggledResearchButton{
   align-self: center;
   margin-left: 2px;
-  font-size: large;
+  font-size:16px ;
   color: white;
   background: #2a1981;
   border:2px solid black;
diff --git a/frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue b/frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue
index bff8b98..41dc3c9 100644
--- a/frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue
+++ b/frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue
@@ -5,6 +5,7 @@ import ArticleComponent from "@/Apps/ScientificPublications/ResearchComponent.vu
 import {fetchResearches, } from "@/rest/ScientificPublications/ResearcherProfile.js";
 import {getSelf, patchProfile} from "@/rest/ScientificPublications/ManageResearcherProfile.js";
 import ResearchPostComponent from "@/Apps/ScientificPublications/ResearchPostComponent.vue";
+import ListResearches from "@/Apps/ScientificPublications/ListResearches.vue";
 const input = ref("");
 const isFilterOpened = ref(false);
 const isResearchOpened = ref(false);
@@ -16,10 +17,7 @@ let toModify= Object.assign({}, {});
 
 const researcher = ref(await getSelf());
 const researchList = ref(await fetchResearches(researcher.value.id));
-
-const props = defineProps({
-  filters: ref([]),
-});
+//todo get the filters
 
 const openFilter = () => {
   isFilterOpened.value = true;
@@ -90,7 +88,6 @@ async function modifiedResearch(){
 }
 
 
-
 </script>
 
 <template> <div class="body"><div id="main">
@@ -129,18 +126,7 @@ async function modifiedResearch(){
 
 
     </div>
-    <div id="researches">
-      <div id="search">
-        <input type="text" id="search-input" placeholder="search for researches" v-model="input"/>
-        <button id="filterButton" @click="openFilter">  Filters </button>
-      </div>
-      <ul id="researchUL">
-        <li id="researchLi" v-for="n in searchInList(researchList,input)">
-          <div class="vl"> {{n.title}}</div>
-          <div class="vl"> {{ n.researcher.user.firstName +" "+ n.researcher.user.lastName }}</div>
-         <a @click="openResearch(n)"> Modify Research</a></li>
-      </ul>
-    </div>
+    <div id="researches"> <ListResearches :research-list="researchList" :manage="true" @modified="modifiedResearch"></ListResearches> </div>
   </div>
 </div>
 </template>
diff --git a/frontend/src/Apps/ScientificPublications/ResearchComponent.vue b/frontend/src/Apps/ScientificPublications/ResearchComponent.vue
index ede5086..0644895 100644
--- a/frontend/src/Apps/ScientificPublications/ResearchComponent.vue
+++ b/frontend/src/Apps/ScientificPublications/ResearchComponent.vue
@@ -18,7 +18,6 @@ const props = defineProps({
 });
 
 
-
 function format(date){
   let split = date.split("-")
   let month = split[1]
diff --git a/frontend/src/Apps/ScientificPublications/ResearchPostComponent.vue b/frontend/src/Apps/ScientificPublications/ResearchPostComponent.vue
index 087c660..f3e1684 100644
--- a/frontend/src/Apps/ScientificPublications/ResearchPostComponent.vue
+++ b/frontend/src/Apps/ScientificPublications/ResearchPostComponent.vue
@@ -2,8 +2,7 @@
 
 import { ref } from "vue";
 import {onClickOutside} from '@vueuse/core'
-import {uploadPdf, uploadBibTex,postResearch} from "@/rest/ScientificPublications/ManageResearch.js";
-import i18n from "@/i18n.js";
+import {uploadPdf,postResearch} from "@/rest/ScientificPublications/ManageResearch.js";
 let toPost = Object.assign({}, {});
 
 const props = defineProps({
@@ -16,9 +15,9 @@ async function uploadResearchPdf(pdf){
   const data = await uploadPdf(pdf);
   toPost.pdfLocation = data.url;
 }
-async function uploadResearchBibTexPdf(pdf){
+async function uploadBibTex(pdf){
   const data = await uploadPdf(pdf);
-  toPost.pdfLocation = data.url;
+  toPost.bibTexLocation = data.url;
 }
 
 // Date when sent!!
@@ -114,10 +113,6 @@ onClickOutside(target, ()=>emit('modal-close'))
   margin-top: 9px;
 }
 
-
-#downloads {
-  text-align: end;
-}
 #downloads button {
   align-self: center;
   margin-left: 2px;
@@ -131,20 +126,6 @@ onClickOutside(target, ()=>emit('modal-close'))
   background: rgba(191, 64, 191);
 }
 
-#deleteButton{
-  margin-left: 80%;
-  align-self: center;
-  text-align: center;
-  border: 2px solid black;
-  color: white;
-  font-size: large;
-  border-radius: 20px;
-  background-color: red;
-}
-
-#deleteButton:hover{
-  background: #ff2d55;
-}
 
 #cancelButton{
   align-self: center;
diff --git a/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue b/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
index 850aab7..e685989 100644
--- a/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
+++ b/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
@@ -11,38 +11,27 @@ import FilterComponent from "@/Apps/ScientificPublications/FilterComponent.vue";
 import ArticleComponent from "@/Apps/ScientificPublications/ResearchComponent.vue";
 import {fetchResearcher, fetchResearches, fetchStats, fetchResearch} from "@/rest/ScientificPublications/ResearcherProfile.js";
 import {getFile, addView} from "@/rest/ScientificPublications/ManageResearch.js";
+import ListResearches from "@/Apps/ScientificPublications/ListResearches.vue";
 const input = ref("");
 const statsOf = ref("");
 const statsBy = ref("");
 const isFilterOpened = ref(false);
 const isResearchOpened = ref(false);
 const articleToDisplay = ref(Object)
-const filters = ref();
 let chart;
 
 const researcherId = window.location.href.split("=")[1]
-const props = defineProps({
-  filters: ref([]),
-});
-
 
 
 const researchList = ref(await fetchResearches(researcherId));
 const researcher = ref(await fetchResearcher(researcherId));
 const stats = ref(await fetchStats(researcherId))
 
-const openFilter = () => {
-  isFilterOpened.value = true;
-};
 const closeFilter = () => {
   isFilterOpened.value = false;
 };
 const submitFilters = ()=>{
 }
-const openResearch = (article) => {
-  isResearchOpened.value = true;
-  articleToDisplay.value = article;
-}
 
 const closeResearch = () => {
   isResearchOpened.value =false;
@@ -67,37 +56,6 @@ function downloadCoAuthors(){
   return URL.createObjectURL(blob);
 }
 
-
-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){
-      retList.push(list[i])
-    }
-  }
-  return retList
-}
-
-function lDistance(s,t){
-  if (!s.length) return t.length;
-  if (!t.length) return s.length;
-  const arr = [];
-  for (let i = 0; i <= t.length; i++) {
-    arr[i] = [i];
-    for (let j = 1; j <= s.length; j++) {
-      arr[i][j] =
-          i === 0
-              ? j
-              : Math.min(
-                  arr[i - 1][j] + 1,
-                  arr[i][j - 1] + 1,
-                  arr[i - 1][j - 1] + (s[j - 1] === t[i - 1] ? 0 : 1)
-              );
-    }
-  }
-  return arr[t.length][s.length];
-}
-
 const options = reactive({
     backgroundColor:null,
     theme: "light2",
@@ -171,18 +129,7 @@ function update(){
 		  <CanvasJSChart :options="options" id=chart @chart-ref="c => chart = c "/>
       </div>
     </div>
-    <div id="researches">
-      <div id="search">
-        <input type="text" id="search-input" placeholder="search for researches" v-model="input"/>
-        <button id="filterButton" @click="openFilter">  Filters </button>
-      </div>
-      <ul id="researchUL">
-        <li id="researchLi" v-for="n in searchInList(researchList,input)">
-          <div class="vl"> {{n.title}}</div>
-          <div class="vl"> {{ n.researcher.user.firstName +" "+ n.researcher.user.lastName }}</div>
-         <a @click="openResearch(n)"> MoreInfo  </a></li>
-      </ul>
-    </div>
+    <div id="researches"><list-researches :researchList="researchList"></list-researches></div>
   </div>
 </template>
 
@@ -233,66 +180,9 @@ function update(){
   font-size: large;
 }
 
-#statsPie {
-
-}
-
-#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: 400px;
-  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;
-}
-
 </style>
diff --git a/frontend/src/rest/ScientificPublications/ManageResearch.js b/frontend/src/rest/ScientificPublications/ManageResearch.js
index 27750a7..025c14d 100644
--- a/frontend/src/rest/ScientificPublications/ManageResearch.js
+++ b/frontend/src/rest/ScientificPublications/ManageResearch.js
@@ -12,13 +12,6 @@ export async function uploadPdf(file){
 
     return restPostFile("/upload/Research", formData);
 }
-export async function uploadBibTex(file){
-    const formData = new FormData();
-    formData.append("file", file[0]);
-
-    return restPostFile("/upload/Research", formData);
-}
-
 export async function postResearch(data){
     return restPost("/research", data)
 }