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{
.material-name-autocomplete-textfield, .material-name-autocomplete-dropdown{
width: 450px;
}
/* Autocomplete components */
......@@ -541,13 +537,11 @@ div.title span.unfolded::before{
font-size: 0.9em;
position: absolute;
z-index: 99;
box-shadow: 1px 1px 4px gray;
}
.AutocompleteTextField-dropdown > div, .AutocompleteMultiselectTextfield-dropdown > div {
padding: 2px 10px 2px 10px;
cursor: pointer;
background-color: #DDD;
border: 1px solid transparent;
}
......@@ -555,11 +549,6 @@ div.title span.unfolded::before{
border-color: #E56400 !important;
}
/*
.AutocompleteMultiselectTextfield{
}
*/
.AutocompleteMultiselectTextfield-selected-box{
padding: 3px;
......@@ -567,20 +556,41 @@ div.title span.unfolded::before{
.selectedItemLabel{
display: inline-block;
/*border: 1px solid gray;*/
box-shadow: 1px 1px 2px #BBB;
border-radius: 4px;
padding: 1px 5px;
border-left: 1px solid #E56400;border-right: 1px solid #E56400;
color: #E56400;
/*box-shadow: 1px 1px 2px #BBB;*/
border-radius: 3px;
padding: 1px 4px;
margin-right: 8px; margin-top: 3px;
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"]{
padding: 6px;
border: 1px solid #DDD;
width: 200px;
}
.structure_type-autocomplete-multiselect-dropdown{
width: 210px;
background-color: white;
box-shadow: 0 1px 2px #E56400;
}
/* To remove
.autocomplete-em {
......
......@@ -26,7 +26,7 @@
class AutocompleteMultiselectTextfield {
constructor(id = "", placeholder = '', allowEmptyInput = false) {
constructor(id = "", placeholder = '', allowEmptyInput = true) {
this.id = id;
this.element = document.createElement('div');
//this.element.style.display = 'inline';
......@@ -50,62 +50,38 @@ class AutocompleteMultiselectTextfield {
this.allowEmptyInput = allowEmptyInput;
// event management
//
// react to clicking into the textfield
// When clicking on the textfield the dropdown shows up
this.input.addEventListener("click", (e) => {
this._processInput();
e.stopPropagation();
});
// the dropdown list is updated as the user writes on the textfield
this.input.addEventListener("input", (e) => {
this._processInput();
});
/*
// react to keyboard navigation
this.input.addEventListener("keydown", (e) => {
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();
}
// The dropdown is hiden when the mouse leaves the component area
this.element.addEventListener("mouseleave", e => {
this._cleanList();
});
// 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 => {
let itemLabel = event.target.closest('span'); // (1)
this._toggleValue(itemLabel.dataset.value);//.textContent);
let itemLabel = event.target.closest('span');
this._removeSelectedValue(itemLabel.dataset.value);
});
// Handle the item selection on the dropdown
this.listContainer.addEventListener("click", e => {
let listItem = event.target.closest('div'); // (1)
this._toggleItem(listItem);//.textContent);
let listItem = event.target.closest('div');
this._toggleItem(listItem);
});
this.listContainer.addEventListener("mouseover", e => {
let listItem = event.target.closest('div'); // (1)
let listItem = event.target.closest('div');
this._setActiveListItem(listItem);
});
......@@ -113,13 +89,13 @@ class AutocompleteMultiselectTextfield {
getValues(){
return [];//this.input.value;
return Array.from(this.selectedValues);
}
resetValue(){
/*resetValue(){
this.input.value = '';
}
}*/
disable(bool){
......@@ -183,9 +159,13 @@ class AutocompleteMultiselectTextfield {
}
_toggleValue(value) {
const listItem = this.listContainer.querySelector('input[data-value="'+value+'"]').parentElement;
this._toggleItem(listItem);
_removeSelectedValue(value) {
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 {
}
//console.log('_addValue: this.selectedValues', this.selectedValues)
if (this.selectListener) this.selectListener();
if (this.selectListener) this.selectListener(value);
function createSelectedItemLabel(value){
const label = document.createElement('span');
......@@ -216,22 +196,22 @@ class AutocompleteMultiselectTextfield {
}
_getActiveListItem(){
return this.listContainer.querySelector('.autocomplete-active');
}
_setActiveListItem(element){
const currentActiveItem = this.listContainer.querySelector('.autocomplete-active');
if (currentActiveItem) currentActiveItem.classList.remove('autocomplete-active');
element.classList.add('autocomplete-active');
}
/* Not being used for now
_getActiveListItem(){
return this.listContainer.querySelector('.autocomplete-active');
}
_clickOnActiveItem() {
const activeItem = this.listContainer.querySelector('.autocomplete-active');
if (activeItem) activeItem.click();
}
}*/
_cleanList() {
......
......@@ -130,6 +130,7 @@ class FilterPanel {
this.fields.forEach( field => {
const values = field.getValues();
console.log('FilterPanel field:',field, values);
if (Array.isArray(values)){
values.forEach( value => filterMap.set(value.fieldId, value.value))
}else{
......@@ -282,7 +283,7 @@ class AutocompleteField{
</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)
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