search misc: results links, ...

src/api/gql/results_entite.fragment.gql

@@ -1,4 +1,9 @@
 fragment ResultsEntiteFields on Entite {
+  id
+  concernement {
+    id
+    title
+  }
   action
   menacemaintien
   title

src/assets/main.scss

@@ -522,15 +522,21 @@ body{
             list-style: none;
 
             h1{
-              font-weight: 400;
-              font-size: 1.323em;
+              // font-weight: 400;
+              // font-size: 1.323em;
+              font-size: 1em;
+              font-weight: 300;
+              // line-height: 1.4;
+              // 
               margin: 0;
+              cursor: pointer;
             }
             h2 {
               font-size: 0.882em;
               font-weight: 100;
               margin: 0;
               padding: 0;
+              cursor: pointer;
             }
           }
         }

src/components/ConcernementMapItem.vue

@@ -72,6 +72,7 @@ export default {
     ...mapState(CommonStore,['hover_elmt',
                             'map_item_ray',
                             'cartouch_width',
+                            'cartouch_is_opened',
                             'paper_symbol_definitions'])
   },
   created () {
@@ -1164,6 +1165,12 @@ export default {
 
       this.paper_main_object.onMouseMove = function(event){
         // console.log(`onmousemove ${this.id}`);
+
+        // prevent hover map item mouse event if cartouch is opened
+        if (this.cartouch_is_opened) {
+          return;
+        }
+
         if (!this.is_opened) {
           if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused
             this.setHoverElmt({
@@ -1228,6 +1235,12 @@ export default {
       
       this.paper_main_object.onClick = function(event){
         console.log('paper concernement onClick');
+
+        // prevent hover map item mouse event if cartouch is opened
+        if (this.cartouch_is_opened) {
+          return;
+        }
+        
         if (!this.is_opened) { // si ce concernement n'est pas ouvet
           if (!this.opened_concernement) { // si aucun concernement n'est ouvert
             console.log(`Open me ${this.id}`);

src/router/index.js

@@ -4,6 +4,7 @@ import HomeView from '@views/Home.vue'
 // import ConcernementView from '@views/Concernement.vue'
 
 import { ConcernementsStore } from '@/stores/concernements'
+import { CommonStore } from '@/stores/common'
 
 
 const router = createRouter({
@@ -47,8 +48,9 @@ const router = createRouter({
 
 // set map_mode on first load
 router.afterEach((to, from) => {
+  console.log('router afterEach', from, to);
   const concernement_store = ConcernementsStore();
-  // console.log('router afterEach', from, to, concernement_store.map_mode);
+  const common_store = CommonStore();
   if (!from.name) { // we are at first load
     if (to.hash) {
       console.log("we have a hash");
@@ -57,6 +59,12 @@ router.afterEach((to, from) => {
       concernement_store.setMapMode("terraindevie");
     }
   }
+  // prevent hover map item mouse event if cartouch is opened
+  if(['static', 'search'].indexOf(to.name) >= 0){
+    common_store.setCartoucheOpened(true);
+  }else{
+    common_store.setCartoucheOpened(false);
+  }
 
 })
 export default router

src/stores/common.js

@@ -8,6 +8,7 @@ export const CommonStore = defineStore({
     hover_elmt: null,
     map_item_ray: Math.min(window.innerWidth, window.innerHeight) * 0.08,
     cartouch_width: 450,
+    cartouch_is_opened: false,
     paper_symbol_definitions: {}
   }),
   getters: {
@@ -19,6 +20,9 @@ export const CommonStore = defineStore({
       // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
       this.hover_elmt = elmt;
     },
+    setCartoucheOpened (v) {
+      this.cartouch_is_opened = v;
+    },
     addPaperSymbolDefinition(name, path) {
       // console.log(`addPaperSymbolDefinition ${name}`, path);
       // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer

src/stores/search.js

@@ -16,7 +16,7 @@ export const SearchStore = defineStore({
   id: 'search',
   state: () => ({
     keys: null,
-    contentTypeFilter: [],
+    contentTypeFilter: 'concernements',
     results: [],
     loaded_results: []
   }),

src/views/Search.vue

@@ -2,24 +2,29 @@
 
 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: 'concernements'
+      content_type: null
     }
   },
   computed: {
-    ...mapState(SearchStore,['keys', 'contentTypesFilter', 'results', 'loaded_results']),
+    ...mapState(SearchStore,['keys', 'contentTypeFilter', 'results', 'loaded_results']),
+    ...mapState(ConcernementsStore,['map_mode', 'opened_concernement']),
     // value(){
     //   return this.keys
     // }
   },
   created () {
     console.log("search created");
-    this.setContentType(this.content_type);
+    this.content_type = this.contentTypeFilter;
   },
   watch: {
     value: {
@@ -37,14 +42,24 @@ export default {
   },
   methods: {
     ...mapActions(SearchStore,['setKeys','setContentType','newSearch']),
+    ...mapActions(ConcernementsStore,['openCloseConcernements']),
     onSubmitSearch (event) {
       console.log("onSubmitSearch", event, this.value);
       // let value = event.target[0].value;
       this.newSearch();
-    }    
+    },
+    onClickResult(id, eid) {
+      this.openCloseConcernements(id)
+      
+      this.$router.push({
+        name: 'concernement',
+        hash: `#${this.map_mode}`,
+        params: {id: id, eid: eid}
+      });
+    }
   },
   components: {
-    // MapConcernements
+    // CartoucheLayout
   }
 }
 
@@ -52,40 +67,66 @@ export default {
 
 <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="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>
+    
+      <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>
+            <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 enité 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>
+        </section>
+      </main>
+
+      <footer>
 
-      <input type="submit" value="rechercher">
-    </form>
-    <section class="results">
-      <ul>
-       <li v-for="result in loaded_results">
-        <h1>{{ result.title }}</h1>
-        <h2 v-if="results.content_type === 'entites'"><span>une enité de </span>{{ result.author.username }}</h2>
-        <h2 v-else><span>une enquête de </span>{{ result.author.username }}</h2>
-      </li>
-      </ul>
-    </section>
+      </footer>
+    
   </section>
 </template>