bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

search filters ok, to be improved on results pertinance

This commit is contained in:
Bachir Soussi Chiadmi 2021-04-05 12:45:58 +02:00
parent fd8237037a
commit 8008217444
8 changed files with 107 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/modules/custom/materio_sapi/src/Controller/Base.php
View File

@ -86,6 +86,18 @@ class Base extends ControllerBase {
$this->query->setOption('termid', $this->term);
}
// filter the search
if ($this->filters) {
$filters_conditions = $this->query->createConditionGroup('OR');
foreach ($this->filters as $filter) {
$filter = (int) $filter;
foreach (['tag_tid', 'thesaurus_tid'] as $field) {
$filters_conditions->addCondition($field, $filter);
}
}
$this->query->addConditionGroup($filters_conditions);
}
// Restrict the search to specific languages.
$lang = \Drupal::languageManager()->getCurrentLanguage()->getId();
$this->query->setLanguages([$lang]);
@ -137,7 +149,14 @@ class Base extends ControllerBase {
// $this->keys = Tags::explode($this->keys);
\Drupal::logger('materio_sapi')->notice($this->keys);
}
// get the exacte term id in case of autocomplete
$this->term = $request->query->get('term');
// get the filters of advanced search
$f = $request->query->get('filters');
$this->filters = strlen($f) ? explode(',', $f) : null;
// $this->allparams = $request->query->all();
// $request->attributes->get('_raw_variables')->get('filters')
//
$this->offset = $request->query->get('offset') ?? $this->offset;
$this->limit = $request->query->get('limit') ?? $this->limit;
}

