added the Filters button and popup

This commit is contained in:
Bartha Maxime 2024-04-08 22:56:44 +02:00
parent a94167c8a0
commit 3167d1f2fc
4 changed files with 194 additions and 13 deletions

View File

@ -9,6 +9,7 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@canvasjs/vue-charts": "^1.0.4", "@canvasjs/vue-charts": "^1.0.4",
"@vueuse/core": "^10.9.0",
"vite-plugin-top-level-await": "^1.4.1", "vite-plugin-top-level-await": "^1.4.1",
"vue": "^3.4.15", "vue": "^3.4.15",
"vue3-toastify": "^0.2.1" "vue3-toastify": "^0.2.1"
@ -768,6 +769,11 @@
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" "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": { "node_modules/@vitejs/plugin-vue": {
"version": "5.0.4", "version": "5.0.4",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz", "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", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.19.tgz",
"integrity": "sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw==" "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": { "node_modules/agent-base": {
"version": "7.1.0", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",

View File

@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"@canvasjs/vue-charts": "^1.0.4", "@canvasjs/vue-charts": "^1.0.4",
"@vueuse/core": "^10.9.0",
"vite-plugin-top-level-await": "^1.4.1", "vite-plugin-top-level-await": "^1.4.1",
"vue": "^3.4.15", "vue": "^3.4.15",
"vue3-toastify": "^0.2.1" "vue3-toastify": "^0.2.1"

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

View File

@ -7,17 +7,29 @@
<script setup> <script setup>
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
import FilterComponent from "@/Apps/ScientificPublications/FilterComponent.vue";
const input = ref(""); const input = ref("");
const statsOf = ref(""); const statsOf = ref("");
const statsBy = ref(""); const statsBy = ref("");
const isFilterOpened = ref(false);
let chart; let chart;
const openModal = () => {
isFilterOpened.value = true;
};
const closeModal = () => {
isFilterOpened.value = false;
};
const submitHandler = ()=>{
//here you do whatever
}
const articleList = [ const articleList = [
"First Article", "First Article",
"The composition of the light", "The composition of the light",
"The composition of the sand", "The composition of the sand",
"Fluctuation in universe beavers", "Fluctuation in universe beavers",
"The Potato War", "The Potato War",
"The Potato War", "The Potato War",
"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]; return arr[t.length][s.length];
}; }
const options = reactive({ const options = reactive({
backgroundColor:null, backgroundColor:null,
@ -103,6 +115,9 @@ function update(){
<template> <template>
<div id="main"> <div id="main">
<FilterComponent :isOpen="isFilterOpened" @modal-close="closeModal" @submit="submitHandler" name="first-modal">
<template #header> Coucou </template>
</FilterComponent>
<div id="profilePicture"> <div id="profilePicture">
<img src="/Clyde.png" /> <img src="/Clyde.png" />
</div> </div>
@ -141,7 +156,10 @@ function update(){
</div> </div>
</div> </div>
<div id="articles"> <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"> <ul id="articlesUL">
<li id="articleLi" v-for="n in searchInList(articleList,input)">{{n}}</li> <li id="articleLi" v-for="n in searchInList(articleList,input)">{{n}}</li>
</ul> </ul>
@ -196,23 +214,38 @@ function update(){
font-size: large; font-size: large;
} }
#statsPie { #statsPie {
} }
#articles { #search{
width: 100%;
height: 10%;
display: inline-flex;
} }
#search-input { #search-input {
margin-left: 5px; margin-left: 25px;
width: 60%; width: 75%;
font-size: 16px; font-size: 16px;
padding: 12px 20px 12px 40px; padding: 12px 20px 12px 40px;
border: 1px solid #ddd; 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 { #articlesUL {
list-style-type: none; list-style-type: none;
color: white; color: white;