@eeacms/volto-arcgis-block 0.1.343 → 0.1.344

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.344](https://github.com/eea/volto-arcgis-block/compare/0.1.343...0.1.344) - 27 March 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-282463 (feat): Multiselection added to toc menu [Urkorue - [`e09738d`](https://github.com/eea/volto-arcgis-block/commit/e09738d883a19157dd55ecfa0852e3aee9e29d04)]
+- Merge pull request #914 from eea/CLMS-282463-Filters-multiselection [Unai Bolivar - [`f008130`](https://github.com/eea/volto-arcgis-block/commit/f008130605be4161309d9d6c40891fe083178d02)]
 ### [0.1.343](https://github.com/eea/volto-arcgis-block/compare/0.1.342...0.1.343) - 20 March 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/MenuWidget.jsx

@@ -4558,83 +4558,132 @@ class MenuWidget extends React.Component {
   };
 
   loadComponentFilters() {
-    var selectedComponent = document.getElementById('select-component');
-    selectedComponent.options.add(
-      new Option('Select a component', 'default', false, false),
-    );
-    selectedComponent.options[0].disabled = true;
-    var selectedProduct = document.getElementById('select-product');
-    selectedProduct.options.add(
-      new Option('Select a product', 'default', false, false),
-    );
-    selectedProduct.options[0].disabled = true;
-    document
-      .querySelector('.menu-family-filter')
-      .setAttribute('style', 'display: none;');
+    var checkList = document.getElementById('select-component');
+    checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
+      if (checkList.classList.contains('visible'))
+        checkList.classList.remove('visible');
+      else checkList.classList.add('visible');
+    };
+    let list = document.querySelector('.component-items');
     this.compCfg.forEach((element) => {
-      selectedComponent.options.add(
-        new Option(
-          element.ComponentTitle,
-          element.ComponentPosition,
-          element.ComponentPosition,
-        ),
-      );
+      let inputNode = document.createElement('input');
+      let lavelNode = document.createElement('lavel');
+      inputNode.setAttribute('type', 'checkbox');
+      inputNode.classList.add('component_item');
+      inputNode.setAttribute('value', element.ComponentPosition);
+      lavelNode.innerText = element.ComponentTitle;
+      let listNode = document.createElement('li');
+      listNode.appendChild(inputNode);
+      listNode.appendChild(lavelNode);
+      list.appendChild(listNode);
+      inputNode.onclick = () => {
+        this.loadProductFilters();
+        this.menuSearch();
+      };
     });
   }
   loadProductFilters() {
-    var selectedComponent = document.getElementById('select-component');
-    var selectedProduct = document.getElementById('select-product');
+    var checkList = document.getElementById('select-product');
+    checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
+      if (checkList.classList.contains('visible'))
+        checkList.classList.remove('visible');
+      else checkList.classList.add('visible');
+    };
+    let list = document.querySelector('.product-items');
+    while (list.firstChild) {
+      list.removeChild(list.lastChild);
+    }
+
+    let componentList = document.getElementsByClassName('component_item');
+    let componentFilter = [];
+    for (let m = 0; m < componentList.length; m++) {
+      if (componentList[m].checked) {
+        componentFilter.push(componentList[m].value);
+      }
+    }
     if (
       document.querySelector('.clear-filters') &&
-      selectedComponent.value !== 'default'
+      componentFilter.length !== 0
     ) {
       document
         .querySelector('.clear-filters')
         .setAttribute('style', 'display: block;');
     }
