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

View File

@ -86,6 +86,18 @@ class Base extends ControllerBase {
$this->query->setOption('termid', $this->term); $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. // Restrict the search to specific languages.
$lang = \Drupal::languageManager()->getCurrentLanguage()->getId(); $lang = \Drupal::languageManager()->getCurrentLanguage()->getId();
$this->query->setLanguages([$lang]); $this->query->setLanguages([$lang]);
@ -137,7 +149,14 @@ class Base extends ControllerBase {
// $this->keys = Tags::explode($this->keys); // $this->keys = Tags::explode($this->keys);
\Drupal::logger('materio_sapi')->notice($this->keys); \Drupal::logger('materio_sapi')->notice($this->keys);
} }
// get the exacte term id in case of autocomplete
$this->term = $request->query->get('term'); $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->offset = $request->query->get('offset') ?? $this->offset;
$this->limit = $request->query->get('limit') ?? $this->limit; $this->limit = $request->query->get('limit') ?? $this->limit;
} }

View File

@ -19759,10 +19759,21 @@ header[role="banner"] {
border-radius: 14px; border-radius: 14px;
padding: 0.3em; padding: 0.3em;
color: #666; } color: #666; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-single-selected { header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main {
border-radius: 15px; } font-size: 0.756em; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-content { header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-single-selected {
width: auto; } 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 { header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form .button.form-submit {
border: 0; border: 0;
text-indent: 50px; text-indent: 50px;

File diff suppressed because one or more lines are too long

View File

@ -589,8 +589,20 @@ header[role="banner"]{
#edit-filters{ #edit-filters{
.ss-main{ .ss-main{
font-size: 0.756em;
.ss-single-selected{ .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{ .ss-content{
width:auto; width:auto;

View File

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

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 // at first page load or first route entering launch a search if params exists in url query
console.log('Base created() location',window.location) console.log('Base created() location',window.location)
let params = new URLSearchParams(window.location.search) 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/setKeys', params.get('keys'))
this.$store.commit('Search/setTerm', params.get('term'))
this.pagetitle = params.get('keys') this.pagetitle = params.get('keys')
this.newSearch()
} else { } else {
// load default base page
this.$store.commit('Search/setKeys', '') this.$store.commit('Search/setKeys', '')
this.$store.commit('Search/setTerm', '')
this.pagetitle = 'Base' 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) { beforeRouteUpdate (to, from, next) {
// when query change launch a new search // when query change launch a new search
console.log('Base beforeRouteUpdate', to, from, next) console.log('Base beforeRouteUpdate', to, from, next)
this.$store.commit('Search/setKeys', to.query.keys) this.$store.commit('Search/setKeys', to.query.keys)
this.$store.commit('Search/setTerm', to.query.term) this.$store.commit('Search/setTerm', to.query.term)
this.$store.commit('Search/setFilters', to.query.filters)
this.pagetitle = to.query.keys this.pagetitle = to.query.keys
this.newSearch() this.newSearch()
next() next()

View File

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

View File

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