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

SearchformVue e.selected bug fix (slim-select filters)

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2025-04-28 17:38:15 +02:00
parent 7ec7d99554
commit 07ae40d703
7 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,14 +31,14 @@ export default {
},
methods: {
submit() {
console.log("search submited", this.typed, this.autocomplete, this.filters, this.slimFilters)
console.log("slim search submited", this.typed, this.autocomplete, this.filters, this.slimFilters)
// 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)
// cleaning slimfilters
let filters = []
this.slimFilters.forEach((filter, index) => {
console.log('onsubmit foreach filters', filter)
console.log('onsubmit foreach slimFilters', filter)
if(filter){
filters.push(filter)
}
@ -93,8 +93,10 @@ export default {
},
onSelectFiltersChange(index, info){
console.log('onSelectFiltersChange', index, info, this.slimFilters, this.filters)
console.log('slim onSelectFiltersChange', index, info, this.slimFilters, this.filters)
this.slimFilters[index] = info.value
console.log(this.slimFilters);
},
onClickFilters(e){
console.log('onClickFilters legend', e)
@ -175,8 +177,12 @@ export default {
// customize the select filters
// http://slimselectjs.com/options
const selects = this.$el.querySelectorAll('select')
console.log('slim selects', selects);
let slim;
selects.forEach((selectElement, index) => {
console.log('slim 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);
@ -185,20 +191,24 @@ export default {
placeholder_option.setAttribute("data-placeholder", true)
placeholder_option.innerHTML = ''
slim = new SlimSelect({
events:{
afterChange: (newval) => {
console.log('slim slimselect onchange', index, newval, this)
this.onSelectFiltersChange(index, newval[0])
}
},
select: selectElement,
placeholder: placeholder,
// allowDeselect: true
allowDeselectOption: true,
allowDeselect: true,
showSearch: false,
closeOnSelect: true,
onChange: (info) => {
this.onSelectFiltersChange(index, info)
}
closeOnSelect: true
})
console.log('slimselect selected', slim.selected(), index)
this.slimFilters[index] = slim.selected()
console.log('slim', slim);
// console.log('slimselect selected', slim, slim.selected(), index)
this.slimFilters[index] = slim.getSelected()[0];
})
console.log('slimSelect after init', this.slimFilters)
console.log('slimSelect slimFilters after init', this.slimFilters)
},
render(h) {
// console.log('searchForm render')