first api request for search is working

src/api/ma-axios.js

@@ -0,0 +1,33 @@
+import axios from 'axios'
+
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js
+
+// console.log('drupalSettings', drupalSettings)
+
+const MA = axios.create({
+  baseURL: `${window.location.origin}/api`,
+  withCredentials: true,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})
+
+
+
+
+MA.interceptors.response.use(
+  response => {
+    return Promise.resolve(response)
+  },
+  error => {
+    const { status } = error.response
+    console.warn('error in ma-axios interceptor', status)
+    // if (status === 403) {
+    //   window.location = '/'
+    // }
+    return Promise.reject(error)
+  }
+)
+
+export default MA

src/assets/main.scss

@@ -501,6 +501,15 @@ body{
         &>*{
           flex: 0 1 auto;
         }
+
+        .content-type-checkboxes{
+          padding:1em 0;
+          display: flex;
+          flex-direction: row;
+          label{
+            padding: 0 1em 0 0.2em;
+          }
+        }
       }
 
     }

src/stores/search.js

@@ -3,48 +3,47 @@ import { print } from 'graphql/language/printer'
 import gql from 'graphql-tag'
 
 // import REST from '@api/rest-axios'
-import GQL from '@api/graphql-axios'
+// import GQL from '@api/graphql-axios'
 // import JSONAPI from '@api/json-axios'
+import MA from '@api/ma-axios'
+import qs from 'querystring-es3'
 
-import StaticsFields from '@api/gql/statics.fragment.gql'
+// import StaticsFields from '@api/gql/statics.fragment.gql'
 
 export const SearchStore = defineStore({
   id: 'search',
   state: () => ({
-    // loaded: false,
+    keys: null,
+    contentTypesFilter: [],
+    results: []
   }),
   getters: {
     
   },
   actions: {
+    setKeys (value) {
+      this.keys = value.split(' ');
+    },
+    setContentTypes (v) {
+      this.contentTypesFilter = v
+    },
     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)
-    //       })
-    //   })
+      console.log('search store loadResults', this.keys);
+      // this.keys = keys;
+      const params = {
+        keys: this.keys.join(', ')
+      }
+      const q = qs.stringify(params)
+      return MA.get('/ouatt_searchapi/getresults?' + q)
+        .then(({ data }) => {
+          console.log('search MA getresults data', data, data.nids)
+          this.results = data.nids;
+        })
+        .catch((error) => {
+          console.warn('Issue with getResults', error)
+          // window.location.reload()
+          Promise.reject(error)
+        })
     }
   }
 })

src/views/Search.vue

@@ -5,21 +5,42 @@ import { SearchStore } from '@/stores/search'
 
 export default {
   props: [],
-  // data(){
-  //   return {
-  //     block: null
-  //   }
-  // },
+  data(){
+    return {
+      value: null,
+      content_types: ['concernement', 'entite']
+    }
+  },
   computed: {
-    // ...mapState(SearchStore,['loaded', 'statics_byid'])
+    ...mapState(SearchStore,['keys', 'contentTypesFilter', 'results']),
+    // value(){
+    //   return this.keys
+    // }
   },
   created () {
     console.log("search created");
+    this.setContentTypes(this.content_types);
+  },
+  watch: {
+    value: {
+      handler (n,o){
+        this.setKeys(n);
+      },
+      deep: true
+    },
+    content_types: {
+      handler (n,o){
+        this.setContentTypes(n);
+      },
+      deep: true
+    },
   },
   methods: {
-    ...mapActions(SearchStore,['loadResults']),
+    ...mapActions(SearchStore,['setKeys','setContentTypes','loadResults']),
     onSubmitSearch (event) {
-      console.log("onSubmitSearch", event);
+      console.log("onSubmitSearch", event, this.value);
+      // let value = event.target[0].value;
+      this.loadResults();
     }    
   },
   components: {
@@ -33,12 +54,21 @@ export default {
   <section class="search">
     <h2>Recherche</h2>
     <form action=""  @submit.prevent="onSubmitSearch">
-      <input type="text">
-      <select name="content_type" id="content-type-select">
+      <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>
+      </select> -->
+
+      <section class="content-type-checkboxes">
+        <input type="checkbox" name="concernement" id="concernement_checkbox" v-model="content_types" value="concernement">
+        <label for="concernement">Concernements</label>
+        <input type="checkbox" name="entite" id="entite_checkbox" v-model="content_types" value="entite">
+        <label for="concernement">Entités</label>
+      </section>
+      
+      
       <select name="bourgeons" id="content-type-select">
         <option value="all">Bourgeon</option>
         <option value="bourgeon1">Bourgeon1</option>
@@ -47,7 +77,11 @@ export default {
 
       <input type="submit" value="rechercher">
     </form>
-
+    <section class="results">
+      <ul>
+       <li v-for="result in results">{{ result }}</li>
+      </ul>
+    </section>
   </section>
 </template>