ouatterrir-app/src/views/Search.vue

91 lines
2.2 KiB
Vue

<script>
import { mapActions, mapState } from 'pinia'
import { SearchStore } from '@/stores/search'
export default {
props: [],
data(){
return {
value: null,
content_types: ['concernement', 'entite']
}
},
computed: {
...mapState(SearchStore,['keys', 'contentTypesFilter', 'results']),
// value(){
// return this.keys
// }
},
created () {
console.log("search created");
this.setContentTypes(this.content_types);
},
watch: {
value: {
handler (n,o){
this.setKeys(n);
},
deep: true
},
content_types: {
handler (n,o){
this.setContentTypes(n);
},
deep: true
},
},
methods: {
...mapActions(SearchStore,['setKeys','setContentTypes','loadResults']),
onSubmitSearch (event) {
console.log("onSubmitSearch", event, this.value);
// let value = event.target[0].value;
this.loadResults();
}
},
components: {
// MapConcernements
}
}
</script>
<template>
<section class="search">
<h2>Recherche</h2>
<form action="" @submit.prevent="onSubmitSearch">
<input type="text" v-model="value">
<!-- <select name="content_type" id="content-type-select">
<option value="all">type de contenu</option>
<option value="concernement">Concernement</option>
<option value="entite">Entite</option>
</select> -->
<section class="content-type-checkboxes">
<input type="checkbox" name="concernement" id="concernement_checkbox" v-model="content_types" value="concernement">
<label for="concernement">Concernements</label>
<input type="checkbox" name="entite" id="entite_checkbox" v-model="content_types" value="entite">
<label for="concernement">Entités</label>
</section>
<select name="bourgeons" id="content-type-select">
<option value="all">Bourgeon</option>
<option value="bourgeon1">Bourgeon1</option>
<option value="bourgeon2">Bourgeon2</option>
</select>
<input type="submit" value="rechercher">
</form>
<section class="results">
<ul>
<li v-for="result in results">{{ result }}</li>
</ul>
</section>
</section>
</template>
<style lang="scss" scoped>
</style>