From 749ffd38670fda8dcabd8863255ec463f343119d Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Sun, 13 Aug 2023 20:18:11 +0200
Subject: [PATCH] started search router view

---
 src/App.vue                          |  9 ++-
 src/assets/layout.scss               |  2 +-
 src/assets/main.scss                 | 53 ++++++++++++++---
 src/components/MapConcernements.vue  | 24 ++++----
 src/components/block/SearchBlock.vue | 85 +++++++++++++---------------
 src/router/index.js                  |  9 +++
 src/stores/search.js                 | 50 ++++++++++++++++
 src/views/Search.vue                 | 56 ++++++++++++++++++
 8 files changed, 218 insertions(+), 70 deletions(-)
 create mode 100644 src/stores/search.js
 create mode 100644 src/views/Search.vue

diff --git a/src/App.vue b/src/App.vue
index 4f7e34a..7aec482 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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/> 
diff --git a/src/assets/layout.scss b/src/assets/layout.scss
index e770777..244dc89 100644
--- a/src/assets/layout.scss
+++ b/src/assets/layout.scss
@@ -29,7 +29,7 @@ html,body{
   bottom:0;
   left:0;
   width: 100vw;
-  padding: 1rem 1em;
+  padding: 1rem 0;
   >.row{
     @include layout-row();
   }
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 851dd16..127d62a 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -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;
diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue
index ec6514f..afb8458 100644
--- a/src/components/MapConcernements.vue
+++ b/src/components/MapConcernements.vue
@@ -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>
diff --git a/src/components/block/SearchBlock.vue b/src/components/block/SearchBlock.vue
index f2fc579..be94677 100644
--- a/src/components/block/SearchBlock.vue
+++ b/src/components/block/SearchBlock.vue
@@ -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>
diff --git a/src/router/index.js b/src/router/index.js
index b59cec6..9e6737a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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
     }
   ]
 })
diff --git a/src/stores/search.js b/src/stores/search.js
new file mode 100644
index 0000000..5c74bbb
--- /dev/null
+++ b/src/stores/search.js
@@ -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)
+    //       })
+    //   })
+    }
+  }
+})
\ No newline at end of file
diff --git a/src/views/Search.vue b/src/views/Search.vue
new file mode 100644
index 0000000..fc9649f
--- /dev/null
+++ b/src/views/Search.vue
@@ -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>