New multiselect autocomplete textfield (AutocompleteMultiselectTextfield.js)

client/css/styles.css

@@ -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 {

client/src/search-mod/AutocompleteMultiselectTextfield.js

@@ -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,76 +50,52 @@ 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();
-      }
-    });
-
-  
-   
-    
-   
-   // 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();
+    // The dropdown is hiden when the mouse leaves the component area
+    this.element.addEventListener("mouseleave", e => {
+      this._cleanList();
     });
-  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);
     });
-    
+
   }
 
 
   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() {

client/src/search-mod/FilterPanel.view.js

@@ -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) => {