bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started search router view

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-08-13 20:18:11 +02:00
parent 0fc1cd12dd
commit 749ffd3867
8 changed files with 218 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@ -45,9 +45,12 @@ export default {
<template> <template>
<header id="header"> <header id="header">
<h1 class="row"> <div class="row title">
<h1>
<router-link :to="{ name: 'home' }"><span class="title">Atlas</span> des cartes d'atterrissage</router-link> <router-link :to="{ name: 'home' }"><span class="title">Atlas</span> des cartes d'atterrissage</router-link>
</h1> </h1>
</div>
<div class="row top"> <div class="row top">
<StaticMenu/> <StaticMenu/>
<SearchBlock/> <SearchBlock/>

2
src/assets/layout.scss
View File

@ -29,7 +29,7 @@ html,body{
bottom:0; bottom:0;
left:0; left:0;
width: 100vw; width: 100vw;
padding: 1rem 1em; padding: 1rem 0;
>.row{ >.row{
@include layout-row(); @include layout-row();
} }

39
src/assets/main.scss
View File

@ -37,7 +37,9 @@ body{
// &.top{ // &.top{
// } // }
} }
h1.row{ div.row.title{
padding: 0 0 0 1em;
h1{
font-family: "avara"; font-family: "avara";
margin: 0 1em 0 0; margin: 0 1em 0 0;
a{ a{
@ -49,6 +51,8 @@ body{
} }
} }
}
.row.top{ .row.top{
>*{ >*{
label,a{ label,a{
@ -102,6 +106,19 @@ body{
opacity: 0.4; opacity: 0.4;
cursor: default; 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 { &.recit-opened {
padding-bottom: 3rem; padding-bottom: 3rem;

24
src/components/MapConcernements.vue
View File

@ -1023,49 +1023,49 @@ export default {
<ul> <ul>
<li> <li>
<a <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> </a>
</li> </li>
<li> <li>
<a <a
href="#proximite" @click="setMapMode('proximite')" title="proximite" href="#proximite" @click="setMapMode('proximite')"
:class="{ disabled: opened_concernement && !opened_concernement.has_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> </a>
</li> </li>
<li> <li>
<a <a
href="#superposition" @click="setMapMode('superposition')" title="superposition" href="#superposition" @click="setMapMode('superposition')"
:class="{ disabled: opened_concernement && !opened_concernement.has_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> </a>
</li> </li>
<li> <li>
<a <a
href="#puissancedagir" @click="setMapMode('puissancedagir')" title="puissance d'agir" href="#puissancedagir" @click="setMapMode('puissancedagir')"
:class="{ disabled: opened_concernement && !opened_concernement.has_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> </a>
</li> </li>
<li> <li>
<a <a
href="#action" @click="setMapMode('action')" title="action" href="#action" @click="setMapMode('action')"
:class="{ disabled: opened_concernement && !opened_concernement.has_agissantes }" :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> </a>
</li> </li>
<li> <li>
<a <a
href="#doleancer" @click="setMapMode('doleancer')" title="cercle politique" href="#doleancer" @click="setMapMode('doleancer')"
:class="{ disabled: opened_concernement && !opened_concernement.has_doleance }" :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> </a>
</li> </li>
</ul> </ul>

83
src/components/block/SearchBlock.vue
View File

@ -1,7 +1,7 @@
<script> <script>
import { mapActions, mapState } from 'pinia' import { mapActions, mapState } from 'pinia'
import { StaticsStore } from '@/stores/statics' // import { SearchStore } from '@/stores/search'
import SvgIcon from '@jamescoyle/vue-icon'; import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js'; import { mdiMagnify } from '@mdi/js';
@ -14,17 +14,14 @@ export default {
} }
}, },
computed: { computed: {
...mapState(StaticsStore,['statics']) // ...mapState(SearchStore,['statics'])
}, },
created () { created () {
console.log("search created"); console.log("search created");
// this.loadStatics() // this.loadStatics()
}, },
methods: { methods: {
...mapActions(StaticsStore,['loadStatics']), // ...mapActions(SearchStore,['loadStatics']),
onSubmitSearch (event) {
console.log("onSubmitSearch", event);
}
}, },
components: { components: {
SvgIcon SvgIcon
@ -35,52 +32,48 @@ export default {
<template> <template>
<div id="search-block"> <div id="search-block">
<label for=""> <router-link :to="{ name: 'search' }">
<svg-icon type="mdi" :path="magnify_path"></svg-icon> <svg-icon type="mdi" :path="magnify_path"></svg-icon>
<span>recherche</span> <span>recherche</span>
</label> </router-link>
<form action="" @submit.prevent="onSubmitSearch">
<input type="text">
<input type="submit" value="rechercher">
</form>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
$pad: 0.75em; // $pad: 0.75em;
#search-block{ // #search-block{
position: relative; // position: relative;
span{ // span{
display: inline-block; // display: inline-block;
@include btn(); // @include btn();
} // }
form{ // form{
background-color: #fff; // background-color: #fff;
border-radius: 5px; // border-radius: 5px;
padding: 0 $pad; // padding: 0 $pad;
position: absolute; // position: absolute;
bottom: 110%; // bottom: 110%;
left: -$pad; // left: -$pad;
>*{ // >*{
margin: 0 0 0.5em 0; // margin: 0 0 0.5em 0;
} // }
overflow: hidden; // overflow: hidden;
max-height:1px; // max-height:1px;
opacity: 0; // opacity: 0;
$delay: 0.5s; // $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; // transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
} // }
&:hover{ // &:hover{
form{ // form{
box-shadow: 0 0 5px $btns_back; // box-shadow: 0 0 5px $btns_back;
padding: $pad; // padding: $pad;
max-height: 100px; // max-height: 100px;
opacity: 1; // opacity: 1;
transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s; // transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s;
} // }
} // }
} // }
</style> </style>

9
src/router/index.js
View File

@ -32,6 +32,15 @@ const router = createRouter({
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import('../views/Concernement.vue'), component: () => import('../views/Concernement.vue'),
props: true 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
View 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
View 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>