Clyde/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

<!----------------------------------------------------
	File:  ResearcherProfile.vue
	Author: Maxime Bartha
	Scope: Extension Publicatons scientifiquess
	Description: Researcher Profile Page containing his articles and his statistics
----------------------------------------------------->

<script setup>
import { ref, reactive } from "vue";
import FilterComponent from "@/Apps/ScientificPublications/FilterComponent.vue";
const input = ref("");
const statsOf = ref("");
const statsBy = ref("");
const isFilterOpened = ref(false);
let chart;

const openModal = () => {
  isFilterOpened.value = true;
};
const closeModal = () => {
  isFilterOpened.value = false;
};
const submitHandler = ()=>{
  //here you do whatever
}

const articleList = [
  "First Article",
  "The composition of the light",
  "The composition of the sand",
  "Fluctuation in universe beavers",
  "The Potato War",
  "The Potato War",
  "The Potato War",
  "The Potato War",
  "The Potato War",
]

const jsonMockViewsByYears= [
  {label: "2004", y:4},
  {label: "2005", y:99},
  {label: "2007", y:555},
  {label: "2009", y:22},
  {label: "2011", y:1666},
]

function searchInList(list, searchInput){
  if (searchInput === "")
    return list
  let retList =[]
  for (let i = 0; i < list.length; i++) {
    console.log(list[i] + " et " + searchInput + " vaut " + lDistance(list[i], searchInput) )
    if (lDistance(list[i], searchInput) < 10){
      retList.push(list[i])
    }
    else if(list[i].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",
    animationEnabled: true,
    title: {
      fontColor: "white",
      text : "please select options",
    },
    data: [
      {
        type: "pie",
        indexLabel: "{label} (#percent%)",
        yValueFormatString: "#,##0",
        indexLabelFontColor: "white",
        toolTipContent:
          "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
      }]
	});

function update(){
      options.title = {
        fontColor: "white",
        text: statsOf.value + " By "+ statsBy.value,
      }
      if (statsOf.value === "views" && statsBy.value === "years") {
        options.data[0].dataPoints = jsonMockViewsByYears;
      }

      options.title.text = statsOf.value + " By "+ statsBy.value;
      chart.render()
    }
</script>

<template>
  <div id="main">
    <FilterComponent :isOpen="isFilterOpened" @modal-close="closeModal" @submit="submitHandler" name="first-modal">
      <template #header> Coucou </template>
    </FilterComponent>
    <div id="profilePicture">
      <img src="/Clyde.png" />
    </div>
    <div id="researcherInfos">
      <div class="surrounded">John Doe</div>
      <div class="surrounded">Orcid : 12144-2144-12336-B</div>
      <div class="surrounded">Email : John.Doe@umons.ac.be</div>

      <div class="surrounded">
        site :
        <a href="http://localhost:5173" style="color: #007aff">here</a>
      </div>
      <div class="surrounded">Domain : physics, IT</div>
      <div id="coAuthorList" class="surrounded">Co-authors list : D</div>
    </div>
    <div id="stats">
      <div class="surrounded">
        Stat type :
        <select @change="update()" id="stats-select" v-model="statsOf">
          <option value="views">Views</option>
          <option value="co-authors">Co-authors</option>
          <option value="articles">Articles</option>
          <option value="language">Languages</option>
        </select>
      </div>
      <div class="surrounded">
        Class by:
        <select @change="update()" id="classed-select" v-model="statsBy">
          <option selected="selected" value="years">Years</option>
          <option value="months">Months</option>
          <option value="topics">Topics</option>
        </select>
      </div>
      <div id="statsPie">
		  <CanvasJSChart :options="options" id=chart @chart-ref="c => chart = c "/>
      </div>
    </div>
    <div id="articles">
      <div id="search">
        <input type="text" id="search-input" placeholder="search articles" v-model="input"/>
        <button id="filterButton" @click="openModal">  Filters </button>
      </div>
      <ul id="articlesUL">
        <li id="articleLi" v-for="n in searchInList(articleList,input)">{{n}}</li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
#main {
  display: grid;
  grid-template-columns: 22% auto;
  grid-template-rows: 26% auto;
  height: 100%;
  width: 100%;
}

#profilePicture {
  display: flex;
  justify-content: center;
}

#profilePicture img {
  align-self: center;
  justify-self: center;
  width: 60%;
}

#researcherInfos {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 5px;
  grid-template-rows: auto auto;
}

.surrounded {
  border: 2px solid black;
  color: white;
  font-size: x-large;
  align-self: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  margin-bottom: 10px;
}

.surrounded select {
  margin-top: 2px;
  margin-bottom: 2px;
  border: 1px solid black;
  color: white;
  background-color: rgb(255, 255, 255, 0.1);
  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);
}


#articlesUL {
  list-style-type: none;
  color: white;
  padding: 12px;
  margin: 5px;
  height: 400px;
  overflow: scroll;
}
#articleLi{
  border: 2px solid black;
  color: white;
  font-size: x-large;
  align-self: center;
  text-align: left;
  text-indent: 7px;

  background-color: rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  margin-bottom: 15px;
}

</style>