added comment

added article Popup
filter popup mock done
2024-04-09 17:58:02 +02:00 · 2024-04-09 17:32:04 +02:00 · 2024-04-09 00:57:06 +02:00 · 2024-04-08 22:56:44 +02:00 · 2024-04-08 11:02:59 +02:00 · 2024-04-07 15:51:53 +02:00
16 changed files with 697 additions and 104 deletions
--- a/backend/build.gradle.kts
+++ b/backend/build.gradle.kts
@ -25,7 +25,7 @@ dependencies {
 	implementation("com.kohlschutter.junixsocket:junixsocket-core:2.9.0")
 	// implementation("org.springframework.session:spring-session-jdbc")
 	developmentOnly("org.springframework.boot:spring-boot-devtools")
-	developmentOnly("org.springframework.boot:spring-boot-docker-compose")
+	// developmentOnly("org.springframework.boot:spring-boot-docker-compose")
 	runtimeOnly("org.postgresql:postgresql")
 	testImplementation("org.springframework.boot:spring-boot-starter-test")
 	testImplementation("org.springframework.boot:spring-boot-testcontainers")
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -8,6 +8,8 @@
      "name": "clyde",
      "version": "0.0.0",
      "dependencies": {
+        "@canvasjs/vue-charts": "^1.0.4",
+        "@vueuse/core": "^10.9.0",
        "vite-plugin-top-level-await": "^1.4.1",
        "vue": "^3.4.15",
        "vue3-toastify": "^0.2.1"
@ -29,6 +31,20 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/@canvasjs/charts": {
+      "version": "3.7.45",
+      "resolved": "https://registry.npmjs.org/@canvasjs/charts/-/charts-3.7.45.tgz",
+      "integrity": "sha512-FPMX8wn+PEHzAa/GLBsL5lWB81AzKZLw51t7SiSUjMbtUN5/OIrmDcwUTw+53/Bbdd9gm2LLmxAdZsQ75JI31g=="
+    },
+    "node_modules/@canvasjs/vue-charts": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@canvasjs/vue-charts/-/vue-charts-1.0.4.tgz",
+      "integrity": "sha512-PzOA8xeb/f68a39uoFZNn843dGPU36bsqmbO5DWjP7k6FwkK5AeGkYa/H3RHC02Xc6mG68vg9aFNj2Fyqhu4UQ==",
+      "dependencies": {
+        "@canvasjs/charts": "^3.7.5",
+        "vue": ">=3.0.0"
+      }
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.19.12",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
@ -753,6 +769,11 @@
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
@ -866,6 +887,89 @@
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.19.tgz",
      "integrity": "sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw=="
    },
