added content type filter to search, displaying reults

src/api/gql/results_concernement.fragment.gql

@@ -0,0 +1,15 @@
+fragment ResultsConcernementFields on Concernement {
+  id
+  title
+  author {
+    username
+    structure {
+      name
+    }
+  }
+  created
+  changed
+  lieu {
+    name
+  }
+}

src/api/gql/results_entite.fragment.gql

@@ -0,0 +1,13 @@
+fragment ResultsEntiteFields on Entite {
+  action
+  menacemaintien
+  title
+  author {
+    username
+    structure {
+      name
+    }
+  }
+  created
+  changed
+}

src/assets/main.scss

@@ -512,6 +512,30 @@ body{
         }
       }
 
+      section.results{
+        ul{
+          margin:0;
+          padding:0;
+          li{
+            margin:0;
+            padding:0 0 1em 0;
+            list-style: none;
+
+            h1{
+              font-weight: 400;
+              font-size: 1.323em;
+              margin: 0;
+            }
+            h2 {
+              font-size: 0.882em;
+              font-weight: 100;
+              margin: 0;
+              padding: 0;
+            }
+          }
+        }
+      }
+
     }
     &.recit-opened {
       padding-bottom: 3rem;

src/stores/search.js

@@ -3,19 +3,22 @@ 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 ResultsConcernementFields from '@api/gql/results_concernement.fragment.gql'
+import ResultsEntiteFields from '@api/gql/results_entite.fragment.gql'
 
 export const SearchStore = defineStore({
   id: 'search',
   state: () => ({
     keys: null,
-    contentTypesFilter: [],
-    results: []
+    contentTypeFilter: [],
+    results: [],
+    loaded_results: []
   }),
   getters: {
     
@@ -24,26 +27,70 @@ export const SearchStore = defineStore({
     setKeys (value) {
       this.keys = value.split(' ');
     },
-    setContentTypes (v) {
-      this.contentTypesFilter = v
+    setContentType (v) {
+      this.contentTypeFilter = v
     },
-    loadResults () {
+    newSearch () {
       console.log('search store loadResults', this.keys);
       // this.keys = keys;
       const params = {
-        keys: this.keys.join(', ')
+        keys: this.keys.join(', '),
+        content_type: this.contentTypeFilter
       }
       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;
+          this.results = data;
+          this.loadeResults();
         })
         .catch((error) => {
           console.warn('Issue with getResults', error)
           // window.location.reload()
           Promise.reject(error)
         })
+    },
+    loadeResults () {
+      return new Promise((resolve, reject) => {
+        let ast;
+        if (this.contentTypeFilter === 'entites') {
+          ast = gql`{
+            entites(ids: [${this.results.nids}]) {
+              ...ResultsEntiteFields
+            }
+          }
+          ${ResultsEntiteFields}
+          `
+          GQL.post('', { query: print(ast) })
+            .then(({ data : { data  : { entites } } }) => {
+              console.log('entites all loaded', entites)
+              this.loaded_results = entites
+            })
+            .catch(error => {
+              console.warn('Issue with loadResults', error)
+              Promise.reject(error)
+            })
+        } else {
+          ast = gql`{
+            concernements(ids: [${this.results.nids}]) {
+              ...ResultsConcernementFields
+            }
+          }
+          ${ResultsConcernementFields}
+          `
+
+          GQL.post('', { query: print(ast) })
+            .then(({ data : { data  : { concernements } } }) => {
+              console.log('concernements all loaded', concernements)
+              this.loaded_results = concernements
+            })
+            .catch(error => {
+              console.warn('Issue with loadResults', error)
+              Promise.reject(error)
+            })
+        }
+        // console.log('ast', ast);
+      }) 
     }
   }
 })

src/views/Search.vue

@@ -8,18 +8,18 @@ export default {
   data(){
     return {
       value: null,
-      content_types: ['concernement', 'entite']
+      content_type: 'concernements'
     }
   },
   computed: {
-    ...mapState(SearchStore,['keys', 'contentTypesFilter', 'results']),
+    ...mapState(SearchStore,['keys', 'contentTypesFilter', 'results', 'loaded_results']),
     // value(){
     //   return this.keys
     // }
   },
   created () {
     console.log("search created");
-    this.setContentTypes(this.content_types);
+    this.setContentType(this.content_type);
   },
   watch: {
     value: {
@@ -28,19 +28,19 @@ export default {
       },
       deep: true
     },
-    content_types: {
+    content_type: {
       handler (n,o){
-        this.setContentTypes(n);
+        this.setContentType(n);
       },
       deep: true
     },
   },
   methods: {
-    ...mapActions(SearchStore,['setKeys','setContentTypes','loadResults']),
+    ...mapActions(SearchStore,['setKeys','setContentType','newSearch']),
     onSubmitSearch (event) {
       console.log("onSubmitSearch", event, this.value);
       // let value = event.target[0].value;
-      this.loadResults();
+      this.newSearch();
     }    
   },
   components: {
@@ -62,10 +62,10 @@ export default {
       </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>
+        <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>
       
       
@@ -79,7 +79,11 @@ export default {
     </form>
     <section class="results">
       <ul>
-       <li v-for="result in results">{{ result }}</li>
+       <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>
   </section>