PGL/Clyde
3
2
Fork 3
Code Issues 13 Pull Requests Actions Projects 3 Releases 2 Wiki Activity

filter popup mock done

Browse Source
This commit is contained in:
Bartha Maxime
2024-04-09 00:57:06 +02:00
parent 3167d1f2fc
commit 0cbe0dd82b
2 changed files with 67 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
frontend/src/Apps/ScientificPublications/FilterComponent.vue
View File

@ -1,12 +1,22 @@
<script setup> <script setup>
import { defineProps, defineEmits, ref } from "vue"; import { defineProps, defineEmits, ref } from "vue";
import {onClickOutside} from '@vueuse/core' import {onClickOutside} from '@vueuse/core'
let checked = ref([])
const props = defineProps({ const props = defineProps({
isOpen: Boolean, isOpen: Boolean,
}); });
const example = ["A","B", "Lorem Ipsum AAAAAAAAAAAAAAAAAAA",
"H",
"H",
"H",
"H",
"H",
"H",
"H",
"H",
"H",
]
const emit = defineEmits(["modal-close"]); const emit = defineEmits(["modal-close"]);
const target = ref(null) const target = ref(null)
@ -18,19 +28,35 @@ onClickOutside(target, ()=>emit('modal-close'))
<div v-if="isOpen" class="modal-mask"> <div v-if="isOpen" class="modal-mask">
<div class="modal-wrapper"> <div class="modal-wrapper">
<div class="modal-container" ref="target"> <div class="modal-container" ref="target">
<div class="modal-header"> <div id="filterGrid">
<slot name="header"> default header </slot> <div>
</div> <ul>
<div class="modal-body"> <li v-for="n in example">{{n}}</li>
<slot name="content"> default content </slot> </ul>
</div> </div>
<div class="modal-footer"> <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>
<slot name="footer"> <div class="vl">
<div> <ul>
<button @click.stop="emit('modal-close')">Submit</button> <li v-for="n in example">{{n}}</li>
</div> </ul>
</slot> </div>
<div>
<ul>
<li v-for="n in example">{{n}}</li>
</ul>
</div>
<div class="vl">
<ul>
<li v-for="n in example">{{n}}</li>
</ul>
</div>
<div class="vl"></div>
</div> </div>
<div>
<div id="submit">
<button @click.stop="emit('modal-close')">Submit</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -46,13 +72,36 @@ onClickOutside(target, ()=>emit('modal-close'))
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
.modal-container { .modal-container {
width: 300px; width: 70%;
margin: 150px auto; margin: 150px auto;
padding: 20px 30px; padding: 20px 30px;
background-color: #fff; background: rgba(157, 99, 205);
border-radius: 2px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); 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;
background-color: rgba(255, 255, 255, 0.09);
border-radius: 6px;
}
.vl {
border-left: 6px solid darkmagenta;
}
#submit {
text-align: end;
}
</style> </style>

2
frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
View File

@ -21,7 +21,7 @@ const closeModal = () => {
isFilterOpened.value = false; isFilterOpened.value = false;
}; };
const submitHandler = ()=>{ const submitHandler = ()=>{
//here you do whatever // call only with those filters the get
} }
const articleList = [ const articleList = [