19
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -19759,10 +19759,21 @@ header[role="banner"] {
border-radius: 14px;
padding: 0.3em;
color: #666; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-single-selected {
border-radius: 15px; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-content {
width: auto; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main {
font-size: 0.756em; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-single-selected {
border-radius: 0.7em;
height: 1.5em;
border: none;
padding: 0 0.5em;
background-color: #e2e2e2; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-single-selected span.placeholder {
color: #1A1A1A;
line-height: 1; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-single-selected span.placeholder span.ss-disabled {
color: #616161; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-content {
width: auto; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form .button.form-submit {
border: 0;
text-indent: 50px;

8
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

14
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -589,8 +589,20 @@ header[role="banner"]{
#edit-filters{
.ss-main{
font-size: 0.756em;
.ss-single-selected{
border-radius: 15px;
border-radius: 0.7em;
height:1.5em;
border: none;
padding: 0 0.5em;
background-color: #e2e2e2;
span.placeholder{
color: $color-main-text;
line-height: 1;
span.ss-disabled{
color: #616161;
}
}
}
.ss-content{
width:auto;

37
web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
View File

@ -16,6 +16,7 @@ export default {
template: null,
typed: null,
autocomplete: null,
slimFilters: [],
$input: null
// basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
}
@ -23,7 +24,8 @@ export default {
computed: {
...mapState({
keys: state => state.Search.keys,
term: state => state.Search.term
term: state => state.Search.term,
filters: state => state.Search.filters
})
},
methods: {
@ -32,7 +34,21 @@ export default {
// unfocus the text input to hide the keyboard on mobile device
this.$input.blur()
// New search is triggered by Base.vue with router (which will also fill the store)
this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
// cleaning slimfilters
let filters = []
this.slimFilters.forEach((filter, index) => {
console.log('foreach filters', filter)
if(filter){
filters.push(filter)
}
})
console.log('Cleaning filters',this.slimFilters, filters)
// push router
this.$router.push({name:'base', query:{
keys:this.typed,
term:this.autocomplete,
filters:filters.join(',')
}})
// this.$router.push({
// path:`${this.basePath}/base`,
// query:{keys:this.typed,term:this.autocomplete}
@ -51,6 +67,10 @@ export default {
}
}.bind(this), 1)
},
onSelectFiltersChange(index, info){
console.log('onSelectFiltersChange', index, info, this.filters)
this.slimFilters[index] = info.value
}
},
directives: {
@ -99,18 +119,19 @@ export default {
this.$input = this.$el.querySelector('#edit-search')
// // focus on input
// $input.focus()
// Catch the jquery ui events for autocmplete widget
jQuery(this.$input).on('autocompleteselect', this.onAutoCompleteSelect);
// customize the select filters
// http://slimselectjs.com/options
const selects = this.$el.querySelectorAll('select')
selects.forEach((selectElement) => {
selects.forEach((selectElement, index) => {
// get the first option to make the placeholder then empty it
const placeholder_option = selectElement.querySelector('option:first-child')
console.log('placeholder_option', placeholder_option);
// console.log('placeholder_option', placeholder_option);
const placeholder = placeholder_option.innerText
placeholder_option.removeAttribute("value")
// let attr = document.createAttribute('data-placeholder')
// attr.value = true
placeholder_option.setAttribute("data-placeholder", true)
placeholder_option.innerHTML = ''
new SlimSelect({
@ -119,9 +140,9 @@ export default {
// allowDeselect: true
allowDeselectOption: true,
showSearch: false,
closeOnSelect: false,
closeOnSelect: true,
onChange: (info) => {
console.log(info)
this.onSelectFiltersChange(index, info)
}
})
})

22
web/themes/custom/materiotheme/vuejs/components/Pages/Base.vue
View File

@ -65,24 +65,34 @@ export default {
// at first page load or first route entering launch a search if params exists in url query
console.log('Base created() location',window.location)
let params = new URLSearchParams(window.location.search)
if (params.has('keys') || params.has('term')) {
if (params.has('keys')) {
this.$store.commit('Search/setKeys', params.get('keys'))
this.$store.commit('Search/setTerm', params.get('term'))
this.pagetitle = params.get('keys')
this.newSearch()
} else {
// load default base page
this.$store.commit('Search/setKeys', '')
this.$store.commit('Search/setTerm', '')
this.pagetitle = 'Base'
this.newSearch()
}
if (params.has('term')) {
this.$store.commit('Search/setTerm', params.get('term'))
} else {
this.$store.commit('Search/setTerm', '')
}
if (params.has('filters')) {
this.$store.commit('Search/setFilters', params.get('filters').split(','))
} else {
this.$store.commit('Search/setFilters', [])
}
this.newSearch()
},
beforeRouteUpdate (to, from, next) {
// when query change launch a new search
console.log('Base beforeRouteUpdate', to, from, next)
this.$store.commit('Search/setKeys', to.query.keys)
this.$store.commit('Search/setTerm', to.query.term)
this.$store.commit('Search/setFilters', to.query.filters)
this.pagetitle = to.query.keys
this.newSearch()
next()

4
web/themes/custom/materiotheme/vuejs/components/cardMixins.js
View File

@ -46,7 +46,7 @@ export default {
// if (this.$options.name ==! 'ModalCard') {
this.$el.addEventListener('mouseover', function (event) {
const imgs = this.querySelectorAll('.images figure img.lazy')
console.log('mousemove', this, imgs)
// console.log('mousemove', this, imgs)
imgs.forEach((img) => {
// console.log('forEach img',img)
img.setAttribute('src', img.getAttribute('data-src'))
@ -62,7 +62,7 @@ export default {
this.$el.addEventListener('mousemove', function (event) {
const imgs = this.querySelectorAll('.images figure img.lazy')
console.log('mousemove', this, imgs)
// console.log('mousemove', this, imgs)
imgs.forEach((img) => {
// console.log('forEach img',img)
img.setAttribute('src', img.getAttribute('data-src'))

9
web/themes/custom/materiotheme/vuejs/store/modules/search.js
View File

@ -17,6 +17,7 @@ export default {
state: {
keys: '',
term: '',
filters: [],
uuids: [],
items: [],
offset: 0,
@ -66,6 +67,10 @@ export default {
setTerm (state, term) {
state.term = term
},
setFilters (state, filters) {
console.log('store search setFilters', filters)
state.filters = filters
},
setInfos (state, infos) {
state.infos = infos
},
@ -121,6 +126,10 @@ export default {
offset: state.offset,
limit: state.limit
}
if (state.filters) {
console.log('getResults filters', state.filters)
params.filters = state.filters
}
// console.log('Search getResults params', params)
const q = qs.stringify(params)
return MA.get('/materio_sapi/getresults?' + q)