started search router view
This commit is contained in:
parent
0fc1cd12dd
commit
749ffd3867
@ -45,9 +45,12 @@ export default {
|
||||
|
||||
<template>
|
||||
<header id="header">
|
||||
<h1 class="row">
|
||||
<router-link :to="{ name: 'home' }"><span class="title">Atlas</span> des cartes d'atterrissage</router-link>
|
||||
</h1>
|
||||
<div class="row title">
|
||||
<h1>
|
||||
<router-link :to="{ name: 'home' }"><span class="title">Atlas</span> des cartes d'atterrissage</router-link>
|
||||
</h1>
|
||||
|
||||
</div>
|
||||
<div class="row top">
|
||||
<StaticMenu/>
|
||||
<SearchBlock/>
|
||||
|
||||
@ -29,7 +29,7 @@ html,body{
|
||||
bottom:0;
|
||||
left:0;
|
||||
width: 100vw;
|
||||
padding: 1rem 1em;
|
||||
padding: 1rem 0;
|
||||
>.row{
|
||||
@include layout-row();
|
||||
}
|
||||
|
||||
@ -37,16 +37,20 @@ body{
|
||||
// &.top{
|
||||
// }
|
||||
}
|
||||
h1.row{
|
||||
font-family: "avara";
|
||||
margin: 0 1em 0 0;
|
||||
a{
|
||||
margin: 0;
|
||||
span.title{
|
||||
font-size: 2em;
|
||||
div.row.title{
|
||||
padding: 0 0 0 1em;
|
||||
h1{
|
||||
font-family: "avara";
|
||||
margin: 0 1em 0 0;
|
||||
a{
|
||||
margin: 0;
|
||||
span.title{
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.row.top{
|
||||
@ -102,6 +106,19 @@ body{
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
@media screen and (max-width: 1500px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
span.label{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -466,6 +483,26 @@ body{
|
||||
|
||||
|
||||
|
||||
}
|
||||
section.search{
|
||||
@include main-cartouche();
|
||||
|
||||
h2{
|
||||
font-weight: 400;
|
||||
font-size: 1.323em;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
form{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
&>*{
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&.recit-opened {
|
||||
padding-bottom: 3rem;
|
||||
|
||||
@ -1023,49 +1023,49 @@ export default {
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="#terraindevie" @click="setMapMode('terraindevie')"
|
||||
title="terrain de vie" href="#terraindevie" @click="setMapMode('terraindevie')"
|
||||
>
|
||||
<span class="icon terraindevie"></span> terrain de vie
|
||||
<span class="icon terraindevie"></span> <span class="label"> terrain de vie</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#proximite" @click="setMapMode('proximite')"
|
||||
title="proximite" href="#proximite" @click="setMapMode('proximite')"
|
||||
:class="{ disabled: opened_concernement && !opened_concernement.has_proximite }"
|
||||
>
|
||||
<span class="icon proximite"></span> proximité
|
||||
<span class="icon proximite"></span> <span class="label"> proximité</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#superposition" @click="setMapMode('superposition')"
|
||||
title="superposition" href="#superposition" @click="setMapMode('superposition')"
|
||||
:class="{ disabled: opened_concernement && !opened_concernement.has_superposition }"
|
||||
>
|
||||
<span class="icon superposition"></span> superposition
|
||||
<span class="icon superposition"></span> <span class="label"> superposition</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#puissancedagir" @click="setMapMode('puissancedagir')"
|
||||
title="puissance d'agir" href="#puissancedagir" @click="setMapMode('puissancedagir')"
|
||||
:class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir }"
|
||||
>
|
||||
<span class="icon puissancedagir"></span> puissance d'agir
|
||||
<span class="icon puissancedagir"></span> <span class="label"> puissance d'agir</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#action" @click="setMapMode('action')"
|
||||
title="action" href="#action" @click="setMapMode('action')"
|
||||
:class="{ disabled: opened_concernement && !opened_concernement.has_agissantes }"
|
||||
>
|
||||
<span class="icon action"></span> action
|
||||
<span class="icon action"></span> <span class="label"> action</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#doleancer" @click="setMapMode('doleancer')"
|
||||
title="cercle politique" href="#doleancer" @click="setMapMode('doleancer')"
|
||||
:class="{ disabled: opened_concernement && !opened_concernement.has_doleance }"
|
||||
>
|
||||
<span class="icon doleancer"></span> cercle politique
|
||||
<span class="icon doleancer"></span> <span class="label"> cercle politique</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { StaticsStore } from '@/stores/statics'
|
||||
// import { SearchStore } from '@/stores/search'
|
||||
|
||||
import SvgIcon from '@jamescoyle/vue-icon';
|
||||
import { mdiMagnify } from '@mdi/js';
|
||||
@ -14,17 +14,14 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(StaticsStore,['statics'])
|
||||
// ...mapState(SearchStore,['statics'])
|
||||
},
|
||||
created () {
|
||||
console.log("search created");
|
||||
// this.loadStatics()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(StaticsStore,['loadStatics']),
|
||||
onSubmitSearch (event) {
|
||||
console.log("onSubmitSearch", event);
|
||||
}
|
||||
// ...mapActions(SearchStore,['loadStatics']),
|
||||
},
|
||||
components: {
|
||||
SvgIcon
|
||||
@ -35,52 +32,48 @@ export default {
|
||||
|
||||
<template>
|
||||
<div id="search-block">
|
||||
<label for="">
|
||||
<router-link :to="{ name: 'search' }">
|
||||
<svg-icon type="mdi" :path="magnify_path"></svg-icon>
|
||||
<span>recherche</span>
|
||||
</label>
|
||||
<form action="" @submit.prevent="onSubmitSearch">
|
||||
<input type="text">
|
||||
<input type="submit" value="rechercher">
|
||||
</form>
|
||||
|
||||
</router-link>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$pad: 0.75em;
|
||||
#search-block{
|
||||
position: relative;
|
||||
// $pad: 0.75em;
|
||||
// #search-block{
|
||||
// position: relative;
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
@include btn();
|
||||
}
|
||||
form{
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 0 $pad;
|
||||
position: absolute;
|
||||
bottom: 110%;
|
||||
left: -$pad;
|
||||
>*{
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
overflow: hidden;
|
||||
max-height:1px;
|
||||
opacity: 0;
|
||||
$delay: 0.5s;
|
||||
transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
|
||||
}
|
||||
&:hover{
|
||||
form{
|
||||
box-shadow: 0 0 5px $btns_back;
|
||||
padding: $pad;
|
||||
max-height: 100px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
// span{
|
||||
// display: inline-block;
|
||||
// @include btn();
|
||||
// }
|
||||
// form{
|
||||
// background-color: #fff;
|
||||
// border-radius: 5px;
|
||||
// padding: 0 $pad;
|
||||
// position: absolute;
|
||||
// bottom: 110%;
|
||||
// left: -$pad;
|
||||
// >*{
|
||||
// margin: 0 0 0.5em 0;
|
||||
// }
|
||||
// overflow: hidden;
|
||||
// max-height:1px;
|
||||
// opacity: 0;
|
||||
// $delay: 0.5s;
|
||||
// transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
|
||||
// }
|
||||
// &:hover{
|
||||
// form{
|
||||
// box-shadow: 0 0 5px $btns_back;
|
||||
// padding: $pad;
|
||||
// max-height: 100px;
|
||||
// opacity: 1;
|
||||
// transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
||||
@ -32,6 +32,15 @@ const router = createRouter({
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/Concernement.vue'),
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: '/search/',
|
||||
name: 'search',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/Search.vue'),
|
||||
props: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
50
src/stores/search.js
Normal file
50
src/stores/search.js
Normal file
@ -0,0 +1,50 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { print } from 'graphql/language/printer'
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
// import REST from '@api/rest-axios'
|
||||
import GQL from '@api/graphql-axios'
|
||||
// import JSONAPI from '@api/json-axios'
|
||||
|
||||
import StaticsFields from '@api/gql/statics.fragment.gql'
|
||||
|
||||
export const SearchStore = defineStore({
|
||||
id: 'search',
|
||||
state: () => ({
|
||||
// loaded: false,
|
||||
}),
|
||||
getters: {
|
||||
|
||||
},
|
||||
actions: {
|
||||
loadResults () {
|
||||
console.log('search store loadResults');
|
||||
// return new Promise((resolve, reject) => {
|
||||
// const ast = gql`{
|
||||
// promotedstatics {
|
||||
// ...StaticsFields
|
||||
// }
|
||||
// }
|
||||
// ${StaticsFields}
|
||||
// `
|
||||
// console.log('ast', ast);
|
||||
// GQL.post('', { query: print(ast) })
|
||||
// .then(({ data : { data : { promotedstatics } } }) => {
|
||||
// console.log('loadstatics loaded', promotedstatics)
|
||||
// this.statics = promotedstatics
|
||||
|
||||
// promotedstatics.forEach((s) => {
|
||||
// // console.log("s", s);
|
||||
// this.statics_byid[s.id] = s
|
||||
// });
|
||||
// console.log("statics_byid", this.statics_byid);
|
||||
// this.loaded = true;
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.warn('Issue with loadStatics', error)
|
||||
// Promise.reject(error)
|
||||
// })
|
||||
// })
|
||||
}
|
||||
}
|
||||
})
|
||||
56
src/views/Search.vue
Normal file
56
src/views/Search.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<script>
|
||||
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { SearchStore } from '@/stores/search'
|
||||
|
||||
export default {
|
||||
props: [],
|
||||
// data(){
|
||||
// return {
|
||||
// block: null
|
||||
// }
|
||||
// },
|
||||
computed: {
|
||||
// ...mapState(SearchStore,['loaded', 'statics_byid'])
|
||||
},
|
||||
created () {
|
||||
console.log("search created");
|
||||
},
|
||||
methods: {
|
||||
...mapActions(SearchStore,['loadResults']),
|
||||
onSubmitSearch (event) {
|
||||
console.log("onSubmitSearch", event);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
// MapConcernements
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="search">
|
||||
<h2>Recherche</h2>
|
||||
<form action="" @submit.prevent="onSubmitSearch">
|
||||
<input type="text">
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user