139 lines
3.9 KiB
Vue
139 lines
3.9 KiB
Vue
<script>
|
|
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { SearchStore } from '@/stores/search'
|
|
import { ConcernementsStore } from '@/stores/concernements'
|
|
|
|
// import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
|
|
|
|
|
|
export default {
|
|
props: [],
|
|
data(){
|
|
return {
|
|
value: null,
|
|
content_type: null
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(SearchStore,['phrase', 'contentTypeFilter', 'results', 'loaded_results']),
|
|
...mapState(ConcernementsStore,['map_mode', 'opened_concernement']),
|
|
// value(){
|
|
// return this.keys
|
|
// }
|
|
},
|
|
created () {
|
|
console.log("search created");
|
|
this.value = this.phrase;
|
|
this.content_type = this.contentTypeFilter;
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler (n,o){
|
|
this.setSearchValue(n);
|
|
},
|
|
deep: true
|
|
},
|
|
content_type: {
|
|
handler (n,o){
|
|
this.setContentType(n);
|
|
},
|
|
deep: true
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions(SearchStore,['setSearchValue','setContentType','newSearch']),
|
|
...mapActions(ConcernementsStore,['openCloseConcernements']),
|
|
onSubmitSearch (event) {
|
|
console.log("onSubmitSearch", event, this.value);
|
|
// let value = event.target[0].value;
|
|
this.newSearch();
|
|
},
|
|
onClickResult(cid, eid) {
|
|
// open map item
|
|
this.openCloseConcernements(cid)
|
|
// apoen cartouch via routing
|
|
this.$router.push({
|
|
name: 'concernement',
|
|
hash: `#${this.map_mode}`,
|
|
params: {cid: cid, eid: eid}
|
|
});
|
|
}
|
|
},
|
|
components: {
|
|
// CartoucheLayout
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<section class="search">
|
|
|
|
|
|
<header>
|
|
|
|
<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="radio" name="concernement" id="concernement_radio" v-model="content_type" value="concernements">
|
|
<label for="concernement_radio">Concernements</label>
|
|
<input type="radio" name="entite" id="entite_radio" v-model="content_type" value="entites">
|
|
<label for="entite_radio">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>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="results">
|
|
<ul v-if="loaded_results && loaded_results.length">
|
|
<li v-for="result in loaded_results">
|
|
<template v-if="results.content_type === 'entites'">
|
|
<h1 @click.prevent="onClickResult(result.concernement.id, result.id)">
|
|
{{ result.title }}
|
|
</h1>
|
|
<h2 @click.prevent="onClickResult(result.concernement.id, result.id)">
|
|
<span>une entité de </span>{{ result.author.username }}
|
|
</h2>
|
|
</template>
|
|
<template v-else>
|
|
<h1 @click.prevent="onClickResult(result.id)">
|
|
{{ result.title }}
|
|
</h1>
|
|
<h2 @click.prevent="onClickResult(result.id)">
|
|
<span>une enquête de </span>{{ result.author.username }}
|
|
</h2>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
<div v-else-if="loaded_results">Aucun résultats</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
|
|
</footer>
|
|
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|