PGL/Clyde
3
2
Fork 3
Code Issues 13 Pull Requests Actions Projects 3 Releases 2 Wiki Activity

filter and abstraction of researchList

Browse Source
This commit is contained in:
Bartha Maxime
2024-04-20 01:12:37 +02:00
parent 6077e65b50
commit 041fe7f95d
7 changed files with 85 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/Apps/ScientificPublications/FilterComponent.vue
View File

@ -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>

64
frontend/src/Apps/ScientificPublications/ListResearches.vue
View File

@ -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;

20
frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue
View File

@ -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>

1
frontend/src/Apps/ScientificPublications/ResearchComponent.vue
View File

@ -18,7 +18,6 @@ const props = defineProps({
});
function format(date){
let split = date.split("-")
let month = split[1]

25
frontend/src/Apps/ScientificPublications/ResearchPostComponent.vue
View File

@ -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;

114
frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
View File

@ -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>