Merged.

client/css/styles.css

@@ -577,20 +577,14 @@ div.title span.unfolded::before{
 }
 
 
-/* Structure type autocomplete */
-
-.structure_type-autocomplete-multiselect-textfield input[type="text"]{
-  padding: 6px;
-  border: 1px solid #DDD;
-  width: 200px;
-}
-
-.structure_type-autocomplete-multiselect-dropdown{
+/* Autocomplete multiselect */
+.AutocompleteMultiselectTextfield-dropdown {
   width: 210px; 
   background-color: white;
   box-shadow: 0 1px 2px #E56400;
 }
 
+
 /* To remove
 
 .autocomplete-em {
@@ -618,6 +612,11 @@ div.title span.unfolded::before{
   margin-bottom: 30px;
   /*background-color: white;*/
 }
+.filter-section-box input[type="text"]{
+  width: 200px;
+  padding: 6px;
+  border: 1px solid #DDD;
+}
 
 .filter-section-title{
   color: white; padding: 10px 0;
@@ -842,7 +841,7 @@ div#specialRows{margin: 30px 40px;}
 
 
 
-.MaterialList{ width: 690px; margin: 0 auto 80px;}
+.MaterialList{ /*width: 690px; margin: 0 auto 80px;*/}
 
 /* #paginationWg erased*/
 .MaterialList .formula {
@@ -865,7 +864,7 @@ span.nextButton{ display: inline-block; cursor: pointer;}
 
 .mat-list-container table{
   margin: auto;
-  width: 96%;
+  width: 100%;/*width: 96%;*/
 }
 
 
@@ -881,7 +880,6 @@ span.nextButton{ display: inline-block; cursor: pointer;}
 
 }
 
-navTreeWrapper
 
 .node-selected{
   font-weight: bold;

client/src/search-mod/AutocompleteMultiselectTextfield.js

@@ -167,6 +167,9 @@ class AutocompleteMultiselectTextfield {
     // 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;
+
+    // Emit a value change event
+    this.element.dispatchEvent(new Event("change", {bubbles: true}));
   }
 
 
@@ -183,10 +186,13 @@ class AutocompleteMultiselectTextfield {
       this.selectedValues.add(value);
       this.selectedItemsBox.append(createSelectedItemLabel(value));
     } 
-    //console.log('_addValue: this.selectedValues', this.selectedValues)
 
     if (this.selectListener)  this.selectListener(value);
 
+    // Emit a value change event
+    this.element.dispatchEvent(new Event("change", {bubbles: true}));
+
+
     function createSelectedItemLabel(value){
       const label = document.createElement('span');
       label.className = 'selectedItemLabel';

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

@@ -64,9 +64,16 @@ class FilterPanel {
     structureGroupBox.append(crystalSystemField.element); 
 
 
+/*  Old version
     const spaceGroupField = new SpaceGroupField();
     this.fields.push(spaceGroupField)
     structureGroupBox.append(spaceGroupField.element); 
+    */
+   
+    const spaceGroupField = new TextField('Space group number', 'space_group_number');
+    this.fields.push(spaceGroupField)
+    structureGroupBox.append(spaceGroupField.element); 
+
 
     const structureTypeField = new AutocompleteField('Structure type', 'structure_type');
     this.fields.push(structureTypeField)
@@ -92,18 +99,25 @@ class FilterPanel {
     this.fields.push(boolValueFields)
     propertiesGroupBox.append(boolValueFields.element);  
 
+    // Method 
+    let methodGroupBox = this.createPropsGroupBox('Method')
+    this.element.append(methodGroupBox);
+    const basisSetField = new AutocompleteField('Basis set', 'basis_set');
+    this.fields.push(basisSetField)
+    methodGroupBox.append(basisSetField.element);
+    const functionalTypeField = new AutocompleteField('Functional type', 'functional_type');
+    this.fields.push(functionalTypeField)
+    methodGroupBox.append(functionalTypeField.element);
+    const codeField = new AutocompleteField('Code', 'code_name');
+    this.fields.push(codeField)
+    methodGroupBox.append(codeField.element);
+
     InfoSys.addToInfoSystem(this.element);
 
     // The value change event in fields is handled at container level (event delegation pattern) 
     this.element.addEventListener('change', e => {
-      
-      if (e.target.id !== 'space-group-dropdown-list') {
-        // console.log('change event', e);
-        if (this.addPropsChangeListener) this.addPropsChangeListener(this.getValues())
-      }
-
-      
-    })
+      if (this.addPropsChangeListener) this.addPropsChangeListener(this.getValues())
+    });
 
 /*  code for the MaxMinSlider component testing
     this.testSlider = this.element.querySelector('.test-slider');
@@ -230,8 +244,35 @@ class CheckboxesField{
 }
 
 
-/* Temporarily the select field is disabled 
-   so that the only option to look for is "by number" */
+
+class TextField{
+
+  constructor(name, id){
+    this.fieldId = id;
+    this.element = document.createElement('div');
+    this.element.className = 'filter-quantity-box';
+    this.element.innerHTML = `
+      <div class="field-title"> <span info-sys-data="${id}">${name}</span></div>
+      <input type="text" class="${id}-textfield" style="">
+    `;
+    this.input = this.element.querySelector('input');
+  }
+
+
+  getValues(){
+    let value = this.input.value;
+    return ( value.trim() === '' ? null : { fieldId: this.fieldId, value: [value] } );
+  }
+
+
+  highlightSelected(bool){
+    if (this.getValues() === null)
+      this.input.style.opacity = (bool ? NOT_SELECTED_OPACITY : '');
+  }
+}
+
+
+/* Not being used temporarily -> simple textfield instead 
 class SpaceGroupField{
 
   constructor(){
@@ -267,7 +308,7 @@ class SpaceGroupField{
     }
     
   }
-}
+}*/
 
 
 class AutocompleteField{
@@ -303,6 +344,7 @@ class AutocompleteField{
 }
 
 
+/* Not being used 
 class MassDensityField{
 
   constructor(){
@@ -337,7 +379,7 @@ class MassDensityField{
     if (this.getValues() === null) 
       this.inputs[0].parentElement.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
   }
-}
+} */
 
 // EXPORTS
 module.exports = FilterPanel;

client/src/search-mod/NewSearchMod.js

@@ -199,8 +199,9 @@ class NewSearchMod {
       this.addMatNameButton.disabled = true; // Not always necessary but it simplifies the code
       this.addFormulaButton.disabled = true;
     });
-    this.elementTable.setDeselectListener(e => this.searchBox.removeElementORFormulaInSearchQuery(e));
-
+    this.elementTable.setDeselectListener(e => {
+      this.searchBox.removeElementORFormulaInSearchQuery(e)
+    });
 
     this.formulaBox = new FormulaBox();
     this.formulaBox.setAddFormulaListener(formula => {
@@ -213,7 +214,6 @@ class NewSearchMod {
       }
     });
 
-
     this.materialNameBox = new MaterialNameBox();
     this.materialNameBox.setAddMaterialNameListener( name => {
       if (name.trim() !== ''){
@@ -224,14 +224,11 @@ class NewSearchMod {
         this.materialNameBox.disableInput();
       }
     });
-    // add autocomplete functionality to the textfield
-//    this.materialNameBox.setAutocomplete();
 
     this.filterPanel = new FilterPanel();
     this.filterSidePanel.appendChild(this.filterPanel.element);
 
     this.filterPanel.setPropsChangeListener( propsMap => {
-      //console.log('filterPanel.change Event propsMap: ', propsMap);
       REACTIVE_SEARCH ? this.sendQuery() : this.materialList.invalidateSearch();
     })
 
@@ -331,6 +328,10 @@ class NewSearchMod {
 
           this.currentTab = selectingTab;
 
+          // Disable/enable bool operation buttons
+          this.element.querySelectorAll('.bool-buttons button').forEach( button => {
+            button.disabled = (selectingTab === 'name');
+          });
 /*
           if (this.userGuidance){
             if (selectingTab === 'element'){

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

@@ -307,8 +307,10 @@ class SearchBox{
 
   addParentheses(isOpen){
 
-    if ( this.searchQuery.length > 0 && isOpen)
-      this.addItemInSearchQuery(this.currentOperator, 'S');
+    if ( isOpen && this.searchQuery.length > 0 
+      && this.searchQuery[this.searchQuery.length-1] !== 'NOT'){
+        this.addItemInSearchQuery(this.currentOperator, 'S');
+    }
     this.addItemInSearchQuery( (isOpen ? '(' : ')'), 'P');
     this.updateSearchQuery();
   }
@@ -316,8 +318,10 @@ class SearchBox{
 
   addNOT(){
 
-    if ( this.searchQuery.length > 0)
+    if ( this.searchQuery.length > 0 
+         && this.searchQuery[this.searchQuery.length-1] !== '('){
       this.addItemInSearchQuery(this.currentOperator, 'S');
+    }
     this.addItemInSearchQuery( 'NOT', 'S');
     this.updateSearchQuery();
   }