From 3167d1f2fc7c3bd710fcf76c36ded7b15eabc5b8 Mon Sep 17 00:00:00 2001
From: Bartha Maxime <231026@umons.ac.be>
Date: Mon, 8 Apr 2024 22:56:44 +0200
Subject: [PATCH] added the Filters button and popup

---
 frontend/package-lock.json                    | 89 +++++++++++++++++++
 frontend/package.json                         |  1 +
 .../FilterComponent.vue                       | 58 ++++++++++++
 .../ResearcherProfile.vue                     | 59 +++++++++---
 4 files changed, 194 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/Apps/ScientificPublications/FilterComponent.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b33e0cd..8f48574 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "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"
@@ -768,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",
@@ -881,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",
diff --git a/frontend/package.json b/frontend/package.json
index b303f78..8edbabe 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
   },
   "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"
diff --git a/frontend/src/Apps/ScientificPublications/FilterComponent.vue b/frontend/src/Apps/ScientificPublications/FilterComponent.vue
new file mode 100644
index 0000000..572b728
--- /dev/null
+++ b/frontend/src/Apps/ScientificPublications/FilterComponent.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { defineProps, defineEmits, ref } from "vue";
+import {onClickOutside} from '@vueuse/core'
+
+const props = defineProps({
+  isOpen: Boolean,
+});
+
+
+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 class="modal-header">
+          <slot name="header"> default header </slot>
+        </div>
+        <div class="modal-body">
+          <slot name="content"> default content </slot>
+        </div>
+        <div class="modal-footer">
+          <slot name="footer">
+            <div>
+              <button @click.stop="emit('modal-close')">Submit</button>
+            </div>
+          </slot>
+        </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: 300px;
+  margin: 150px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue b/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
index c506f62..b51e79e 100644
--- a/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
+++ b/frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
@@ -7,17 +7,29 @@
 
 <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",
+  "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",
@@ -66,7 +78,7 @@ function lDistance(s,t){
     }
   }
   return arr[t.length][s.length];
-};
+}
 
 const options = reactive({
     backgroundColor:null,
@@ -103,6 +115,9 @@ function update(){
 
 <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>
@@ -141,7 +156,10 @@ function update(){
       </div>
     </div>
     <div id="articles">
-      <input type="text" id="search-input" placeholder="search articles" v-model="input"/>
+      <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>
@@ -196,23 +214,38 @@ function update(){
   font-size: large;
 }
 
-
 #statsPie {
 
 }
 
-#articles {
+#search{
+  width: 100%;
+  height: 10%;
+  display: inline-flex;
 }
-
 #search-input {
-  margin-left: 5px;
-  width: 60%;
+  margin-left: 25px;
+  width: 75%;
   font-size: 16px;
   padding: 12px 20px 12px 40px;
   border: 1px solid #ddd;
-  margin-bottom: 12px;
+  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;