Search query modification (inside SearchBox) event mechanism enabling to update the search

client/css/styles.css

@@ -373,7 +373,7 @@ div.title span.unfolded::before{
 
 
 .search-main-side{
-  transition: opacity 1s;
+  transition: opacity 0.8s;
 }
 
 .search-box{
@@ -585,7 +585,7 @@ div.title span.unfolded::before{
 }
 
 .filter-quantity-box > * {
-  transition: opacity 1s;
+  transition: opacity 0.8s;
   }
 
 .field-title{

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

@@ -194,7 +194,7 @@ class MaterialList {
 
     LoadingPopup.show();
 
-    rootQueryObj = 'elements HAS ALL "Si", "Cl"';
+    //rootQueryObj = 'elements HAS ALL "Si", "Cl"';
     console.log('SENDING: ',rootQueryObj);
     let bulkReq = util.serverReqPOST(util.getSearchURL(), JSON.stringify({ query: rootQueryObj}) ,  bulke => {
       let bulkData = JSON.parse(bulke.target.response);  console.log('GETTING: ', bulkData);

client/src/search-mod/NewSearchMod.js

@@ -131,6 +131,9 @@ class NewSearchMod {
       this.materialNameBox.enableInput();
       this.elementTable.deselectAllElements();
     });
+    this.searchBox.setSearchQueryChangeListener( () => {
+      this.sendQuery();
+    });
 
     this.addButtonsBox= this.element.querySelector('.add-buttons');
     this.addElementButton = this.addButtonsBox.querySelector('.element-add-btn');
@@ -192,7 +195,7 @@ class NewSearchMod {
 
     this.filterPanel.setPropsChangeListener( propsMap => {
       console.log('filterPanel.change Event propsMap: ', propsMap);
-      this.sendQuery(propsMap);
+      this.sendQuery();
     })
 
     this.materialList= new MaterialList();
@@ -311,8 +314,6 @@ class NewSearchMod {
       }
     });
 
-    
-
 
     // gray-out events for the Properties panel and Composition panel 
     
@@ -337,9 +338,11 @@ class NewSearchMod {
 
 
   sendQuery(){
-    console.log('sendQuery');
-    //let searchQuery = this.getOptimadeQueryFromSearchQuery(this.searchQuery, this.queryTypes);
-    //this.materialList.initSearch(searchQuery);
+    
+    //**** The optimade query must be formed from the search box and the properties selected
+    let optimadeQuery = this.searchBox.getOptimadeQuery();// +  this.filterPanel.getValues()
+    console.log('sendQuery optimadeQuery: ', optimadeQuery);
+    this.materialList.initSearch(optimadeQuery);
 
   }
 

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

@@ -85,6 +85,22 @@ class SearchBox{
   }
 
 
+  getOptimadeQuery(){
+
+    if (this.searchQuery.length === 0 || 
+      !isQueryWellFormed(this.searchQuery)) return '';
+    else return 'elements HAS ALL "Si", "Cl"';
+
+    function isQueryWellFormed(searchQuery){
+      const openingParIndex = searchQuery.indexOf('(')
+      const closingParIndex = searchQuery.indexOf(')')
+      return (openingParIndex < 0) || // there are no paratheses or
+        // they are in right position
+        (openingParIndex >= 0 && openingParIndex < closingParIndex+1)      
+    }
+  }
+
+
   setBoolOperator(operator){
     this.currentOperator = operator;
   }
@@ -102,6 +118,7 @@ class SearchBox{
     }
     console.log('this.updateSearchQuery: ', this.searchQuery ,this.queryTypes);
     this.searchQueryBox.innerHTML = html;
+    this.searchQueryChangeListener();
   }
 
 
@@ -188,7 +205,7 @@ class SearchBox{
     return true;
   }
 
-
+  
   setCleanSearchQueryListener(listener){
     this.cleanSearchQueryListener = listener;
   }
@@ -197,6 +214,10 @@ class SearchBox{
   setRemoveElementListener(listener) {
     this.removeElementListener = listener;
   }
+
+  setSearchQueryChangeListener(listener) {
+    this.searchQueryChangeListener = listener;
+  }
   
 }