@eeacms/volto-arcgis-block 0.1.323 → 0.1.325

package/CHANGELOG.md

@@ -4,6 +4,15 @@ 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.325](https://github.com/eea/volto-arcgis-block/compare/0.1.324...0.1.325) - 20 December 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-280068 (Feat): Removed taxonomy [Urkorue - [`21170b2`](https://github.com/eea/volto-arcgis-block/commit/21170b2390eb7f30b32f8668a0c23578e68a1869)]
+- CLMS-280068 (Feat): Added missing lines [Urkorue - [`311b2d2`](https://github.com/eea/volto-arcgis-block/commit/311b2d29fd21ebbaf66475710d36d995af6bb644)]
+- CLMS-280068 (Bug): Redesigned TOC menu [Urkorue - [`e045954`](https://github.com/eea/volto-arcgis-block/commit/e04595466dff5198a3b0dbdf4b615d1705077090)]
+### [0.1.324](https://github.com/eea/volto-arcgis-block/compare/0.1.323...0.1.324) - 11 December 2024
+
 ### [0.1.323](https://github.com/eea/volto-arcgis-block/compare/0.1.322...0.1.323) - 10 December 2024
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/InfoWidget.jsx

@@ -1,17 +1,16 @@
 import React, { createRef } from 'react';
 import { loadModules } from 'esri-loader';
 import { Loader } from 'semantic-ui-react';
-// import loadable from '@loadable/component';
-// import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
-import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
-
-import Highcharts from 'highcharts';
-// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
+// import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 var GeometryEngine, Graphic, esriRequest;
 
-// const HighchartsReact = loadable(() => import('highcharts-react-official'));
+// import Highcharts from 'highcharts';
 
+const HighchartsReact = loadable(() => import('highcharts-react-official'));
 class InfoWidget extends React.Component {
   /**
    * Creator of the InfoWidget widget class
@@ -1156,11 +1155,12 @@ class InfoWidget extends React.Component {
                     {this.state.pixelInfo && !noData && (
                       <>
                         {this.loadVariableSelector(this.state.layerIndex)}
-                        {/* <HighchartsReact */}
-                        <Highcharts
-                          highcharts={this.Highcharts}
-                          options={this.loadInfoChart(this.state.layerIndex)}
-                        />
+                        {this.Highcharts && (
+                          <HighchartsReact
+                            highcharts={this.Highcharts}
+                            options={this.loadInfoChart(this.state.layerIndex)}
+                          />
+                        )}
                         {this.loadStatisticsSelector(this.state.layerIndex)}
                         {this.loadTimeInfoTable(this.state.layerIndex)}
                       </>
@@ -1197,5 +1197,4 @@ class InfoWidget extends React.Component {
   }
 }
 
-// export default injectLazyLibs('highcharts')(InfoWidget);
-export default InfoWidget;
+export default injectLazyLibs('highcharts')(InfoWidget);

package/src/components/MapViewer/MapViewer.jsx

@@ -21,6 +21,8 @@ import HotspotWidget from './HotspotWidget';
 import PanWidget from './PanWidget';
 import BookmarkWidget from './BookmarkWidget';
 import LoadingSpinner from './LoadingSpinner';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
+//import { getTaxonomy } from '@eeacms/volto-taxonomy/actions';
 
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom, intl, Basemap, WebTileLayer, Extent;
@@ -69,6 +71,7 @@ class MapViewer extends React.Component {
     this.bookmarkHandler = this.bookmarkHandler.bind(this);
     this.prepackageHandler = this.prepackageHandler.bind(this);
     this.uploadFileHandler = this.uploadFileHandler.bind(this);
+    //this.getTaxonomy = this.props.getTaxonomy.bind(this);
   }
 
   mapLayersHandler(newLayers) {
@@ -163,19 +166,9 @@ class MapViewer extends React.Component {
   //   return obj;
   // }
 
-  // waitForContainer(mapdiv) {
-  //   while (mapdiv === null) {
-  //     new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
-  //   }
-  //   return mapdiv;
-  // }
-
   async componentDidMount() {
     loadCss();
     await this.loader();
-    //    this.state.url = window.location.href;
-    //  await this.waitForDataFill(this.compCfg);
-
     this.positronCompositeBasemap = new Basemap({
       title: 'Positron composite',
       thumbnailUrl: this.cfgUrls.positronCompositeThumbnail,
@@ -185,12 +178,8 @@ class MapViewer extends React.Component {
           copyright: '© OpenStreetMap (and) contributors, CC-BY-SA',
         }),
       ],
-      // referenceLayers: [
-      //   new _WebTileLayer(...)
-      // ],
     });
     this.map = new Map({
-      // basemap: 'topo',
       basemap: this.positronCompositeBasemap,
       logo: false,
     });
@@ -290,7 +279,6 @@ class MapViewer extends React.Component {
   componentWillUnmount() {
     // clean up
     if (this.view) {
-      //clearInterval(this.intervalId);
       this.view.container = null;
       this.view.destroy();
       delete this.view;
@@ -443,6 +431,7 @@ class MapViewer extends React.Component {
           prepackageHandler={this.prepackageHandler}
           uploadedFile={this.state.uploadedFile}
           uploadFileHandler={this.uploadFileHandler}
+          //getTaxonomy={this.getTaxonomy}
         />
       ); //call conf
   }
@@ -541,6 +530,11 @@ export const CheckUserID = ({ reference }) => {
     </>
   );
 };
+// const mapDispatchToProps = (dispatch) => {
+//   return {
+//     getTaxonomy: (name) => dispatch(getTaxonomy(name)),
+//   };
+// };
 
 export default compose(
   connect(
@@ -549,4 +543,6 @@ export default compose(
     }),
     { MapViewerConfig },
   ),
-)(MapViewer);
+  //connect(null, mapDispatchToProps),
+  injectLazyLibs('highcharts'),
+)(MapViewer, MenuWidget);

package/src/components/MapViewer/MenuWidget.jsx

@@ -401,6 +401,7 @@ class MenuWidget extends React.Component {
       TMSLayerObj: null,
       draggedElements: [],
       popup: false,
+      filterArrow: 'chevron-down',
     };
     this.menuClass =
       'esri-icon-drag-horizontal esri-widget--button esri-widget esri-interactive';
@@ -480,6 +481,7 @@ class MenuWidget extends React.Component {
     });
 
     this.activeLayersHandler = this.props.activeLayersHandler;
+    //this.getTaxonomy = this.props.getTaxonomy;
   }
 
   loader() {
@@ -878,6 +880,7 @@ class MenuWidget extends React.Component {
     //to watch the component
     //this.setState({});
     this.openMenu();
+    this.loadComponentFilters();
     this.expandDropdowns();
     this.loadLayers();
     this.loadOpacity();
@@ -4100,6 +4103,228 @@ class MenuWidget extends React.Component {
     clearTimeout(this.timeout);
   };
 
+  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;');
+    this.compCfg.forEach((element) => {
+      selectedComponent.options.add(
+        new Option(
+          element.ComponentTitle,
+          element.ComponentPosition,
+          element.ComponentPosition,
+        ),
+      );
+    });
+  }
+  loadProductFilters() {
+    var selectedComponent = document.getElementById('select-component');
+    var selectedProduct = document.getElementById('select-product');
+    if (
+      document.querySelector('.clear-filters') &&
+      selectedComponent.value !== 'default'
+    ) {
+      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,
+            ),
+          );
+        });
+      }
+    });
+    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 familyFilter = document.querySelector('.menu-family-filter');
+    // if (familyFilter) {
+    //   if (!hasFamily) {
+    //     familyFilter.setAttribute('style','display: none;');
+    //   }else{
+    //     familyFilter.setAttribute('style','display: flex;');
+    //   }
+    // }
+  }
+  async menuSearch() {
+    let searchText;
+    let componentFilter;
+    let productFilter;
+    //let familyFilter;
+    if (document.querySelector('#menu-searchtext')) {
+      searchText = document
+        .querySelector('#menu-searchtext')
+        .value?.toUpperCase();
+    }
+    if (document.getElementById('select-component')) {
+      componentFilter = document.getElementById('select-component').value;
+    }
+    if (document.getElementById('select-product')) {
+      productFilter = document.getElementById('select-product').value;
+    }
+    // if (document.getElementById('select-family')) {
+    //   familyFilter = document.getElementById('select-family').text;
+    // }
+    for (let index = 0; index < this.compCfg.length; index++) {
+      let componentFound = false;
+      if (
+        index.toString() === componentFilter ||
+        componentFilter === 'default'
+      ) {
+        this.compCfg[index].Products.forEach((product) => {
+          let productFound = false;
+          if (
+            product.ProductId === productFilter ||
+            productFilter === 'default'
+          ) {
+            product.Datasets.forEach((dataset) => {
+              if (dataset?.DatasetTitle?.toUpperCase().includes(searchText)) {
+                componentFound = true;
+                productFound = true;
+                let componentElem = document.querySelector(
+                  '#component_' + index,
+                );
+                componentElem
+                  .querySelector('.ccl-expandable__button')
+                  .setAttribute('aria-expanded', 'true');
+
+                let productElem = document.querySelector(
+                  '[productid="' + product.ProductId + '"]',
+                );
+                productElem
+                  .querySelector('.ccl-expandable__button')
+                  .setAttribute('aria-expanded', 'true');
+                let datasetElem = document.querySelector(
+                  '[datasetid="' + dataset.DatasetId + '"]',
+                );
+                datasetElem.removeAttribute('style');
+                productElem.removeAttribute('style');
+                componentElem.removeAttribute('style');
+              } else {
+                let datasetElem = document.querySelector(
+                  '[datasetid="' + dataset.DatasetId + '"]',
+                );
+                datasetElem.setAttribute('style', 'display: none;');
+              }
+            });
+          }
+          if (!productFound) {
+            let productElem = document.querySelector(
+              '[productid="' + product.ProductId + '"]',
+            );
+            productElem.setAttribute('style', 'display: none;');
+          }
+        });
+      }
+      if (!componentFound) {
+        let componentElem = document.querySelector('#component_' + index);
+        componentElem.setAttribute('style', 'display: none;');
+      }
+    }
+  }
+  clearMenuText() {
+    if (document.querySelector('#menu-searchtext')) {
+      document.querySelector('#menu-searchtext').value = null;
+    }
+  }
+  openClearButton() {
+    if (document.querySelector('#menu-searchtext').value.length > 0) {
+      document.querySelector('.clearsearch').style.display = 'block';
+    } else {
+      document.querySelector('.clearsearch').style.display = 'none';
+    }
+  }
+  clearFilters() {
+    if (document.getElementById('select-component')) {
+      document.getElementById('select-component').value = 'default';
+    }
+    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;');
+    }
+    if (document.querySelector('.clear-filters')) {
+      document
+        .querySelector('.clear-filters')
+        .setAttribute('style', 'display: none;');
+    }
+  }
+  closeFilters() {
+    if (document.querySelector('.filters-panel').style.display === 'block') {
+      document
+        .querySelector('.filters-panel')
+        .setAttribute('style', 'display: none;');
+      this.setState({ filterArrow: 'chevron-down' });
+    } else {
+      document
+        .querySelector('.filters-panel')
+        .setAttribute('style', 'display: block;');
+      this.setState({ filterArrow: 'chevron-up' });
+    }
+  }
+
+  removeOptions(selectElement) {
+    if (selectElement.options.length > 0) {
+      var i,
+        L = selectElement.options.length - 1;
+      for (i = L; i >= 0; i--) {
+        selectElement.remove(i);
+      }
+    }
+  }
   /**
    * This method renders the component
    * @returns jsx
@@ -4161,6 +4386,154 @@ class MenuWidget extends React.Component {
                 </span>
               )}
             </div>
+            <div className="search-panel">
+              <div className="menu-searchpanel">
+                <div class="search-input menu-search-input">
+                  <input
+                    type="text"
+                    id="menu-searchtext"
+                    maxlength="200"
+                    placeholder="Search products and datasets"
+                    onChange={() => this.openClearButton()}
+                  />
+                  <div class="search-input-actions">
+                    <button
+                      class="ui basic icon button search-input-clear-icon-button clearsearch"
+                      onClick={() => this.clearMenuText()}
+                      onKeyDown={(e) => {
+                        if (
+                          !e.altKey &&
+                          e.code !== 'Tab' &&
+                          !e.ctrlKey &&
+                          e.code !== 'Delete' &&
+                          !e.shiftKey &&
+                          !e.code.startsWith('F')
+                        ) {
+                          this.clearMenuText();
+                        }
+                      }}
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 26 26"
+                        class="icon"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          d="M27.899 9.515L26.485 8.101 18 16.586 9.514 8.101 8.1 9.515 16.586 18 8.1 26.486 9.514 27.9 18 19.414 26.485 27.9 27.899 26.486 19.414 18z"
+                        ></path>
+                      </svg>
+                    </button>
+                  </div>
+                  <button
+                    aria-label="Search"
+                    class="button menu-search-button"
+                    onClick={() => this.menuSearch()}
+                    onKeyDown={(e) => {
+                      if (
+                        !e.altKey &&
+                        e.code !== 'Tab' &&
+                        !e.ctrlKey &&
+                        e.code !== 'Delete' &&
+                        !e.shiftKey &&
+                        !e.code.startsWith('F')
+                      ) {
+                        this.menuSearch();
+                      }
+                    }}
+                  >
+                    <span class="ccl-icon-zoom search-menu-icon"></span>
+                  </button>
+                </div>
+                <div class="filters-element filter-logo filters-header">
+                  <div class="filters-title">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 36 36"
+                      class="icon ui"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M5.0916,5.0002 L14.9996,19.3132 L14.9996,34.0002 L20.9996,29.5002 L20.9996,19.3132 L30.9086,5.0002 L5.0916,5.0002 Z M17.0006,18.6872 L8.9086,7.0002 L27.0916,7.0002 L19.0006,18.6872 L19.0006,28.5002 L17.0006,30.0002 L17.0006,18.6872 Z"
+                      ></path>
+                    </svg>
+                    <span class="filters-title-bold">Filters</span>
+                    <div
+                      className="clear-filters"
+                      tabIndex="0"
+                      role="button"
+                      onClick={() => this.clearFilters()}
+                      onKeyDown={(e) => {
+                        if (
+                          !e.altKey &&
+                          e.code !== 'Tab' &&
+                          !e.ctrlKey &&
+                          e.code !== 'Delete' &&
+                          !e.shiftKey &&
+                          !e.code.startsWith('F')
+                        ) {
+                          this.clearFilters();
+                        }
+                      }}
+                    >
+                      Clear filters
+                    </div>
+                  </div>
+
+                  <div
+                    className="dropdown-icon close-filters-icon"
+                    role="button"
+                    tabIndex="0"
+                    onClick={() => this.closeFilters()}
+                    onKeyDown={(e) => {
+                      if (
+                        !e.altKey &&
+                        e.code !== 'Tab' &&
+                        !e.ctrlKey &&
+                        e.code !== 'Delete' &&
+                        !e.shiftKey &&
+                        !e.code.startsWith('F')
+                      ) {
+                        this.closeFilters();
+                      }
+                    }}
+                  >
+                    <FontAwesomeIcon icon={['fas', this.state.filterArrow]} />
+                  </div>
+                </div>
+                <div className="filters-panel">
+                  <span className="menu-filter">
+                    Component
+                    <select
+                      id="select-component"
+                      class="esri-select filter-select"
+                      onBlur={() => {}}
+                      onChange={() => {
+                        this.loadProductFilters();
+                      }}
+                    ></select>
+                  </span>
+                  <span className="menu-filter">
+                    Product
+                    <select
+                      id="select-product"
+                      class="esri-select filter-select"
+                      onBlur={() => {}}
+                      onChange={() => {
+                        this.loadFamilyFilters();
+                      }}
+                    ></select>
+                  </span>
+                  <span className="menu-filter menu-family-filter">
+                    Family
+                    <select
+                      id="select-family"
+                      class="esri-select filter-select"
+                    ></select>
+                  </span>
+                </div>
+              </div>
+            </div>
             <div
               className="panels"
               id="paneles"

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

@@ -1571,3 +1571,91 @@ div.map-container.popup-block {
 .esri-swipe div {
   outline: none !important;
 }
+
+.search-panel {
+  background-color: white;
+}
+
+.menu-searchpanel {
+  padding: 0.6rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  background-color: rgba(160, 177, 40, 0.1);
+}
+
+.search-input.menu-search-input {
+  display: flex;
+}
+
+#menu-searchtext {
+  width: 23.5rem;
+  height: 2rem;
+  padding-left: 0.3rem;
+  border-width: 1px;
+  border-color: rgba(110, 110, 110, 0.3);
+}
+
+.menu-search-button {
+  width: 2rem;
+  height: 2rem;
+  border-width: 1px;
+  border-color: rgba(110, 110, 110, 0.3);
+  margin-left: 0.5rem;
+  background-color: #a0b128;
+  border-radius: 0;
+  color: white;
+}
+
+.search-menu-icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.search-input-clear-icon-button {
+  height: 1.5rem;
+}
+
+.filter-logo {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  margin-left: 0 !important;
+}
+
+.menu-filter {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.filter-select {
+  max-width: 19rem;
+  height: 1.5rem !important;
+}
+
+.clear-filters {
+  display: none;
+  margin-left: 16rem;
+  font-size: small;
+  text-decoration: underline;
+}
+
+.clearsearch.search-input-clear-icon-button.button {
+  position: absolute;
+  top: 4.3rem;
+  left: 23rem;
+  display: none;
+}
+
+.close-filters-icon {
+  padding-left: 0.8rem;
+  color: #a0b128;
+}
+
+.filters-panel {
+  display: none;
+}
+
+.filters-element.filter-logo.filters-header {
+  justify-content: space-between;
+}