@eeacms/volto-arcgis-block 0.1.325 → 0.1.327

package/CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.327](https://github.com/eea/volto-arcgis-block/compare/0.1.326...0.1.327) - 8 January 2025
+
+### [0.1.326](https://github.com/eea/volto-arcgis-block/compare/0.1.325...0.1.326) - 8 January 2025
+
 ### [0.1.325](https://github.com/eea/volto-arcgis-block/compare/0.1.324...0.1.325) - 20 December 2024
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.325",
+  "version": "0.1.327",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/MenuWidget.jsx

@@ -3957,6 +3957,13 @@ class MenuWidget extends React.Component {
       if (tab.id === 'active_label') {
         this.layersReorder();
       }
+      if (tab.id === 'products_label') {
+        document.querySelector('.search-panel').removeAttribute('style');
+      } else {
+        document
+          .querySelector('.search-panel')
+          .setAttribute('style', 'display: none;');
+      }
 
       if (document.querySelector('.opacity-panel').style.display === 'block') {
         this.closeOpacity();
@@ -4195,6 +4202,7 @@ class MenuWidget extends React.Component {
     let componentFilter;
     let productFilter;
     //let familyFilter;
+    let result = false;
     if (document.querySelector('#menu-searchtext')) {
       searchText = document
         .querySelector('#menu-searchtext')
@@ -4212,19 +4220,52 @@ class MenuWidget extends React.Component {
     for (let index = 0; index < this.compCfg.length; index++) {
       let componentFound = false;
       if (
-        index.toString() === componentFilter ||
+        this.compCfg[index].ComponentPosition.toString() === componentFilter ||
         componentFilter === 'default'
       ) {
-        this.compCfg[index].Products.forEach((product) => {
+        for (let j = 0; j < this.compCfg[index].Products.length; j++) {
+          const product = this.compCfg[index].Products[j];
           let productFound = false;
           if (
             product.ProductId === productFilter ||
             productFilter === 'default'
           ) {
-            product.Datasets.forEach((dataset) => {
-              if (dataset?.DatasetTitle?.toUpperCase().includes(searchText)) {
+            for (let k = 0; k < product.Datasets.length; k++) {
+              const dataset = product.Datasets[k];
+
+              if (
+                searchText === '' &&
+                componentFilter === 'default' &&
+                productFilter === 'default'
+              ) {
                 componentFound = true;
                 productFound = true;
+                result = true;
+                let componentElem = document.querySelector(
+                  '#component_' + index,
+                );
+                componentElem
+                  .querySelector('.ccl-expandable__button')
+                  .setAttribute('aria-expanded', 'false');
+
+                let productElem = document.querySelector(
+                  '[productid="' + product.ProductId + '"]',
+                );
+                productElem
+                  .querySelector('.ccl-expandable__button')
+                  .setAttribute('aria-expanded', 'false');
+                let datasetElem = document.querySelector(
+                  '[datasetid="' + dataset.DatasetId + '"]',
+                );
+                datasetElem.removeAttribute('style');
+                productElem.removeAttribute('style');
+                componentElem.removeAttribute('style');
+              } else if (
+                dataset?.DatasetTitle?.toUpperCase().includes(searchText)
+              ) {
+                componentFound = true;
+                productFound = true;
+                result = true;
                 let componentElem = document.querySelector(
                   '#component_' + index,
                 );
@@ -4250,7 +4291,7 @@ class MenuWidget extends React.Component {
                 );
                 datasetElem.setAttribute('style', 'display: none;');
               }
-            });
+            }
           }
           if (!productFound) {
             let productElem = document.querySelector(
@@ -4258,18 +4299,28 @@ class MenuWidget extends React.Component {
             );
             productElem.setAttribute('style', 'display: none;');
           }
-        });
+        }
+        this.compCfg[index].Products.forEach((product) => {});
       }
       if (!componentFound) {
         let componentElem = document.querySelector('#component_' + index);
         componentElem.setAttribute('style', 'display: none;');
       }
     }
+    if (result) {
+      document.querySelector('.no-filter-result-message').style.display =
+        'none';
+    } else {
+      document.querySelector('.no-filter-result-message').style.display =
+        'block';
+    }
   }
   clearMenuText() {
     if (document.querySelector('#menu-searchtext')) {
       document.querySelector('#menu-searchtext').value = null;
     }
+    this.menuSearch();
+    this.openClearButton();
   }
   openClearButton() {
     if (document.querySelector('#menu-searchtext').value.length > 0) {
@@ -4395,6 +4446,11 @@ class MenuWidget extends React.Component {
                     maxlength="200"
                     placeholder="Search products and datasets"
                     onChange={() => this.openClearButton()}
+                    onKeyDown={(e) => {
+                      if (e.code === 'Enter') {
+                        this.menuSearch();
+                      }
+                    }}
                   />
                   <div class="search-input-actions">
                     <button
@@ -4462,7 +4518,10 @@ class MenuWidget extends React.Component {
                       className="clear-filters"
                       tabIndex="0"
                       role="button"
-                      onClick={() => this.clearFilters()}
+                      onClick={() => {
+                        this.clearFilters();
+                        this.menuSearch();
+                      }}
                       onKeyDown={(e) => {
                         if (
                           !e.altKey &&
@@ -4473,6 +4532,7 @@ class MenuWidget extends React.Component {
                           !e.code.startsWith('F')
                         ) {
                           this.clearFilters();
+                          this.menuSearch();
                         }
                       }}
                     >
@@ -4510,17 +4570,19 @@ class MenuWidget extends React.Component {
                       onBlur={() => {}}
                       onChange={() => {
                         this.loadProductFilters();
+                        this.menuSearch();
                       }}
                     ></select>
                   </span>
                   <span className="menu-filter">
-                    Product
+                    Product groups
                     <select
                       id="select-product"
                       class="esri-select filter-select"
                       onBlur={() => {}}
                       onChange={() => {
                         this.loadFamilyFilters();
+                        this.menuSearch();
                       }}
                     ></select>
                   </span>
@@ -4534,6 +4596,7 @@ class MenuWidget extends React.Component {
                 </div>
               </div>
             </div>
+            <div className="no-filter-result-message">No data available</div>
             <div
               className="panels"
               id="paneles"

package/src/components/MapViewer/css/ArcgisMap.css

@@ -455,6 +455,15 @@ label.ccl-form-radio-label span.nuts-menu-icon {
   color: red;
   font-size: 12px;
 }
+
+.no-filter-result-message {
+  display: none;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+  background-color: white;
+  color: red;
+  font-size: 15px;
+}
 /* Left menu */
 .map-menu {
   position: relative;