filter and abstraction of researchList

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>