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

#1906 serach form autocmplete multi terms

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2022-08-12 17:00:49 +02:00
parent 75ea440f89
commit d1b4902aa3
11 changed files with 96 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ export default {
return {
template: null,
typed: null,
autocomplete: null,
autocomplete: [],
slimFilters: [],
$input: null
// basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
@ -24,7 +24,7 @@ export default {
computed: {
...mapState({
keys: state => state.Search.keys,
term: state => state.Search.term,
terms: state => state.Search.terms,
filters: state => state.Search.filters
})
},
@ -51,26 +51,44 @@ export default {
// push router
this.$router.push({name:'base', query:{
keys:this.typed,
term:this.autocomplete,
// terms:this.autocomplete.join(','),
terms: JSON.stringify(this.autocomplete),
filters:filters.join(',')
}})
// this.$router.push({
// path:`${this.basePath}/base`,
// query:{keys:this.typed,term:this.autocomplete}
// })
},
onAutoCompleteSelect(event, ui){
event.preventDefault();
console.log('autoCompleteSelect', event, ui)
this.typed = ui.item.label
// we have to wait for typed watch to reset autocomplete before setting it
setTimeout(function(){
console.log('update autocomplete value after settimeout')
this.autocomplete = ui.item.value
if (this.typed !== this.keys || this.autocomplete !== this.term) {
this.submit()
console.log('autoCompleteSelect begining', this.typed, event, ui)
// split typed into tag list
var tag_list = this.typed.split(', ')
console.log('tag_list', tag_list)
// remove the last item as it is the first letters of autocomplete (like ma for marbre)
tag_list.pop()
// add in typed the label
tag_list.push(ui.item.label)
this.typed = tag_list.join(', ') + ', '
// check if item is not already in autocmplete
let add = true
this.autocomplete.forEach( (term) => {
if (term.value == ui.item.value) {
add = false
return
}
}.bind(this), 1)
})
if (add) {
this.autocomplete.push(ui.item)
}
// we have to wait for typed watch to reset autocomplete before setting it
// setTimeout(function(){
// console.log('update autocomplete value after settimeout')
// this.autocomplete.push(ui.item)
// if (this.typed !== this.keys || this.autocomplete !== this.term) {
// this.submit()
// }
// }.bind(this), 1)
console.log('autoCompleteSelect end : this.autocomplete', this.autocomplete)
},
onSelectFiltersChange(index, info){
@ -105,22 +123,34 @@ export default {
},
watch: {
typed(n, o){
console.log('typed changed', o, n)
// is changed also when autocomplete change it ...
this.autocomplete = null
},
keys(n, o){
console.log('keys changed', o, n)
this.typed = n
},
term(n, o){
console.log('autocomplete changed', o, n)
this.autocomplete = n
console.log('watch typed changed o:' + o + ' n:' +n)
// todo remove terms from autocomplete if removed from typed
const r = /,\s?$/
let tag_list = n.replace(r,'').split(', ')
console.log('watch typed tag_list', tag_list)
console.log('watch typed autocomplete before', this.autocomplete)
this.autocomplete.forEach( (term,index,array) => {
console.log("watch typed autocomplete term", term, index, array)
if (tag_list.indexOf(term.label) < 0) {
this.autocomplete.splice(index,1)
}
});
console.log('watch typed autocomplete after', this.autocomplete)
}
// keys(n, o){
// console.log('watch keys changed', o, n)
// this.typed = n
// },
// terms(n, o){
// // if term change from store
// console.log('watch terms changed', o, n)
// this.autocomplete = n
// }
},
created() {
// fill component values with store values in case of direct page loading
this.typed = this.keys
this.autocomplete = this.term
this.autocomplete = this.terms
},
mounted(){
// console.log('SearchForm mounted')