ouatterrir-app/src/views/Search.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,['keys', 'contentTypeFilter', 'results', 'loaded_results']),
    ...mapState(ConcernementsStore,['map_mode', 'opened_concernement']),
    // value(){
    //   return this.keys
    // }
  },
  created () {
    console.log("search created");
    this.content_type = this.contentTypeFilter;
  },
  watch: {
    value: {
      handler (n,o){
        this.setKeys(n);
      },
      deep: true
    },
    content_type: {
      handler (n,o){
        this.setContentType(n);
      },
      deep: true
    },
  },
  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: {
    // 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>
            <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>

      </footer>
    
  </section>
</template>

<style lang="scss" scoped>

</style>