added search filters display (pseudo content, no effect)

assets/css/app.scss

@@ -553,7 +553,7 @@ footer[role="tools"]{
       form{
         padding: 0.7em;
         fieldset{
-          padding:1em;
+          padding:0em 1em;
           border: none;
           &:not(:first-of-type){
             border-left: 1px solid $grisclair;
@@ -570,6 +570,7 @@ footer[role="tools"]{
           }
           input[type="text"]{
             padding:0.3em;
+            margin:0 0 0.3em 0;
             box-sizing: border-box;
             font-size: 0.756em;
             line-height: 1;
@@ -578,53 +579,9 @@ footer[role="tools"]{
             border:none;
             border-radius: 2px;
           }
-          #search-type{
-            padding:0.2em 0 0 0;
-            div[role="combobox"]{
-              background-color: #fff;
-              padding:0;
-              border-radius: 2px;
-              border: none;
-            }
-            input[type="search"]{
-              margin:0;
-              padding:0;
-            }
-            .vs__search{
-              &, &:focus{
-                font-size: 0.756em;
-                line-height: 1;
-                height:1.2em;
-                border:none;
-                box-sizing: border-box;
-              }
-            }
-            .vs__actions{
-              padding:1px 3px;
-              svg[role="presentation"]{
-                transform: scale(0.8);
-                path{
-                  fill: $bleuroi;
-                }
-              }
-            }
-            .vs__selected{
-              margin:0;
-              padding:0;
-              line-height:1;
-              font-size: 0.756em;
-            }
-            // border-radius: 2px;
-            // border: none;
-          }
-          // input[type="submit"]{
-          //   #submit-search{
-          //     border:none;
-          //
-          //   }
-          // }
           span.mdi{
             display: inline-block;
+            margin:0 0 0 0.5em;
             font-size: 1.2em;
             line-height:1.1;
             vertical-align:middle;
@@ -647,6 +604,60 @@ footer[role="tools"]{
     text-transform: uppercase;
     padding:0;
   }
+  .v-select{
+    padding:0;
+    div[role="combobox"]{
+      background-color: #fff;
+      padding:0;
+      border-radius: 2px;
+      border: none;
+    }
+    input[type="search"]{
+      margin:0;
+      padding:0;
+    }
+    .vs__search{
+      &, &:focus{
+        font-size: 0.756em;
+        line-height: 1;
+        height:1.2em;
+        border:none;
+        box-sizing: border-box;
+      }
+    }
+    .vs__actions{
+      padding:1px 3px;
+      svg[role="presentation"]{
+        transform: scale(0.8);
+        path{
+          fill: $bleuroi;
+        }
+      }
+    }
+    .vs__selected{
+      margin:0;
+      padding:0;
+      line-height:1;
+      font-size: 0.756em;
+    }
+    // border-radius: 2px;
+    // border: none;
+  }
+  fieldset.filters .v-select{
+    .vs__selected{
+      background-color: #fff;
+      border:none;
+      padding:0.3em 0.5em;
+      button{
+        svg{
+          transform: scale(0.8);
+          path{
+            fill: $bleuroi;
+          }
+        }
+      }
+    }
+  }
 }
 
 // vue-select

src/components/nav/Search.vue

@@ -36,24 +36,45 @@
           class="mdi mdi-loading"
           title="chargement"
         />
-        <!-- <input
-          id="submit-search"
-          type="submit"
-          name="search"
-          value="Search"
-          class="mdi mdi-magnify"
-          @click.prevent="submit"
-          @keyup.enter="submit"
-        > -->
       </fieldset>
-      <fieldset class="filters-nominum col-3">
-        <span>Filters Nominum</span>
+      <fieldset v-if="filtersNominum.length" class="filters filters-nominum col-3">
+        <v-select
+          id="filters-nominum"
+          type="select"
+          placeholder="filtrer par personne"
+          append-to-body
+          :calculate-position="dropDownMenuPos"
+          :options="filtersNominum"
+          :value="filtersNominumValue"
+          multiple
+          @input="onFiltersNominumSelected"
+        />
       </fieldset>
-      <fieldset class="filters-locorum col-3">
-        <span>Filters Nominum</span>
+      <fieldset v-if="filtersLocorum.length" class="filters filters-locorum col-3">
+        <v-select
+          id="filters-locorum"
+          type="select"
+          placeholder="filtrer par lieux"
+          append-to-body
+          :calculate-position="dropDownMenuPos"
+          :options="filtersLocorum"
+          :value="filtersLocorumValue"
+          multiple
+          @input="onFiltersLocorumSelected"
+        />
       </fieldset>
-      <fieldset class="filters-operum col-3">
-        <span>Filters Nominum</span>
+      <fieldset v-if="filtersOperum.length" class="filters filters-operum col-3">
+        <v-select
+          id="filters-operum"
+          type="select"
+          placeholder="filtrer par objet"
+          append-to-body
+          :calculate-position="dropDownMenuPos"
+          :options="filtersOperum"
+          :value="filtersOperumValue"
+          multiple
+          @input="onFiltersOperumSelected"
+        />
       </fieldset>
     </form>
   </div>
@@ -77,13 +98,20 @@ export default {
     ...mapState({
       isloading: state => state.Search.isloading,
       searchTypeOptions: state => state.Search.searchTypeOptions,
-      searchTypeValue: state => state.Search.searchTypeValue
+      searchTypeValue: state => state.Search.searchTypeValue,
+      filtersNominum: state => state.Search.filtersNominum,
+      filtersLocorum: state => state.Search.filtersLocorum,
+      filtersOperum: state => state.Search.filtersOperum,
+      filtersNominumValue: state => state.Search.filtersNominumValue,
+      filtersLocorumValue: state => state.Search.filtersLocorumValue,
+      filtersOperumValue: state => state.Search.filtersOperumValue
     })
   },
   methods: {
     ...mapActions({
       getResults: 'Search/getResults',
-      setSearchTypeValue: 'Search/setSearchTypeValue'
+      setSearchTypeValue: 'Search/setSearchTypeValue',
+      setSearchFiltersValue: 'Search/setSearchFiltersValue'
     }),
     submit () {
       console.log('submited', this.keys)
@@ -134,6 +162,18 @@ export default {
     onSearchTypeSelected (e) {
       console.log('onSearchTypeSelected', e)
       this.setSearchTypeValue(e)
+    },
+    onFiltersNominumSelected (e) {
+      console.log('onFiltersNominumSelected', e)
+      this.setSearchFiltersValue({ index: 'nominum', value: e })
+    },
+    onFiltersLocorumSelected (e) {
+      console.log('onFiltersLocorumSelected', e)
+      this.setSearchFiltersValue({ index: 'locorum', value: e })
+    },
+    onFiltersOperumSelected (e) {
+      console.log('onFiltersOperumSelected', e)
+      this.setSearchFiltersValue({ index: 'operum', value: e })
     }
   }
 }

src/store/modules/search.js

@@ -14,6 +14,42 @@ export default {
       { 'code': 'objects', 'label': 'Dans les objets' }
     ],
     searchTypeValue: { 'code': 'text', 'label': 'Dans les textes' },
+    filtersNominum: [
+      { 'code': '1', 'label': 'filter Nonminum 1' },
+      { 'code': '2', 'label': 'filter Nonminum 2' },
+      { 'code': '3', 'label': 'filter Nonminum 3' },
+      { 'code': '4', 'label': 'filter Nonminum 4' },
+      { 'code': '5', 'label': 'filter Nonminum 5' },
+      { 'code': '6', 'label': 'filter Nonminum 6' },
+      { 'code': '7', 'label': 'filter Nonminum 7' },
+      { 'code': '8', 'label': 'filter Nonminum 8' },
+      { 'code': '9', 'label': 'filter Nonminum 9' }
+    ],
+    filtersLocorum: [
+      { 'code': '1', 'label': 'filter Locorum 1' },
+      { 'code': '2', 'label': 'filter Locorum 2' },
+      { 'code': '3', 'label': 'filter Locorum 3' },
+      { 'code': '4', 'label': 'filter Locorum 4' },
+      { 'code': '5', 'label': 'filter Locorum 5' },
+      { 'code': '6', 'label': 'filter Locorum 6' },
+      { 'code': '7', 'label': 'filter Locorum 7' },
+      { 'code': '8', 'label': 'filter Locorum 8' },
+      { 'code': '9', 'label': 'filter Locorum 9' }
+    ],
+    filtersOperum: [
+      { 'code': '1', 'label': 'filter Operum 1' },
+      { 'code': '2', 'label': 'filter Operum 2' },
+      { 'code': '3', 'label': 'filter Operum 3' },
+      { 'code': '4', 'label': 'filter Operum 4' },
+      { 'code': '5', 'label': 'filter Operum 5' },
+      { 'code': '6', 'label': 'filter Operum 6' },
+      { 'code': '7', 'label': 'filter Operum 7' },
+      { 'code': '8', 'label': 'filter Operum 8' },
+      { 'code': '9', 'label': 'filter Operum 9' }
+    ],
+    filtersNominumValue: [],
+    filtersLocorumValue: [],
+    filtersOperumValue: [],
     results: [],
     isloading: false,
     opened: false
@@ -38,6 +74,15 @@ export default {
     },
     setSearchTypeValue (state, value) {
       state.searchTypeValue = value
+    },
+    setFiltersNominumValue (state, value) {
+      state.filtersNominumValue = value
+    },
+    setFiltersLocorumValue (state, value) {
+      state.filtersLocorumValue = value
+    },
+    setFiltersOperumValue (state, value) {
+      state.filtersOperumValue = value
     }
   },
 
@@ -52,7 +97,6 @@ export default {
       if (state.searchTypeValue.code !== 'text') {
         params.type = state.searchTypeValue.code
       }
-
       // console.log('Search getResults params', params);
       let q = qs.stringify(params)
       return REST.get(`${window.apipath}/search?` + q)
@@ -70,6 +114,20 @@ export default {
     },
     setSearchTypeValue ({ dispatch, commit, state }, value) {
       commit('setSearchTypeValue', value)
+    },
+    setSearchFiltersValue ({ dispatch, commit, state }, filters) {
+      console.log('setSearchFiltersValue', filters)
+      switch (filters.index) {
+        case 'nominum':
+          commit('setFiltersNominumValue', filters.value)
+          break
+        case 'locorum':
+          commit('setFiltersLocorumValue', filters.value)
+          break
+        case 'operum':
+          commit('setFiltersOperumValue', filters.value)
+          break
+      }
     }
   }
 }