added the Filters button and popup
This commit is contained in:
parent
a94167c8a0
commit
3167d1f2fc
89
frontend/package-lock.json
generated
89
frontend/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
58
frontend/src/Apps/ScientificPublications/FilterComponent.vue
Normal file
58
frontend/src/Apps/ScientificPublications/FilterComponent.vue
Normal file
@ -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>
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user