Property modification event mechanism enabling to update the search

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

@@ -91,6 +91,17 @@ class FilterPanel {
 
     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);
+        this.addPropsChangeListener(this.getValues())
+      }
+
+      
+    })
+
 /*  code for the MaxMinSlider component testing
     this.testSlider = this.element.querySelector('.test-slider');
     console.log("TAB: ",this.testSlider);
@@ -129,8 +140,8 @@ class FilterPanel {
   }
 
 
-  setAddPropertiesListener(listener) {
-    this.addPropertiesListener= listener;
+  setPropsChangeListener(listener) {
+    this.addPropsChangeListener = listener;
   }
 
 

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

@@ -194,7 +194,7 @@ class MaterialList {
 
     LoadingPopup.show();
 
-    rootQueryObj = 'elements HAS ONLY "Si" OR elements HAS ONLY "Ag"';
+    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

@@ -206,6 +206,11 @@ class NewSearchMod {
     this.filterPanel = new FilterPanel();
     this.filterSidePanel.appendChild(this.filterPanel.element);
 
+    this.filterPanel.setPropsChangeListener( propsMap => {
+      console.log('filterPanel.change Event propsMap: ', propsMap);
+      this.sendQuery(propsMap);
+    })
+
     this.materialList= new MaterialList();
     this.resultsPage = this.element.querySelector('.results-panel');
     this.materialList.attachAndSetEvents(this.resultsPage);
@@ -224,6 +229,8 @@ class NewSearchMod {
     this.mainButton.addEventListener( "click", (e) => {
       //console.log("this.labels: "+JSON.stringify(this.labels));
 
+
+      /*
       if (this.searchQuery.lenght === 0){
         util.showUserMsg('No query');
       }else{
@@ -243,7 +250,7 @@ class NewSearchMod {
 
           this.materialList.initSearch(searchExpressionQuery);//this._addFiltersInSearchQuery( this.filterPanel.getValues(), searchExpressionQuery));
 
-          /*
+          
           if (this.element.querySelector('#allow-other-elements').checked)
             searchExpressionQuery = this._getESQueryFromSearchQuery_otherElements(
               this.searchQuery, this.queryTypes);
@@ -258,10 +265,10 @@ class NewSearchMod {
 
           //TODO: why not identifying by ID???
           this.element.querySelector('.add-box').style.display = 'none';
-          */
+          
         }
 
-      }
+      }*/
 
     });
 
@@ -363,6 +370,14 @@ class NewSearchMod {
   }
 
 
+  sendQuery(){
+    console.log('sendQuery');
+    let searchQuery = this.getOptimadeQueryFromSearchQuery(this.searchQuery, this.queryTypes);
+    this.materialList.initSearch(searchQuery);
+
+  }
+
+
   getOptimadeQueryFromSearchQuery(searchQuery, queryTypes){
 
     let optimadeQuery = '';