+    "node_modules/@vueuse/core": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
+      "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.9.0",
+        "@vueuse/shared": "10.9.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
+      "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
+      "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
+      "dependencies": {
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/agent-base": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -9,6 +9,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@canvasjs/vue-charts": "^1.0.4",
+    "@vueuse/core": "^10.9.0",
    "vite-plugin-top-level-await": "^1.4.1",
    "vue": "^3.4.15",
    "vue3-toastify": "^0.2.1"
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -86,19 +86,18 @@ window.addEventListener('hashchange', () => {
    </ul>
    </div>
    <div class="page">
-      <div style=" margin:50px;">
        <Suspense>
-        
 				<component :is="currentView" />
        </Suspense>
    </div>
  </div>
-  </div>
 </template>

 <style scoped>
  
  .container{
+			height: 100%;
+			width: 100%;
    display:grid;
    grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
    grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
@ -111,6 +110,8 @@ window.addEventListener('hashchange', () => {

  .page {
    grid-area:page;
+		height: 100%;
+		width: 100%;
    place-self:center;
  }

--- a/frontend/src/Apps/Inscription.vue
+++ b/frontend/src/Apps/Inscription.vue
@ -16,10 +16,9 @@


 <template> 
-  <div  v-for="item of requests">
+  <div style='display:flex; justify-content:center; min-width:1140px;' v-for="item of requests">
  <div class="bodu" v-if="item.state === 'Pending'">
  <div class="container">
- 
    <div class="id"><a>{{item.id}}</a></div>
    <div class="surname"><a>{{item.lastName}}</a></div>
    <div class="firstname"><a>{{item.firstName}}</a></div>
@ -37,10 +36,9 @@
    height:100px;
    font-size:20px;
    display:grid;
-    grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[secondCol-end thirdCol-start]200px[thirdCol-end fourthCol-start]150px[fourthCol-end]150px[fifthCol-end]150px[sixthCol-end]150px[endCol];
+    grid-template-columns:10% 14.2% 19% 14.2% 14.2% 14.2% 14.2%;
    grid-template-areas:
    "id type surname firstname infos accept refuse"; 
-    column-gap:10px;
    
  }
  
@ -100,8 +98,8 @@
  }

 .bodu {
-    width:100%;
-    margin-bottom:10px;
+    margin-top:2%;
+    width:66%;
    border:2px solid black;
    border-radius:9px;
    background-color:rgb(50,50,50);
--- a/frontend/src/Apps/Login.vue
+++ b/frontend/src/Apps/Login.vue
@ -56,9 +56,9 @@


 <template>
-      <div class='loginBox'>
-
+    <div class="setup">
        <div v-if="loginPage">
+      <div class='loginBox' style="margin-top:30%;">
          <form @submit.prevent="login(outputs.email,outputs.password);goBackHome();"class="form">
            <h1 style="color:rgb(239,60,168); font-family: sans-serif;">
              {{i18n("login.guest.signin")}}
@ -74,13 +74,14 @@
            <div class="register">
              <a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a>
            </div>
-            <div class="inputBox">
+            <div class="inputBox" style="margin-bottom:35px;">
              <input type="submit" v-model="submitValue">
            </div>
          </form>
        </div>
-
+      </div>
        <div v-else>
+          <div class='loginBox' style="margin-top:30%; margin-bottom:50%;">
            <form class="form">
            <h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">
              {{i18n("login.guest.welcome")}}
@ -128,9 +129,12 @@
                <p>{{i18n("login.guest.country")}}</p>
                <input type="text" v-model="outputs.country">
              </div>
-              <form novalidate enctype="multipart/form-data" class="inputBox">
+              <form class="inputBox"novalidate enctype="multipart/form-data">
              	<p>{{i18n("profile.picture").toUpperCase()}}</p>
+              <label class="browser">
+                Parcourir . . .
 				        <input  type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*">
+              </label>
              </form>
              <div class="inputBox">
                <p>{{i18n("Curriculum").toUpperCase()}}</p> 
@ -154,34 +158,25 @@
          </form>
         </div>
    </div>
+  </div>
 </template>

 <style scoped>
-.Home{
-  position:absolute;
- 	display: flex;
-  z-index: 100;
-	padding: 8px 16px;
-	color:rgb(255, 255, 255);
-	text-decoration: none;
-}

-.Home:hover{
-  width:40px;
-  background-color: black;
-	border-radius:6px;
-	color:white;
-  transform: translate(0px ,1px);
-}
+.setup {
+  margin-left: auto;
+  margin-right:auto;
+  min-width:400px;

+  width:25%;
+  height:60%;
+}

 .loginBox {
  background-color: rgb(24,24,24);
-  width: 400px;
  display:flex;
  justify-content: center;
-  padding: 40px;
-  border-radius: 20px;
+  border-radius: 5%;
  box-shadow:0 5px 25px #000000;
  
 }
@ -190,9 +185,8 @@
  width:100%;
  display: flex;
  flex-direction: column;
-  justify-content: center;
  align-items:center;
-  gap: 15px;
+  gap: 3%;
 }


@ -200,12 +194,12 @@
  
  width:100%;
  border: none;
-  margin-right: 50px;
-  padding-left: 10px;
-  padding-top:10px;
-  padding-bottom:10px;
+  margin-right: 12.5%;
+  padding-left: 2.5%;
+  padding-top:2.5%;
+  padding-bottom:2.5%;
  outline:none;
-  border-radius: 4px;
+  border-radius: 10px;
  font-size:1.35em;
 }

@ -220,8 +214,9 @@

 .register{
  color:rgb(239,60,168);
-  width: 100%;
-  display:flex;
+  width:70%;
+  margin-bottom:20px;
+  margin-top:20px;
  cursor: pointer;
 }

@ -250,6 +245,21 @@ input[type=submit],button,select{

 }

+input[type=file]{
+  display:none;
+}
+
+.browser{
+  display:inline-block;
+  cursor:pointer;
+  border-radius:20px;
+  background-color:rgb(239,60,168);
+  padding:5%;
+  font-size:1.35em;
+  font-family:sans-serif;
+  background:#FFFFFF;
+}
+
 button:active ,.switchpage:active{
  opacity:0.8;

--- a/frontend/src/Apps/ManageCourses.vue
+++ b/frontend/src/Apps/ManageCourses.vue
@ -105,7 +105,8 @@
      </button>
    </div>
    <div v-if="createMod">
-      <form class="listElement">
+      <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;">
+        
        <div style="margin-bottom:20px;">
         {{i18n("name")}} : 
        <input v-model="toAdd.title">
@ -125,7 +126,7 @@
      </form>
    </div>
    <div v-if="deleteMod">
-      <form class="listElement">
+      <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;">
        <div style="margin-bottom:20px;">
          {{i18n("courses.toDelete")}} :
         <select style="max-width:200px;" class="teacher" v-model="toRemove">
@ -138,7 +139,7 @@
      </form>
    </div>

-    <div v-if="!createMod && !deleteMod" v-for="item in curriculum" :key="item.title">
+    <div v-if="!createMod && !deleteMod" v-for="item in curriculum" :key="item.title" style="width:50%;margin-left:auto; margin-right:auto;">
      <div  v-if="editElementID !== item.title" style ="padding:15px 15px 15px 15px;">
        <button   @click="editElementID = item.title; setModify(item); ">
        {{i18n("courses.modify")}}
@ -149,6 +150,7 @@
        <button @click="editElementID= '';"> {{i18n("courses.back")}} </button>
      </div>
      <div  class="listElement" >
+
      <div class="containerElement" v-if="editElementID !== item.title" >

        <div class="name"> {{item.title}} </div>
@ -172,17 +174,27 @@
 <style scoped>
 .body {
    width:100%;
-    margin-bottom:10px;
+    margin-top:3.5%;
  }
+
+.infosContainer {
+  min-width:350px;
+  padding-bottom:50px;
+  border:2px solid black;
+  font-size:25px;
+  color:white;
+  padding:20px;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+}
+
 .containerElement{ 
    justify-content:center;
    display:grid;
-    grid-template-columns:350px 350px 200px;
+    grid-template-columns:38.8% 38.8% 22.4%;
    grid-template-areas:
    "name teacher credits"; 
-    column-gap:10px;
-    
-  }
+    column-gap:10px;  }
  
  .name {
    grid-area:name;
@ -200,6 +212,7 @@
  }

 .listElement{
+ min-width:625px;
  border:2px solid black;
  font-size:25px;
  color:white;
@ -207,6 +220,7 @@
  background-color:rgb(50,50,50);
  border-radius:20px;
  margin-bottom:10px;
+
 }

 .modify{
@ -255,10 +269,11 @@
  }

  .listTitle{
+    min-width:380px;
    display: flex;
    justify-content: center;
    align-items: center;
-    width:400px;
+    width:25%;
    margin-left:auto;
    margin-right:auto;
    border:2px solid black;
@ -266,7 +281,8 @@
    color:white;
    padding:20px;
    background-color:rgb(50,50,50);
-    border-radius:20px;margin-bottom:10px;
+    border-radius:20px;
+    margin-bottom:10px;

    button:hover{
      opacity:0.8;
--- a/frontend/src/Apps/Profil.vue
+++ b/frontend/src/Apps/Profil.vue
@ -210,11 +210,11 @@
 <style scoped>

 .container{
-  
+  min-width:675px;
  display:grid;
-  grid-template-columns:200px 900px;
+  grid-template-columns:10vw 50vw;
  grid-template-rows:200px auto;
-  column-gap:30px;
+  column-gap:2.7%;
  row-gap:45px;
  grid-template-areas:
  "profilPic globalInfos"
@ -222,6 +222,7 @@
 }

 .profilPic{
+  width:100%;
  grid-area:profilPic;
 }

@ -242,13 +243,17 @@
  grid-area:minfos;
 }
 .body {
+    min-width:960px;
    width:100%;
-    margin-bottom:10px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    margin-top:5%;
  }
 .containerElement{ 
   justify-content:center;
    display:grid;
-    grid-template-columns:350px 350px 200px;
+    grid-template-columns:38.8% 38.8% 22.4%;
    grid-template-areas:
    "name teacher credits"; 
    column-gap:10px;
@ -271,10 +276,11 @@
  }

 .listTitle{
+    min-width:197px;
    display: flex;
    justify-content: center;
    align-items: center;
-    width:200px;
+    width:8vw;
    margin-left:auto;
    margin-right:auto;
    border:2px solid black;
@ -286,6 +292,7 @@
 }

 .listElement{
+  min-width:625px;
  border:2px solid black;
  font-size:25px;
  color:white;
@ -296,6 +303,7 @@
 }

 .infosContainer {
+min-width:350px;
 padding-bottom:50px;
 border:2px solid black;
 font-size:25px;
--- a/frontend/src/Apps/ScientificPublications/ArticleComponent.vue
+++ b/frontend/src/Apps/ScientificPublications/ArticleComponent.vue
@ -0,0 +1,76 @@
+<!----------------------------------------------------
+	File:  ArticleComponent.vue
+	Author: Maxime Bartha
+	Scope: Extension Publicatons scientifiquess
+	Description: Pop Up summarizing an article
+----------------------------------------------------->
+
+<script setup>
+import { defineProps, defineEmits, ref } from "vue";
+import {onClickOutside} from '@vueuse/core'
+let checked = ref([])
+
+const props = defineProps({
+  isOpen: Boolean,
+});
+const example = ["Title","Author",["Co-author1", "co-Authors2"],
+  " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum ex tempor leo pulvinar, vitae imperdiet leo pellentesque. Aenean aliquam, ante at tempus sagittis, lorem leo feugiat felis, eget vestibulum tortor est nec libero. Cras sit amet venenatis velit, at rhoncus est. Cras id sem placerat, cursus sem et, aliquam felis. Nullam mi nunc, laoreet eget rutrum ac, blandit nec lorem. Duis fermentum aliquet tortor ac tristique. Aenean ac sagittis nulla, at auctor dolor. Vivamus et neque sodales, vestibulum dolor et, posuere urna. Pellentesque ut elit metus. Cras velit lectus, luctus auctor interdum eu, aliquam nec est. Donec elementum nisl sit amet nibh aliquam ultricies. Nullam felis orci, suscipit eu tincidunt pretium, euismod vel sem. Duis eget vehicula neque, nec gravida leo. Cras pellentesque arcu quis justo lobortis, ut semper massa rhoncus. Quisque sagittis dignissim congue. Nullam tortor ligula, mattis vel cursus id, pretium non lacus.",
+  "language",
+    "access",
+]
+const emit = defineEmits(["modal-close"]);
+
+const target = ref(null)
+onClickOutside(target, ()=>emit('modal-close'))
+
+</script>
+
+<template>
+  <div v-if="isOpen" class="modal-mask">
+    <div class="modal-wrapper">
+      <div class="modal-container" ref="target">
+       <ul v-for="n in example"><li>{{n}}</li></ul>
+        <div id="downloads">
+          <button @click.stop="emit('modal-close')">Download BibTex</button>
+          <button @click.stop="emit('modal-close')">Download Article</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-container {
+  width: 70%;
+  margin: 150px auto;
+  padding: 20px 30px;
+  background: rgba(157, 99, 205);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+}
+
+
+#downloads {
+  text-align: end;
+}
+#downloads button {
+  align-self: center;
+  margin-left: 2px;
+  font-size: large;
+  color: white;
+  background: rgba(191, 64, 191,0.5);
+  border:2px solid black;
+  border-radius: 5px;
+}
+
+</style>
--- a/frontend/src/Apps/ScientificPublications/FilterComponent.vue
+++ b/frontend/src/Apps/ScientificPublications/FilterComponent.vue
@ -0,0 +1,92 @@
+<!----------------------------------------------------
+	File:  ArticleComponent.vue
+	Author: Maxime Bartha
+	Scope: Extension Publicatons scientifiquess
+	Description: Pop Up for selecting search Filters
+----------------------------------------------------->
+<script setup>
+import { defineProps, defineEmits, ref } from "vue";
+import {onClickOutside} from '@vueuse/core'
+let checked = ref([])
+
+const props = defineProps({
+  isOpen: Boolean,
+});
+const example = ["A","B", "Lorem Ipsum AAAAAAAAAAAAAAAAAAA",
+  "H",
+  "H",
+  "H",
+  "H",
+  "H",
+]
+const emit = defineEmits(["modal-close"]);
+
+const target = ref(null)
+onClickOutside(target, ()=>emit('modal-close'))
+
+</script>
+
+<template>
+  <div v-if="isOpen" class="modal-mask">
+    <div class="modal-wrapper">
+      <div class="modal-container" ref="target">
+        <div id="filterGrid">
+          <div> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+      </div>
+        <div id="submit">
+          <button @click.stop="emit('modal-close')">Submit</button>
+        </div>
+      </div>
+  </div>
+ </div>
+</template>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-container {
+  width: 70%;
+  margin: 150px auto;
+  padding: 20px 30px;
+  background: rgba(157, 99, 205);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+}
+
+#filterGrid {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  column-gap: 5px;
+  grid-template-rows: auto auto;
+}
+#filterGrid ul {
+  list-style-type: none;
+  padding: 15px;
+  height: 100px;
+  overflow: scroll;
+  scrollbar-color: #8a2be2 rgb(255,255,255,0.04);
+  background-color: rgba(255, 255, 255, 0.09);
+  border-radius: 6px;
+}
+
+.vl {
+  border-left: 6px solid #8a2be2;
+}
+#submit {
+  text-align: end;
+}
+
+</style>
--- a/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
+++ b/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
@ -0,0 +1,295 @@
+<!----------------------------------------------------
+	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";
+import ArticleComponent from "@/Apps/ScientificPublications/ArticleComponent.vue";
+const input = ref("");
+const statsOf = ref("");
+const statsBy = ref("");
+const isFilterOpened = ref(false);
+const isArticleOpened = ref(false);
+let chart;
+
+const openModal = () => {
+  isFilterOpened.value = true;
+};
+const closeModal = () => {
+  isFilterOpened.value = false;
+};
+const submitFilters = ()=>{
+  // call only with those filters the get
+}
+const openArticle = (article) => {
+  isArticleOpened.value = true;
+}
+
+const closeArticle = () => {
+  isArticleOpened.value =false;
+}
+
+const downloadBibTex = (article) => {
+//todo
+}
+
+const downloadArticle = (article) => {
+ //todo
+}
+
+
+const articleList = [
+  ["The Great Potato War Lorem Ipsum aeaDq Terelumni ","Author",["Co-author1", "co-Authors2"],
+  " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum ex tempor leo pulvinar, vitae imperdiet leo pellentesque. Aenean aliquam, ante at tempus sagittis, lorem leo feugiat felis, eget vestibulum tortor est nec libero. Cras sit amet venenatis velit, at rhoncus est. Cras id sem placerat, cursus sem et, aliquam felis. Nullam mi nunc, laoreet eget rutrum ac, blandit nec lorem. Duis fermentum aliquet tortor ac tristique. Aenean ac sagittis nulla, at auctor dolor. Vivamus et neque sodales, vestibulum dolor et, posuere urna. Pellentesque ut elit metus. Cras velit lectus, luctus auctor interdum eu, aliquam nec est. Donec elementum nisl sit amet nibh aliquam ultricies. Nullam felis orci, suscipit eu tincidunt pretium, euismod vel sem. Duis eget vehicula neque, nec gravida leo. Cras pellentesque arcu quis justo lobortis, ut semper massa rhoncus. Quisque sagittis dignissim congue. Nullam tortor ligula, mattis vel cursus id, pretium non lacus.",
+  "language",
+    "access",
+  ]
+]
+
+
+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){
+  let retList= []
+  if (searchInput === "")
+    return [list[0].slice(0,2)]
+  for (let i = 0; i < list.length; i++) {
+    console.log(list[i])
+    if (lDistance(list[i][0], searchInput) < 10 || list[i][0].toUpperCase().indexOf(searchInput.toUpperCase()) > -1){
+      retList.push(list[i].slice(0,2))
+    }
+    console.log(list[i][0].toUpperCase().indexOf(searchInput.toUpperCase()))
+  }
+  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="submitFilters">
+    </FilterComponent>
+    <ArticleComponent :isOpen="isArticleOpened" @modal-close="closeArticle"></ArticleComponent>
+    <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)">
+          <div class="vl"> {{n[0]}}</div>
+          <div class="vl"> {{n[1]}}</div>
+         <a @click="openArticle"> MoreInfo  </a></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{
+  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>
--- a/frontend/src/Apps/StudentsList.vue
+++ b/frontend/src/Apps/StudentsList.vue
@ -5,8 +5,8 @@

  const users = await getStudents();
 </script> 
-<template>
-  <div v-for="item in users">
+<template style="margin-top:5%;">
+  <div style="display:flex; justify-content:center; " v-for="item in users">
    <div class="bodu">
      <div class="container">
        <div class="status"><a style="margin-left:30px">{{item.status}}</a></div>
@ -25,10 +25,9 @@
    height:100px;
    font-size:30px;
    display:grid;
-    grid-template-columns:250px 250px 250px 250px 150px;
+    grid-template-columns:21.7% 21.7% 21.7% 21.7% 13.1%;
    grid-template-areas:
    "status option surname firstname infos"; 
-    column-gap:10px;
    
  }
  
