filter and abstraction of researchList

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>