filter search by text #833 #828

assets/css/app.scss

@@ -944,7 +944,7 @@ footer[role="tools"]{
 
       fieldset.filters{
         .vs__actions{
-          background-color: $grisclair;
+          // background-color: $grisclair;
           align-items:baseline;
           padding-top:0.2em;
         }
@@ -1040,6 +1040,10 @@ footer[role="tools"]{
   }
   .vs__actions{
     padding:1px 3px;
+    button.vs__clear{
+      line-height: 0.5;
+      // height:0;
+    }
     svg[role="presentation"]{
       transform: scale(0.8);
       path{

src/components/nav/HeaderMenu.vue

@@ -47,7 +47,7 @@ export default {
   },
   watch: {
     $route (n, o) {
-      console.log('route changed')
+      // console.log('route changed')
       this.indexOpened = false
     }
   },

src/components/nav/Search.vue

@@ -37,6 +37,18 @@
           title="chargement"
         />
       </fieldset>
+      <fieldset v-if="filters.texts.length" class="filters filters-texts small-col-4 med-col-2 large-col-2">
+        <v-select
+          id="filters-texts"
+          type="select"
+          placeholder="filtrer par texte"
+          append-to-body
+          :calculate-position="dropDownMenuPos"
+          :options="textsOptions"
+          :value="activeFilters.texts"
+          @input="onFiltersTextSelected"
+        />
+      </fieldset>
       <fieldset v-if="filters.persons.length" class="filters filters-nominum small-col-4 med-col-2 large-col-2">
         <v-select
           id="filters-nominum"
@@ -112,6 +124,9 @@ export default {
     },
     objectsOptions () {
       return this.filters.objects.filter(option => !this.activeFilters.objects.includes(option))
+    },
+    textsOptions () {
+      return this.filters.texts.filter(option => !this.activeFilters.texts.includes(option))
     }
   },
   methods: {
@@ -175,17 +190,23 @@ export default {
     },
     onFiltersNominumSelected (e) {
       console.log('onFiltersNominumSelected', e)
-      this.setActiveFilters({ index: 'persons', value: e })
+      this.setActiveFilters({ filter: 'persons', value: e })
       this.updateSearch()
     },
     onFiltersLocorumSelected (e) {
       console.log('onFiltersLocorumSelected', e)
-      this.setActiveFilters({ index: 'places', value: e })
+      this.setActiveFilters({ filter: 'places', value: e })
       this.updateSearch()
     },
     onFiltersOperumSelected (e) {
       console.log('onFiltersOperumSelected', e)
-      this.setActiveFilters({ index: 'objects', value: e })
+      this.setActiveFilters({ filter: 'objects', value: e })
+      this.updateSearch()
+    },
+    onFiltersTextSelected (e) {
+      console.log('onFiltersTextSelected', e)
+      // as texts is not multiple, convert one object value to array [e]
+      this.setActiveFilters({ filter: 'texts', value: e ? [e] : [] })
       this.updateSearch()
     }
   }

src/store/modules/search.js

@@ -3,7 +3,7 @@ import axios from 'axios'
 import { REST } from 'api/rest-axios'
 import qs from 'querystring'
 
-const _filterskeys = ['persons', 'places', 'objects']
+const _filterskeys = ['persons', 'places', 'objects', 'texts']
 const _CancelToken = axios.CancelToken
 // const _cancelTokenSource = _CancelToken.source()
 let _cancelTokens = []
@@ -23,8 +23,8 @@ export default {
       { 'code': 'objects', 'label': 'Dans les objets' }
     ],
     searchTypeValue: { 'code': 'text', 'label': 'Dans les textes' },
-    filters: { persons: [], places: [], objects: [] },
-    activeFilters: { persons: [], places: [], objects: [] },
+    filters: { persons: [], places: [], objects: [], texts: [] },
+    activeFilters: { persons: [], places: [], objects: [], texts: [] },
     sortOptions: [
       { code: 'date', label: 'date' },
       { code: 'score', label: 'pertinence' },
@@ -77,30 +77,30 @@ export default {
       state.searchTypeValue = value
     },
     setFilters (state, filters) {
-      for (let index in filters) {
-        if (filters.hasOwnProperty(index)) {
-          console.log('index', index)
-          if (filters[index]) {
-            if (Array.isArray(filters[index])) {
-              state.filters[index] = []
-              for (var i = 0; i < filters[index].length; i++) {
-                if (filters[index][i].uuid && filters[index][i].title) {
-                  state.filters[index].push({
-                    code: filters[index][i].uuid,
-                    label: filters[index][i].title
+      for (let filter in filters) {
+        if (filters.hasOwnProperty(filter)) {
+          console.log('filter', filter)
+          if (filters[filter]) {
+            if (Array.isArray(filters[filter])) {
+              state.filters[filter] = []
+              for (var i = 0; i < filters[filter].length; i++) {
+                if (filters[filter][i].uuid && filters[filter][i].title) {
+                  state.filters[filter].push({
+                    code: filters[filter][i].uuid,
+                    label: filters[filter][i].title
                   })
                 }
               }
             } else {
-              if (filters[index].uuid && filters[index].title) {
-                state.filters[index] = [{
-                  code: filters[index].uuid,
-                  label: filters[index].title
+              if (filters[filter].uuid && filters[filter].title) {
+                state.filters[filter] = [{
+                  code: filters[filter].uuid,
+                  label: filters[filter].title
                 }]
               }
             }
           } else {
-            state.filters[index] = []
+            state.filters[filter] = []
           }
         }
       }
@@ -108,7 +108,7 @@ export default {
     },
     setActiveFilters (state, filters) {
       // console.log('setActiveFilters', filters)
-      state.activeFilters[filters.index] = filters.value
+      state.activeFilters[filters.filter] = filters.value
       // console.log('state.activeFilters', state.activeFilters)
     },
     resetActiveFilters (state) {
@@ -148,19 +148,20 @@ export default {
         params.type = state.searchTypeValue.code
       }
       let f
-      for (var index of _filterskeys) {
-        if (state.activeFilters[index].length) {
-          f = `filter${index.charAt(0).toUpperCase()}${index.slice(1)}`
+      for (var filter of _filterskeys) {
+        // console.log(`state.activeFilters[${filter}]`, state.activeFilters[filter])
+        if (state.activeFilters[filter].length) {
+          f = filter === 'texts' ? 'text' : `filter${filter.charAt(0).toUpperCase()}${filter.slice(1)}`
           params[f] = []
-          for (var i = 0; i < state.activeFilters[index].length; i++) {
-            params[f].push(state.activeFilters[index][i].code)
+          for (var i = 0; i < state.activeFilters[filter].length; i++) {
+            params[f].push(state.activeFilters[filter][i].code)
           }
         }
       }
       if (state.sorting) {
         params.sort = state.sorting.code
       }
-      // console.log('Search getResults params', params);
+      console.log('Search getResults params', params)
       let q = qs.stringify(params)
 
       // construct options