@ -42,21 +41,6 @@
    align-self:center;
  }

-  .refuse{
-    grid-area:refuse;
-    align-self:center;
-  }
-
-  .titles {
-    grid-area:titles;
-    background-color:rgb(215,215,215);
-  }
-  .id{
-    grid-area:id;
-    margin-left:40px;
-    align-self:center;
-  }
-
  .status{
    grid-area:status;
    align-self:center;
@ -81,15 +65,15 @@
  button{
    font-size:15px;
     height:50px;
-     width:100px;
+     width:75%;
    border:none;
    border-radius:20px;

  }

  .bodu {
-    width:100%;
-    margin-bottom:10px;
+    margin-top:2%;
+    width:66%;
    border:2px solid black;
    border-radius:9px;
    background-color:rgb(50,50,50);
--- a/frontend/src/Apps/UsersList.vue
+++ b/frontend/src/Apps/UsersList.vue
@ -7,8 +7,8 @@
  const users = await getAllUsers();
  
 </script> 
-<template>
-  <div v-for="item in users">
+<template style="margin-top:5%;">
+  <div style="display:flex; justify-content:center; min-width:1140px;" v-for="item in users">
    <div class="bodu">
      <div class="container">
        <div class="role"><a style="margin-left:30px">{{i18n(item.role)}}</a></div>
@ -22,23 +22,20 @@

 <style scoped>
  .container{
-    justify-content:center;
-    align-items:center;
    color:white;
    height:100px;
    font-size:30px;
    display:grid;
-    grid-template-columns:250px 250px 250px 150px;
+    grid-template-columns:27.7% 27.7% 27.7% 16.9%;
    grid-template-areas:
    "role surname firstname infos"; 
-    column-gap:10px;

  }
  
  .infos {

    grid-area:infos;
-    align-items:center;
+    align-self:center;
  }

  .role {
@ -67,20 +64,18 @@
  button{
    font-size:15px;
     height:50px;
-     width:100px;
+     width:75%;
    border:none;
    border-radius:20px;

  }

  .bodu {
-    width:100%;
-    margin-bottom:10px;
+    margin-top:2%;
+    width:66%;
    border:2px solid black;
    border-radius:9px;
    background-color:rgb(50,50,50);
  }
-
-
 </style>

--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@ -1,4 +1,11 @@
 body {
   background-color: rgb(53, 25, 60);
   margin:0;
+   width: 100vw;
+   height: 100vh;
+}
+
+#app {
+   width: 100%;
+   height: 100%;
 }
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -4,5 +4,8 @@ import 'https://kit.fontawesome.com/fb3bbd0a95.js'

 import { createApp } from 'vue'
 import App from './App.vue'
+import CanvasJSChart from '@canvasjs/vue-charts';

-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(CanvasJSChart);
+app.mount('#app');
--- a/frontend/src/rest/apps.js
+++ b/frontend/src/rest/apps.js
@ -9,6 +9,7 @@ import Profil from "@/Apps/Profil.vue"
 import Courses from "@/Apps/ManageCourses.vue"
 import Users from "@/Apps/UsersList.vue"
 import Students from "@/Apps/StudentsList.vue"
+import ResearcherProfile from "@/Apps/ScientificPublications/ResearcherProfile.vue";

 const apps = {
 		'/login': LoginPage,
@ -17,6 +18,7 @@ const apps = {
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
+		'/researcher-profile' : ResearcherProfile,
 }

 const appsList = {
Author	SHA1	Message	Date
Bartha Maxime	f99ed470f8	added comment	2024-04-09 17:58:02 +02:00
Bartha Maxime	9a83d14aea	added article Popup	2024-04-09 17:32:04 +02:00
Bartha Maxime	0cbe0dd82b	filter popup mock done	2024-04-09 00:57:06 +02:00
Bartha Maxime	3167d1f2fc	added the Filters button and popup	2024-04-08 22:56:44 +02:00
Bartha Maxime	a94167c8a0	scrollable + better search	2024-04-08 11:02:59 +02:00
Bartha Maxime	d31547c4cc	added levenshtein distance to search input	2024-04-07 15:51:53 +02:00
Maxime	ec2b975467	Merge pull request 'proposition of some fixes' (#1 ) from PGL/Clyde:tonitch/max/front/fix/vue into master Reviewed-on: #1	2024-04-07 14:59:12 +02:00
Anthony Debucquoy	b8b193f344	proposition of some fixes	2024-04-05 09:44:41 +02:00
Bartha Maxime	05359d64ac	Merge remote-tracking branch 'origin/master'	2024-04-05 09:06:01 +02:00
Bartha Maxime	3d78851b29	moving file into extensions directory	2024-04-04 21:27:51 +02:00
Bartha Maxime	dbe28a7fed	making the chart responsive	2024-04-04 16:14:19 +02:00
Bartha Maxime	bd7d2c2d51	adding colors to piechart	2024-04-04 15:01:10 +02:00
Bartha Maxime	91c7f42521	finished mock researcher profile	2024-04-02 19:52:38 +02:00
Bartha Maxime	bd27ffd3cb	search bar not working (to be shared with william)	2024-04-01 19:13:39 +02:00
Bartha Maxime	91ee3adbcd	adding the dependance	2024-03-30 13:10:11 +01:00
Bartha Maxime	c1b2742a8f	better select buttons	2024-03-30 12:38:18 +01:00
Bartha Maxime	2805fede4b	researcher profile page separations	2024-03-30 12:38:18 +01:00
Wawilski	951feed3c8	Full screen apps	2024-03-30 12:38:18 +01:00
Wawilski	95054fa973	Login 'fixed'	2024-03-30 12:38:18 +01:00
Wawilski	3af83a58d3	Just to merge	2024-03-30 12:38:17 +01:00
Anthony Debucquoy	47c5c14862	Make app use full space	2024-03-30 12:38:17 +01:00
Debucquoy Anthony	9e0db361b8	Merge pull request 'Make app use full space' (#148 ) from tonitch/front/fullSpaceApp into master Reviewed-on: PGL/Clyde#148 Reviewed-by: Wal <karpinskiwal@gmail.com> Reviewed-by: Maxime <231026@umons.ac.be>	2024-03-24 22:32:46 +01:00
Wawilski	7a13d412f1	Full screen apps	2024-03-23 23:56:24 +01:00
Bartha Maxime	db895a6091	added temporary fix to docker issue	2024-03-23 14:38:26 +01:00
Wawilski	9de4b06e75	Login 'fixed'	2024-03-23 13:57:46 +01:00
Wawilski	123fa97611	Merge branch 'wal/front/temp' into tonitch/front/fullSpaceApp	2024-03-22 20:15:45 +01:00
Wawilski	1fad792be7	Just to merge	2024-03-22 20:14:20 +01:00
Anthony Debucquoy	acd1262955	Make app use full space	2024-03-22 13:56:04 +01:00