Commit 9e536936 authored by Iker Hurtado's avatar Iker Hurtado
Browse files

New multiselect autocomplete textfield (AutocompleteMultiselectTextfield.js)

parent 77df0cbd
Pipeline #93521 skipped with stage
...@@ -525,10 +525,6 @@ div.title span.unfolded::before{ ...@@ -525,10 +525,6 @@ div.title span.unfolded::before{
.material-name-autocomplete-textfield, .material-name-autocomplete-dropdown{
width: 450px;
}
/* Autocomplete components */ /* Autocomplete components */
...@@ -541,13 +537,11 @@ div.title span.unfolded::before{ ...@@ -541,13 +537,11 @@ div.title span.unfolded::before{
font-size: 0.9em; font-size: 0.9em;
position: absolute; position: absolute;
z-index: 99; z-index: 99;
box-shadow: 1px 1px 4px gray;
} }
.AutocompleteTextField-dropdown > div, .AutocompleteMultiselectTextfield-dropdown > div { .AutocompleteTextField-dropdown > div, .AutocompleteMultiselectTextfield-dropdown > div {
padding: 2px 10px 2px 10px; padding: 2px 10px 2px 10px;
cursor: pointer; cursor: pointer;
background-color: #DDD;
border: 1px solid transparent; border: 1px solid transparent;
} }
...@@ -555,11 +549,6 @@ div.title span.unfolded::before{ ...@@ -555,11 +549,6 @@ div.title span.unfolded::before{
border-color: #E56400 !important; border-color: #E56400 !important;
} }
/*
.AutocompleteMultiselectTextfield{
}
*/
.AutocompleteMultiselectTextfield-selected-box{ .AutocompleteMultiselectTextfield-selected-box{
padding: 3px; padding: 3px;
...@@ -567,20 +556,41 @@ div.title span.unfolded::before{ ...@@ -567,20 +556,41 @@ div.title span.unfolded::before{
.selectedItemLabel{ .selectedItemLabel{
display: inline-block; display: inline-block;
/*border: 1px solid gray;*/ border-left: 1px solid #E56400;border-right: 1px solid #E56400;
box-shadow: 1px 1px 2px #BBB; color: #E56400;
border-radius: 4px; /*box-shadow: 1px 1px 2px #BBB;*/
padding: 1px 5px; border-radius: 3px;
padding: 1px 4px;
margin-right: 8px; margin-top: 3px;
cursor: pointer; cursor: pointer;
} }
/* Material name autocomplete */
.material-name-autocomplete-textfield{
width: 450px;
}
.material-name-autocomplete-dropdown{
background-color: #DDD;
box-shadow: 1px 1px 4px gray;
}
/* Structure type autocomplete */
.structure_type-autocomplete-multiselect-textfield input[type="text"]{ .structure_type-autocomplete-multiselect-textfield input[type="text"]{
padding: 6px; padding: 6px;
border: 1px solid #DDD; border: 1px solid #DDD;
width: 200px; width: 200px;
} }
.structure_type-autocomplete-multiselect-dropdown{
width: 210px;
background-color: white;
box-shadow: 0 1px 2px #E56400;
}
/* To remove /* To remove
.autocomplete-em { .autocomplete-em {
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
class AutocompleteMultiselectTextfield { class AutocompleteMultiselectTextfield {
constructor(id = "", placeholder = '', allowEmptyInput = false) { constructor(id = "", placeholder = '', allowEmptyInput = true) {
this.id = id; this.id = id;
this.element = document.createElement('div'); this.element = document.createElement('div');
//this.element.style.display = 'inline'; //this.element.style.display = 'inline';
...@@ -50,76 +50,52 @@ class AutocompleteMultiselectTextfield { ...@@ -50,76 +50,52 @@ class AutocompleteMultiselectTextfield {
this.allowEmptyInput = allowEmptyInput; this.allowEmptyInput = allowEmptyInput;
// event management // event management
//
// react to clicking into the textfield // When clicking on the textfield the dropdown shows up
this.input.addEventListener("click", (e) => { this.input.addEventListener("click", (e) => {
this._processInput(); this._processInput();
e.stopPropagation(); e.stopPropagation();
}); });
// the dropdown list is updated as the user writes on the textfield
this.input.addEventListener("input", (e) => { this.input.addEventListener("input", (e) => {
this._processInput(); this._processInput();
}); });
/* // The dropdown is hiden when the mouse leaves the component area
// react to keyboard navigation this.element.addEventListener("mouseleave", e => {
this.input.addEventListener("keydown", (e) => { this._cleanList();
if (e.keyCode == 40) { // arrow DOWN
if (this._getActiveListItem())
this._setActiveListItem(this._getActiveListItem().nextSibling);
} else if (e.keyCode == 38) { // arrow UP
if (this._getActiveListItem())
this._setActiveListItem(this._getActiveListItem().previousSibling);
}
});
// react to enter key
this.input.addEventListener("keypress", e => {
if (e.keyCode == 13) { // ENTER
// simulate a click on the "active" item
this._clickOnActiveItem();//_clickActive();
}
});
// close lists when someone clicks in the document
document.addEventListener("click", e => {
console.log('close lists when someone clicks in the document')
this._cleanList();// this._closeAllLists();
}); });
It doesn't worki properly because it closes the dropdown when you click on it
*/
// Handle the item removal on the selected items box
this.selectedItemsBox.addEventListener("click", e => { this.selectedItemsBox.addEventListener("click", e => {
let itemLabel = event.target.closest('span'); // (1) let itemLabel = event.target.closest('span');
this._toggleValue(itemLabel.dataset.value);//.textContent); this._removeSelectedValue(itemLabel.dataset.value);
}); });
// Handle the item selection on the dropdown
this.listContainer.addEventListener("click", e => { this.listContainer.addEventListener("click", e => {
let listItem = event.target.closest('div'); // (1) let listItem = event.target.closest('div');
this._toggleItem(listItem);//.textContent); this._toggleItem(listItem);
}); });
this.listContainer.addEventListener("mouseover", e => { this.listContainer.addEventListener("mouseover", e => {
let listItem = event.target.closest('div'); // (1) let listItem = event.target.closest('div');
this._setActiveListItem(listItem); this._setActiveListItem(listItem);
}); });
} }
getValues(){ getValues(){
return [];//this.input.value; return Array.from(this.selectedValues);
} }
resetValue(){ /*resetValue(){
this.input.value = ''; this.input.value = '';
} }*/
disable(bool){ disable(bool){
...@@ -183,9 +159,13 @@ class AutocompleteMultiselectTextfield { ...@@ -183,9 +159,13 @@ class AutocompleteMultiselectTextfield {
} }
_toggleValue(value) { _removeSelectedValue(value) {
const listItem = this.listContainer.querySelector('input[data-value="'+value+'"]').parentElement;
this._toggleItem(listItem); this.selectedValues.delete(value);
this.selectedItemsBox.querySelector('span[data-value="'+value+'"]').remove();
// check if the dropdown is unfolded and uncheck the checkbox if so
const itemCheckbox = this.listContainer.querySelector('input[data-value="'+value+'"]');
if (itemCheckbox) itemCheckbox.checked = false;
} }
...@@ -204,7 +184,7 @@ class AutocompleteMultiselectTextfield { ...@@ -204,7 +184,7 @@ class AutocompleteMultiselectTextfield {
} }
//console.log('_addValue: this.selectedValues', this.selectedValues) //console.log('_addValue: this.selectedValues', this.selectedValues)
if (this.selectListener) this.selectListener(); if (this.selectListener) this.selectListener(value);
function createSelectedItemLabel(value){ function createSelectedItemLabel(value){
const label = document.createElement('span'); const label = document.createElement('span');
...@@ -216,22 +196,22 @@ class AutocompleteMultiselectTextfield { ...@@ -216,22 +196,22 @@ class AutocompleteMultiselectTextfield {
} }
_getActiveListItem(){
return this.listContainer.querySelector('.autocomplete-active');
}
_setActiveListItem(element){ _setActiveListItem(element){
const currentActiveItem = this.listContainer.querySelector('.autocomplete-active'); const currentActiveItem = this.listContainer.querySelector('.autocomplete-active');
if (currentActiveItem) currentActiveItem.classList.remove('autocomplete-active'); if (currentActiveItem) currentActiveItem.classList.remove('autocomplete-active');
element.classList.add('autocomplete-active'); element.classList.add('autocomplete-active');
} }
/* Not being used for now
_getActiveListItem(){
return this.listContainer.querySelector('.autocomplete-active');
}
_clickOnActiveItem() { _clickOnActiveItem() {
const activeItem = this.listContainer.querySelector('.autocomplete-active'); const activeItem = this.listContainer.querySelector('.autocomplete-active');
if (activeItem) activeItem.click(); if (activeItem) activeItem.click();
} }*/
_cleanList() { _cleanList() {
......
...@@ -130,6 +130,7 @@ class FilterPanel { ...@@ -130,6 +130,7 @@ class FilterPanel {
this.fields.forEach( field => { this.fields.forEach( field => {
const values = field.getValues(); const values = field.getValues();
console.log('FilterPanel field:',field, values);
if (Array.isArray(values)){ if (Array.isArray(values)){
values.forEach( value => filterMap.set(value.fieldId, value.value)) values.forEach( value => filterMap.set(value.fieldId, value.value))
}else{ }else{
...@@ -282,7 +283,7 @@ class AutocompleteField{ ...@@ -282,7 +283,7 @@ class AutocompleteField{
</div>`; </div>`;
this.autocomplete = new AutocompleteMultiselectTextfield(id, 'Search and select options', true); this.autocomplete = new AutocompleteMultiselectTextfield(id, 'Search and select options');
this.element.append(this.autocomplete.element) this.element.append(this.autocomplete.element)
let r1 = util.serverReq(util.getSuggestionURL(this.fieldId), (e) => { let r1 = util.serverReq(util.getSuggestionURL(this.fieldId), (e) => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment