Adapt the search for material name to the new API and add 'Allow other...

Adapt the search for material name to the new API and add 'Allow other elements' checkbox search event

client/src/search-mod/NewSearchMod.js

@@ -135,6 +135,11 @@ class NewSearchMod {
       this.sendQuery();
     });
 
+    this.allowOtherElementsCheckbox = this.element.querySelector('#allow-other-elements');
+    this.allowOtherElementsCheckbox.addEventListener( 'change', e => {
+      this.sendQuery();
+    });
+
     this.addButtonsBox= this.element.querySelector('.add-buttons');
     this.addElementButton = this.addButtonsBox.querySelector('.element-add-btn');
     this.addFormulaButton = this.addButtonsBox.querySelector('.formula-add-btn');
@@ -184,7 +189,7 @@ class NewSearchMod {
     this.materialNameBox = new MaterialNameBox();
     this.materialNameBox.setAddMaterialNameListener( name => {
       if (name.trim() !== ''){
-        this.addTag(name, 'MN');
+        this.searchBox.addTag(name, 'MN');// this.addTag(name, 'MN');
         this.addElementButton.disabled = true;
         this.addFormulaButton.disabled = true;
         //TODO: are the following two lines needed, when the related buttons are already diasbled??
@@ -345,8 +350,7 @@ class NewSearchMod {
   sendQuery(){
     
     //**** The optimade query must be formed from the search box and the properties selected
-    const allowOtherElements = this.element.querySelector('#allow-other-elements').checked;
-    let optimadeQuery = this.searchBox.getOptimadeQuery(allowOtherElements);// 
+    let optimadeQuery = this.searchBox.getOptimadeQuery(this.allowOtherElementsCheckbox.checked);
     let optimadeQueryForProps = getOptimadeQueryFromProps(this.filterPanel.getValues());
     if (optimadeQuery !== ''){ // if there are items in the serach box
       optimadeQuery += (optimadeQueryForProps.length > 0 ? ' AND '+optimadeQueryForProps : '');

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

@@ -89,9 +89,11 @@ class SearchBox{
 
     if (this.searchQuery.length === 0 || 
       !isQueryWellFormed(this.searchQuery)) return '';
-    //else if () // MATERIAL CASE
-    else{
 
+    else if (this.searchQuery.length === 1 && this.queryTypes[0] === 'MN'){ // material case
+      return  `material_name="${this.searchQuery[0]}"`;
+
+    }else{ // elements and formulas
       let optimadeQuery = '';
 
       // Get the subqueries: parts of the query separated by ORs