-    this.removeOptions(selectedProduct);
-    selectedProduct.options.add(
-      new Option('Select a product', 'default', false, false),
-    );
-    selectedProduct.options[0].disabled = true;
-    this.compCfg.forEach((component) => {
-      if (component.ComponentPosition.toString() === selectedComponent.value) {
-        component.Products.forEach((product) => {
-          selectedProduct.options.add(
-            new Option(
-              product.ProductTitle,
-              product.ProductId,
-              product.ProductId,
-            ),
-          );
-        });
-      }
+    componentFilter.forEach((component) => {
+      this.compCfg[component].Products.forEach((product) => {
+        let inputNode = document.createElement('input');
+        let lavelNode = document.createElement('lavel');
+        inputNode.setAttribute('type', 'checkbox');
+        inputNode.classList.add('product_item');
+        inputNode.setAttribute('value', product.ProductId);
+        lavelNode.innerText = product.ProductTitle;
+        let listNode = document.createElement('li');
+        listNode.appendChild(inputNode);
+        listNode.appendChild(lavelNode);
+        list.appendChild(listNode);
+        inputNode.onclick = () => {
+          this.loadFamilyFilters();
+          this.menuSearch();
+        };
+      });
     });
-    let familyFilter = document.querySelector('.menu-family-filter');
-    if (familyFilter) {
-      familyFilter.setAttribute('style', 'display: none;');
-    }
   }
   async loadFamilyFilters() {
-    // var selectedFamily = document.getElementById('select-family');
-    // var selectedProduct = document.getElementById('select-product');
-    // this.removeOptions(selectedFamily);
-    //let tax = await this.getTaxonomy('collective.taxonomy.family');
-    //let hasFamily = false;
-    // selectedFamily.options.add(
-    //   new Option('Select a family', 'default', false, false),
-    // );
-    //let text = selectedProduct.selectedOptions[0].text
-    // tax.tree.forEach((element) => {
-    //   if (element.title === selectedProduct.selectedOptions[0].text) {
-    //     //hasFamily = true;
-    //     element.children.forEach((child) => {
-    //       selectedFamily.options.add(
-    //         new Option(child.title, child.key, child.key),
-    //       );
-    //     });
+    // let tax = await this.getTaxonomy('collective.taxonomy.family');
+    // var checkList = document.getElementById('select-family');
+    // checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
+    //   if (checkList.classList.contains('visible'))
+    //     checkList.classList.remove('visible');
+    //   else
+    //     checkList.classList.add('visible');
+    // }
+    // let list = document.querySelector('.family-items');
+    // while (list.firstChild) {
+    //   list.removeChild(list.lastChild);
+    // }
+    // let componentList = document.getElementsByClassName('component_item');
+    // let componentFilter = [];
+    // for (let m = 0; m < componentList.length; m++) {
+    //   if (componentList[m].checked) {
+    //     componentFilter.push(componentList[m].value)
     //   }
+    // }
+    // componentFilter.forEach(component => {
+    //   this.compCfg[component].Products.forEach(product => {
+    //     let inputNode = document.createElement('input');
+    //     let lavelNode = document.createElement('lavel');
+    //     inputNode.setAttribute('type','checkbox');
+    //     inputNode.classList.add('product_item')
+    //     inputNode.setAttribute('value', product.ProductId)
+    //     lavelNode.innerText = product.ProductTitle;
+    //     let listNode = document.createElement('li');
+    //     listNode.appendChild(inputNode);
+    //     listNode.appendChild(lavelNode);
+    //     list.appendChild(listNode)
+    //     inputNode.onclick= () => {
+    //       this.loadFamilyFilters();
+    //       this.menuSearch();
+    //     };
+    //   })
     // });
+    // // var selectedFamily = document.getElementById('select-family');
+    // // var selectedProduct = document.getElementById('select-product');
+    // // this.removeOptions(selectedFamily);
+    // let hasFamily = false;
+    // // selectedFamily.options.add(
+    // //   new Option('Select a family', 'default', false, false),
+    // // );
+    // // let text = selectedProduct.selectedOptions[0].text
+    // // tax.tree.forEach((element) => {
+    // //   if (element.title === selectedProduct.selectedOptions[0].text) {
+    // //     //hasFamily = true;
+    // //     element.children.forEach((child) => {
+    // //       selectedFamily.options.add(
+    // //         new Option(child.title, child.key, child.key),
+    // //       );
+    // //     });
+    // //   }
+    // // });
     // let familyFilter = document.querySelector('.menu-family-filter');
     // if (familyFilter) {
     //   if (!hasFamily) {
@@ -4646,8 +4695,8 @@ class MenuWidget extends React.Component {
   }
   async menuSearch() {
     let searchText;
-    let componentFilter;
-    let productFilter;
+    let componentFilter = [];
+    let productFilter = [];
     //let familyFilter;
     let result = false;
     if (document.querySelector('#menu-searchtext')) {
@@ -4656,10 +4705,20 @@ class MenuWidget extends React.Component {
         .value?.toUpperCase();
     }
     if (document.getElementById('select-component')) {
-      componentFilter = document.getElementById('select-component').value;
+      let componentList = document.getElementsByClassName('component_item');
+      for (let m = 0; m < componentList.length; m++) {
+        if (componentList[m].checked) {
+          componentFilter.push(componentList[m].value);
+        }
+      }
     }
     if (document.getElementById('select-product')) {
-      productFilter = document.getElementById('select-product').value;
+      let productList = document.getElementsByClassName('product_item');
+      for (let n = 0; n < productList.length; n++) {
+        if (productList[n].checked) {
+          productFilter.push(productList[n].value);
+        }
+      }
     }
     // if (document.getElementById('select-family')) {
     //   familyFilter = document.getElementById('select-family').text;
@@ -4695,8 +4754,8 @@ class MenuWidget extends React.Component {
           }
           if (
             searchText === '' &&
-            componentFilter === 'default' &&
-            productFilter === 'default'
+            componentFilter.length === 0 &&
+            productFilter.length === 0
           ) {
             this.filtersApplied = false;
             componentFound = true;
@@ -4720,11 +4779,12 @@ class MenuWidget extends React.Component {
           } else if (
             datasetChecked ||
             (dataset?.DatasetTitle?.toUpperCase().includes(searchText) &&
-              (product.ProductId === productFilter ||
-                productFilter === 'default') &&
-              (this.compCfg[index].ComponentPosition.toString() ===
-                componentFilter ||
-                componentFilter === 'default'))
+              (productFilter.includes(product.ProductId) ||
+                productFilter.length === 0) &&
+              (componentFilter.includes(
+                this.compCfg[index].ComponentPosition.toString(),
+              ) ||
+                componentFilter.length === 0))
           ) {
             this.filtersApplied = true;
             componentFound = true;
@@ -4791,22 +4851,13 @@ class MenuWidget extends React.Component {
     }
   }
   clearFilters() {
-    if (document.getElementById('select-component')) {
-      document.getElementById('select-component').value = 'default';
+    let componentList = document.getElementsByClassName('component_item');
+    for (let m = 0; m < componentList.length; m++) {
+      componentList[m].checked = false;
     }
-    let selectedProduct = document.getElementById('select-product');
-    if (selectedProduct) {
-      this.removeOptions(selectedProduct);
-      selectedProduct.options.add(
-        new Option('Select a product', 'default', false, false),
-      );
-    }
-    if (document.getElementById('select-family')) {
-      document.getElementById('select-family').value = 'default';
-    }
-    let familyFilter = document.querySelector('.menu-family-filter');
-    if (familyFilter) {
-      familyFilter.setAttribute('style', 'display: none;');
+    let list = document.querySelector('.product-items');
+    while (list.firstChild) {
+      list.removeChild(list.lastChild);
     }
     if (document.querySelector('.clear-filters')) {
       document
@@ -5030,7 +5081,11 @@ class MenuWidget extends React.Component {
                   <div className="filters-panel">
                     <span className="menu-filter">
                       Component
-                      <select
+                      <div id="select-component" class="dropdown-check-list">
+                        <span class="anchor">Select a Component</span>
+                        <ul class="items component-items"></ul>
+                      </div>
+                      {/* <select
                         id="select-component"
                         class="esri-select filter-select"
                         onBlur={() => {}}
@@ -5038,11 +5093,15 @@ class MenuWidget extends React.Component {
                           this.loadProductFilters();
                           this.menuSearch();
                         }}
-                      ></select>
+                      ></select> */}
                     </span>
                     <span className="menu-filter">
                       Product groups
-                      <select
+                      <div id="select-product" class="dropdown-check-list">
+                        <span class="anchor">Select a Product</span>
+                        <ul class="items product-items"></ul>
+                      </div>
+                      {/* <select
                         id="select-product"
                         class="esri-select filter-select"
                         onBlur={() => {}}
@@ -5050,15 +5109,20 @@ class MenuWidget extends React.Component {
                           this.loadFamilyFilters();
                           this.menuSearch();
                         }}
-                      ></select>
+                      ></select> */}
                     </span>
-                    <span className="menu-filter menu-family-filter">
+                    {/* <span className="menu-filter menu-family-filter">
                       Family
+                      <div id="select-family" class="dropdown-check-list">
+                        <span class="anchor">Select a Family</span>
+                        <ul class="items family-items">
+                        </ul>
+                      </div>
                       <select
                         id="select-family"
                         class="esri-select filter-select"
-                      ></select>
-                    </span>
+                      ></select> 
+                    </span> */}
                   </div>
                 </div>
               </div>

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

@@ -1707,3 +1707,64 @@ div.map-container.popup-block {
 .filters-element.filter-logo.filters-header {
   justify-content: space-between;
 }
+
+.select-component {
+  height: 30px;
+}
+
+.dropdown-check-list {
+  display: inline-block;
+  width: 280px;
+}
+
+.dropdown-check-list .anchor {
+  position: relative;
+  display: inline-block;
+  width: 280px;
+  height: 22px;
+  padding: 0px 50px 5px 10px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  font-size: 15px;
+}
+
+.dropdown-check-list .anchor:after {
+  position: absolute;
+  top: 20%;
+  right: 10px;
+  padding: 5px;
+  border-top: 2px solid black;
+  border-left: 2px solid black;
+  content: '';
+  -moz-transform: rotate(-135deg);
+  -ms-transform: rotate(-135deg);
+  -o-transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+  transform: rotate(-135deg);
+}
+
+.dropdown-check-list .anchor:active:after {
+  top: 21%;
+  right: 8px;
+}
+
+.dropdown-check-list ul.items {
+  display: none;
+  padding: 2px;
+  border: 1px solid #ccc;
+  border-top: none;
+  margin: 0;
+}
+
+.dropdown-check-list ul.items li {
+  font-size: 14px;
+  list-style: none;
+}
+
+.dropdown-check-list.visible .anchor {
+  color: #a0b128;
+}
+
+.dropdown-check-list.visible .items {
+  display: block;
+}